"use client";
import * as React from "react";
import Link from "next/link";
import useSWR from "swr";
import { AlertTriangle, Check, Copy, ExternalLink, Eye, Link2, Link2Off, MessageSquare, Share2, Sparkles, User } from "lucide-react";
import type { ConversationDetail, PublicMessage, ShareLinkItem } from "@/lib/client/types";
import { api, useApi } from "@/lib/client/api";
import { useIsMobile, useCopy } from "@/lib/client/hooks";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { Segmented } from "@/components/ui/segmented";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { EmptyState, Skeleton, Spinner } from "@/components/ui/misc";
import { ConfirmDialog } from "@/components/common/confirm-dialog";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { toast } from "@/components/ui/toast";
import { errorMessage } from "@/lib/client/humanize";
import { stripMarkdown } from "@/lib/search/query";
import { cn, formatRelative, truncate } from "@/lib/utils";

/* ------------------------------------------------------------------------------------------------
 * Global hook — open the sheet from anywhere (chat header, palette, sidebar) without prop drilling.
 *
 *   const share = useShareSheet();
 *   share.open({ conversationId, title, messages })          // messages optional (fetched when absent)
 *   share.open({ conversationId, messageIds: [id1, id2] })   // preselect "Selected messages"
 *
 * `<ShareSheetHost />` must be mounted once (done in components/app/command-palette.tsx).
 * ---------------------------------------------------------------------------------------------- */
export interface ShareRequest {
  conversationId: string;
  title?: string;
  messages?: PublicMessage[];
  /** Preselect these messages and start in "Selected messages" mode. */
  messageIds?: string[];
}

interface HostState {
  req: ShareRequest | null;
  open: boolean;
}
let hostState: HostState = { req: null, open: false };
const hostListeners = new Set<() => void>();
function setHost(next: HostState) {
  hostState = next;
  for (const l of hostListeners) l();
}
export function openShareSheet(req: ShareRequest) {
  setHost({ req, open: true });
}
export function closeShareSheet() {
  setHost({ ...hostState, open: false });
  setTimeout(() => {
    if (!hostState.open) setHost({ req: null, open: false });
  }, 320);
}
export function useShareSheet() {
  return React.useMemo(() => ({ open: openShareSheet, close: closeShareSheet }), []);
}
export function ShareSheetHost() {
  const state = React.useSyncExternalStore(
    (cb) => {
      hostListeners.add(cb);
      return () => hostListeners.delete(cb);
    },
    () => hostState,
    () => hostState,
  );
  if (!state.req) return null;
  return <ShareSheet open={state.open} onOpenChange={(o) => (o ? setHost({ ...hostState, open: true }) : closeShareSheet())} {...state.req} />;
}

/* ------------------------------------------------------------------------------------------------
 * Sheet
 * ---------------------------------------------------------------------------------------------- */
type Mode = "all" | "selected";

interface ShareResult {
  id: string;
  path: string;
  partial: boolean;
  messageCount: number;
  created: boolean;
}

export interface ShareSheetProps extends ShareRequest {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function ShareSheet({ open, onOpenChange, conversationId, title, messages: providedMessages, messageIds }: ShareSheetProps) {
  const isMobile = useIsMobile();
  const [mode, setMode] = React.useState<Mode>(messageIds?.length ? "selected" : "all");
  const [selected, setSelected] = React.useState<Set<string>>(() => new Set(messageIds ?? []));
  const [busy, setBusy] = React.useState(false);
  const [result, setResult] = React.useState<ShareResult | null>(null);
  const [revoking, setRevoking] = React.useState<ShareLinkItem | null>(null);

  const detail = useApi<ConversationDetail>(open && !providedMessages ? `/api/conversations/${conversationId}` : null);
  const status = useSWR<{ share: { id: string; createdAt: string; viewCount: number } | null; shares: ShareLinkItem[] }>(open ? ["share-status", conversationId] : null, () => api(`/api/conversations/${conversationId}/actions`, { method: "POST", json: { action: "share-status" } }), { revalidateOnFocus: false });

  const allMessages = React.useMemo(() => (providedMessages ?? detail.data?.messages ?? []).filter((m) => m.active !== false && m.status !== "streaming"), [providedMessages, detail.data]);
  const convTitle = title ?? detail.data?.conversation.title ?? "Conversation";
  const links = status.data?.shares ?? [];
  const fullLink = links.find((l) => !l.partial) ?? null;
  const origin = typeof window !== "undefined" ? window.location.origin : "";

  const toggle = (id: string) =>
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  const selectAll = () => setSelected(new Set(allMessages.map((m) => m.id)));
  const selectNone = () => setSelected(new Set());

  const create = async () => {
    setBusy(true);
    try {
      const body = mode === "selected" ? { action: "share", messageIds: allMessages.filter((m) => selected.has(m.id)).map((m) => m.id) } : { action: "share" };
      const res = await api<ShareResult>(`/api/conversations/${conversationId}/actions`, { method: "POST", json: body });
      setResult(res);
      await status.mutate();
      const url = `${origin}${res.path}`;
      try {
        await navigator.clipboard.writeText(url);
        toast.success(res.created ? "Share link created and copied" : "Share link updated and copied");
      } catch {
        toast.success(res.created ? "Share link created" : "Share link updated");
      }
    } catch (e) {
      toast.error("Could not create the link", errorMessage(e));
    } finally {
      setBusy(false);
    }
  };

  const revoke = async (link: ShareLinkItem) => {
    await api(`/api/shares?id=${encodeURIComponent(link.id)}`, { method: "DELETE" });
    if (result?.id === link.id) setResult(null);
    await status.mutate();
    toast.success("Link revoked", "Anyone opening it now sees “unavailable”.");
  };

  const canCreate = mode === "all" ? allMessages.length > 0 || Boolean(providedMessages) : selected.size > 0;
  const primaryLabel = mode === "all" ? (fullLink ? "Update link" : "Create link") : `Share ${selected.size} message${selected.size === 1 ? "" : "s"}`;

  return (
    <>
      <ResponsiveDialog
        open={open}
        onOpenChange={onOpenChange}
        title="Share conversation"
        description={truncate(convTitle, 80)}
        size="md"
        snap="full"
        footer={
          <div className="flex items-center gap-2">
            <p className="hidden flex-1 text-[12px] text-fg-subtle sm:block">Links stay active until you revoke them.</p>
            <Button variant="ghost" size={isMobile ? "lg" : "md"} className={cn(isMobile && "flex-1")} onClick={() => onOpenChange(false)}>
              Done
            </Button>
            <Button variant="primary" size={isMobile ? "lg" : "md"} className={cn(isMobile && "flex-[2]")} onClick={create} loading={busy} disabled={!canCreate}>
              <Share2 /> {primaryLabel}
            </Button>
          </div>
        }
      >
        <div className="space-y-4 pt-1">
          <div className="flex items-start gap-2.5 rounded-xl bg-warning-soft/70 px-3 py-2.5 text-[13px] leading-5 text-warning">
            <AlertTriangle className="mt-0.5 size-4 shrink-0" aria-hidden />
            <p>
              <span className="font-medium">Anyone with the link can read this.</span> Attachments are not included. The link is a frozen snapshot — later messages are not added until you update it.
            </p>
          </div>

          <Segmented<Mode> value={mode} onChange={setMode} fill size={isMobile ? "lg" : "md"} ariaLabel="What to share" options={[{ value: "all", label: "Entire conversation", icon: <MessageSquare /> }, { value: "selected", label: "Selected messages", icon: <Check />, count: mode === "selected" ? selected.size : undefined }]} />

          {mode === "selected" ? (
            <div className="space-y-2">
              <div className="flex items-center justify-between text-[12.5px] text-fg-muted">
                <span>
                  {selected.size} of {allMessages.length} selected
                </span>
                <span className="flex gap-1">
                  <Button variant="ghost" size="xs" onClick={selectAll} disabled={!allMessages.length}>
                    All
                  </Button>
                  <Button variant="ghost" size="xs" onClick={selectNone} disabled={!selected.size}>
                    None
                  </Button>
                </span>
              </div>
              {!providedMessages && detail.isLoading ? (
                <div className="space-y-1.5">
                  {Array.from({ length: 4 }).map((_, i) => (
                    <Skeleton key={i} className="h-14" />
                  ))}
                </div>
              ) : allMessages.length === 0 ? (
                <EmptyState title="Nothing to share yet" description="Send a message first." className="py-8" />
              ) : (
                <ul className="max-h-[42dvh] space-y-1 overflow-y-auto rounded-xl bg-bg-subtle p-1.5 scrollbar-thin md:max-h-72" aria-label="Messages">
                  {allMessages.map((m) => {
                    const on = selected.has(m.id);
                    return (
                      <li key={m.id}>
                        <label className={cn("flex min-h-[48px] cursor-pointer items-start gap-3 rounded-lg px-2.5 py-2 transition-colors", on ? "bg-bg-elevated shadow-xs" : "hover:bg-bg-elevated/60")}>
                          <input type="checkbox" checked={on} onChange={() => toggle(m.id)} className="mt-1 size-4 shrink-0 accent-[var(--accent)]" aria-label={`Include ${m.role} message`} />
                          <span className="min-w-0 flex-1">
                            <span className="flex items-center gap-1.5 text-[11.5px] font-medium text-fg-muted">
                              {m.role === "user" ? <User className="size-3" /> : <ProviderIcon provider={m.provider} size={12} />}
                              {m.role === "user" ? "You" : m.modelKey?.split("/").slice(1).join("/") || "Assistant"}
                            </span>
                            <span className="mt-0.5 line-clamp-2 block text-[13.5px] leading-5 text-fg">{stripMarkdown(m.content).slice(0, 220) || <em className="text-fg-subtle">No text</em>}</span>
                          </span>
                        </label>
                      </li>
                    );
                  })}
                </ul>
              )}
            </div>
          ) : (
            <p className="text-[13px] text-fg-muted">
              {allMessages.length ? `${allMessages.length} message${allMessages.length === 1 ? "" : "s"} will be published.` : detail.isLoading ? "Loading messages…" : "The conversation snapshot will be published."}
              {fullLink ? " A public link already exists — updating refreshes its content and keeps the same URL." : ""}
            </p>
          )}

          {result ? <LinkBox url={`${origin}${result.path}`} label={result.partial ? `Excerpt · ${result.messageCount} message${result.messageCount === 1 ? "" : "s"}` : "Entire conversation"} highlight /> : null}

          <section aria-label="Active links for this conversation" className="space-y-1.5">
            <h3 className="text-[11px] font-medium uppercase tracking-wide text-fg-subtle">Active links</h3>
            {status.isLoading && !status.data ? (
              <Skeleton className="h-12" />
            ) : links.length === 0 ? (
              <p className="rounded-lg border border-dashed border-border px-3 py-2.5 text-[12.5px] text-fg-subtle">No public link yet.</p>
            ) : (
              <ul className="divide-y divide-hairline overflow-hidden rounded-xl bg-bg-subtle">
                {links.map((l) => (
                  <ShareLinkRow key={l.id} link={l} origin={origin} onRevoke={() => setRevoking(l)} compact />
                ))}
              </ul>
            )}
          </section>
        </div>
      </ResponsiveDialog>

      <ConfirmDialog open={Boolean(revoking)} onOpenChange={(o) => !o && setRevoking(null)} title="Revoke this link?" description="The page will show “unavailable” to anyone who opens it. You can create a new link at any time." confirmLabel="Revoke" destructive onConfirm={async () => { if (revoking) await revoke(revoking); }} />
    </>
  );
}

/* ------------------------------------------------------------------------------------------------
 * Pieces
 * ---------------------------------------------------------------------------------------------- */
function LinkBox({ url, label, highlight }: { url: string; label?: string; highlight?: boolean }) {
  const [copied, copy] = useCopy();
  const canNativeShare = typeof navigator !== "undefined" && typeof navigator.share === "function";
  return (
    <div className={cn("rounded-xl border px-3 py-2.5", highlight ? "border-accent/40 bg-accent-soft/40" : "border-border bg-bg-subtle")}>
      {label ? (
        <p className="mb-1 flex items-center gap-1.5 text-[11.5px] font-medium text-fg-muted">
          <Link2 className="size-3.5" /> {label}
        </p>
      ) : null}
      <div className="flex items-center gap-2">
        <code className="min-w-0 flex-1 truncate font-mono text-[12.5px] text-fg">{url}</code>
        <Button variant="outline" size="sm" onClick={() => copy(url)} aria-label="Copy link">
          {copied ? <Check className="text-success" /> : <Copy />} {copied ? "Copied" : "Copy"}
        </Button>
      </div>
      <div className="mt-2 flex flex-wrap gap-1.5">
        <Button asChild variant="ghost" size="xs">
          <a href={url} target="_blank" rel="noopener noreferrer">
            <ExternalLink /> Open
          </a>
        </Button>
        {canNativeShare ? (
          <Button variant="ghost" size="xs" onClick={() => navigator.share({ url, title: "Shared from PolyLLM" }).catch(() => {})}>
            <Share2 /> Share…
          </Button>
        ) : null}
      </div>
    </div>
  );
}

function ShareLinkRow({ link, origin, onRevoke, compact }: { link: ShareLinkItem; origin: string; onRevoke: () => void; compact?: boolean }) {
  const [copied, copy] = useCopy();
  const url = `${origin}${link.path}`;
  return (
    <li className={cn("flex items-center gap-3 px-3", compact ? "min-h-[52px] py-2" : "min-h-[60px] py-2.5")}>
      <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-bg-elevated text-fg-muted">
        <Link2 className="size-4" />
      </span>
      <span className="min-w-0 flex-1">
        <span className="flex items-center gap-1.5">
          <Link href={link.path} target="_blank" className="truncate text-[13.5px] font-medium text-fg hover:underline">
            {compact ? link.partial ? "Excerpt" : "Entire conversation" : link.title}
          </Link>
          {!compact && link.partial ? <Badge variant="accent">Excerpt</Badge> : null}
        </span>
        <span className="mt-0.5 flex flex-wrap items-center gap-x-2 text-[11.5px] tabular-nums text-fg-subtle">
          <span>{formatRelative(link.createdAt)}</span>
          <span aria-hidden>·</span>
          <span className="inline-flex items-center gap-1">
            <Eye className="size-3" /> {link.viewCount} view{link.viewCount === 1 ? "" : "s"}
          </span>
          <span aria-hidden>·</span>
          <span>{link.messageCount} msg</span>
        </span>
      </span>
      <div className="flex shrink-0 items-center gap-0.5">
        <Button variant="ghost" size="icon-sm" onClick={() => copy(url)} aria-label="Copy link" className="tap">
          {copied ? <Check className="text-success" /> : <Copy />}
        </Button>
        <Button variant="ghost" size="icon-sm" onClick={onRevoke} aria-label="Revoke link" className="tap text-fg-muted hover:text-danger">
          <Link2Off />
        </Button>
      </div>
    </li>
  );
}

/* ------------------------------------------------------------------------------------------------
 * Settings → Data: every active link of the user (mounted by workstream E).
 *
 *   <ShareLinksList />
 * ---------------------------------------------------------------------------------------------- */
export function ShareLinksList({ className }: { className?: string }) {
  const { data, isLoading, mutate } = useApi<{ shares: ShareLinkItem[] }>("/api/shares");
  const [revoking, setRevoking] = React.useState<ShareLinkItem | null>(null);
  const origin = typeof window !== "undefined" ? window.location.origin : "";
  const list = data?.shares ?? [];

  const revoke = async (link: ShareLinkItem) => {
    try {
      await api(`/api/shares?id=${encodeURIComponent(link.id)}`, { method: "DELETE" });
      await mutate();
      toast.success("Link revoked");
    } catch (e) {
      toast.error("Could not revoke", errorMessage(e));
    }
  };

  return (
    <div className={className}>
      {isLoading && !data ? (
        <div className="flex items-center gap-2 px-1 py-4 text-[13px] text-fg-muted">
          <Spinner /> Loading links…
        </div>
      ) : list.length === 0 ? (
        <EmptyState icon={<Sparkles />} title="No active share links" description="Share a conversation from the chat header or the command palette (⌘K → Share conversation)." />
      ) : (
        <ul className="divide-y divide-hairline overflow-hidden rounded-xl border border-border bg-bg-elevated">
          {list.map((l) => (
            <ShareLinkRow key={l.id} link={l} origin={origin} onRevoke={() => setRevoking(l)} />
          ))}
        </ul>
      )}
      {list.length ? (
        <p className="mt-2 text-[12px] text-fg-subtle">
          {list.length} active link{list.length === 1 ? "" : "s"}. Revoking a link is immediate.
        </p>
      ) : null}
      <ConfirmDialog open={Boolean(revoking)} onOpenChange={(o) => !o && setRevoking(null)} title="Revoke this link?" description={revoking ? `“${revoking.title}” will no longer be publicly readable.` : undefined} confirmLabel="Revoke" destructive onConfirm={async () => { if (revoking) await revoke(revoking); }} />
    </div>
  );
}