"use client";

import * as React from "react";
import { useParams } from "next/navigation";
import { Plus, Radar } from "lucide-react";

import { ConvoyDetailPanel } from "@/components/mission-control/convoy-detail-panel";
import { ConvoyKanban, GateInbox } from "@/components/mission-control/convoy-kanban";
import { CreateConvoyDialog } from "@/components/mission-control/create-convoy-dialog";
import { Button } from "@/components/ui/button";

export default function MissionControlPage() {
  const params = useParams();
  const workspaceSlug = params?.workspaceSlug as string | undefined;
  const [selectedId, setSelectedId] = React.useState<string | null>(null);
  const [createOpen, setCreateOpen] = React.useState(false);

  if (!workspaceSlug) {
    return null;
  }

  return (
    <div className="flex h-full min-h-0 flex-col">
      <header className="flex shrink-0 items-center justify-between border-b border-border px-6 py-4">
        <div className="flex items-center gap-3">
          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
            <Radar className="size-5 text-primary" />
          </div>
          <div>
            <h1 className="text-lg font-semibold">Mission control</h1>
            <p className="text-xs text-muted-foreground">
              Convoy kanban, human gates, and gate co-pilot
            </p>
          </div>
        </div>
        <Button type="button" onClick={() => setCreateOpen(true)}>
          <Plus className="mr-2 size-4" />
          New convoy
        </Button>
      </header>

      <div className="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[220px_1fr_320px]">
        <aside className="min-h-0 overflow-y-auto border-r border-border bg-muted/10">
          <GateInbox
            workspaceSlug={workspaceSlug}
            selectedId={selectedId}
            onSelect={setSelectedId}
          />
        </aside>

        <main className="flex min-h-0 flex-col overflow-hidden">
          <ConvoyKanban
            workspaceSlug={workspaceSlug}
            selectedId={selectedId}
            onSelect={setSelectedId}
          />
        </main>

        <aside className="min-h-0 border-l border-border bg-background">
          <ConvoyDetailPanel workspaceSlug={workspaceSlug} convoyId={selectedId} />
        </aside>
      </div>

      <CreateConvoyDialog
        workspaceSlug={workspaceSlug}
        open={createOpen}
        onOpenChange={setCreateOpen}
        onCreated={setSelectedId}
      />
    </div>
  );
}