"use client";

import type { FacilityFilters, FacilityStatus, FacilityType, SearchResponse } from "@dci/core";
import { FACILITY_TYPES } from "@dci/core";
import { SlidersHorizontal } from "lucide-react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/components/ui/cn";
import { FilterChips, ToggleChip, type Chip } from "@/components/ui/filter-chips";
import { SearchInput } from "@/components/ui/search-input";
import { Sheet } from "@/components/ui/sheet";
import { StatusDot } from "@/components/ui/status-dot";
import { apiGet, clientApiBase } from "@/lib/api";
import { useDebounced } from "@/lib/hooks";
import { STATUS_LABEL, STATUS_ORDER, TYPE_LABEL } from "@/lib/labels";
import { countActiveFilters, csv, describeFilters, filtersToQuery, parseFilters, removeFilter } from "@/lib/query";

/* ------------------------------------------------------------------------------------------
   Shared facility filter set (map, /datacenters, entity pages). Two pieces:
   - <FacilityFilterFields> : the controls, driven by a (filters, onChange) pair (used inline in
     the map's desktop panel and inside the sheet).
   - <FacilityFilterBar>    : URL-synced chips + "Filters" button opening a Sheet (bottom on mobile).
   ------------------------------------------------------------------------------------------ */

export const MW_MAX = 500;
const YEAR_MIN = 1990;
const YEAR_MAX = new Date().getUTCFullYear() + 8;

export interface FilterFieldsProps {
  value: FacilityFilters;
  onChange: (next: FacilityFilters) => void;
  /** hide some groups (e.g. cloud toggle) */
  hide?: Array<"status" | "type" | "operator" | "country" | "mw" | "years" | "flags" | "cloud" | "q">;
  className?: string;
  /** extra non-facility toggles (map: cloud regions layer) */
  extra?: ReactNode;
}

function Group({ label, children, hint }: { label: string; children: ReactNode; hint?: string }) {
  return (
    <fieldset className="border-t border-hair py-3 first:border-t-0 first:pt-0">
      <legend className="label-caps float-left mb-2 w-full">{label}</legend>
      <div className="clear-both">
        {children}
        {hint && <p className="mt-1.5 text-[11px] text-ink-4">{hint}</p>}
      </div>
    </fieldset>
  );
}

const TYPE_CHOICES: FacilityType[] = FACILITY_TYPES.filter((t) => t !== "unknown");

function RangeInputs({ lo, hi, min, max, step = 1, unit, onChange, labels }: { lo: number | undefined; hi: number | undefined; min: number; max: number; step?: number; unit?: string; onChange: (lo: number | undefined, hi: number | undefined) => void; labels: [string, string] }) {
  const l = lo ?? min;
  const h = hi ?? max;
  return (
    <div>
      <div className="flex items-center gap-2">
        <label className="flex-1">
          <span className="sr-only">{labels[0]}</span>
          <input type="number" inputMode="numeric" min={min} max={max} step={step} value={lo ?? ""} placeholder={String(min)} onChange={(e) => onChange(e.target.value === "" ? undefined : Number(e.target.value), hi)} className="figure h-9 w-full rounded-sm border border-hair-2 bg-surface px-2 text-[13px] outline-none focus:border-ink" />
        </label>
        <span className="text-ink-4">–</span>
        <label className="flex-1">
          <span className="sr-only">{labels[1]}</span>
          <input type="number" inputMode="numeric" min={min} max={max} step={step} value={hi ?? ""} placeholder={`${max}${unit === "MW" ? "+" : ""}`} onChange={(e) => onChange(lo, e.target.value === "" ? undefined : Number(e.target.value))} className="figure h-9 w-full rounded-sm border border-hair-2 bg-surface px-2 text-[13px] outline-none focus:border-ink" />
        </label>
        {unit && <span className="w-8 text-[12px] text-ink-3">{unit}</span>}
      </div>
      <div className="relative mt-3 h-6">
        <input type="range" aria-label={labels[0]} min={min} max={max} step={step} value={l} onChange={(e) => onChange(Math.min(Number(e.target.value), h), hi)} className="dual-range absolute inset-x-0 top-0 h-6 w-full appearance-none bg-transparent" />
        <input type="range" aria-label={labels[1]} min={min} max={max} step={step} value={h} onChange={(e) => onChange(lo, Math.max(Number(e.target.value), l))} className="dual-range absolute inset-x-0 top-0 h-6 w-full appearance-none bg-transparent" />
        <div className="pointer-events-none absolute inset-x-0 top-[11px] h-[2px] bg-surface-3">
          <div className="absolute h-full bg-ink" style={{ left: `${((l - min) / (max - min)) * 100}%`, right: `${100 - ((h - min) / (max - min)) * 100}%` }} />
        </div>
      </div>
    </div>
  );
}

/** Async operator search-select backed by /search (type=operator). */
function OperatorSelect({ value, onChange }: { value: string | undefined; onChange: (slug: string | undefined, name?: string) => void }) {
  const [q, setQ] = useState("");
  const dq = useDebounced(q.trim(), 180);
  const [hits, setHits] = useState<Array<{ slug: string; title: string; subtitle: string | null }>>([]);
  useEffect(() => {
    if (dq.length < 2) return;
    const ctrl = new AbortController();
    apiGet<SearchResponse>("/search", { q: dq, type: "operator" }, { base: clientApiBase(), signal: ctrl.signal, timeoutMs: 5000 }).then((r) => {
      if (!ctrl.signal.aborted && r.ok) setHits(r.data.hits.filter((h) => h.type === "operator").map((h) => ({ slug: h.slug, title: h.title, subtitle: h.subtitle })));
    });
    return () => ctrl.abort();
  }, [dq]);
  return (
    <div>
      {value ? (
        <div className="flex items-center justify-between gap-2 rounded-sm border border-hair-2 bg-surface-2 px-2.5 py-1.5 text-[13px]">
          <span className="truncate font-medium">{value}</span>
          <button type="button" className="text-[12px] text-ink-3 hover:text-ink" onClick={() => onChange(undefined)}>
            Clear
          </button>
        </div>
      ) : (
        <>
          <SearchInput size="sm" value={q} onChange={setQ} placeholder="Search operators…" aria-label="Operator" />
          {dq.length >= 2 && hits.length > 0 && (
            <ul className="mt-1 max-h-48 overflow-y-auto rounded-sm border border-hair bg-surface">
              {hits.map((h) => (
                <li key={h.slug}>
                  <button
                    type="button"
                    className="flex w-full flex-col px-2.5 py-1.5 text-left hover:bg-surface-2"
                    onClick={() => {
                      onChange(h.slug, h.title);
                      setQ("");
                      setHits([]);
                    }}
                  >
                    <span className="text-[13px]">{h.title}</span>
                    {h.subtitle && <span className="text-[11px] text-ink-3">{h.subtitle}</span>}
                  </button>
                </li>
              ))}
            </ul>
          )}
        </>
      )}
    </div>
  );
}

export function FacilityFilterFields({ value, onChange, hide = [], className, extra }: FilterFieldsProps) {
  const statuses = csv<FacilityStatus>(value.status);
  const types = csv<FacilityType>(value.type);
  const toggleCsv = (key: "status" | "type", member: string) => {
    const cur = csv(value[key]);
    const next = cur.includes(member) ? cur.filter((x) => x !== member) : [...cur, member];
    onChange({ ...value, [key]: next.length ? next.join(",") : undefined, page: undefined });
  };
  const set = (patch: Partial<FacilityFilters>) => onChange({ ...value, ...patch, page: undefined });
  const show = (g: NonNullable<FilterFieldsProps["hide"]>[number]) => !hide.includes(g);

  return (
    <div className={cn("flex flex-col", className)}>
      {show("q") && (
        <Group label="Keyword">
          <SearchInput size="sm" value={value.q ?? ""} onChange={(v) => set({ q: v || undefined })} placeholder="Name, city, alias…" aria-label="Keyword" />
        </Group>
      )}
      {show("status") && (
        <Group label="Status">
          <div className="flex flex-wrap gap-1.5">
            {STATUS_ORDER.filter((s) => s !== "unknown").map((s) => (
              <ToggleChip key={s} active={statuses.includes(s)} onClick={() => toggleCsv("status", s)} dot={<StatusDot status={s} size={7} />}>
                {STATUS_LABEL[s]}
              </ToggleChip>
            ))}
          </div>
        </Group>
      )}
      {show("type") && (
        <Group label="Type">
          <div className="flex flex-wrap gap-1.5">
            {TYPE_CHOICES.map((t) => (
              <ToggleChip key={t} active={types.includes(t)} onClick={() => toggleCsv("type", t)}>
                {TYPE_LABEL[t]}
              </ToggleChip>
            ))}
          </div>
        </Group>
      )}
      {show("flags") && (
        <Group label="Segment">
          <div className="flex flex-wrap gap-1.5">
            <ToggleChip active={!!value.ai} onClick={() => set({ ai: value.ai ? undefined : true })}>
              AI infrastructure
            </ToggleChip>
            <ToggleChip active={!!value.hyperscale} onClick={() => set({ hyperscale: value.hyperscale ? undefined : true })}>
              Hyperscale
            </ToggleChip>
            <ToggleChip active={!!value.colocation} onClick={() => set({ colocation: value.colocation ? undefined : true })}>
              Colocation
            </ToggleChip>
            <ToggleChip active={!!value.renewable} onClick={() => set({ renewable: value.renewable ? undefined : true })}>
              Renewable claim
            </ToggleChip>
            <ToggleChip active={!!value.has_mw} onClick={() => set({ has_mw: value.has_mw ? undefined : true })}>
              Known MW only
            </ToggleChip>
          </div>
          {extra}
        </Group>
      )}
      {show("operator") && (
        <Group label="Operator">
          <OperatorSelect value={value.operator} onChange={(slug) => set({ operator: slug })} />
        </Group>
      )}
      {show("country") && (
        <Group label="Country" hint="ISO code, e.g. US, DE, JP — comma-separated for several.">
          <input value={value.country ?? ""} onChange={(e) => set({ country: e.target.value.toUpperCase().replace(/[^A-Z,]/g, "") || undefined })} placeholder="US, CA, IE…" aria-label="Country codes" maxLength={29} className="figure h-9 w-full rounded-sm border border-hair-2 bg-surface px-2.5 text-[13px] uppercase outline-none placeholder:normal-case placeholder:text-ink-4 focus:border-ink" />
        </Group>
      )}
      {show("mw") && (
        <Group label="Capacity (MW)" hint="Best known figure (IT, total or planned). 500 = 500 MW and above.">
          <RangeInputs lo={value.min_mw} hi={value.max_mw} min={0} max={MW_MAX} step={5} unit="MW" labels={["Minimum MW", "Maximum MW"]} onChange={(lo, hi) => set({ min_mw: lo, max_mw: hi === MW_MAX ? undefined : hi })} />
        </Group>
      )}
      {show("years") && (
        <Group label="Opening year">
          <RangeInputs lo={value.opened_from} hi={value.opened_to} min={YEAR_MIN} max={YEAR_MAX} labels={["Opened from", "Opened to"]} onChange={(lo, hi) => set({ opened_from: lo === YEAR_MIN ? undefined : lo, opened_to: hi === YEAR_MAX ? undefined : hi })} />
        </Group>
      )}
      {show("cloud") && (
        <Group label="Cloud provider" hint="Provider slug, e.g. aws, microsoft-azure, google-cloud.">
          <input value={value.cloud ?? ""} onChange={(e) => set({ cloud: e.target.value || undefined })} placeholder="aws" aria-label="Cloud provider slug" className="h-9 w-full rounded-sm border border-hair-2 bg-surface px-2.5 text-[13px] outline-none placeholder:text-ink-4 focus:border-ink" />
        </Group>
      )}
    </div>
  );
}

/* ---------------------------------------------------------------- URL-synced bar + sheet */

export interface FacilityFilterBarProps {
  /** path the chips/sheet write to (default: current) */
  basePath?: string;
  total?: number | null;
  hide?: FilterFieldsProps["hide"];
  className?: string;
  /** preserve these params when rewriting the URL (e.g. map view) */
  keep?: string[];
  children?: ReactNode;
}

export function useUrlFilters(basePath?: string, keep: string[] = []) {
  const router = useRouter();
  const pathname = usePathname();
  const sp = useSearchParams();
  const filters = useMemo(() => parseFilters(sp), [sp]);
  const push = useCallback(
    (next: FacilityFilters) => {
      const q = new URLSearchParams(filtersToQuery(next));
      for (const k of keep) {
        const v = sp.get(k);
        if (v !== null) q.set(k, v);
      }
      const s = q.toString();
      router.replace(`${basePath ?? pathname}${s ? `?${s}` : ""}`, { scroll: false });
    },
    [router, pathname, basePath, sp, keep],
  );
  return { filters, push, sp };
}

export function FacilityFilterBar({ basePath, total, hide, className, keep, children }: FacilityFilterBarProps) {
  const { filters, push } = useUrlFilters(basePath, keep);
  const [open, setOpen] = useState(false);
  const [draft, setDraft] = useState<FacilityFilters>(filters);
  const [synced, setSynced] = useState(filters);
  if (synced !== filters) {
    setSynced(filters);
    setDraft(filters);
  }
  const active = countActiveFilters(filters);
  const chips: Chip[] = describeFilters(filters, { status: STATUS_LABEL, type: TYPE_LABEL }).map((c) => ({ key: `${c.key}:${c.member ?? c.value}`, label: c.label, value: c.value, onRemove: () => push(removeFilter(filters, c)) }));

  return (
    <div className={cn("flex flex-col gap-2", className)}>
      <div className="flex items-center gap-2">
        <Button size="sm" variant={active ? "primary" : "secondary"} onClick={() => setOpen(true)} aria-haspopup="dialog" aria-expanded={open}>
          <SlidersHorizontal className="size-3.5" strokeWidth={1.75} />
          Filters
          {active > 0 && <span className="figure ml-0.5 rounded-xs bg-paper/20 px-1 text-[11px]">{active}</span>}
        </Button>
        {children}
        {total !== undefined && total !== null && (
          <span className="figure ml-auto text-[12.5px] text-ink-3" aria-live="polite">
            {new Intl.NumberFormat("en-US").format(total)} {total === 1 ? "facility" : "facilities"}
          </span>
        )}
      </div>
      <FilterChips chips={chips} onReset={() => push({ sort: filters.sort, order: filters.order })} />
      <Sheet
        open={open}
        onClose={() => setOpen(false)}
        title="Filter facilities"
        description={total !== undefined && total !== null ? `${new Intl.NumberFormat("en-US").format(total)} matching` : undefined}
        heightVh={82}
        footer={
          <div className="flex items-center justify-between gap-2">
            <Button variant="ghost" size="md" onClick={() => setDraft({ sort: filters.sort, order: filters.order })}>
              Reset
            </Button>
            <Button
              variant="primary"
              size="md"
              onClick={() => {
                push(draft);
                setOpen(false);
              }}
            >
              Apply filters
            </Button>
          </div>
        }
      >
        <FacilityFilterFields value={draft} onChange={setDraft} hide={hide} />
      </Sheet>
    </div>
  );
}