"use client";

import Link from "next/link";
import { useMemo, useState } from "react";
import type { FacilityDetail, OperatorSummary, SearchResponse } from "@dci/core";
import { FACILITY_STATUSES, FACILITY_TYPES, GEO_PRECISIONS } from "@dci/core";
import { Badge, Button, ConfidenceBadge, EmptyState, PrecisionBadge, SkeletonBlock, StatusBadge } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { DASH, fmtDateTimeUtc, fmtValue, placeLine } from "@/lib/format";
import { PRECISION_LABEL, STATUS_LABEL, TYPE_LABEL } from "@/lib/labels";
import { routes } from "@/lib/routes";
import { adminFetch, type FacilityPatch, type FacilityPatchResult } from "@/lib/admin-api";
import { useDebounced } from "@/lib/hooks";
import { Checkbox, ErrorNote, Field, Input, KV, Mono, Panel, Select, Textarea } from "./primitives";
import { AdminPageHeader } from "./shell";
import { useToast } from "./toast";
import { useAdminMutation, useAdminQuery } from "./use-admin-query";

interface FormState {
  name: string;
  status: string;
  facility_type: string;
  lat: string;
  lng: string;
  geo_precision: string;
  it_capacity_mw: string;
  total_power_mw: string;
  planned_power_mw: string;
  mw_is_estimate: boolean;
  opened_on: string;
  operator_id: string;
  operator_name: string;
  is_ai: boolean;
  is_hyperscale: boolean;
  description: string;
  note: string;
}

function fromDetail(f: FacilityDetail): FormState {
  return {
    name: f.name,
    status: f.status,
    facility_type: f.facilityType,
    lat: f.lat != null ? String(f.lat) : "",
    lng: f.lng != null ? String(f.lng) : "",
    geo_precision: f.geoPrecision,
    it_capacity_mw: f.itCapacityMw != null ? String(f.itCapacityMw) : "",
    total_power_mw: f.totalPowerMw != null ? String(f.totalPowerMw) : "",
    planned_power_mw: f.plannedPowerMw != null ? String(f.plannedPowerMw) : "",
    mw_is_estimate: f.mwIsEstimate ?? false,
    opened_on: f.openedOn ?? "",
    operator_id: f.operator?.id ?? "",
    operator_name: f.operator?.name ?? "",
    is_ai: f.isAi,
    is_hyperscale: f.isHyperscale,
    description: f.description ?? "",
    note: "",
  };
}

const numOrNull = (s: string): number | null | "bad" => {
  if (s.trim() === "") return null;
  const n = Number(s);
  return Number.isFinite(n) ? n : "bad";
};

/** Build the PATCH body from the diff between the initial and the current form. Returns validation errors per field. */
function buildPatch(init: FormState, cur: FormState): { patch: FacilityPatch; errors: Record<string, string> } {
  const patch: FacilityPatch = {};
  const errors: Record<string, string> = {};
  if (cur.name !== init.name) {
    if (cur.name.trim().length < 2) errors.name = "at least 2 characters";
    else patch.name = cur.name.trim();
  }
  if (cur.status !== init.status) patch.status = cur.status;
  if (cur.facility_type !== init.facility_type) patch.facility_type = cur.facility_type;
  const lat = numOrNull(cur.lat);
  const lng = numOrNull(cur.lng);
  if (lat === "bad") errors.lat = "not a number";
  if (lng === "bad") errors.lng = "not a number";
  if (lat !== "bad" && lng !== "bad" && (cur.lat !== init.lat || cur.lng !== init.lng)) {
    if ((lat == null) !== (lng == null)) errors.lat = "lat and lng must be set together";
    else if (lat != null && (lat < -90 || lat > 90)) errors.lat = "−90 … 90";
    else if (lng != null && (lng < -180 || lng > 180)) errors.lng = "−180 … 180";
    else {
      patch.lat = lat;
      patch.lng = lng;
    }
  }
  if (cur.geo_precision !== init.geo_precision || (patch.lat != null && cur.geo_precision === "exact")) patch.geo_precision = cur.geo_precision;
  for (const k of ["it_capacity_mw", "total_power_mw", "planned_power_mw"] as const) {
    if (cur[k] === init[k]) continue;
    const v = numOrNull(cur[k]);
    if (v === "bad") errors[k] = "not a number";
    else if (v != null && v <= 0) errors[k] = "must be positive";
    else if (v != null && v > (k === "planned_power_mw" ? 20000 : 10000)) errors[k] = "too large";
    else patch[k] = v;
  }
  if (cur.mw_is_estimate !== init.mw_is_estimate || (cur.mw_is_estimate && (patch.it_capacity_mw !== undefined || patch.total_power_mw !== undefined || patch.planned_power_mw !== undefined))) patch.mw_is_estimate = cur.mw_is_estimate;
  if (cur.opened_on !== init.opened_on) {
    const v = cur.opened_on.trim();
    if (v && !/^\d{4}(-\d{2}(-\d{2})?|-[QH]\d)?$/.test(v)) errors.opened_on = "YYYY, YYYY-MM, YYYY-MM-DD, YYYY-Qn or YYYY-Hn";
    else patch.opened_on = v || null;
  }
  if (cur.operator_id !== init.operator_id) patch.operator_id = cur.operator_id || null;
  if (cur.is_ai !== init.is_ai) patch.is_ai = cur.is_ai;
  if (cur.is_hyperscale !== init.is_hyperscale) patch.is_hyperscale = cur.is_hyperscale;
  if (cur.description !== init.description) patch.description = cur.description.trim() || null;
  if (cur.note.trim()) patch.note = cur.note.trim();
  return { patch, errors };
}

function OperatorPicker({ value, name, onPick }: { value: string; name: string; onPick: (id: string, name: string) => void }) {
  const [q, setQ] = useState("");
  const dq = useDebounced(q, 250);
  const res = useAdminQuery<OperatorSummary[]>(dq.trim().length >= 2 ? "v1/operators" : null, { query: { q: dq.trim(), per_page: 8 } });
  return (
    <div className="space-y-1.5">
      <div className="flex items-center gap-2">
        {value ? (
          <Badge tone="accent" size="sm">
            {name || value}
          </Badge>
        ) : (
          <span className="text-[12.5px] text-ink-4">no operator</span>
        )}
        {value && (
          <Button size="xs" variant="ghost" onClick={() => onPick("", "")}>
            clear
          </Button>
        )}
      </div>
      <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search operators…" />
      {dq.trim().length >= 2 && (
        <ul className="max-h-48 overflow-auto rounded-xs border border-hair bg-surface text-[12.5px]">
          {res.loading && <li className="px-2.5 py-1.5 text-ink-4">Searching…</li>}
          {res.data?.map((o) => (
            <li key={o.id}>
              <button type="button" onClick={() => { onPick(o.id, o.name); setQ(""); }} className={cn("flex w-full items-center justify-between gap-2 px-2.5 py-1.5 text-left hover:bg-surface-2", o.id === value && "bg-surface-2")}>
                <span className="truncate text-ink">{o.name}</span>
                <span className="shrink-0 text-ink-4">
                  {o.kind ?? ""} · {o.facilityCount} fac. · <Mono>{o.id}</Mono>
                </span>
              </button>
            </li>
          ))}
          {res.data && res.data.length === 0 && <li className="px-2.5 py-1.5 text-ink-4">No operator matches.</li>}
        </ul>
      )}
    </div>
  );
}

function MergePicker({ facilityId, onMerged }: { facilityId: string; onMerged: (survivor: string) => void }) {
  const [q, setQ] = useState("");
  const dq = useDebounced(q, 250);
  const res = useAdminQuery<SearchResponse>(dq.trim().length >= 2 ? "v1/search" : null, { query: { q: dq.trim() } });
  const [target, setTarget] = useState<{ id: string; slug: string; title: string; subtitle: string | null } | null>(null);
  const { busy, run } = useAdminMutation();
  const toast = useToast();
  const hits = (res.data?.hits ?? []).filter((h) => h.type === "facility" && h.id !== facilityId).slice(0, 8);
  const merge = async () => {
    if (!target) return;
    if (!window.confirm(`Merge this facility INTO "${target.title}"? Aliases, provenance, tenants, keys, projects and events move to the survivor; this record becomes a redirect. This cannot be undone from the console.`)) return;
    const r = await run<{ survivor?: string; into?: string; merged?: string; [k: string]: unknown }>("merge", `facilities/${encodeURIComponent(facilityId)}/merge`, { body: { into: target.id } });
    if (r.ok) {
      toast({ tone: "ok", title: "Merged", description: `→ ${target.title}` });
      onMerged(target.id);
    } else toast({ tone: "danger", title: "Merge failed", description: r.error });
  };
  return (
    <div className="space-y-2">
      <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search the surviving facility…" />
      {dq.trim().length >= 2 && !target && (
        <ul className="max-h-48 overflow-auto rounded-xs border border-hair bg-surface text-[12.5px]">
          {res.loading && <li className="px-2.5 py-1.5 text-ink-4">Searching…</li>}
          {hits.map((h) => (
            <li key={h.id}>
              <button type="button" onClick={() => setTarget({ id: h.id, slug: h.slug, title: h.title, subtitle: h.subtitle })} className="flex w-full items-center justify-between gap-2 px-2.5 py-1.5 text-left hover:bg-surface-2">
                <span className="truncate text-ink">{h.title}</span>
                <span className="shrink-0 truncate text-ink-4">{h.subtitle}</span>
              </button>
            </li>
          ))}
          {res.data && hits.length === 0 && <li className="px-2.5 py-1.5 text-ink-4">No other facility matches.</li>}
        </ul>
      )}
      {target && (
        <div className="flex flex-wrap items-center gap-2 rounded-xs border border-danger/30 bg-danger/5 px-2.5 py-2 text-[12.5px]">
          <span>
            Merge into <strong>{target.title}</strong> <span className="text-ink-3">{target.subtitle}</span> <Mono>{target.id}</Mono>
          </span>
          <Link href={routes.facility(target.slug)} target="_blank" className="text-ink-2 underline">
            view
          </Link>
          <Button size="xs" variant="ghost" onClick={() => setTarget(null)}>
            change
          </Button>
          <Button size="xs" variant="danger" onClick={() => void merge()} disabled={busy !== null}>
            Merge now
          </Button>
        </div>
      )}
    </div>
  );
}

export function FacilityEditView({ id }: { id: string }) {
  const q = useAdminQuery<FacilityDetail>(`v1/datacenters/${encodeURIComponent(id)}`);
  const f = q.data;
  // initial form = derived from the API record; `edits` holds the user's changes (null = untouched)
  const init = useMemo(() => (f ? fromDetail(f) : null), [f]);
  const [edits, setEdits] = useState<FormState | null>(null);
  const form = edits ?? init;
  const [result, setResult] = useState<FacilityPatchResult | null>(null);
  const [savedNote, setSavedNote] = useState<string | null>(null);
  const [serverError, setServerError] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);
  const toast = useToast();
  const { patch, errors } = useMemo(() => (init && form ? buildPatch(init, form) : { patch: {}, errors: {} }), [init, form]);
  const dirty = Object.keys(patch).filter((k) => k !== "note").length > 0;
  const set = <K extends keyof FormState>(k: K, v: FormState[K]) =>
    setEdits((p) => {
      const base = p ?? init;
      return base ? { ...base, [k]: v } : p;
    });

  const save = async () => {
    if (!form || !f) return;
    if (Object.keys(errors).length) return;
    setSaving(true);
    setServerError(null);
    const r = await adminFetch<FacilityPatchResult>(`facilities/${encodeURIComponent(f.id)}`, { method: "PATCH", body: patch });
    setSaving(false);
    if (r.ok) {
      setResult(r.data);
      setSavedNote(patch.note ?? null);
      toast({ tone: "ok", title: r.data.changed.length ? `Saved ${r.data.changed.length} field${r.data.changed.length > 1 ? "s" : ""}` : "No changes", description: r.data.changed.map((c) => c.field).join(", ") || r.data.message });
      setEdits(null);
      if (r.data.facility) q.mutate(() => r.data.facility);
      else void q.refresh();
    } else {
      const details = Array.isArray(r.details) ? (r.details as Array<{ path?: string; message?: string }>).map((d) => `${d.path ?? ""}: ${d.message ?? ""}`).join("; ") : "";
      setServerError(`${r.error}${details ? ` — ${details}` : ""}`);
      toast({ tone: "danger", title: "Save failed", description: r.error });
    }
  };

  if (q.error && !f) {
    return (
      <div>
        <AdminPageHeader eyebrow="Curate" title={<span className="font-mono">{id}</span>} />
        <ErrorNote error={q.status === 404 ? "Facility not found" : q.error} onRetry={() => void q.refresh()} />
      </div>
    );
  }
  if (!f || !form || !init) return <SkeletonBlock className="h-64" />;

  return (
    <div>
      <AdminPageHeader
        eyebrow="Curate facility"
        title={f.name}
        description={
          <span className="inline-flex flex-wrap items-center gap-1.5">
            <StatusBadge status={f.status} size="xs" />
            <PrecisionBadge precision={f.geoPrecision} size="xs" />
            <ConfidenceBadge level={f.confidence} size="xs" />
            <span>{placeLine({ city: f.city, regionName: f.regionName, countryIso2: f.countryIso2, countryName: f.countryName ?? undefined })}</span>
            <Mono className="text-ink-4">{f.id}</Mono>
            <Link href={routes.facility(f.slug)} target="_blank" className="text-ink-2 underline underline-offset-2 hover:text-accent">
              public page
            </Link>
          </span>
        }
        aside={
          <>
            <Button size="sm" variant="ghost" onClick={() => setEdits(null)} disabled={!edits}>
              Reset
            </Button>
            <Button size="sm" variant="primary" onClick={() => void save()} disabled={saving || !dirty || Object.keys(errors).length > 0}>
              {saving ? "Saving…" : dirty ? `Save ${Object.keys(patch).filter((k) => k !== "note").length} change${Object.keys(patch).filter((k) => k !== "note").length > 1 ? "s" : ""}` : "No changes"}
            </Button>
          </>
        }
      />
      <ErrorNote error={serverError} className="mb-3" />
      {result && result.changed.length > 0 && (
        <Panel title="Provenance recorded" description="Each saved field got a src_manual provenance row (method manual, confidence high) and one event was emitted." className="mb-3 border-ok/40">
          <ul className="space-y-1 text-[12.5px]">
            {result.changed.map((c) => (
              <li key={c.field} className="flex flex-wrap items-baseline gap-2">
                <Mono className="text-ink">{c.field}</Mono>
                <span className="text-danger line-through">{fmtValue(c.oldValue)}</span>
                <span>→</span>
                <span className="text-st-operational">{fmtValue(c.newValue)}</span>
              </li>
            ))}
          </ul>
          <p className="mt-2 text-[12px] text-ink-3">
            source <Mono>src_manual</Mono> · url <Mono>https://www.datacenterindex.io/admin/facilities/{result.id}</Mono> ·{" "}
            {savedNote ? <>note “{savedNote}”</> : <span className="text-warn">no note given</span>} · last_verified set to now · confidence raised to high when status or MW changed.
          </p>
        </Panel>
      )}

      <div className="grid gap-3 lg:grid-cols-3">
        <div className="space-y-3 lg:col-span-2">
          <Panel title="Identity">
            <div className="grid gap-3 sm:grid-cols-2">
              <Field label="Name" error={errors.name} className="sm:col-span-2">
                <Input value={form.name} onChange={(e) => set("name", e.target.value)} />
              </Field>
              <Field label="Status">
                <Select value={form.status} onChange={(e) => set("status", e.target.value)}>
                  {FACILITY_STATUSES.map((s) => (
                    <option key={s} value={s}>
                      {STATUS_LABEL[s]}
                    </option>
                  ))}
                </Select>
              </Field>
              <Field label="Type">
                <Select value={form.facility_type} onChange={(e) => set("facility_type", e.target.value)}>
                  {FACILITY_TYPES.map((t) => (
                    <option key={t} value={t}>
                      {TYPE_LABEL[t]}
                    </option>
                  ))}
                </Select>
              </Field>
              <Field label="Operator" className="sm:col-span-2">
                <OperatorPicker value={form.operator_id} name={form.operator_name} onPick={(oid, oname) =>
                    setEdits((p) => {
                      const base = p ?? init;
                      return base ? { ...base, operator_id: oid, operator_name: oname } : p;
                    })
                  } />
              </Field>
              <div className="flex flex-wrap gap-4 sm:col-span-2">
                <Checkbox label="AI infrastructure" checked={form.is_ai} onChange={(e) => set("is_ai", e.target.checked)} />
                <Checkbox label="Hyperscale" checked={form.is_hyperscale} onChange={(e) => set("is_hyperscale", e.target.checked)} />
              </div>
              <Field label="Opened" hint="partial dates allowed: 2024, 2024-06, 2024-Q2" error={errors.opened_on}>
                <Input value={form.opened_on} onChange={(e) => set("opened_on", e.target.value)} placeholder="YYYY-MM" mono />
              </Field>
            </div>
          </Panel>

          <Panel title="Location" description="Hand-entered coordinates default to precision “approximate” unless you pick one. City-level points must never be marked exact.">
            <div className="grid gap-3 sm:grid-cols-3">
              <Field label="Latitude" error={errors.lat}>
                <Input value={form.lat} onChange={(e) => set("lat", e.target.value)} placeholder="45.5017" mono inputMode="decimal" />
              </Field>
              <Field label="Longitude" error={errors.lng}>
                <Input value={form.lng} onChange={(e) => set("lng", e.target.value)} placeholder="-73.5673" mono inputMode="decimal" />
              </Field>
              <Field label="Precision">
                <Select value={form.geo_precision} onChange={(e) => set("geo_precision", e.target.value)}>
                  {GEO_PRECISIONS.map((p) => (
                    <option key={p} value={p}>
                      {PRECISION_LABEL[p]}
                    </option>
                  ))}
                </Select>
              </Field>
            </div>
            {form.lat && form.lng && !errors.lat && !errors.lng && (
              <p className="mt-2 text-[12px] text-ink-3">
                Check on{" "}
                <a className="underline" target="_blank" rel="noopener noreferrer" href={`https://www.openstreetmap.org/?mlat=${form.lat}&mlon=${form.lng}#map=16/${form.lat}/${form.lng}`}>
                  OpenStreetMap
                </a>
                . Address on record: {f.address ?? DASH}
              </p>
            )}
          </Panel>

          <Panel title="Capacity (MW)" description="Leave empty for unknown — never 0. Tick “estimate” when the figure is derived rather than published.">
            <div className="grid gap-3 sm:grid-cols-3">
              <Field label="IT capacity" error={errors.it_capacity_mw}>
                <Input value={form.it_capacity_mw} onChange={(e) => set("it_capacity_mw", e.target.value)} mono inputMode="decimal" placeholder="—" />
              </Field>
              <Field label="Total power" error={errors.total_power_mw}>
                <Input value={form.total_power_mw} onChange={(e) => set("total_power_mw", e.target.value)} mono inputMode="decimal" placeholder="—" />
              </Field>
              <Field label="Planned power" error={errors.planned_power_mw}>
                <Input value={form.planned_power_mw} onChange={(e) => set("planned_power_mw", e.target.value)} mono inputMode="decimal" placeholder="—" />
              </Field>
            </div>
            <Checkbox className="mt-2" label="MW figures are estimates (flag isEstimate on the provenance)" checked={form.mw_is_estimate} onChange={(e) => set("mw_is_estimate", e.target.checked)} />
          </Panel>

          <Panel title="Description">
            <Textarea rows={5} value={form.description} onChange={(e) => set("description", e.target.value)} placeholder="Factual description (no marketing copy). Max 5 000 characters." maxLength={5000} />
          </Panel>

          <Panel title="Curation note" description="Stored on every provenance row and on the event summary — say where the fact comes from.">
            <Textarea rows={2} value={form.note} onChange={(e) => set("note", e.target.value)} placeholder="e.g. Operator press release 2026-05-03 states 48 MW IT at full build" maxLength={500} />
          </Panel>
        </div>

        <div className="space-y-3">
          <Panel title="Current record" description="As served by the public API">
            <KV
              items={[
                { k: "Operator", v: f.operator?.name },
                { k: "Owner", v: f.owner?.name },
                { k: "Campus", v: f.campus?.name },
                { k: "Metro", v: f.metro?.name },
                { k: "Address", v: f.address },
                { k: "Completeness", v: `${f.completeness}%` },
                { k: "Confidence", v: <ConfidenceBadge level={f.confidence} size="xs" /> },
                { k: "Last verified", v: fmtDateTimeUtc(f.lastVerified) },
                { k: "First seen", v: fmtDateTimeUtc(f.firstSeen) },
                { k: "Updated", v: fmtDateTimeUtc(f.updatedAt) },
                { k: "Provenance rows", v: String(f.provenance.length) },
              ]}
            />
          </Panel>
          <Panel title="Field provenance" description="Current source per field" padded={false}>
            {f.provenance.length === 0 ? (
              <EmptyState compact title="No provenance rows" />
            ) : (
              <ul className="max-h-[360px] divide-y divide-hair overflow-auto text-[12px]">
                {f.provenance.map((p, i) => (
                  <li key={i} className="px-3 py-1.5">
                    <div className="flex items-center justify-between gap-2">
                      <Mono className="text-ink">{p.field}</Mono>
                      <ConfidenceBadge level={p.confidence} size="xs" />
                    </div>
                    <div className="truncate text-ink-3">
                      {fmtValue(p.value)}
                      {p.isEstimate && <span className="text-warn"> ≈</span>} · {p.sourceName}
                      {p.method ? ` · ${p.method}` : ""}
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </Panel>
          <Panel title="Merge into another facility" description="Use when this record duplicates an existing one. The other facility survives." className="border-danger/30">
            <MergePicker facilityId={f.id} onMerged={() => { setEdits(null); void q.refresh(); }} />
          </Panel>
        </div>
      </div>
    </div>
  );
}