import { useCallback, useState } from "react";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { CircleDot, CircleCheckBig } from "lucide-react";
import { particlePath } from "@/lib/particle-path";
import { ParticleListView } from "@/features/particles/particle-list-view";
import { VideoAudioToggle } from "@/components/video-audio-toggle";
import { ComposeOverlay } from "./compose/compose-overlay";
import { ComposeQuotaIndicator } from "./compose/compose-quota-indicator";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useStreamParticles } from "@/hooks/use-stream-particles";
import { useStreamKeyboardNav } from "@/hooks/use-stream-keyboard-nav";

/**
 * Route-level component for /:networkId (index).
 * Shows root-level particles for the selected network.
 */
export default function NetworkRoot() {
  const { networkId } = useParams();
  const navigate = useNavigate();
  const path = particlePath(networkId!, []);

  const [composeActive, setComposeActive] = useState(false);
  const [searchParams, setSearchParams] = useSearchParams();
  const statusTab: "open" | "closed" =
    searchParams.get("status") === "closed" ? "closed" : "open";
  const setStatusTab = (next: "open" | "closed") => {
    setSearchParams(
      (prev) => {
        const params = new URLSearchParams(prev);
        if (next === "open") params.delete("status");
        else params.set("status", next);
        return params;
      },
      { replace: true },
    );
  };

  const { streams, isLoading, canLoadMore, loadMore } = useStreamParticles(path, {
    status: statusTab,
  });

  const { selectedIndex } = useStreamKeyboardNav({
    streams,
    enabled: !composeActive,
    onNavigate: useCallback(
      (streamId: string) => navigate(`/${networkId}/${streamId}`),
      [navigate, networkId],
    ),
  });

  return (
    <div className="relative flex min-h-0 flex-1 flex-col">
      {/* Top bar — stays in place */}
      <div className="flex shrink-0 items-center p-1 border-b">
        <Tabs
          value={statusTab}
          onValueChange={(v) => setStatusTab(v === "closed" ? "closed" : "open")}
        >
          <TabsList>
            <TabsTrigger value="open"><CircleDot className="size-3 text-green-500" /> Open</TabsTrigger>
            <TabsTrigger value="closed"><CircleCheckBig className="size-3" /> Closed</TabsTrigger>
          </TabsList>
        </Tabs>
      </div>

      {/* Scrollable content */}
      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain pb-14 py-2">
        <ParticleListView
          streams={streams}
          networkId={networkId!}
          isLoading={isLoading}
          selectedIndex={selectedIndex}
          canLoadMore={canLoadMore}
          onLoadMore={loadMore}
        />
      </div>

      <ComposeOverlay networkId={networkId!} onActiveChange={setComposeActive} />
      {!composeActive && (
        <div className="pointer-events-none absolute inset-x-0 bottom-16 z-20 flex justify-center px-3">
          <ComposeQuotaIndicator networkId={networkId!} />
        </div>
      )}
      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 flex justify-center p-3">
        <div className="pointer-events-auto">
          <NetworkRootControls />
        </div>
      </div>
    </div>
  );
}

function NetworkRootControls() {
  return (
    <div className="flex items-center gap-4 text-sm text-white/50">
      <span>
        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
          ↑↓
        </kbd>{" "}
        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
          Enter
        </kbd>{" "}
        navigate
      </span>
      <span>
        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
          1–9
        </kbd>{" "}
        jump
      </span>
      <VideoAudioToggle />
      <span>
        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
          Hold `
        </kbd>{" "}
        to start
      </span>
      <span>
        <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
          T
        </kbd>{" "}
        text
      </span>
    </div>
  );
}