"use client";
import * as React from "react";
import { Check, Copy, ExternalLink, Eye, Link2, ShieldAlert } from "lucide-react";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/misc";
import { toast } from "@/components/ui/toast";
import { api, useApi } from "@/lib/client/api";
import { useCopy } from "@/lib/client/hooks";
import { formatRelative } from "@/lib/utils";

interface ShareStatus {
  share: { id: string; createdAt: string; viewCount: number } | null;
}

/**
 * Public link for an Arena session. Shows a privacy warning before the first link is created; afterwards the
 * URL, view count, refresh and revoke. Bottom sheet on phones, dialog on desktop.
 */
export function ArenaShareSheet({ sessionId, open, onOpenChange }: { sessionId: string | null; open: boolean; onOpenChange: (o: boolean) => void }) {
  const status = useApi<ShareStatus>(open && sessionId ? `/api/arena/${sessionId}/share` : null);
  const [busy, setBusy] = React.useState(false);
  const [copied, copy] = useCopy();
  const share = status.data?.share ?? null;
  const url = share ? `${typeof window !== "undefined" ? window.location.origin : ""}/share/arena/${share.id}` : null;

  const create = async () => {
    if (!sessionId) return;
    setBusy(true);
    try {
      const { share: created } = await api<{ share: ShareStatus["share"] }>(`/api/arena/${sessionId}/share`, { method: "POST" });
      await status.mutate({ share: created }, { revalidate: false });
      toast.success(share ? "Snapshot refreshed" : "Public link created", "Anyone with the link can read this comparison.");
    } catch (e) {
      toast.error("Could not create the link", (e as Error).message);
    } finally {
      setBusy(false);
    }
  };
  const revoke = async () => {
    if (!sessionId) return;
    setBusy(true);
    try {
      await api(`/api/arena/${sessionId}/share`, { method: "DELETE" });
      await status.mutate({ share: null }, { revalidate: false });
      toast.success("Link revoked", "The public page now returns 404.");
    } catch (e) {
      toast.error("Could not revoke", (e as Error).message);
    } finally {
      setBusy(false);
    }
  };

  return (
    <ResponsiveDialog
      open={open}
      onOpenChange={onOpenChange}
      title="Share this comparison"
      description="A frozen public snapshot — prompt, system prompt, responses, metrics and votes."
      size="sm"
      footer={
        share ? (
          <div className="flex items-center gap-2">
            <Button variant="danger-soft" size="sm" onClick={revoke} loading={busy}>
              Revoke link
            </Button>
            <Button variant="ghost" size="sm" onClick={create} disabled={busy} className="ml-auto">
              Refresh snapshot
            </Button>
          </div>
        ) : (
          <div className="flex items-center justify-end gap-2">
            <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
              Cancel
            </Button>
            <Button variant="accent" size="sm" onClick={create} loading={busy} disabled={status.isLoading}>
              <Link2 /> Create public link
            </Button>
          </div>
        )
      }
    >
      {status.isLoading && !status.data ? (
        <div className="flex items-center gap-2 py-4 text-[13px] text-fg-muted">
          <Spinner /> Checking existing links…
        </div>
      ) : share && url ? (
        <div className="space-y-3 py-1">
          <div className="flex items-center gap-2 rounded-lg border border-border bg-bg-subtle px-3 py-2">
            <Link2 className="size-4 shrink-0 text-fg-subtle" />
            <span className="min-w-0 flex-1 truncate font-mono text-[12.5px]">{url}</span>
            <Button variant="ghost" size="icon-sm" aria-label="Copy link" onClick={() => copy(url)}>
              {copied ? <Check className="text-success" /> : <Copy />}
            </Button>
            <Button asChild variant="ghost" size="icon-sm" aria-label="Open link">
              <a href={url} target="_blank" rel="noopener noreferrer">
                <ExternalLink />
              </a>
            </Button>
          </div>
          <p className="flex items-center gap-2 text-[12.5px] text-fg-muted">
            <Eye className="size-3.5" /> {share.viewCount} view{share.viewCount === 1 ? "" : "s"} · created {formatRelative(share.createdAt)}
          </p>
          <p className="text-[12px] text-fg-subtle">Votes cast after sharing are not reflected until you refresh the snapshot.</p>
        </div>
      ) : (
        <div className="space-y-3 py-1">
          <div className="flex gap-3 rounded-lg border border-warning/40 bg-warning-soft px-3 py-2.5 text-[13px] text-fg">
            <ShieldAlert className="mt-0.5 size-4 shrink-0 text-warning" />
            <div className="space-y-1">
              <p className="font-medium">Before you share</p>
              <ul className="list-disc space-y-0.5 pl-4 text-[12.5px] text-fg-muted">
                <li>The prompt, system prompt and every response are published as-is — check for personal data or secrets.</li>
                <li>Attachments are never published; only their count is shown.</li>
                <li>Model names are revealed (Blind Arena sessions are marked as blind).</li>
                <li>The page is public but not indexed; anyone with the link can read it. You can revoke it anytime.</li>
              </ul>
            </div>
          </div>
        </div>
      )}
    </ResponsiveDialog>
  );
}