"use client";

import Link from "next/link";
import { useQuery } from "@tanstack/react-query";
import { Layers, ExternalLink } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  EXPORT_STATUS_STYLES,
  statusLabel,
} from "@/app/(dashboard)/pipeline/status-colors";

interface ExportRow {
  id: string;
  versionString: string;
  status: string;
  statusChangedAt: string;
  createdAt: string;
  outputDir: string;
  job: {
    attempt: number;
    progress: number;
    machineName: string | null;
    errorMessage: string | null;
  } | null;
}

/**
 * "Exports" tab on the shot detail page (RenderPipeline2 §13) — the render
 * pipeline history for this shot, linking into the Export detail page.
 */
export function ShotExportsTab({ shotId }: { shotId: string }) {
  const { data, isLoading } = useQuery({
    queryKey: ["shot-exports", shotId],
    queryFn: async () => {
      const res = await fetch(`/api/render/queue?shotId=${shotId}&limit=100`);
      if (!res.ok) throw new Error("Failed to load exports");
      return res.json() as Promise<{ exports: ExportRow[] }>;
    },
    refetchInterval: 10000,
  });

  const exports = data?.exports ?? [];

  if (isLoading) {
    return <div className="py-10 text-center text-sm text-muted-foreground">Loading exports…</div>;
  }
  if (exports.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-16 gap-2 text-muted-foreground">
        <Layers className="h-8 w-8 opacity-30" />
        <p className="text-sm">No pipeline exports yet — queue one from the After Effects panel.</p>
      </div>
    );
  }

  return (
    <div className="space-y-2">
      {exports.map((e) => (
        <Link
          key={e.id}
          href={`/pipeline/exports/${e.id}`}
          className="flex items-center gap-4 rounded-lg border border-border bg-card p-4 hover:border-zinc-600 transition-colors"
        >
          <span className="font-mono text-sm text-white w-14">{e.versionString}</span>
          <span
            className={cn(
              "rounded-full border px-2 py-0.5 text-xs whitespace-nowrap",
              EXPORT_STATUS_STYLES[e.status] ?? "bg-zinc-500/15 text-zinc-300 border-zinc-500/30"
            )}
          >
            {statusLabel(e.status)}
          </span>
          <span className="flex-1 min-w-0 truncate text-xs text-muted-foreground">
            {e.job?.machineName ? `${e.job.machineName} · attempt ${e.job.attempt} · ` : ""}
            {e.outputDir}
          </span>
          <span className="text-xs text-muted-foreground whitespace-nowrap">
            {new Date(e.createdAt).toLocaleDateString()}
          </span>
          <ExternalLink className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
        </Link>
      ))}
    </div>
  );
}