"use client";

import type { ExploreQuery, ExploreResponse } from "@dci/core";
import { CONFIDENCE_LEVELS, FACILITY_STATUSES, FACILITY_TYPES, GEO_PRECISIONS, PIPELINE_STATUSES, PROJECT_CLASSES } from "@dci/core";
import { SlidersHorizontal } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState, type ReactNode } from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/components/ui/cn";
import { ToggleChip } from "@/components/ui/filter-chips";
import { SegmentedControl } from "@/components/ui/segmented";
import { Sheet } from "@/components/ui/sheet";
import { AI_FILTERS, countExploreFilters, exploreHref, toggleCsv } from "@/lib/explore-query";
import { fmtInt } from "@/lib/format";
import { CONFIDENCE_SHORT, PRECISION_SHORT, STATUS_LABEL, TYPE_LABEL } from "@/lib/labels";

const PROJECT_STATUSES = [...PIPELINE_STATUSES, "operational", "expansion", "cancelled"] as const;

const CLASS_LABEL: Record<string, string> = {
  NEW_BUILD: "New build",
  EXPANSION: "Expansion",
  CONSTRUCTION_START: "Construction start",
  PERMIT: "Permit",
  LAND_ACQUISITION: "Land acquisition",
  GRID_CONNECTION: "Grid connection",
  POWER_AGREEMENT: "Power agreement",
  FINANCING: "Financing",
  ACQUISITION: "Acquisition",
  PARTNERSHIP: "Partnership",
  CUSTOMER_AGREEMENT: "Customer agreement",
  EXECUTIVE_APPOINTMENT: "Executive appointment",
  SUSTAINABILITY: "Sustainability",
  PRODUCT_NEWS: "Product news",
  GENERAL_COMPANY_NEWS: "Company news",
  UNKNOWN: "Unknown",
};

const AI_LABEL: Record<(typeof AI_FILTERS)[number], string> = { any: "Any", confirmed: "Confirmed", likely: "≥ Likely", associated: "≥ Associated" };

const inputCls = "h-10 w-full min-w-0 rounded-sm border border-hair-2 bg-surface px-2.5 text-[13px] text-ink outline-none focus:border-ink sm:h-9";

function Field({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) {
  return (
    <label className="block min-w-0">
      <span className="label-caps mb-1 block">{label}</span>
      {children}
      {hint && <span className="mt-0.5 block text-[11px] text-ink-4">{hint}</span>}
    </label>
  );
}

function Group({ legend, children }: { legend: string; children: ReactNode }) {
  return (
    <fieldset className="border-t border-hair py-3 first:border-t-0 first:pt-0">
      <legend className="label-caps mb-2">{legend}</legend>
      {children}
    </fieldset>
  );
}

interface Props {
  query: ExploreQuery;
  facets: ExploreResponse["facets"] | null;
}

/**
 * Structured query builder (URL-as-state). Desktop: inline left column; mobile: a Filters button opening a sheet.
 * Chips apply immediately; text/number inputs apply on blur / Enter (and via the sheet's Apply).
 */
export function QueryBuilder({ query, facets }: Props) {
  return (
    <>
      <div className="hidden lg:block">
        <Form query={query} facets={facets} />
      </div>
      <MobileFilters query={query} facets={facets} />
    </>
  );
}

function MobileFilters({ query, facets }: Props) {
  const [open, setOpen] = useState(false);
  const active = countExploreFilters(query);
  return (
    <div className="lg:hidden">
      <Button size="sm" variant={active ? "primary" : "secondary"} onClick={() => setOpen(true)} aria-haspopup="dialog">
        <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>
      <Sheet open={open} onClose={() => setOpen(false)} title="Build a query" description="Every field maps to a URL parameter — the address bar is the saved view." heightVh={86}>
        <Form query={query} facets={facets} onNavigate={() => setOpen(false)} />
      </Sheet>
    </div>
  );
}

function Form({ query, facets, onNavigate }: Props & { onNavigate?: () => void }) {
  const router = useRouter();
  const isProjects = query.entity === "projects";
  const [draft, setDraft] = useState<ExploreQuery>(query);
  const [synced, setSynced] = useState(query);
  if (synced !== query) {
    setSynced(query);
    setDraft(query);
  }

  const go = (patch: Partial<ExploreQuery> & Record<string, unknown>) => {
    router.replace(exploreHref(query, { ...patch, page: undefined }), { scroll: false });
    onNavigate?.();
  };
  const commit = () => go({ ...draft });
  const csvOn = (key: keyof ExploreQuery, member: string) => ((draft[key] as string | undefined) ?? "").split(",").includes(member);
  const flip = (key: keyof ExploreQuery, member: string) => go({ [key]: toggleCsv(query[key] as string | undefined, member) });
  const onKey = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      e.preventDefault();
      commit();
    }
  };
  const setNum = (key: keyof ExploreQuery) => (e: React.ChangeEvent<HTMLInputElement>) => {
    const v = e.target.value;
    setDraft({ ...draft, [key]: v === "" ? undefined : Number(v) });
  };
  const statuses = isProjects ? PROJECT_STATUSES : FACILITY_STATUSES;
  const countryFacet = (facets?.country ?? []).slice(0, 12);
  const operatorFacet = (facets?.operator ?? []).slice(0, 8);

  return (
    <form
      className="flex flex-col"
      onSubmit={(e) => {
        e.preventDefault();
        commit();
      }}
    >
      <Group legend="Entity">
        <SegmentedControl
          label="Entity"
          value={isProjects ? "projects" : "facilities"}
          onChange={(v) => {
            router.replace(exploreHref({ entity: v as ExploreQuery["entity"], view: query.view, q: query.q, country: query.country, operator: query.operator, metro: query.metro }), { scroll: false });
            onNavigate?.();
          }}
          options={[
            { value: "facilities", label: "Facilities" },
            { value: "projects", label: "Projects" },
          ]}
          className="w-full [&>*]:flex-1"
        />
      </Group>

      <Group legend="Search">
        <input value={draft.q ?? ""} onChange={(e) => setDraft({ ...draft, q: e.target.value || undefined })} onBlur={commit} onKeyDown={onKey} placeholder={isProjects ? "Project, operator or city" : "Facility, operator or city"} className={inputCls} aria-label="Free text" />
      </Group>

      <Group legend="Status">
        <div className="flex flex-wrap gap-1.5">
          {statuses.map((s) => (
            <ToggleChip key={s} active={csvOn("status", s)} onClick={() => flip("status", s)} className="h-9 text-[12px] sm:h-7">
              {STATUS_LABEL[s]}
            </ToggleChip>
          ))}
        </div>
      </Group>

      <Group legend="Place">
        <div className="grid gap-2 sm:grid-cols-2">
          <Field label="Country (ISO2, comma list)">
            <input value={draft.country ?? ""} onChange={(e) => setDraft({ ...draft, country: e.target.value.toUpperCase().replace(/[^A-Z,]/g, "") || undefined })} onBlur={commit} onKeyDown={onKey} placeholder="US,CA" className={cn(inputCls, "figure")} />
          </Field>
          <Field label="Market slug">
            <input value={draft.metro ?? ""} onChange={(e) => setDraft({ ...draft, metro: e.target.value.trim() || undefined })} onBlur={commit} onKeyDown={onKey} placeholder="northern-virginia" className={cn(inputCls, "figure")} />
          </Field>
        </div>
        {countryFacet.length > 0 && (
          <div className="mt-2 flex flex-wrap gap-1.5" aria-label="Countries in the current result">
            {countryFacet.map((c) => (
              <ToggleChip key={c.key} active={csvOn("country", c.key)} onClick={() => flip("country", c.key)} className="h-9 text-[12px] sm:h-7">
                {c.name} <span className="figure text-[11px] opacity-70">{fmtInt(c.count)}</span>
              </ToggleChip>
            ))}
          </div>
        )}
      </Group>

      <Group legend="Operator">
        <input value={draft.operator ?? ""} onChange={(e) => setDraft({ ...draft, operator: e.target.value.trim() || undefined })} onBlur={commit} onKeyDown={onKey} placeholder="equinix" className={cn(inputCls, "figure")} aria-label="Operator slug" />
        {operatorFacet.length > 0 && (
          <div className="mt-2 flex flex-wrap gap-1.5" aria-label="Operators in the current result">
            {operatorFacet.map((o) => (
              <ToggleChip key={o.key} active={query.operator === o.key} onClick={() => go({ operator: query.operator === o.key ? undefined : o.key })} className="h-9 text-[12px] sm:h-7">
                {o.name} <span className="figure text-[11px] opacity-70">{fmtInt(o.count)}</span>
              </ToggleChip>
            ))}
          </div>
        )}
      </Group>

      {!isProjects && (
        <Group legend="Facility type">
          <div className="flex flex-wrap gap-1.5">
            {FACILITY_TYPES.map((t) => (
              <ToggleChip key={t} active={csvOn("type", t)} onClick={() => flip("type", t)} className="h-9 text-[12px] sm:h-7">
                {TYPE_LABEL[t]}
              </ToggleChip>
            ))}
          </div>
        </Group>
      )}

      <Group legend="Capacity (published MW)">
        <div className="grid grid-cols-2 gap-2">
          <Field label="Min MW">
            <input type="number" min={0} inputMode="decimal" value={draft.min_mw ?? ""} onChange={setNum("min_mw")} onBlur={commit} onKeyDown={onKey} className={cn(inputCls, "figure")} />
          </Field>
          <Field label="Max MW">
            <input type="number" min={0} inputMode="decimal" value={draft.max_mw ?? ""} onChange={setNum("max_mw")} onBlur={commit} onKeyDown={onKey} className={cn(inputCls, "figure")} />
          </Field>
        </div>
        <div className="mt-2 flex flex-wrap gap-1.5">
          <ToggleChip active={query.has_mw === true} onClick={() => go({ has_mw: query.has_mw ? undefined : true })} className="h-9 text-[12px] sm:h-7">
            Known MW only
          </ToggleChip>
          {!isProjects && (
            <ToggleChip active={query.hyperscale === true} onClick={() => go({ hyperscale: query.hyperscale ? undefined : true })} className="h-9 text-[12px] sm:h-7">
              Hyperscale
            </ToggleChip>
          )}
        </div>
      </Group>

      <Group legend="AI evidence">
        <SegmentedControl label="AI evidence" value={query.ai ?? "any"} onChange={(v) => go({ ai: v === "any" ? undefined : (v as ExploreQuery["ai"]) })} options={AI_FILTERS.map((a) => ({ value: a, label: AI_LABEL[a] }))} className="w-full [&>*]:flex-1" size="xs" />
        <p className="mt-1 text-[11px] text-ink-4">Confirmed ⊂ likely ⊂ associated; “associated” alone is a tenant / customer mention, not AI infrastructure.</p>
      </Group>

      {isProjects ? (
        <>
          <Group legend="Timing">
            <div className="grid grid-cols-2 gap-2">
              <Field label="Expected after (year)">
                <input type="number" min={2000} max={2100} inputMode="numeric" value={draft.expected_after ?? ""} onChange={setNum("expected_after")} onBlur={commit} onKeyDown={onKey} className={cn(inputCls, "figure")} />
              </Field>
              <Field label="Expected before (year)">
                <input type="number" min={2000} max={2100} inputMode="numeric" value={draft.expected_before ?? ""} onChange={setNum("expected_before")} onBlur={commit} onKeyDown={onKey} className={cn(inputCls, "figure")} />
              </Field>
            </div>
            <div className="mt-2">
              <Field label="Announced since">
                <input type="date" value={draft.announced_since ?? ""} onChange={(e) => setDraft({ ...draft, announced_since: e.target.value || undefined })} onBlur={commit} className={cn(inputCls, "figure")} />
              </Field>
            </div>
          </Group>
          <Group legend="Announcement class">
            <div className="flex flex-wrap gap-1.5">
              {PROJECT_CLASSES.map((c) => (
                <ToggleChip key={c} active={csvOn("project_class", c)} onClick={() => flip("project_class", c)} className="h-9 text-[12px] sm:h-7">
                  {CLASS_LABEL[c] ?? c}
                </ToggleChip>
              ))}
            </div>
          </Group>
        </>
      ) : (
        <>
          <Group legend="Opened">
            <div className="grid grid-cols-2 gap-2">
              <Field label="From (year)">
                <input type="number" min={1950} max={2100} inputMode="numeric" value={draft.opened_from ?? ""} onChange={setNum("opened_from")} onBlur={commit} onKeyDown={onKey} className={cn(inputCls, "figure")} />
              </Field>
              <Field label="To (year)">
                <input type="number" min={1950} max={2100} inputMode="numeric" value={draft.opened_to ?? ""} onChange={setNum("opened_to")} onBlur={commit} onKeyDown={onKey} className={cn(inputCls, "figure")} />
              </Field>
            </div>
            <p className="mt-1 text-[11px] text-ink-4">Facilities without a published opening date never match a year range.</p>
          </Group>
          <Group legend="Location precision">
            <div className="flex flex-wrap gap-1.5">
              {GEO_PRECISIONS.map((p) => (
                <ToggleChip key={p} active={csvOn("location_precision", p)} onClick={() => flip("location_precision", p)} className="h-9 text-[12px] sm:h-7">
                  {PRECISION_SHORT[p]}
                </ToggleChip>
              ))}
            </div>
          </Group>
        </>
      )}

      <Group legend="Confidence">
        <div className="flex flex-wrap gap-1.5">
          {CONFIDENCE_LEVELS.map((c) => (
            <ToggleChip key={c} active={csvOn("confidence", c)} onClick={() => flip("confidence", c)} className="h-9 text-[12px] sm:h-7">
              {CONFIDENCE_SHORT[c]}
            </ToggleChip>
          ))}
        </div>
      </Group>

      <div className="flex items-center justify-between gap-2 border-t border-hair pt-3">
        <Button variant="ghost" size="sm" type="button" onClick={() => go({ status: undefined, country: undefined, metro: undefined, operator: undefined, type: undefined, min_mw: undefined, max_mw: undefined, ai: undefined, hyperscale: undefined, expected_before: undefined, expected_after: undefined, opened_from: undefined, opened_to: undefined, announced_since: undefined, confidence: undefined, location_precision: undefined, has_mw: undefined, project_class: undefined, q: undefined })}>
          Reset
        </Button>
        <Button variant="primary" size="sm" type="submit">
          Apply
        </Button>
      </div>
    </form>
  );
}