"use client";
import * as React from "react";
import { Eye, EyeOff, ExternalLink, ShieldCheck, ClipboardPaste } from "lucide-react";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Input, Field } from "@/components/ui/input";
import { toast } from "@/components/ui/toast";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { PROVIDERS } from "@/lib/client/providers";
import { api } from "@/lib/client/api";
import { useApp } from "@/components/app/store";
import { errorMessage } from "@/lib/client/humanize";
import { formatMs } from "@/lib/utils";
import type { ProviderId, PublicConnection } from "@/lib/client/types";

interface PutResponse {
  ok: boolean;
  error?: string;
  modelsAvailable?: number;
  latencyMs?: number;
  connections: PublicConnection[];
}

export interface AddKeyDialogProps {
  provider: ProviderId | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** True when a key already exists (copy switches to "Replace"). */
  replacing?: boolean;
  onSaved?: (result: PutResponse) => void;
}

/**
 * Add / replace an API key for one provider. Bottom sheet on phones, dialog on desktop.
 * The key is sent once over TLS, validated by the server against the provider, then encrypted at
 * rest (AES-256-GCM). It is never echoed back — only a hint such as `sk-••••9A2K`.
 */
export function AddKeyDialog({ provider, open, onOpenChange, replacing, onSaved }: AddKeyDialogProps) {
  const { refreshConnections } = useApp();
  const [key, setKey] = React.useState("");
  const [show, setShow] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const [canPaste, setCanPaste] = React.useState(false);
  const inputRef = React.useRef<HTMLInputElement>(null);
  const meta = provider ? PROVIDERS[provider] : null;

  React.useEffect(() => {
    // Clipboard read needs a user gesture + permission; only offer the button where the API exists.
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setCanPaste(typeof navigator !== "undefined" && Boolean(navigator.clipboard?.readText));
  }, []);

  const reset = () => {
    setKey("");
    setShow(false);
    setError(null);
  };

  const paste = async () => {
    try {
      const text = (await navigator.clipboard.readText()).trim();
      if (!text) {
        toast.info("Clipboard is empty");
        return;
      }
      setKey(text);
      setError(null);
      inputRef.current?.focus();
    } catch {
      toast.error("Could not read the clipboard", "Paste into the field instead.");
    }
  };

  const submit = async (e?: React.FormEvent) => {
    e?.preventDefault();
    const trimmed = key.trim();
    if (!provider || trimmed.length < 8) {
      setError("Paste a complete API key.");
      return;
    }
    if (/\s/.test(trimmed)) {
      setError("Keys never contain spaces or line breaks — check the paste.");
      return;
    }
    setBusy(true);
    setError(null);
    try {
      const res = await api<PutResponse>("/api/providers", { method: "PUT", json: { provider, apiKey: trimmed } });
      if (!res.ok) {
        setError(res.error ?? "The provider rejected this key.");
        return;
      }
      await refreshConnections();
      toast.success(`${meta?.name ?? "Provider"} connected`, [res.modelsAvailable ? `${res.modelsAvailable} models available` : null, res.latencyMs ? formatMs(res.latencyMs) : null].filter(Boolean).join(" · ") || undefined);
      onSaved?.(res);
      reset();
      onOpenChange(false);
    } catch (err) {
      setError(errorMessage(err, "Could not save the key."));
    } finally {
      setBusy(false);
    }
  };

  const valid = key.trim().length >= 8;

  return (
    <ResponsiveDialog
      open={open}
      onOpenChange={(v) => {
        if (!v) reset();
        onOpenChange(v);
      }}
      size="sm"
      title={
        <span className="flex items-center gap-2.5">
          <span className="flex size-9 items-center justify-center rounded-lg border border-border bg-bg-subtle">
            <ProviderIcon provider={provider} size={18} />
          </span>
          <span>
            {replacing ? "Replace" : "Connect"} {meta?.name ?? "provider"}
          </span>
        </span>
      }
      description={meta?.description}
      footer={
        <div className="flex gap-2">
          <Button type="button" variant="ghost" className="flex-1 md:flex-none" onClick={() => onOpenChange(false)} disabled={busy}>
            Cancel
          </Button>
          <Button type="submit" form="add-key-form" variant="accent" className="flex-1 md:flex-none" loading={busy} disabled={!valid}>
            {busy ? "Validating…" : replacing ? "Replace key" : "Connect"}
          </Button>
        </div>
      }
    >
      <form id="add-key-form" onSubmit={submit} className="space-y-4 pt-1">
        <Field label="API key" hint={meta?.keyHelp} error={error} htmlFor="provider-api-key">
          <div className="flex gap-2">
            <div className="relative min-w-0 flex-1">
              <Input
                ref={inputRef}
                id="provider-api-key"
                type={show ? "text" : "password"}
                value={key}
                onChange={(e) => {
                  setKey(e.target.value);
                  if (error) setError(null);
                }}
                placeholder={meta?.keyPrefixHint || "Paste your key"}
                autoComplete="off"
                autoCorrect="off"
                autoCapitalize="off"
                spellCheck={false}
                enterKeyHint="go"
                className="h-11 pr-11 font-mono text-[16px] md:h-9 md:text-sm"
                aria-invalid={Boolean(error)}
              />
              <button type="button" onClick={() => setShow((s) => !s)} className="tap absolute right-1.5 top-1/2 -translate-y-1/2 rounded-sm p-1.5 text-fg-subtle hover:bg-bg-muted hover:text-fg" aria-label={show ? "Hide key" : "Show key"} aria-pressed={show}>
                {show ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
              </button>
            </div>
            {canPaste ? (
              <Button type="button" variant="outline" className="h-11 shrink-0 px-3 md:h-9" onClick={paste} aria-label="Paste from clipboard">
                <ClipboardPaste />
                <span className="hidden sm:inline">Paste</span>
              </Button>
            ) : null}
          </div>
        </Field>
        <div className="flex items-start gap-2 rounded-lg bg-bg-subtle px-3 py-2.5 text-xs leading-5 text-fg-muted">
          <ShieldCheck className="mt-0.5 size-3.5 shrink-0 text-success" />
          <p>
            We only ever ask for an <span className="font-medium text-fg">API key</span>, never your provider password. It is validated once, encrypted at rest, and only a hint like <span className="font-mono">sk-••••9A2K</span> is shown afterwards.
          </p>
        </div>
        {meta ? (
          <a href={meta.keyDocsUrl} target="_blank" rel="noreferrer noopener" className="tap inline-flex items-center gap-1 text-xs font-medium text-accent hover:underline">
            How to create a {meta.shortName} key
            <ExternalLink className="size-3" />
          </a>
        ) : null}
      </form>
    </ResponsiveDialog>
  );
}

/** Small hook to drive the dialog from lists: `const kd = useAddKeyDialog(); kd.open("openai", true); <AddKeyDialog {...kd.props} />`. */
export function useAddKeyDialog(onSaved?: (r: PutResponse) => void) {
  const [state, setState] = React.useState<{ provider: ProviderId | null; replacing: boolean; open: boolean }>({ provider: null, replacing: false, open: false });
  return {
    open: (provider: ProviderId, replacing = false) => setState({ provider, replacing, open: true }),
    props: {
      provider: state.provider,
      replacing: state.replacing,
      open: state.open,
      onOpenChange: (open: boolean) => setState((s) => ({ ...s, open })),
      onSaved,
    } satisfies AddKeyDialogProps,
  };
}