"use client";
import * as React from "react";
import Link from "next/link";
import { AlertCircle, Info, KeyRound, RefreshCw, Shuffle } from "lucide-react";
import { humanizeChatError, secondsLeft, type ChatErrorLike } from "@/lib/chat/humanize-error";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { CopyButton } from "@/components/ui/misc";
import { PROVIDERS } from "@/lib/client/providers";

interface Props {
  error: ChatErrorLike;
  /** Provider id (message.provider) for the copy. */
  provider?: string | null;
  requestId?: string | null;
  /** When the error happened (ms) — drives the retry countdown. */
  since?: number;
  onRetry?: () => void;
  onSwitchModel?: () => void;
  compact?: boolean;
}

/**
 * Humanized provider error with Retry (live countdown from `retryAfterMs`), Switch model and
 * View details (code, provider code, HTTP status, request id).
 */
export function MessageError({ error, provider, requestId, since, onRetry, onSwitchModel, compact }: Props) {
  const providerName = provider ? PROVIDERS[provider as keyof typeof PROVIDERS]?.name ?? provider : undefined;
  const h = React.useMemo(() => humanizeChatError(error, { providerName, requestId }), [error, providerName, requestId]);
  const [detailsOpen, setDetailsOpen] = React.useState(false);
  const [now, setNow] = React.useState(() => since ?? 0);
  const start = since ?? 0;
  const wait = h.retryAfterMs && since ? secondsLeft(h.retryAfterMs, start, now) : null;

  React.useEffect(() => {
    if (!h.retryAfterMs || !since) return;
    const t = setInterval(() => setNow(Date.now()), 500);
    return () => clearInterval(t);
  }, [h.retryAfterMs, since]);

  return (
    <div className="rounded-xl border border-danger/25 bg-danger-soft/70 px-3 py-2.5 text-[13px] text-fg" role="alert">
      <div className="flex items-start gap-2">
        <AlertCircle className="mt-0.5 size-4 shrink-0 text-danger" />
        <div className="min-w-0 flex-1">
          <p className="font-medium text-danger">{h.title}</p>
          <p className={compact ? "text-[12.5px] text-fg-muted" : "mt-0.5 text-[12.5px] text-fg-muted"}>{h.description}</p>
        </div>
      </div>
      <div className="mt-2 flex flex-wrap items-center gap-1.5 pl-6">
        {onRetry && h.canRetry ? (
          <Button size="xs" variant="outline" className="bg-bg-elevated" onClick={onRetry} disabled={wait !== null}>
            <RefreshCw /> {wait !== null ? `Retry in ${wait}s` : "Retry"}
          </Button>
        ) : null}
        {onSwitchModel && h.suggestSwitch ? (
          <Button size="xs" variant="outline" className="bg-bg-elevated" onClick={onSwitchModel}>
            <Shuffle /> Switch model
          </Button>
        ) : null}
        {h.suggestProviders ? (
          <Button asChild size="xs" variant="outline" className="bg-bg-elevated">
            <Link href="/app/settings/providers">
              <KeyRound /> Providers
            </Link>
          </Button>
        ) : null}
        <Button size="xs" variant="ghost" onClick={() => setDetailsOpen(true)}>
          <Info /> View details
        </Button>
      </div>

      <ResponsiveDialog open={detailsOpen} onOpenChange={setDetailsOpen} title="Error details" description="Safe diagnostics — no keys or prompts are included." size="sm">
        <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 pt-1 text-[13px]">
          <Row k="Code" v={h.details.code} mono />
          <Row k="Provider" v={h.details.provider ? PROVIDERS[h.details.provider as keyof typeof PROVIDERS]?.name ?? h.details.provider : "—"} />
          <Row k="Provider code" v={h.details.providerCode ?? "—"} mono />
          <Row k="HTTP status" v={h.details.status !== null ? String(h.details.status) : "—"} mono />
          <Row k="Request id" v={h.details.requestId ?? "—"} mono />
          {h.retryAfterMs ? <Row k="Retry after" v={`${Math.ceil(h.retryAfterMs / 1000)} s`} /> : null}
          {h.details.raw ? <Row k="Provider message" v={h.details.raw} /> : null}
        </dl>
        <div className="mt-4 flex justify-end">
          <CopyButton size="sm" label="Copy details" value={JSON.stringify({ ...h.details, retryAfterMs: h.retryAfterMs }, null, 2)} />
        </div>
      </ResponsiveDialog>
    </div>
  );
}

function Row({ k, v, mono }: { k: string; v: string; mono?: boolean }) {
  return (
    <>
      <dt className="text-fg-subtle">{k}</dt>
      <dd className={mono ? "break-all font-mono text-[12px]" : "break-words"}>{v}</dd>
    </>
  );
}