"use client";

import * as React from "react";
import { useParams } from "next/navigation";
import { ExternalLink, ImageOff, Loader2 } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { api } from "@/lib/trpc";

export default function ArtifactsPage() {
  const params = useParams();
  const workspaceSlug =
    typeof params?.workspaceSlug === "string" ? params.workspaceSlug : undefined;
  const [selectedId, setSelectedId] = React.useState<string | null>(null);

  const artifactsQuery = api.convoys.listArtifacts.useQuery(
    { workspace: workspaceSlug! },
    { enabled: Boolean(workspaceSlug) },
  );

  const artifacts = artifactsQuery.data ?? [];
  const selected = artifacts.find((a) => a.id === selectedId) ?? null;

  if (!workspaceSlug) return null;

  return (
    <div className="flex h-full min-h-0 flex-col">
      <header className="shrink-0 border-b border-border px-6 py-4">
        <h1 className="text-lg font-semibold">Completion artifacts</h1>
        <p className="text-xs text-muted-foreground">
          Gallery of released convoys — summary + PR link + timeline
        </p>
      </header>

      <div className="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[1fr_380px]">
        <section className="min-h-0 overflow-y-auto p-6">
          {artifactsQuery.isLoading ? (
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Loader2 className="size-4 animate-spin" />
              Loading artifacts…
            </div>
          ) : artifacts.length === 0 ? (
            <div className="rounded-md border border-dashed border-border p-8 text-center">
              <p className="text-sm font-medium">No completion artifacts yet</p>
              <p className="mt-1 text-xs text-muted-foreground">
                Complete a convoy from merged or published via human-gate-3 to generate one.
              </p>
              <div className="mt-4 inline-flex items-center gap-2 rounded-md border border-border bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
                <ImageOff className="size-4" />
                Screenshot upload placeholder — shows when no image is attached
              </div>
            </div>
          ) : (
            <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
              {artifacts.map((artifact) => {
                const isSelected = artifact.id === selectedId;
                return (
                  <button
                    key={artifact.id}
                    type="button"
                    onClick={() => setSelectedId(artifact.id)}
                    className={`text-left ${isSelected ? "ring-2 ring-primary" : ""} rounded-lg`}
                  >
                    <Card className={`h-full ${isSelected ? "border-primary" : ""}`}>
                      <CardHeader className="pb-2">
                        <div className="flex items-center justify-between gap-2">
                          <CardTitle className="truncate text-sm">{artifact.convoySlug}</CardTitle>
                          <Badge variant="secondary" className="shrink-0 text-[10px]">
                            {artifact.convoyStatus}
                          </Badge>
                        </div>
                        <p className="text-xs text-muted-foreground">
                          {new Date(artifact.createdAt).toLocaleString()}
                        </p>
                      </CardHeader>
                      <CardContent className="space-y-3">
                        {artifact.screenshotUrl ? (
                          // eslint-disable-next-line @next/next/no-img-element
                          <img
                            src={artifact.screenshotUrl}
                            alt="screenshot"
                            className="h-32 w-full rounded-md object-cover"
                          />
                        ) : (
                          <div className="flex h-32 w-full items-center justify-center rounded-md border border-dashed border-border bg-muted/20 p-3 text-xs text-muted-foreground">
                            <span className="inline-flex items-center gap-1.5">
                              <ImageOff className="size-4" />
                              Screenshot upload placeholder
                            </span>
                          </div>
                        )}
                        <pre className="line-clamp-3 whitespace-pre-wrap break-words rounded bg-muted/30 p-2 text-xs">
                          {artifact.summaryMd.slice(0, 180)}
                          {artifact.summaryMd.length > 180 ? "…" : ""}
                        </pre>
                        {artifact.pr.prUrl && (
                          <a
                            href={artifact.pr.prUrl}
                            target="_blank"
                            rel="noreferrer"
                            onClick={(e) => e.stopPropagation()}
                            className="inline-flex items-center gap-1 text-xs text-primary underline"
                          >
                            PR <ExternalLink className="size-3" />
                          </a>
                        )}
                      </CardContent>
                    </Card>
                  </button>
                );
              })}
            </div>
          )}
        </section>

        <aside className="min-h-0 overflow-y-auto border-l border-border bg-background p-4">
          {!selected ? (
            <p className="py-8 text-center text-sm text-muted-foreground">
              Select an artifact to see detail summary + PR link + convoy timeline.
            </p>
          ) : (
            <div className="space-y-4">
              <div>
                <h2 className="text-sm font-semibold">{selected.convoySlug}</h2>
                <p className="text-xs text-muted-foreground">{selected.convoyTitle}</p>
                <p className="text-xs text-muted-foreground">{selected.convoyStatus}</p>
              </div>

              <div className="rounded-md border border-border bg-muted/30 p-3">
                <p className="mb-1 text-xs font-medium uppercase text-muted-foreground">Summary</p>
                <pre className="whitespace-pre-wrap break-words text-sm">
                  {selected.summaryMd}
                </pre>
              </div>

              <div className="rounded-md border border-border p-3">
                <p className="mb-1 text-xs font-medium uppercase text-muted-foreground">PR link</p>
                {selected.pr.prUrl ? (
                  <a
                    href={selected.pr.prUrl}
                    target="_blank"
                    rel="noreferrer"
                    className="break-all text-sm text-primary underline"
                  >
                    {selected.pr.prUrl}
                    {selected.pr.prNumber ? ` (#${selected.pr.prNumber})` : ""}
                  </a>
                ) : (
                  <p className="text-xs text-muted-foreground">No PR linked</p>
                )}
              </div>

              {selected.screenshotUrl ? (
                // eslint-disable-next-line @next/next/no-img-element
                <img
                  src={selected.screenshotUrl}
                  alt="screenshot"
                  className="w-full rounded-md border border-border object-cover"
                />
              ) : (
                <div className="flex h-32 w-full items-center justify-center rounded-md border border-dashed border-border bg-muted/20 p-3 text-xs text-muted-foreground">
                  <span className="inline-flex items-center gap-1.5">
                    <ImageOff className="size-4" />
                    Screenshot upload placeholder — no screenshot yet
                  </span>
                </div>
              )}

              <div>
                <p className="mb-2 text-xs font-medium uppercase text-muted-foreground">
                  Convoy timeline ({selected.timeline.length})
                </p>
                {selected.timeline.length === 0 ? (
                  <p className="text-xs text-muted-foreground">No events</p>
                ) : (
                  <ul className="space-y-1">
                    {selected.timeline.map((ev) => (
                      <li
                        key={ev.id}
                        className="rounded border border-border bg-muted/10 px-2 py-1.5 text-xs"
                      >
                        <div className="flex items-center justify-between gap-2">
                          <span className="font-medium">{ev.eventType}</span>
                          <span className="text-muted-foreground">
                            {new Date(ev.occurredAt).toLocaleString()}
                          </span>
                        </div>
                        <p className="text-muted-foreground">
                          {ev.role}
                          {ev.actor ? ` · ${ev.actor}` : ""}
                        </p>
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            </div>
          )}
        </aside>
      </div>
    </div>
  );
}