"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { Plus, RefreshCw, Pause, Play, Wrench, KeyRound, Trash2, Copy, Check, ExternalLink } from "lucide-react";
import { Alert, Field, Modal, call, useAction } from "../ui";

const snippet = (origin: string, key: string) => `<script defer src="${origin}/track.js" data-key="${key}"></script>`;
function KeyBox({ origin, keyRaw }: { origin: string; keyRaw: string }) {
  const [ok, setOk] = useState(false); const code = snippet(origin, keyRaw);
  return (<div className="space-y-3"><p className="text-sm text-amber-700">Copy this key now — it is shown only once (we store only a hash).</p>
    <div className="flex items-center gap-2"><code className="flex-1 break-all rounded-xl bg-slate-100 p-3 font-mono text-xs">{keyRaw}</code></div>
    <div><span className="label">Paste before &lt;/head&gt; on the site</span><pre className="overflow-x-auto rounded-xl bg-slate-900 p-3 text-[11px] text-emerald-300">{code}</pre></div>
    <button className="btn btn-primary btn-sm" onClick={() => { navigator.clipboard.writeText(code); setOk(true); }}>{ok ? <Check size={14} /> : <Copy size={14} />}{ok ? "Copied" : "Copy snippet"}</button></div>);
}

/** "Add project" — accepts a domain, subdomain, IP or full URL. */
export function AddProject({ origin }: { origin: string }) {
  const router = useRouter(); const [open, setOpen] = useState(false); const [f, setF] = useState({ name: "", url: "", notes: "", color: "#2563eb" });
  const [busy, setBusy] = useState(false), [err, setErr] = useState(""), [key, setKey] = useState(""), [id, setId] = useState(0);
  return (<>
    <button className="btn btn-primary btn-sm" onClick={() => { setOpen(true); setKey(""); }}><Plus size={14} />Add project</button>
    <Modal open={open} onClose={() => { setOpen(false); router.refresh(); }} title={key ? "Project connected 🎉" : "Add a project"}>
      {key ? <><KeyBox origin={origin} keyRaw={key} /><button className="btn btn-ghost mt-4 w-full" onClick={() => router.push(`/dashboard/projects/${id}`)}>Open project dashboard →</button></> :
        <form className="space-y-4" onSubmit={async (e) => { e.preventDefault(); setBusy(true); setErr(""); const r = await call("/api/dashboard/project", { action: "save", data: f }); setBusy(false); if (!r.ok) return setErr(r.error); setKey(r.data.key); setId(r.data.id); }}>
          <Field label="Domain, subdomain or URL" hint="e.g. mystore.com · shop.mystore.com · https://mystore.com/app · 203.0.113.5"><input className="input" required autoFocus placeholder="shop.example.com" value={f.url} onChange={(e) => setF({ ...f, url: e.target.value })} /></Field>
          <div className="grid gap-4 sm:grid-cols-[1fr_auto]"><Field label="Project name (optional)"><input className="input" value={f.name} onChange={(e) => setF({ ...f, name: e.target.value })} /></Field><Field label="Colour"><input type="color" className="h-10 w-16 rounded-lg border border-slate-200" value={f.color} onChange={(e) => setF({ ...f, color: e.target.value })} /></Field></div>
          <Field label="Notes"><input className="input" value={f.notes} onChange={(e) => setF({ ...f, notes: e.target.value })} /></Field><Alert>{err}</Alert><button className="btn btn-primary w-full" disabled={busy}>{busy ? "Connecting…" : "Connect project"}</button></form>}
    </Modal></>);
}

/** Per-project controls: check now, pause, maintenance, rotate key, edit, delete. */
export function ProjectControls({ p, origin }: { p: any; origin: string }) {
  const { run, busy, error, msg } = useAction(); const router = useRouter();
  const [key, setKey] = useState(""), [edit, setEdit] = useState(false), [f, setF] = useState({ name: p.name, url: p.url, notes: p.notes || "", color: p.color, maintenance_msg: p.maintenance_msg || "" });
  const paused = p.status === "paused";
  return (
    <div className="card p-5">
      <h3 className="font-bold">Controls</h3><p className="mb-4 text-xs text-slate-500">Changes apply instantly. Connected sites read status & maintenance mode from <code>/api/ingest/config</code>.</p>
      <div className="flex flex-wrap gap-2">
        <button className="btn btn-ghost btn-sm" disabled={busy} onClick={() => run("/api/dashboard/project", { action: "check", data: { id: p.id } })}><RefreshCw size={14} />Check now</button>
        <button className="btn btn-ghost btn-sm" disabled={busy} onClick={() => run("/api/dashboard/project", { action: "toggle", data: { id: p.id, status: paused ? "active" : "paused" } })}>{paused ? <Play size={14} /> : <Pause size={14} />}{paused ? "Resume" : "Pause"}</button>
        <button className={`btn btn-sm ${p.maintenance ? "btn-primary" : "btn-ghost"}`} disabled={busy} onClick={() => run("/api/dashboard/project", { action: "toggle", data: { id: p.id, status: p.status, maintenance: !p.maintenance, maintenance_msg: f.maintenance_msg } })}><Wrench size={14} />{p.maintenance ? "Maintenance ON" : "Maintenance"}</button>
        <button className="btn btn-ghost btn-sm" onClick={() => setEdit(true)}>Edit</button>
        <button className="btn btn-ghost btn-sm" disabled={busy} onClick={async () => { const d = await run("/api/dashboard/project", { action: "rotate", data: { id: p.id } }, { confirm: "Rotate the API key? The old key stops working immediately." }); if (d?.key) setKey(d.key); }}><KeyRound size={14} />Rotate key</button>
        <button className="btn btn-danger btn-sm" disabled={busy} onClick={async () => { if (await run("/api/dashboard/project", { action: "delete", data: { id: p.id } }, { confirm: `Delete “${p.name}” and all its analytics?`, refresh: false })) router.replace("/dashboard/projects"); }}><Trash2 size={14} /></button>
      </div>
      <div className="mt-3 space-y-2"><Alert>{error}</Alert><Alert kind="ok">{msg}</Alert></div>
      <Modal open={!!key} onClose={() => setKey("")} title="New API key"><KeyBox origin={origin} keyRaw={key} /></Modal>
      <Modal open={edit} onClose={() => setEdit(false)} title="Edit project"><form className="space-y-3" onSubmit={async (e) => { e.preventDefault(); if (await run("/api/dashboard/project", { action: "save", data: { id: p.id, ...f, status: p.status, maintenance: p.maintenance } })) setEdit(false); }}>
        <Field label="Domain / subdomain / URL"><input className="input" required value={f.url} onChange={(e) => setF({ ...f, url: e.target.value })} /></Field><Field label="Name"><input className="input" value={f.name} onChange={(e) => setF({ ...f, name: e.target.value })} /></Field>
        <Field label="Maintenance message"><input className="input" value={f.maintenance_msg} onChange={(e) => setF({ ...f, maintenance_msg: e.target.value })} /></Field><Field label="Notes"><input className="input" value={f.notes} onChange={(e) => setF({ ...f, notes: e.target.value })} /></Field>
        <Alert>{error}</Alert><button className="btn btn-primary w-full" disabled={busy}>Save</button></form></Modal>
    </div>
  );
}
export const OpenLink = ({ url }: { url: string }) => <a href={url} target="_blank" rel="noopener noreferrer nofollow" className="inline-flex items-center gap-1 text-sm text-brand hover:underline">{url.replace(/^https?:\/\//, "")}<ExternalLink size={12} /></a>;