import { useViewerStore } from '../../store/viewerStore';

export function ViewerStatusBar() {
  const fps = useViewerStore((state) => state.fps);
  const parts = useViewerStore((state) => state.parts);
  const metadata = useViewerStore((state) => state.metadata);
  const activeMachineId = useViewerStore((state) => state.activeMachineId);
  const selectedPartId = useViewerStore((state) => state.selectedPartId);
  const hoveredPart = useViewerStore((state) => state.hoveredPart);
  const display = useViewerStore((state) => state.display);

  const fpsTone =
    fps >= 55 ? 'text-emerald-300' : fps >= 30 ? 'text-amber-300' : 'text-red-300';

  return (
    <div
      className="pointer-events-none absolute bottom-3 left-3 right-3 z-20 flex flex-wrap items-center justify-between gap-2 rounded-2xl border border-white/10 bg-[#0B0E14]/72 px-3 py-2 text-[11px] uppercase tracking-[0.16em] text-slate-400 shadow-xl shadow-black/20 backdrop-blur-md"
      aria-label="Viewer status"
    >
      <div className="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1">
        <span className="truncate text-slate-200">
          {metadata?.title ?? activeMachineId ?? 'No machine loaded'}
        </span>
        <span>{parts.length} parts</span>
        {selectedPartId ? <span>Selected: {selectedPartId}</span> : null}
        {hoveredPart ? <span>Hover: {hoveredPart.name}</span> : null}
      </div>

      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 font-mono">
        <span className={fpsTone}>{fps} FPS</span>
        <span>{display.wireframe ? 'Wireframe' : 'Solid'}</span>
        <span>{display.crossSection.enabled ? `Clip ${display.crossSection.axis.toUpperCase()}` : 'No clip'}</span>
        <span>{display.exploded.enabled ? `Explode ${display.exploded.distance.toFixed(1)}` : 'Assembled'}</span>
      </div>
    </div>
  );
}