import { useMemo } from 'react';
import { useLocation } from 'react-router-dom';

import { machineRegistry, getMachineBySlug } from '@/data/machineRegistry';
import { usePreferencesStore } from '@/store/preferencesStore';
import { pluralize } from '@/utils/format';

function StatusDot() {
  return <span className="size-2 rounded-full bg-success shadow-[0_0_18px_rgb(var(--color-success)/0.7)]" />;
}

export function ShellStatusBar() {
  const location = useLocation();
  const favouriteCount = usePreferencesStore((state) => state.favourites.length);

  const routeLabel = useMemo(() => {
    const machineMatch = location.pathname.match(/^\/machines\/([^/]+)/);

    if (machineMatch?.[1]) {
      const machine = getMachineBySlug(decodeURIComponent(machineMatch[1]));
      return machine ? machine.title : 'Unknown machine';
    }

    if (location.pathname === '/') {
      return 'Catalogue';
    }

    return 'Navigation';
  }, [location.pathname]);

  return (
    <footer
      className="fixed inset-x-0 bottom-0 z-40 hidden border-t border-border/65 bg-bg/82 px-4 py-2 text-xs text-muted backdrop-blur-xl sm:block"
      aria-label="Application status"
    >
      <div className="mx-auto flex max-w-[1540px] items-center justify-between gap-4">
        <div className="flex min-w-0 items-center gap-2">
          <StatusDot />
          <span className="truncate">
            Reference shell online · <span className="text-foreground">{routeLabel}</span>
          </span>
        </div>

        <div className="flex items-center gap-4 tabular-nums">
          <span>{pluralize(machineRegistry.length, 'machine')}</span>
          <span>{favouriteCount} bookmarked</span>
          <span>3D-ready registry</span>
        </div>
      </div>
    </footer>
  );
}