import { useFps } from '../../hooks/useFps';
import type { MachineRegistryEntry } from '../../modules/machines/schema';
import { useViewerStore } from '../../store/viewerStore';

interface StatusBarProps {
  machine: MachineRegistryEntry;
}

export function StatusBar({ machine }: StatusBarProps) {
  const fps = useFps();
  const partStates = useViewerStore((state) => state.partStates);
  const displayMode = useViewerStore((state) => state.displayMode);
  const activeCameraPreset = useViewerStore((state) => state.activeCameraPreset);
  const cameraOverride = useViewerStore((state) => state.cameraOverride);

  const visiblePartCount = machine.parts.reduce(
    (count, part) => count + ((partStates[part.id]?.visible ?? true) ? 1 : 0),
    0
  );

  return (
    <footer className="flex flex-wrap items-center justify-between gap-3 border-t border-line/70 bg-background/95 px-4 py-2 text-xs text-muted">
      <div className="flex flex-wrap items-center gap-3">
        <span className="font-bold text-slate-200">{machine.title}</span>
        <span>{visiblePartCount}/{machine.parts.length} parts visible</span>
        <span>Mode: {displayMode}</span>
      </div>
      <div className="flex flex-wrap items-center gap-3">
        <span>Camera: {cameraOverride ? 'custom' : activeCameraPreset}</span>
        <span>{fps} FPS</span>
      </div>
    </footer>
  );
}