vfxreview/app/(dashboard)/pipeline/deliveries/DeliveriesClient.tsx

"use client";

import { useState } from "react";
import Link from "next/link";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { ArrowLeft, Package, CheckCircle2, XCircle, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useToast } from "@/components/ui/use-toast";
import { cn } from "@/lib/utils";
import { DELIVERY_STATUS_STYLES, statusLabel } from "../status-colors";

interface ReadyExport {
  exportId: string;
  shotCode: string;
  episode: string;
  versionString: string;
  fileCount: number | null;
  totalBytes: number | null;
  deliveryMovPath: string | null;
  hasChecksum: boolean;
  qc: { result: string; reviewer: string | null; at: string } | null;
}

interface ReadyResponse {
  episodes: { episode: string; count: number; exports: ReadyExport[] }[];
}

interface PackageRow {
  id: string;
  packageNumber: number;
  name: string;
  episode: string;
  status: string;
  rootPath: string | null;
  errorMessage: string | null;
  projectName: string;
  createdAt: string;
  builtAt: string | null;
  deliveredAt: string | null;
  itemCount: number;
  verifiedCount: number;
  items: {
    id: string;
    shotCode: string;
    versionString: string;
    status: string;
    fileCount: number | null;
    linkMode: string | null;
    errorMessage: string | null;
  }[];
}

interface ProjectOption {
  id: string;
  name: string;
  code: string;
}

function formatBytes(bytes: number | null): string {
  if (bytes == null) return "—";
  const gb = bytes / 1_073_741_824;
  return gb >= 1 ? `${gb.toFixed(1)} GB` : `${(bytes / 1_048_576).toFixed(0)} MB`;
}

export function DeliveriesClient({ canBuild }: { canBuild: boolean }) {
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const [projectId, setProjectId] = useState<string>("");
  const [episode, setEpisode] = useState<string>("");
  const [building, setBuilding] = useState(false);

  const { data: projects } = useQuery({
    queryKey: ["pipeline-projects"],
    queryFn: async () => {
      const res = await fetch("/api/projects");
      if (!res.ok) throw new Error("Failed to load projects");
      const body = await res.json();
      return (body.projects ?? body) as ProjectOption[];
    },
  });

  const { data: ready, isLoading: readyLoading } = useQuery({
    queryKey: ["delivery-ready", projectId],
    queryFn: async () => {
      const res = await fetch(`/api/deliveries/ready?projectId=${encodeURIComponent(projectId)}`);
      if (!res.ok) throw new Error((await res.json().catch(() => ({})))?.error ?? "Failed to load ready exports");
      return res.json() as Promise<ReadyResponse>;
    },
    enabled: Boolean(projectId),
  });

  const { data: packages } = useQuery({
    queryKey: ["delivery-packages", projectId],
    queryFn: async () => {
      const res = await fetch(`/api/deliveries${projectId ? `?projectId=${encodeURIComponent(projectId)}` : ""}`);
      if (!res.ok) throw new Error("Failed to load packages");
      return res.json() as Promise<{ packages: PackageRow[] }>;
    },
    // A build is a queued job like any other — poll while one is in flight.
    refetchInterval: 5000,
  });

  async function build(ep: string) {
    if (!projectId) return;
    setBuilding(true);
    try {
      const res = await fetch("/api/deliveries", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ projectId, episode: ep || null }),
      });
      const body = await res.json().catch(() => ({}));
      if (!res.ok) {
        toast({ title: "Build failed", description: body.error ?? res.statusText, variant: "destructive" });
      } else {
        toast({
          title: `Package #${body.package.packageNumber} queued`,
          description: `${body.package.itemCount} shots → ${body.package.rootPath}`,
        });
        queryClient.invalidateQueries({ queryKey: ["delivery-packages"] });
        queryClient.invalidateQueries({ queryKey: ["delivery-ready"] });
      }
    } finally {
      setBuilding(false);
    }
  }

  async function packageAction(id: string, verb: "delivered" | "cancel") {
    const res = await fetch(`/api/deliveries/${id}/${verb}`, { method: "POST" });
    const body = await res.json().catch(() => ({}));
    if (!res.ok) {
      toast({ title: `${verb} failed`, description: body.error ?? res.statusText, variant: "destructive" });
    }
    queryClient.invalidateQueries({ queryKey: ["delivery-packages"] });
    queryClient.invalidateQueries({ queryKey: ["delivery-ready"] });
  }

  const episodes = ready?.episodes ?? [];
  const shown = episode ? episodes.filter((e) => e.episode === episode) : episodes;

  return (
    <div className="p-6 space-y-6 max-w-6xl">
      <div className="flex items-center gap-3">
        <Link href="/pipeline">
          <Button variant="ghost" size="icon-sm">
            <ArrowLeft className="h-4 w-4" />
          </Button>
        </Link>
        <h1 className="text-xl font-semibold text-white">Delivery packages</h1>
      </div>

      {/* Picker */}
      <div className="flex items-center gap-3 flex-wrap">
        <select
          value={projectId}
          onChange={(e) => {
            setProjectId(e.target.value);
            setEpisode("");
          }}
          className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-1.5 text-sm text-zinc-200"
        >
          <option value="">Select a project…</option>
          {(projects ?? []).map((p) => (
            <option key={p.id} value={p.id}>
              {p.name} ({p.code})
            </option>
          ))}
        </select>
        {episodes.length > 0 && (
          <select
            value={episode}
            onChange={(e) => setEpisode(e.target.value)}
            className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-1.5 text-sm text-zinc-200"
          >
            <option value="">All episodes</option>
            {episodes.map((e) => (
              <option key={e.episode} value={e.episode}>
                {e.episode || "(no episode)"} — {e.count} ready
              </option>
            ))}
          </select>
        )}
      </div>

      {/* Ready to build */}
      {projectId && (
        <div className="rounded-lg border border-zinc-800 bg-zinc-900/40">
          <div className="px-4 py-2.5 border-b border-zinc-800 text-sm font-medium text-white">
            Ready for delivery
          </div>
          {readyLoading && <div className="p-4 text-sm text-zinc-500">Loading…</div>}
          {!readyLoading && shown.length === 0 && (
            <div className="p-4 text-sm text-zinc-500">
              Nothing has passed QC yet. Exports appear here once QC passes them.
            </div>
          )}
          {shown.map((ep) => (
            <div key={ep.episode} className="border-b border-zinc-800/60 last:border-0">
              <div className="flex items-center justify-between gap-4 px-4 py-3 flex-wrap">
                <div>
                  <span className="text-white text-sm font-medium">
                    {ep.episode ? `Episode ${ep.episode}` : "No episode"}
                  </span>
                  <span className="ml-3 text-sm text-zinc-400">Ready: {ep.count} shots</span>
                  {ep.exports.some((x) => !x.hasChecksum) && (
                    <span className="ml-3 text-xs text-amber-400">
                      {ep.exports.filter((x) => !x.hasChecksum).length} without a validation checksum
                    </span>
                  )}
                </div>
                {canBuild && (
                  <Button size="sm" onClick={() => build(ep.episode)} disabled={building}>
                    <Package className="h-4 w-4 mr-2" />
                    Build delivery
                  </Button>
                )}
              </div>
              <div className="px-4 pb-3 grid sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-1">
                {ep.exports.map((x) => (
                  <div key={x.exportId} className="flex items-center gap-2 text-xs">
                    <Link href={`/pipeline/exports/${x.exportId}`} className="text-zinc-300 hover:text-white">
                      {x.shotCode}
                    </Link>
                    <span className="text-zinc-500">{x.versionString}</span>
                    <span className="text-zinc-600">{x.fileCount ?? "?"} frames</span>
                    <span className="text-zinc-600">{formatBytes(x.totalBytes)}</span>
                    {!x.deliveryMovPath && <span className="text-amber-500/80">no MOV</span>}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}

      {/* History — packages are permanent (§11.5) */}
      <div className="rounded-lg border border-zinc-800 bg-zinc-900/40">
        <div className="px-4 py-2.5 border-b border-zinc-800 text-sm font-medium text-white">Packages</div>
        <div className="divide-y divide-zinc-800/60">
          {(packages?.packages ?? []).map((p) => (
            <details key={p.id} className="group">
              <summary className="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-zinc-900/60 flex-wrap">
                <span className="text-sm text-white font-medium">#{p.packageNumber}</span>
                <span className="text-sm text-zinc-300">{p.name}</span>
                <span
                  className={cn(
                    "rounded-full border px-2 py-0.5 text-xs",
                    DELIVERY_STATUS_STYLES[p.status] ?? ""
                  )}
                >
                  {statusLabel(p.status)}
                </span>
                <span className="text-xs text-zinc-500">
                  {p.episode ? `episode ${p.episode} · ` : ""}
                  {p.verifiedCount}/{p.itemCount} shots
                </span>
                <span className="text-xs text-zinc-600">{new Date(p.createdAt).toLocaleDateString()}</span>
                {p.status === "BUILDING" && <RefreshCw className="h-3.5 w-3.5 text-blue-400 animate-spin" />}
                <span className="ml-auto flex items-center gap-2">
                  {canBuild && p.status === "READY" && (
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={(e) => {
                        e.preventDefault();
                        packageAction(p.id, "delivered");
                      }}
                    >
                      <CheckCircle2 className="h-4 w-4 mr-2 text-emerald-400" />
                      Mark delivered
                    </Button>
                  )}
                  {canBuild && ["QUEUED", "FAILED", "DRAFT"].includes(p.status) && (
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={(e) => {
                        e.preventDefault();
                        packageAction(p.id, "cancel");
                      }}
                    >
                      <XCircle className="h-4 w-4 mr-2 text-red-400" />
                      Cancel
                    </Button>
                  )}
                </span>
              </summary>
              <div className="px-4 pb-4 space-y-2">
                {p.rootPath && <div className="text-xs text-zinc-500 break-all">{p.rootPath}</div>}
                {p.errorMessage && <div className="text-xs text-red-400">{p.errorMessage}</div>}
                {p.deliveredAt && (
                  <div className="text-xs text-emerald-400">
                    Delivered {new Date(p.deliveredAt).toLocaleString()}
                  </div>
                )}
                <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-1">
                  {p.items.map((item) => (
                    <div key={item.id} className="flex items-center gap-2 text-xs">
                      <span
                        className={cn(
                          item.status === "VERIFIED"
                            ? "text-emerald-400"
                            : item.status === "FAILED"
                              ? "text-red-400"
                              : "text-zinc-500"
                        )}
                      >
                        {item.status === "VERIFIED" ? "✓" : item.status === "FAILED" ? "✕" : "·"}
                      </span>
                      <span className="text-zinc-300">{item.shotCode}</span>
                      <span className="text-zinc-500">{item.versionString}</span>
                      {item.fileCount != null && <span className="text-zinc-600">{item.fileCount}f</span>}
                      {item.linkMode && <span className="text-zinc-600">{item.linkMode}</span>}
                      {item.errorMessage && <span className="text-red-400">{item.errorMessage}</span>}
                    </div>
                  ))}
                </div>
              </div>
            </details>
          ))}
          {(packages?.packages ?? []).length === 0 && (
            <div className="p-4 text-sm text-zinc-500">No packages built yet</div>
          )}
        </div>
      </div>
    </div>
  );
}