"use client";

import type { DownloadDataset } from "@dci/core";
import { EVENT_TYPES, FACILITY_STATUSES, FACILITY_TYPES, PIPELINE_STATUSES } from "@dci/core";
import { Check, Copy, Download } from "lucide-react";
import { useMemo, useState } from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/components/ui/cn";
import { SegmentedControl } from "@/components/ui/segmented";
import { clientApiBase } from "@/lib/api";
import { EVENT_LABEL, STATUS_LABEL, TYPE_LABEL } from "@/lib/labels";

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";
const FORMAT_LABEL: Record<DownloadDataset["formats"][number], string> = { csv: "CSV", json: "JSON", geojson: "GeoJSON" };

type Values = Record<string, string | boolean>;

function Field({ label, children, className }: { label: string; children: React.ReactNode; className?: string }) {
  return (
    <label className={cn("block min-w-0", className)}>
      <span className="label-caps mb-1 block">{label}</span>
      {children}
    </label>
  );
}

/** Builds the /api/v1/download/:key URL from the dataset's own filter list; nothing else is offered. */
export function DatasetForm({ dataset }: { dataset: DownloadDataset }) {
  const [format, setFormat] = useState<DownloadDataset["formats"][number]>(dataset.formats[0] ?? "csv");
  const [values, setValues] = useState<Values>({});
  const [copied, setCopied] = useState(false);
  const base = useMemo(() => (process.env.NEXT_PUBLIC_API_URL ? `${process.env.NEXT_PUBLIC_API_URL.replace(/\/$/, "")}/api/v1` : clientApiBase()), []);

  const url = useMemo(() => {
    const sp = new URLSearchParams();
    if (format !== "csv") sp.set("format", format);
    for (const f of dataset.filters) {
      const v = values[f];
      if (v === undefined || v === "" || v === false) continue;
      sp.set(f, v === true ? "1" : String(v));
    }
    const qs = sp.toString();
    return `${base}/download/${dataset.key}${qs ? `?${qs}` : ""}`;
  }, [base, dataset, format, values]);

  const set = (k: string, v: string | boolean) => setValues((p) => ({ ...p, [k]: v }));
  const copy = async () => {
    try {
      await navigator.clipboard.writeText(url);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    } catch {
      window.prompt("Copy the download URL", url);
    }
  };
  const has = (f: string) => dataset.filters.includes(f);

  return (
    <div className="flex flex-col gap-3">
      {dataset.filters.length > 0 ? (
        <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
          {has("country") && (
            <Field label="Country (ISO2, comma list)">
              <input value={(values.country as string) ?? ""} onChange={(e) => set("country", e.target.value.toUpperCase().replace(/[^A-Z,]/g, ""))} placeholder="US,CA" className={cn(inputCls, "figure")} />
            </Field>
          )}
          {has("status") && (
            <Field label="Status">
              <select value={(values.status as string) ?? ""} onChange={(e) => set("status", e.target.value)} className={inputCls}>
                <option value="">Any status</option>
                {FACILITY_STATUSES.map((s) => (
                  <option key={s} value={s}>
                    {STATUS_LABEL[s]}
                  </option>
                ))}
              </select>
            </Field>
          )}
          {has("project_status") && (
            <Field label="Project status">
              <select value={(values.project_status as string) ?? ""} onChange={(e) => set("project_status", e.target.value)} className={inputCls}>
                <option value="">Any status</option>
                {[...PIPELINE_STATUSES, "operational", "expansion", "cancelled"].map((s) => (
                  <option key={s} value={s}>
                    {STATUS_LABEL[s as keyof typeof STATUS_LABEL]}
                  </option>
                ))}
              </select>
            </Field>
          )}
          {has("type") && (
            <Field label="Facility type">
              <select value={(values.type as string) ?? ""} onChange={(e) => set("type", e.target.value)} className={inputCls}>
                <option value="">Any type</option>
                {FACILITY_TYPES.map((t) => (
                  <option key={t} value={t}>
                    {TYPE_LABEL[t]}
                  </option>
                ))}
              </select>
            </Field>
          )}
          {has("event_type") && (
            <Field label="Event type">
              <select value={(values.event_type as string) ?? ""} onChange={(e) => set("event_type", e.target.value)} className={inputCls}>
                <option value="">Any type</option>
                {EVENT_TYPES.map((t) => (
                  <option key={t} value={t}>
                    {EVENT_LABEL[t]}
                  </option>
                ))}
              </select>
            </Field>
          )}
          {has("operator") && (
            <Field label="Operator slug">
              <input value={(values.operator as string) ?? ""} onChange={(e) => set("operator", e.target.value.trim())} placeholder="equinix" className={cn(inputCls, "figure")} />
            </Field>
          )}
          {has("metro") && (
            <Field label="Market slug">
              <input value={(values.metro as string) ?? ""} onChange={(e) => set("metro", e.target.value.trim())} placeholder="northern-virginia" className={cn(inputCls, "figure")} />
            </Field>
          )}
          {has("min_mw") && (
            <Field label="Min MW">
              <input type="number" min={0} inputMode="decimal" value={(values.min_mw as string) ?? ""} onChange={(e) => set("min_mw", e.target.value)} className={cn(inputCls, "figure")} />
            </Field>
          )}
          {has("max_mw") && (
            <Field label="Max MW">
              <input type="number" min={0} inputMode="decimal" value={(values.max_mw as string) ?? ""} onChange={(e) => set("max_mw", e.target.value)} className={cn(inputCls, "figure")} />
            </Field>
          )}
          {has("expected_from") && (
            <Field label="Expected from (year)">
              <input type="number" min={2000} max={2100} inputMode="numeric" value={(values.expected_from as string) ?? ""} onChange={(e) => set("expected_from", e.target.value)} className={cn(inputCls, "figure")} />
            </Field>
          )}
          {has("expected_to") && (
            <Field label="Expected to (year)">
              <input type="number" min={2000} max={2100} inputMode="numeric" value={(values.expected_to as string) ?? ""} onChange={(e) => set("expected_to", e.target.value)} className={cn(inputCls, "figure")} />
            </Field>
          )}
          {has("since") && (
            <Field label="Since (date)">
              <input type="date" value={(values.since as string) ?? ""} onChange={(e) => set("since", e.target.value)} className={cn(inputCls, "figure")} />
            </Field>
          )}
          {has("until") && (
            <Field label="Until (date)">
              <input type="date" value={(values.until as string) ?? ""} onChange={(e) => set("until", e.target.value)} className={cn(inputCls, "figure")} />
            </Field>
          )}
          {has("min_significance") && (
            <Field label="Min significance (0–100)">
              <input type="number" min={0} max={100} inputMode="numeric" value={(values.min_significance as string) ?? ""} onChange={(e) => set("min_significance", e.target.value)} className={cn(inputCls, "figure")} />
            </Field>
          )}
          {(has("ai") || has("hyperscale") || has("has_mw")) && (
            <div className="flex flex-wrap items-end gap-3 sm:col-span-2 lg:col-span-3">
              {has("ai") && (
                <label className="inline-flex min-h-10 items-center gap-2 text-[13px] text-ink-2">
                  <input type="checkbox" checked={values.ai === true} onChange={(e) => set("ai", e.target.checked)} className="size-5 accent-[var(--accent)]" /> AI / HPC only
                </label>
              )}
              {has("hyperscale") && (
                <label className="inline-flex min-h-10 items-center gap-2 text-[13px] text-ink-2">
                  <input type="checkbox" checked={values.hyperscale === true} onChange={(e) => set("hyperscale", e.target.checked)} className="size-5 accent-[var(--accent)]" /> Hyperscale only
                </label>
              )}
              {has("has_mw") && (
                <label className="inline-flex min-h-10 items-center gap-2 text-[13px] text-ink-2">
                  <input type="checkbox" checked={values.has_mw === true} onChange={(e) => set("has_mw", e.target.checked)} className="size-5 accent-[var(--accent)]" /> Known MW only
                </label>
              )}
            </div>
          )}
        </div>
      ) : (
        <p className="text-[12.5px] text-ink-3">This dataset has no filters — it is downloaded whole.</p>
      )}

      <div className="flex flex-wrap items-center gap-2">
        <SegmentedControl label="Format" value={format} onChange={(v) => setFormat(v)} options={dataset.formats.map((f) => ({ value: f, label: FORMAT_LABEL[f] }))} />
        <span className="text-[11.5px] text-ink-4">{format === "geojson" ? "FeatureCollection; rows without coordinates are omitted." : format === "json" ? "{ data: rows[], meta } — meta lists excluded sources." : "UTF-8, header row, one record per line."}</span>
      </div>

      <div className="flex flex-col gap-2 sm:flex-row sm:items-stretch">
        <div className="figure min-w-0 flex-1 overflow-x-auto whitespace-nowrap rounded-sm border border-hair bg-surface-2 px-2.5 py-2 text-[12px] text-ink-2" aria-label="Download URL">
          {url}
        </div>
        <div className="flex gap-2">
          <Button size="sm" variant="secondary" onClick={() => void copy()} aria-label="Copy download URL">
            {copied ? <Check className="size-3.5 text-ok" aria-hidden /> : <Copy className="size-3.5" aria-hidden />} {copied ? "Copied" : "Copy"}
          </Button>
          <Button size="sm" variant="primary" href={url} external>
            <Download className="size-3.5" aria-hidden /> Download {FORMAT_LABEL[format]}
          </Button>
        </div>
      </div>
    </div>
  );
}