"use client";

import { Plus, Trash2 } from "lucide-react";
import { useMemo, useState } from "react";
import { Badge, Button } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { Checkbox, Code, ErrorNote, Field, Input, Select, Textarea } from "../primitives";
import { toYaml } from "../yaml";
import { COMMON_FIELDS, configToRule, EXTRACT_KINDS, extractorToConfig, newFieldRule, RULE_TYPES, TRANSFORMS, type DevtoolShared, type FieldRule } from "./state";

export function StepRules({ s }: { s: DevtoolShared }) {
  const { draft, update } = s;
  const ex = draft.extractor;
  const [advanced, setAdvanced] = useState(false);
  const [jsonText, setJsonText] = useState("");
  const [jsonError, setJsonError] = useState<string | null>(null);
  const config = useMemo(() => extractorToConfig(ex, { includeMatch: true }), [ex]);
  const yamlPreview = useMemo(() => toYaml({ extractors: { [ex.name.trim() || ex.kind]: config } }), [config, ex.name, ex.kind]);
  const setEx = (patch: Partial<typeof ex>) => update({ extractor: { ...ex, ...patch }, yamlDirty: draft.yamlDirty });
  const setField = (id: string, patch: Partial<FieldRule>) => setEx({ fields: ex.fields.map((f) => (f.id === id ? { ...f, ...patch } : f)) });
  const suggestions = COMMON_FIELDS[ex.kind] ?? [];
  const usedNames = new Set(ex.fields.map((f) => f.name.trim()).filter(Boolean));
  const duplicates = ex.fields.map((f) => f.name.trim()).filter((n, i, a) => n && a.indexOf(n) !== i);

  const openAdvanced = () => {
    setJsonText(JSON.stringify(config, null, 2));
    setJsonError(null);
    setAdvanced(true);
  };
  const applyAdvanced = () => {
    try {
      const o = JSON.parse(jsonText) as Record<string, unknown>;
      const fields = Object.entries((o.fields ?? {}) as Record<string, unknown>).map(([n, r]) => configToRule(n, r));
      setEx({ kind: typeof o.kind === "string" ? o.kind : ex.kind, key: typeof o.key === "string" ? o.key : "", each: typeof o.each === "string" ? o.each : "", parser: typeof o.parser === "string" ? o.parser : "", minCertainty: o.minCertainty != null ? String(o.minCertainty) : "", match: Array.isArray(o.match) ? (o.match as string[]).join("\n") : ex.match, fields });
      setAdvanced(false);
      setJsonError(null);
    } catch (e) {
      setJsonError((e as Error).message);
    }
  };

  return (
    <div className="grid gap-3 xl:grid-cols-[1fr_380px]">
      <div className="space-y-3">
        <div className="rounded-sm border border-hair bg-surface p-3">
          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
            <Field label="Extractor name" hint="key under extractors:">
              <Input value={ex.name} onChange={(e) => setEx({ name: e.target.value.replace(/[^a-z0-9_-]/gi, "") })} mono placeholder="facility" />
            </Field>
            <Field label="Entity kind">
              <Select value={ex.kind} onChange={(e) => setEx({ kind: e.target.value })}>
                {EXTRACT_KINDS.map((k) => (
                  <option key={k} value={k}>
                    {k}
                  </option>
                ))}
              </Select>
            </Field>
            <Field label="Key template" hint="stable id: {url}, {code}, {name}">
              <Input value={ex.key} onChange={(e) => setEx({ key: e.target.value })} mono placeholder="{url}" />
            </Field>
            <Field label="each (list container)" hint="one record per match">
              <Input value={ex.each} onChange={(e) => setEx({ each: e.target.value })} mono placeholder=".facility-card" />
            </Field>
            <Field label="Min certainty" hint="0–1, optional">
              <Input value={ex.minCertainty} onChange={(e) => setEx({ minCertainty: e.target.value })} mono placeholder="0.5" inputMode="decimal" />
            </Field>
          </div>
          <div className="mt-3 grid gap-3 sm:grid-cols-2">
            <Field label="URL match patterns" hint="regex per line — which pages this extractor handles (used when saving; preview ignores it)">
              <Textarea rows={2} value={ex.match} onChange={(e) => setEx({ match: e.target.value })} mono placeholder={"/data-centers/[a-z-]+/[a-z-]+/[a-z0-9-]+$"} />
            </Field>
            <Field label="Code parser (optional)" hint="registered parser name (apps/worker/src/parsers) — overrides declarative fields">
              <Input value={ex.parser} onChange={(e) => setEx({ parser: e.target.value })} mono placeholder="digitalrealty_facility_v1" />
            </Field>
          </div>
        </div>

        <div className="rounded-sm border border-hair bg-surface">
          <div className="flex flex-wrap items-center justify-between gap-2 border-b border-hair px-3 py-2">
            <div className="text-[13px] font-semibold text-ink">
              Fields <span className="ml-1 text-[12px] font-normal text-ink-3">{ex.fields.length}</span>
            </div>
            <div className="flex flex-wrap items-center gap-1.5">
              {suggestions
                .filter((n) => !usedNames.has(n))
                .slice(0, 12)
                .map((n) => (
                  <button key={n} type="button" onClick={() => setEx({ fields: [...ex.fields, newFieldRule({ name: n, type: n === "lat" || n === "lng" ? "jsonld" : "selector", jsonld: n === "lat" || n === "lng" ? "Place" : "", jsonPath: n === "lat" ? "$.geo.latitude" : n === "lng" ? "$.geo.longitude" : "", transform: /Mw$/.test(n) || n === "mw" ? "mw" : n === "openedOn" || n === "launchedOn" || n === "announcedOn" ? "date" : n === "status" ? "status" : n === "countryIso2" ? "country" : n === "buildingSqm" ? "sqm" : n === "siteAreaHa" ? "ha" : n === "lat" || n === "lng" ? "float" : "" })] })} className="rounded-xs border border-dashed border-hair-2 px-1.5 py-0.5 font-mono text-[11px] text-ink-3 hover:border-ink-4 hover:text-ink">
                    + {n}
                  </button>
                ))}
              <Button size="xs" variant="ghost" onClick={openAdvanced}>
                Edit as JSON
              </Button>
            </div>
          </div>
          {duplicates.length > 0 && <ErrorNote error={`Duplicate field names: ${[...new Set(duplicates)].join(", ")}`} className="m-3" />}
          <ul className="divide-y divide-hair">
            {ex.fields.map((f) => (
              <FieldRow key={f.id} f={f} onChange={(p) => setField(f.id, p)} onRemove={() => setEx({ fields: ex.fields.filter((x) => x.id !== f.id) })} />
            ))}
          </ul>
          <div className="px-3 py-2">
            <Button size="sm" variant="secondary" onClick={() => setEx({ fields: [...ex.fields, newFieldRule()] })}>
              <Plus className="size-3.5" /> Add field
            </Button>
          </div>
        </div>

        {advanced && (
          <div className="rounded-sm border border-hair bg-surface p-3">
            <div className="mb-2 flex items-center justify-between">
              <span className="text-[13px] font-semibold text-ink">Extractor as JSON (schema: ExtractorConfig)</span>
              <div className="flex gap-1.5">
                <Button size="xs" variant="ghost" onClick={() => setAdvanced(false)}>
                  Cancel
                </Button>
                <Button size="xs" variant="primary" onClick={applyAdvanced}>
                  Apply
                </Button>
              </div>
            </div>
            <Textarea rows={14} mono value={jsonText} onChange={(e) => setJsonText(e.target.value)} />
            <ErrorNote error={jsonError} className="mt-2" />
          </div>
        )}
      </div>

      <div className="space-y-2 xl:sticky xl:top-3 xl:self-start">
        <div className="flex items-center justify-between">
          <span className="label-caps">YAML preview · extractors block</span>
          <Badge size="xs" tone="outline" mono>
            {Object.keys((config.fields as object) ?? {}).length} rules
          </Badge>
        </div>
        <Code text={yamlPreview} lang="yaml" maxHeight={520} />
        <p className="text-[11.5px] leading-snug text-ink-4">
          Rule types map to the schema: <span className="font-mono">selector / attr / all / regex / group / jsonPath / jsonld / meta / transform / default</span>. Transforms normalize units (mw, sqm, ha, money), dates, statuses, types and countries — never invent a value: leave a field unset rather than defaulting to 0.
        </p>
      </div>
    </div>
  );
}

function FieldRow({ f, onChange, onRemove }: { f: FieldRule; onChange: (p: Partial<FieldRule>) => void; onRemove: () => void }) {
  const t = f.type;
  const hint = RULE_TYPES.find((r) => r.value === t)?.hint;
  return (
    <li className="grid gap-2 px-3 py-2.5 lg:grid-cols-[150px_150px_1fr_130px_auto] lg:items-start">
      <Field label="Field">
        <Input value={f.name} onChange={(e) => onChange({ name: e.target.value.trim() })} mono placeholder="name" className={cn(!f.name && "border-warn")} />
      </Field>
      <Field label="Rule type" hint={hint}>
        <Select value={t} onChange={(e) => onChange({ type: e.target.value as FieldRule["type"] })}>
          {RULE_TYPES.map((r) => (
            <option key={r.value} value={r.value}>
              {r.label}
            </option>
          ))}
        </Select>
      </Field>
      <div className="grid gap-2 sm:grid-cols-2">
        {(t === "selector" || t === "attr" || t === "regex") && (
          <Field label={t === "regex" ? "Selector (optional scope)" : "CSS selector"} className={t === "selector" && !f.regex ? "sm:col-span-2" : ""}>
            <Input value={f.selector} onChange={(e) => onChange({ selector: e.target.value })} mono placeholder={t === "regex" ? "body" : "h1, .facility-title"} className={cn(t !== "regex" && !f.selector && "border-warn")} />
          </Field>
        )}
        {t === "attr" && (
          <Field label="Attribute">
            <Input value={f.attr} onChange={(e) => onChange({ attr: e.target.value })} mono placeholder="href / content / data-lat" className={cn(!f.attr && "border-warn")} />
          </Field>
        )}
        {t === "jsonld" && (
          <>
            <Field label="JSON-LD @type">
              <Input value={f.jsonld} onChange={(e) => onChange({ jsonld: e.target.value })} mono placeholder="Place, LocalBusiness, Organization" />
            </Field>
            <Field label="JSON path">
              <Input value={f.jsonPath} onChange={(e) => onChange({ jsonPath: e.target.value })} mono placeholder="$.address.addressLocality" />
            </Field>
          </>
        )}
        {t === "meta" && (
          <Field label="Meta name / property" className="sm:col-span-2">
            <Input value={f.meta} onChange={(e) => onChange({ meta: e.target.value })} mono placeholder="og:title, description, geo.position" className={cn(!f.meta && "border-warn")} />
          </Field>
        )}
        {t === "jsonPath" && (
          <Field label="JSON path over embedded JSON" className="sm:col-span-2">
            <Input value={f.jsonPath} onChange={(e) => onChange({ jsonPath: e.target.value })} mono placeholder="$.props.pageProps.node.field_power_mw" className={cn(!f.jsonPath && "border-warn")} />
          </Field>
        )}
        {(t === "regex" || (t === "selector" && f.regex !== undefined)) && (
          <>
            <Field label={t === "selector" ? "Regex on text (optional)" : "Regex"}>
              <Input value={f.regex} onChange={(e) => onChange({ regex: e.target.value })} mono placeholder="(\d+(?:\.\d+)?)\s*MW" className={cn(t === "regex" && !f.regex && "border-warn")} />
            </Field>
            {(f.regex || t === "regex") && (
              <div className="grid grid-cols-2 gap-2">
                <Field label="Flags">
                  <Input value={f.regexFlags} onChange={(e) => onChange({ regexFlags: e.target.value })} mono placeholder="i" />
                </Field>
                <Field label="Group">
                  <Input value={f.group} onChange={(e) => onChange({ group: e.target.value })} mono placeholder="1" inputMode="numeric" />
                </Field>
              </div>
            )}
          </>
        )}
        {t === "constant" && (
          <Field label="Value" className="sm:col-span-2">
            <Input value={f.default} onChange={(e) => onChange({ default: e.target.value })} mono placeholder="colocation" className={cn(!f.default && "border-warn")} />
          </Field>
        )}
        {(t === "selector" || t === "attr" || t === "regex") && <Checkbox label="all matches (array)" checked={f.all} onChange={(e) => onChange({ all: e.target.checked })} className="sm:col-span-2 -mt-1" />}
      </div>
      <div className="grid gap-2">
        <Field label="Transform">
          <Select value={f.transform} onChange={(e) => onChange({ transform: e.target.value })}>
            {TRANSFORMS.map((x) => (
              <option key={x} value={x}>
                {x || "none"}
              </option>
            ))}
          </Select>
        </Field>
        {t !== "constant" && (
          <Field label="Default">
            <Input value={f.default} onChange={(e) => onChange({ default: e.target.value })} mono placeholder="—" />
          </Field>
        )}
      </div>
      <div className="flex justify-end lg:pt-5">
        <Button size="sm" variant="ghost" onClick={onRemove} aria-label="Remove field">
          <Trash2 className="size-3.5 text-ink-3" />
        </Button>
      </div>
    </li>
  );
}