import { useNavigate } from "react-router-dom";
import { Radio } from "lucide-react";
import { Progress } from "@/components/ui/progress";
import type { StreamParticle } from "@/hooks/use-stream-particles";
import { StreamCard } from "@/features/particles/stream-card";
import { StreamContextMenu } from "@/features/particles/stream-context-menu";

interface ParticleGridViewProps {
  streams: StreamParticle[];
  networkId: string;
  isLoading: boolean;
  selectedIndex?: number | null;
}

export function ParticleGridView({ streams, networkId, isLoading, selectedIndex }: ParticleGridViewProps) {
  const navigate = useNavigate();

  if (isLoading) {
    return <Progress />;
  }

  if (streams.length === 0) {
    return (
      <div className="mx-auto flex h-full max-w-sm flex-col items-center justify-center gap-2 px-4 text-center">
        <Radio className="text-muted-foreground size-8" />
        <p className="text-muted-foreground text-sm">
          No recent streams yet. Start a conversation using the keyboard
          shortcuts below.
        </p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-3 gap-3 px-3">
      {streams.map((stream, index) => (
        <StreamContextMenu key={stream.id} particle={stream} networkId={networkId}>
          <StreamCard
            ref={index === selectedIndex ? (el) => el?.scrollIntoView({ block: "nearest" }) : undefined}
            particle={stream}
            networkId={networkId}
            onClick={() => navigate(`/${networkId}/${stream.id}`)}
            isSelected={index === selectedIndex}
            shortcutKey={index < 9 ? index + 1 : undefined}
          />
        </StreamContextMenu>
      ))}
    </div>
  );
}