import { useState } from "react";
import { useServerFn } from "@tanstack/react-start";
import { Globe, Loader2, X } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { connectCustomDomain } from "@/lib/codehub.functions";

type Result = { domain: string; target: string; status: string; dns: "added" | "exists" | "manual" };

export function ConnectDomainButton({ kind, id, disabled }: { kind: "echo" | "hub"; id: string; disabled?: boolean }) {
  const connect = useServerFn(connectCustomDomain);
  const [open, setOpen] = useState(false), [domain, setDomain] = useState(""), [busy, setBusy] = useState(false);
  const [result, setResult] = useState<Result | null>(null), [error, setError] = useState<string | null>(null);
  const submit = async () => {
    setBusy(true); setError(null); setResult(null);
    try {
      const r = await connect({ data: { kind, id, domain } });
      if ("error" in r) throw new Error(r.error);
      setResult(r as Result); toast.success(`${r.domain} connected.`);
    } catch (e) { setError(e instanceof Error ? e.message.replace(/^.*"message":\s*"([^"]+)".*$/s, "$1") : "Could not connect the domain."); }
    finally { setBusy(false); }
  };
  return <>
    <Button size="sm" variant="outline" disabled={disabled} onClick={() => setOpen(true)}><Globe />Connect domain</Button>
    {open && <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/90 p-5" role="dialog" aria-modal="true">
      <div className="w-full max-w-lg rounded-lg border border-border bg-card p-6">
        <div className="flex items-center justify-between"><h2 className="text-xl font-semibold">Connect your domain</h2><Button size="icon" variant="ghost" aria-label="Close" onClick={() => setOpen(false)}><X /></Button></div>
        <p className="mt-2 text-sm text-muted-foreground">Links a domain you own to this published site in your Cloudflare account.</p>
        <div className="mt-4 flex gap-2"><Input placeholder="mywebsite.com or www.mywebsite.com" value={domain} onChange={e => setDomain(e.target.value)} onKeyDown={e => e.key === "Enter" && domain && void submit()} /><Button disabled={busy || !domain.trim()} onClick={() => void submit()}>{busy ? <Loader2 className="animate-spin" /> : "Connect"}</Button></div>
        {error && <p role="alert" className="mt-4 text-sm text-destructive">{error}</p>}
        {result && <div role="status" className="mt-4 space-y-2 border-l border-primary pl-3 text-sm">
          <p><b>{result.domain}</b> is linked. Status: {result.status}.</p>
          {result.dns === "manual"
            ? <p>Add this record where you bought the domain: <span className="font-mono">CNAME {result.domain} → {result.target}</span>. It usually goes live within an hour.</p>
            : <p>{result.dns === "added" ? "DNS record added automatically." : "A DNS record already exists for this name."} It usually goes live within a few minutes.</p>}
        </div>}
      </div>
    </div>}
  </>;
}