"use client";
import * as React from "react";
import { Eye, EyeOff, Plus, Trash2, Activity, ClipboardPaste, AlertTriangle, CheckCircle2, XCircle, Info } from "lucide-react";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Input, Field } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import { toast } from "@/components/ui/toast";
import { api } from "@/lib/client/api";
import { errorMessage } from "@/lib/client/humanize";
import { formatMs, cn } from "@/lib/utils";
import type { PublicEndpoint, ManualModel } from "@/lib/client/types";
import { ENDPOINT_PRESETS } from "./presets";

interface HeaderRow {
  key: string;
  value: string;
}

interface FormState {
  name: string;
  baseUrl: string;
  apiKey: string;
  clearKey: boolean;
  headers: HeaderRow[];
  discover: boolean;
  modelsPath: string;
  manualModels: ManualModel[];
}

const EMPTY: FormState = { name: "", baseUrl: "", apiKey: "", clearKey: false, headers: [], discover: true, modelsPath: "/models", manualModels: [] };

function fromEndpoint(e: PublicEndpoint): FormState {
  return { name: e.name, baseUrl: e.baseUrl, apiKey: "", clearKey: false, headers: e.headerNames.map((k) => ({ key: k, value: "" })), discover: Boolean(e.modelsPath), modelsPath: e.modelsPath || "/models", manualModels: e.manualModels.map((m) => ({ ...m })) };
}

/** Client-side hint only — the server runs the authoritative SSRF check. */
export function looksPrivate(raw: string): boolean {
  try {
    const u = new URL(raw);
    const h = u.hostname.replace(/^\[|\]$/g, "").toLowerCase();
    return h === "localhost" || h.endsWith(".localhost") || h.endsWith(".local") || h.endsWith(".internal") || h === "::1" || h.startsWith("fe80:") || h.startsWith("fc") || h.startsWith("fd") || /^(127\.|10\.|192\.168\.|169\.254\.|0\.)/.test(h) || /^172\.(1[6-9]|2\d|3[01])\./.test(h) || !h.includes(".");
  } catch {
    return false;
  }
}

export interface TestOutcome {
  ok: boolean;
  latencyMs: number;
  modelsAvailable: number;
  error?: string;
  models?: { id: string; displayName: string }[];
}

export function EndpointSheet({ open, onOpenChange, endpoint, allowPrivate, onSaved }: { open: boolean; onOpenChange: (v: boolean) => void; endpoint: PublicEndpoint | null; allowPrivate: boolean; onSaved: (e: PublicEndpoint, test?: TestOutcome) => void }) {
  const editing = Boolean(endpoint);
  const [form, setForm] = React.useState<FormState>(EMPTY);
  const [preset, setPreset] = React.useState<string>("other");
  const [showKey, setShowKey] = React.useState(false);
  const [busy, setBusy] = React.useState<"save" | "test" | null>(null);
  const [error, setError] = React.useState<string | null>(null);
  const [test, setTest] = React.useState<TestOutcome | null>(null);
  const [canPaste, setCanPaste] = React.useState(false);

  React.useEffect(() => {
    if (!open) return;
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setForm(endpoint ? fromEndpoint(endpoint) : EMPTY);
    setPreset(endpoint ? ENDPOINT_PRESETS.find((p) => endpoint.baseUrl.startsWith(p.baseUrl.replace(/\/v1$/, "")))?.id ?? "other" : "other");
    setError(null);
    setTest(null);
    setShowKey(false);
    setCanPaste(typeof navigator !== "undefined" && Boolean(navigator.clipboard?.readText));
  }, [open, endpoint]);

  const patch = (p: Partial<FormState>) => {
    setForm((f) => ({ ...f, ...p }));
    setError(null);
  };

  const applyPreset = (id: string) => {
    setPreset(id);
    const p = ENDPOINT_PRESETS.find((x) => x.id === id);
    if (!p || id === "other") return;
    patch({ name: form.name || p.name, baseUrl: p.baseUrl, modelsPath: p.modelsPath, discover: true });
  };

  const privateHost = looksPrivate(form.baseUrl);
  const urlOk = /^https?:\/\/\S+/i.test(form.baseUrl.trim());
  const canSave = form.name.trim().length > 0 && urlOk && (form.discover ? form.modelsPath.trim().length > 0 : form.manualModels.some((m) => m.id.trim()));

  const payload = () => {
    const headers: Record<string, string> = {};
    for (const h of form.headers) if (h.key.trim() && h.value.trim()) headers[h.key.trim()] = h.value.trim();
    const keepExistingHeaders = editing && form.headers.length > 0 && form.headers.every((h) => !h.value.trim()) && form.headers.every((h) => endpoint!.headerNames.includes(h.key.trim()));
    return {
      name: form.name.trim(),
      baseUrl: form.baseUrl.trim().replace(/\/+$/, ""),
      ...(form.clearKey ? { apiKey: null } : form.apiKey.trim() ? { apiKey: form.apiKey.trim() } : {}),
      ...(keepExistingHeaders ? {} : { headers: Object.keys(headers).length ? headers : null }),
      modelsPath: form.discover ? form.modelsPath.trim() : "",
      manualModels: form.manualModels.filter((m) => m.id.trim()).map((m) => ({ ...m, id: m.id.trim(), displayName: m.displayName?.trim() || undefined, contextTokens: m.contextTokens || undefined })),
    };
  };

  const save = async (andTest: boolean) => {
    if (!canSave) return;
    setBusy(andTest ? "test" : "save");
    setError(null);
    try {
      if (editing) {
        const { endpoint: saved } = await api<{ endpoint: PublicEndpoint }>(`/api/endpoints/${endpoint!.id}`, { method: "PATCH", json: payload() });
        let outcome: TestOutcome | undefined;
        if (andTest) {
          const r = await api<{ ok: boolean; latencyMs: number; models: { id: string; displayName: string }[]; error?: string; endpoint: PublicEndpoint }>(`/api/endpoints/${endpoint!.id}/sync`, { method: "POST" });
          outcome = { ok: r.ok, latencyMs: r.latencyMs, modelsAvailable: r.models.length, error: r.error, models: r.models };
          setTest(outcome);
          onSaved(r.endpoint, outcome);
          if (r.ok) toast.success("Endpoint reachable", `${r.models.length} models · ${formatMs(r.latencyMs)}`);
          else toast.error("Endpoint test failed", r.error);
          return;
        }
        onSaved(saved);
        toast.success("Endpoint saved");
        onOpenChange(false);
      } else {
        const r = await api<{ endpoint: PublicEndpoint; test?: { ok: boolean; latencyMs: number; modelsAvailable: number; error?: string } }>("/api/endpoints", { method: "POST", json: { ...payload(), validate: andTest } });
        if (r.test) {
          const outcome: TestOutcome = { ...r.test, models: r.endpoint.discoveredModels.map((m) => ({ id: m.id, displayName: m.id })) };
          setTest(outcome);
          onSaved(r.endpoint, outcome);
          if (r.test.ok) toast.success(`${r.endpoint.name} connected`, `${r.test.modelsAvailable} models · ${formatMs(r.test.latencyMs)}`);
          else toast.warning("Saved, but the test failed", r.test.error);
          if (r.test.ok) onOpenChange(false);
        } else {
          onSaved(r.endpoint);
          toast.success("Endpoint saved", "Not tested yet.");
          onOpenChange(false);
        }
      }
    } catch (e) {
      setError(errorMessage(e, "Could not save the endpoint."));
    } finally {
      setBusy(null);
    }
  };

  const pasteKey = async () => {
    try {
      const t = (await navigator.clipboard.readText()).trim();
      if (t) patch({ apiKey: t, clearKey: false });
    } catch {
      toast.error("Could not read the clipboard");
    }
  };

  const presetMeta = ENDPOINT_PRESETS.find((p) => p.id === preset);

  return (
    <ResponsiveDialog
      open={open}
      onOpenChange={(v) => !busy && onOpenChange(v)}
      size="lg"
      snap="full"
      title={editing ? `Edit ${endpoint!.name}` : "Add custom endpoint"}
      description="Any server that speaks the OpenAI Chat Completions API."
      footer={
        <div className="flex flex-wrap gap-2">
          <Button variant="ghost" className="md:mr-auto" onClick={() => onOpenChange(false)} disabled={Boolean(busy)}>
            Cancel
          </Button>
          <Button variant="outline" className="flex-1 md:flex-none" disabled={!canSave} loading={busy === "test"} onClick={() => save(true)}>
            <Activity /> {editing ? "Save & test" : "Save & test connection"}
          </Button>
          <Button variant="accent" className="flex-1 md:flex-none" disabled={!canSave} loading={busy === "save"} onClick={() => save(false)}>
            {editing ? "Save" : "Save without testing"}
          </Button>
        </div>
      }
    >
      <div className="space-y-5 pt-1">
        {!editing ? (
          <div>
            <p className="mb-1.5 text-[12px] font-medium text-fg-muted">Start from a preset</p>
            <div className="-mx-4 flex gap-1.5 overflow-x-auto px-4 pb-1 scrollbar-none md:mx-0 md:flex-wrap md:px-0">
              {ENDPOINT_PRESETS.map((p) => (
                <button key={p.id} type="button" onClick={() => applyPreset(p.id)} aria-pressed={preset === p.id} className={cn("inline-flex h-9 shrink-0 items-center rounded-full border px-3.5 text-[13px] font-medium transition-colors", preset === p.id ? "border-fg bg-fg text-bg" : "border-border bg-bg-elevated text-fg-muted hover:border-border-strong hover:text-fg")}>
                  {p.name}
                </button>
              ))}
            </div>
            {presetMeta ? <p className="mt-1.5 text-[12px] leading-4 text-fg-subtle">{presetMeta.hint}</p> : null}
          </div>
        ) : null}

        <div className="grid gap-4 md:grid-cols-2">
          <Field label="Name" htmlFor="ep-name">
            <Input id="ep-name" value={form.name} onChange={(e) => patch({ name: e.target.value })} placeholder="My Ollama" maxLength={80} className="h-11 text-[16px] md:h-9 md:text-sm" />
          </Field>
          <Field label="Base URL" htmlFor="ep-url" hint="Up to and including /v1." error={form.baseUrl && !urlOk ? "Enter a full http(s) URL." : null}>
            <Input id="ep-url" value={form.baseUrl} onChange={(e) => patch({ baseUrl: e.target.value })} placeholder="http://localhost:11434/v1" inputMode="url" autoCapitalize="off" autoCorrect="off" spellCheck={false} className="h-11 font-mono text-[16px] md:h-9 md:text-sm" />
          </Field>
        </div>

        {privateHost ? (
          <div className={cn("flex gap-2 rounded-lg px-3 py-2.5 text-xs leading-5", allowPrivate ? "bg-info-soft text-info" : "bg-warning-soft text-warning")}>
            {allowPrivate ? <Info className="mt-0.5 size-3.5 shrink-0" /> : <AlertTriangle className="mt-0.5 size-3.5 shrink-0" />}
            <p>
              {allowPrivate ? (
                <>This server allows private addresses: the URL must be reachable from the machine running PolyLLM, not from your browser.</>
              ) : (
                <>
                  <span className="font-medium">Requests are made by the PolyLLM server, not your browser.</span> On www.polyllm.io a localhost or LAN address is unreachable and will be rejected. Expose the server through a tunnel (Cloudflare Tunnel, ngrok, Tailscale Funnel) and use that public URL, or run PolyLLM on your own machine with <code className="font-mono">ALLOW_PRIVATE_ENDPOINTS=1</code>.
                </>
              )}
            </p>
          </div>
        ) : null}

        <Field label="API key (optional)" htmlFor="ep-key" hint={editing && endpoint!.hasKey && !form.clearKey && !form.apiKey ? `Current key ${endpoint!.keyHint} is kept unless you enter a new one.` : "Sent as Authorization: Bearer. Encrypted at rest, never shown again."}>
          <div className="flex gap-2">
            <div className="relative min-w-0 flex-1">
              <Input id="ep-key" type={showKey ? "text" : "password"} value={form.apiKey} disabled={form.clearKey} onChange={(e) => patch({ apiKey: e.target.value })} placeholder={editing && endpoint!.hasKey ? "Enter a new key to replace" : "Leave empty if the server needs none"} autoComplete="off" autoCapitalize="off" autoCorrect="off" spellCheck={false} className="h-11 pr-11 font-mono text-[16px] md:h-9 md:text-sm" />
              <button type="button" onClick={() => setShowKey((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={showKey ? "Hide key" : "Show key"}>
                {showKey ? <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={pasteKey} aria-label="Paste key">
                <ClipboardPaste />
              </Button>
            ) : null}
          </div>
          {editing && endpoint!.hasKey ? (
            <label className="mt-2 flex items-center gap-2 text-xs text-fg-muted">
              <Switch size="sm" checked={form.clearKey} onCheckedChange={(v) => patch({ clearKey: v, apiKey: v ? "" : form.apiKey })} aria-label="Remove the stored key" />
              Remove the stored key
            </label>
          ) : null}
        </Field>

        <div>
          <div className="mb-1.5 flex items-center justify-between">
            <p className="text-[12px] font-medium text-fg-muted">Custom headers</p>
            <Button type="button" size="xs" variant="ghost" onClick={() => patch({ headers: [...form.headers, { key: "", value: "" }] })} disabled={form.headers.length >= 12}>
              <Plus /> Add header
            </Button>
          </div>
          {form.headers.length === 0 ? (
            <p className="text-[12px] text-fg-subtle">None. Useful for gateways (e.g. <code className="font-mono">X-Api-Key</code>, <code className="font-mono">CF-Access-Client-Id</code>).</p>
          ) : (
            <ul className="space-y-2">
              {form.headers.map((h, i) => (
                <li key={i} className="flex gap-2">
                  <Input value={h.key} onChange={(e) => patch({ headers: form.headers.map((x, j) => (j === i ? { ...x, key: e.target.value } : x)) })} placeholder="Header" aria-label={`Header ${i + 1} name`} autoCapitalize="off" spellCheck={false} className="h-11 w-2/5 font-mono text-[16px] md:h-9 md:text-sm" />
                  <Input value={h.value} onChange={(e) => patch({ headers: form.headers.map((x, j) => (j === i ? { ...x, value: e.target.value } : x)) })} placeholder={editing && endpoint!.headerNames.includes(h.key) && !h.value ? "•••••• (stored)" : "Value"} aria-label={`Header ${i + 1} value`} autoCapitalize="off" spellCheck={false} className="h-11 min-w-0 flex-1 font-mono text-[16px] md:h-9 md:text-sm" />
                  <Button type="button" variant="ghost" size="icon-lg" className="h-11 md:size-9" aria-label="Remove header" onClick={() => patch({ headers: form.headers.filter((_, j) => j !== i) })}>
                    <Trash2 />
                  </Button>
                </li>
              ))}
            </ul>
          )}
          {editing && form.headers.some((h) => endpoint!.headerNames.includes(h.key) && !h.value) ? <p className="mt-1.5 text-[11px] text-fg-subtle">Stored header values are never shown. Leave them blank to keep them, or type a new value to replace; editing any value re-saves all headers.</p> : null}
        </div>

        <div className="panel divide-y divide-hairline">
          <div className="flex min-h-[52px] items-center justify-between gap-4 px-4 py-3">
            <div>
              <p className="text-[14px] font-medium">Discover models automatically</p>
              <p className="mt-0.5 text-[12px] text-fg-muted">GET {form.baseUrl.trim().replace(/\/+$/, "") || "{baseUrl}"}{form.discover ? form.modelsPath || "/models" : "…"}</p>
            </div>
            <Switch checked={form.discover} onCheckedChange={(v) => patch({ discover: v })} aria-label="Discover models automatically" />
          </div>
          {form.discover ? (
            <div className="px-4 py-3">
              <Field label="Models path" htmlFor="ep-models-path" hint="Relative to the base URL. OpenAI shape {data:[{id}]}, bare arrays and Ollama's {models:[{name}]} are understood.">
                <Input id="ep-models-path" value={form.modelsPath} onChange={(e) => patch({ modelsPath: e.target.value })} placeholder="/models" autoCapitalize="off" spellCheck={false} className="h-11 font-mono text-[16px] md:h-9 md:text-sm" />
              </Field>
            </div>
          ) : null}
        </div>

        <div>
          <div className="mb-1.5 flex items-center justify-between">
            <div>
              <p className="text-[12px] font-medium text-fg-muted">Manual models {form.discover ? "(optional overrides)" : ""}</p>
              <p className="text-[11px] text-fg-subtle">{form.discover ? "Declare capabilities for discovered ids (vision, tools, reasoning, context) or add ids the listing misses." : "Discovery is off: list every model id the server accepts."}</p>
            </div>
            <Button type="button" size="xs" variant="ghost" onClick={() => patch({ manualModels: [...form.manualModels, { id: "" }] })} disabled={form.manualModels.length >= 200}>
              <Plus /> Add model
            </Button>
          </div>
          {form.manualModels.length ? (
            <ul className="space-y-2">
              {form.manualModels.map((m, i) => {
                const upd = (p: Partial<ManualModel>) => patch({ manualModels: form.manualModels.map((x, j) => (j === i ? { ...x, ...p } : x)) });
                return (
                  <li key={i} className="panel space-y-2 p-3">
                    <div className="flex gap-2">
                      <Input value={m.id} onChange={(e) => upd({ id: e.target.value })} placeholder="model id (e.g. llama3.1:8b)" aria-label={`Model ${i + 1} id`} autoCapitalize="off" spellCheck={false} className="h-11 min-w-0 flex-1 font-mono text-[16px] md:h-9 md:text-sm" />
                      <Button type="button" variant="ghost" size="icon-lg" className="h-11 md:size-9" aria-label="Remove model" onClick={() => patch({ manualModels: form.manualModels.filter((_, j) => j !== i) })}>
                        <Trash2 />
                      </Button>
                    </div>
                    <div className="grid gap-2 sm:grid-cols-2">
                      <Input value={m.displayName ?? ""} onChange={(e) => upd({ displayName: e.target.value })} placeholder="Display name (optional)" aria-label={`Model ${i + 1} display name`} className="h-11 text-[16px] md:h-9 md:text-sm" />
                      <Input type="number" inputMode="numeric" min={1} value={m.contextTokens ?? ""} onChange={(e) => upd({ contextTokens: e.target.value ? Number(e.target.value) : undefined })} placeholder="Context tokens (optional)" aria-label={`Model ${i + 1} context tokens`} className="h-11 text-[16px] md:h-9 md:text-sm" />
                    </div>
                    <div className="flex flex-wrap gap-x-5 gap-y-2 text-[13px]">
                      {(["vision", "tools", "reasoning"] as const).map((cap) => (
                        <label key={cap} className="flex min-h-[32px] items-center gap-2 capitalize">
                          <Switch size="sm" checked={Boolean(m[cap])} onCheckedChange={(v) => upd({ [cap]: v })} aria-label={`${cap} supported`} />
                          {cap}
                        </label>
                      ))}
                    </div>
                  </li>
                );
              })}
            </ul>
          ) : (
            <p className="text-[12px] text-fg-subtle">Discovered models start as text-only. Add an entry to unlock vision, tools or reasoning controls for a specific id.</p>
          )}
        </div>

        {test ? (
          <div className={cn("rounded-lg px-3 py-2.5 text-xs leading-5", test.ok ? "bg-success-soft text-success" : "bg-danger-soft text-danger")}>
            <p className="flex items-center gap-1.5 font-medium">
              {test.ok ? <CheckCircle2 className="size-3.5" /> : <XCircle className="size-3.5" />}
              {test.ok ? `Reachable in ${formatMs(test.latencyMs)} · ${test.modelsAvailable} model${test.modelsAvailable === 1 ? "" : "s"}` : `Failed after ${formatMs(test.latencyMs)}`}
            </p>
            {!test.ok && test.error ? <p className="mt-0.5 text-fg-muted">{test.error}</p> : null}
            {test.ok && test.models?.length ? (
              <ul className="mt-2 flex flex-wrap gap-1.5">
                {test.models.slice(0, 30).map((m) => (
                  <li key={m.id}>
                    <Badge variant="outline" className="font-mono text-[10.5px] text-fg-muted">
                      {m.id}
                    </Badge>
                  </li>
                ))}
                {test.models.length > 30 ? <li className="text-fg-muted">+{test.models.length - 30} more</li> : null}
              </ul>
            ) : null}
          </div>
        ) : null}

        {error ? <p className="rounded-lg bg-danger-soft px-3 py-2 text-xs text-danger">{error}</p> : null}
      </div>
    </ResponsiveDialog>
  );
}