'use client';
import { Bookmark, Copy, Play, Trash2 } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useEffect, useMemo, useState } from 'react';
import { Hint } from '@/components/ui/hint';
import { cn } from '@/lib/cn';
import { fmtInt } from '@/lib/format';
import { OPENNESS_LABELS, STATUS_LABELS, typeLabel } from '@/lib/site';

/*
  Structured query builder (client). Type selector → type-specific form → a `/models?…` (or `/explore/<type>?…`) URL that
  updates as you type. The builder's own URL (`/explore?type=model&min_params=…`) is shareable; saved queries live in
  localStorage['aia-saved-queries'] (name + URL). Filters the API cannot express are shown disabled with the reason.
*/

export type BuilderOptions = {
  types: { entity_type: string; count: number; label: string }[];
  organizations: { slug: string; name: string; count: number }[];
  families: { value: string; label: string; count: number }[];
  licenses: { value: string; label: string; count: number }[];
  openness: { value: string; count: number }[];
  modalities: { value: string; count: number }[];
  status: { value: string; count: number }[];
  benchmarks: { slug: string; name: string }[];
};
type Saved = { name: string; url: string; created_at: string };
const KEY = 'aia-saved-queries';
const MODEL_KEYS = ['org', 'family', 'min_params', 'max_params', 'min_context', 'license', 'openness', 'modality', 'year_from', 'year_to', 'status', 'reasoning', 'sort', 'order', 'q', 'trust', 'include'] as const;
const GENERIC_KEYS = ['q', 'org', 'sort'] as const;
const PARAM_PRESETS: { label: string; value: string }[] = [
  { label: 'any', value: '' },
  { label: '1B', value: '1000000000' },
  { label: '7B', value: '7000000000' },
  { label: '30B', value: '30000000000' },
  { label: '70B', value: '70000000000' },
  { label: '100B', value: '100000000000' },
  { label: '400B', value: '400000000000' },
  { label: '1T', value: '1000000000000' },
];
const CONTEXT_PRESETS = [
  { label: 'any', value: '' },
  { label: '8K', value: '8192' },
  { label: '32K', value: '32768' },
  { label: '128K', value: '131072' },
  { label: '200K', value: '200000' },
  { label: '1M', value: '1000000' },
];
const MODEL_SORTS = [
  { value: '', label: 'Default (recently updated)' },
  { value: 'release', label: 'Release date' },
  { value: 'params', label: 'Parameters' },
  { value: 'name', label: 'Name' },
  { value: 'quality', label: 'Data quality' },
  { value: 'cheapest', label: 'Cheapest output price' },
];

function readSaved(): Saved[] {
  try {
    const v = JSON.parse(localStorage.getItem(KEY) ?? '[]');
    return Array.isArray(v) ? v.filter((x) => x && typeof x.url === 'string') : [];
  } catch {
    return [];
  }
}

export function QueryBuilder({ options, initial }: { options: BuilderOptions; initial: Record<string, string> }) {
  const router = useRouter();
  const [type, setType] = useState(initial.type && options.types.some((t) => t.entity_type === initial.type) ? initial.type : 'model');
  const [f, setF] = useState<Record<string, string>>(() => {
    const out: Record<string, string> = {};
    for (const k of [...MODEL_KEYS, ...GENERIC_KEYS]) if (initial[k]) out[k] = initial[k]!;
    return out;
  });
  const [saved, setSaved] = useState<Saved[]>([]);
  const [ready, setReady] = useState(false);
  const [name, setName] = useState('');
  const [copied, setCopied] = useState(false);
  useEffect(() => {
    setSaved(readSaved());
    setReady(true);
  }, []);
  const set = (k: string, v: string) => setF((cur) => {
    const next = { ...cur };
    if (v === '') delete next[k];
    else next[k] = v;
    return next;
  });
  const isModel = type === 'model';
  const target = useMemo(() => {
    const p = new URLSearchParams();
    const keys = isModel ? MODEL_KEYS : GENERIC_KEYS;
    for (const k of keys) if (f[k]) p.set(k, f[k]!);
    const s = p.toString();
    return isModel ? `/models${s ? `?${s}` : ''}` : `/explore/${encodeURIComponent(type)}${s ? `?${s}` : ''}`;
  }, [f, isModel, type]);
  const shareUrl = useMemo(() => {
    const p = new URLSearchParams({ type });
    const keys = isModel ? MODEL_KEYS : GENERIC_KEYS;
    for (const k of keys) if (f[k]) p.set(k, f[k]!);
    return `/explore?${p.toString()}`;
  }, [f, isModel, type]);
  // mirror the builder state into the URL (shareable) without a navigation
  useEffect(() => {
    if (!ready) return;
    window.history.replaceState(null, '', shareUrl);
  }, [shareUrl, ready]);
  const persist = (list: Saved[]) => {
    setSaved(list);
    try {
      localStorage.setItem(KEY, JSON.stringify(list));
    } catch {
      /* ignore */
    }
  };
  const save = () => {
    const n = name.trim() || target.replace(/^\//, '').slice(0, 60);
    persist([{ name: n, url: target, created_at: new Date().toISOString() }, ...saved.filter((s) => s.url !== target)].slice(0, 30));
    setName('');
  };
  const copy = async () => {
    try {
      await navigator.clipboard.writeText(`${location.origin}${shareUrl}`);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch {
      /* ignore */
    }
  };
  const active = Object.keys(f).length;
  const cls = 'h-10 w-full border border-rule bg-surface px-2 text-sm text-ink focus:border-accent focus:outline-none';
  const label = 'eyebrow block pb-1';

  return (
    <div className="grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_20rem]" data-query-builder>
      <div className="min-w-0 space-y-6">
        <div>
          <p className="eyebrow mb-1.5">Entity type</p>
          <ul className="no-scrollbar -mx-4 flex gap-1 overflow-x-auto px-4 md:mx-0 md:flex-wrap md:px-0" role="radiogroup" aria-label="Entity type">
            {options.types.map((t) => (
              <li key={t.entity_type} className="shrink-0">
                <button type="button" role="radio" aria-checked={type === t.entity_type} onClick={() => setType(t.entity_type)} className={cn('inline-flex h-9 items-center gap-1.5 border px-2.5 text-sm', type === t.entity_type ? 'border-ink bg-ink text-canvas' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')}>
                  {t.label || typeLabel(t.entity_type, true)} <span className="tnum text-[11px] opacity-70">{fmtInt(t.count)}</span>
                </button>
              </li>
            ))}
          </ul>
        </div>

        {isModel ? (
          <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4">
            <label className="block">
              <span className={label}>Organization</span>
              <select value={f.org ?? ''} onChange={(e) => set('org', e.target.value)} className={cls}>
                <option value="">Any</option>
                {options.organizations.map((o) => (
                  <option key={o.slug} value={o.slug}>
                    {o.name} ({fmtInt(o.count)})
                  </option>
                ))}
              </select>
            </label>
            <label className="block">
              <span className={label}>Family</span>
              <select value={f.family ?? ''} onChange={(e) => set('family', e.target.value)} className={cls}>
                <option value="">Any</option>
                {options.families.map((o) => (
                  <option key={o.value} value={o.value}>
                    {o.label} ({fmtInt(o.count)})
                  </option>
                ))}
              </select>
            </label>
            <label className="block">
              <span className={label}>Parameters ≥</span>
              <select value={f.min_params ?? ''} onChange={(e) => set('min_params', e.target.value)} className={cls}>
                {PARAM_PRESETS.map((p) => (
                  <option key={p.value} value={p.value}>
                    {p.label}
                  </option>
                ))}
              </select>
            </label>
            <label className="block">
              <span className={label}>Parameters ≤</span>
              <select value={f.max_params ?? ''} onChange={(e) => set('max_params', e.target.value)} className={cls}>
                {PARAM_PRESETS.map((p) => (
                  <option key={p.value} value={p.value}>
                    {p.label}
                  </option>
                ))}
              </select>
            </label>
            <label className="block opacity-60" title="Not a /models filter yet">
              <span className={label}>
                Active parameters <Hint align="right" text="Mixture-of-experts active parameters are shown on model pages but /models has no min/max filter for them (API gap)." />
              </span>
              <input disabled placeholder="not filterable" className={cls} />
            </label>
            <label className="block opacity-60" title="Not a /models filter yet">
              <span className={label}>
                Architecture <Hint align="right" text="Architecture (dense, MoE, SSM…) is an attribute without a listing filter (API gap)." />
              </span>
              <input disabled placeholder="not filterable" className={cls} />
            </label>
            <label className="block">
              <span className={label}>Context ≥</span>
              <select value={f.min_context ?? ''} onChange={(e) => set('min_context', e.target.value)} className={cls}>
                {CONTEXT_PRESETS.map((p) => (
                  <option key={p.value} value={p.value}>
                    {p.label}
                  </option>
                ))}
              </select>
            </label>
            <label className="block">
              <span className={label}>License</span>
              <select value={f.license ?? ''} onChange={(e) => set('license', e.target.value)} className={cls}>
                <option value="">Any</option>
                {options.licenses.map((o) => (
                  <option key={o.value} value={o.value}>
                    {o.label} ({fmtInt(o.count)})
                  </option>
                ))}
              </select>
            </label>
            <label className="block">
              <span className={label}>Openness</span>
              <select value={f.openness ?? ''} onChange={(e) => set('openness', e.target.value)} className={cls}>
                <option value="">Any</option>
                <option value="open">Open (weights or source)</option>
                {options.openness.map((o) => (
                  <option key={o.value} value={o.value}>
                    {OPENNESS_LABELS[o.value] ?? o.value} ({fmtInt(o.count)})
                  </option>
                ))}
              </select>
            </label>
            <label className="block">
              <span className={label}>Modality</span>
              <select value={f.modality ?? ''} onChange={(e) => set('modality', e.target.value)} className={cls}>
                <option value="">Any</option>
                {options.modalities.map((o) => (
                  <option key={o.value} value={o.value}>
                    {o.value} ({fmtInt(o.count)})
                  </option>
                ))}
              </select>
              <span className="mt-1 block text-[11px] text-ink-3">Vision = image · Audio = audio</span>
            </label>
            <label className="block">
              <span className={label}>Released from</span>
              <input type="number" inputMode="numeric" min={2015} max={2100} placeholder="YYYY" value={f.year_from ?? ''} onChange={(e) => set('year_from', e.target.value)} className={cls} />
            </label>
            <label className="block">
              <span className={label}>Released to</span>
              <input type="number" inputMode="numeric" min={2015} max={2100} placeholder="YYYY" value={f.year_to ?? ''} onChange={(e) => set('year_to', e.target.value)} className={cls} />
            </label>
            <label className="block">
              <span className={label}>Status</span>
              <select value={f.status ?? ''} onChange={(e) => set('status', e.target.value)} className={cls}>
                <option value="">Any</option>
                {options.status.map((o) => (
                  <option key={o.value} value={o.value}>
                    {STATUS_LABELS[o.value] ?? o.value} ({fmtInt(o.count)})
                  </option>
                ))}
              </select>
            </label>
            <label className="block">
              <span className={label}>Reasoning</span>
              <select value={f.reasoning ?? ''} onChange={(e) => set('reasoning', e.target.value)} className={cls}>
                <option value="">Any</option>
                <option value="1">Reasoning / thinking</option>
                <option value="0">Non-reasoning</option>
              </select>
            </label>
            <label className="block opacity-60" title="Not a /models filter">
              <span className={label}>
                Price ≤ <Hint align="right" text="Prices live on deployments, not models: /models sorts by cheapest output but has no price bound. Use Prices or the Calculator (API gap for a bound)." />
              </span>
              <input disabled placeholder="see Prices" className={cls} />
            </label>
            <label className="block opacity-60" title="Not a /models filter">
              <span className={label}>
                Benchmark ≥ <Hint align="right" text="Score thresholds are not a /models parameter (API gap). Pick a benchmark to open its leaderboard instead." />
              </span>
              <select className={cls} defaultValue="" onChange={(e) => e.target.value && router.push(`/benchmarks/${encodeURIComponent(e.target.value)}`)}>
                <option value="">Open a leaderboard…</option>
                {options.benchmarks.map((b) => (
                  <option key={b.slug} value={b.slug}>
                    {b.name}
                  </option>
                ))}
              </select>
            </label>
            <label className="block">
              <span className={label}>Sort</span>
              <select value={f.sort ?? ''} onChange={(e) => set('sort', e.target.value)} className={cls}>
                {MODEL_SORTS.map((s) => (
                  <option key={s.value} value={s.value}>
                    {s.label}
                  </option>
                ))}
              </select>
            </label>
            <label className="block">
              <span className={label}>Order</span>
              <select value={f.order ?? ''} onChange={(e) => set('order', e.target.value)} className={cls}>
                <option value="">Descending</option>
                <option value="asc">Ascending</option>
              </select>
            </label>
            <label className="block col-span-2">
              <span className={label}>Name contains</span>
              <input value={f.q ?? ''} onChange={(e) => set('q', e.target.value)} placeholder="e.g. coder" className={cls} />
            </label>
            <label className="flex min-h-10 items-center gap-2 pt-5 text-sm text-ink-2">
              <input type="checkbox" checked={f.include === 'artifacts'} onChange={(e) => set('include', e.target.checked ? 'artifacts' : '')} className="size-4 accent-[var(--accent)]" /> Include artifacts
              <Hint align="right" text="By default /models lists canonical model releases only; artifacts (checkpoints, quantisations, conversions) and folded variants are excluded." />
            </label>
          </div>
        ) : (
          <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
            <label className="block">
              <span className={label}>Name contains</span>
              <input value={f.q ?? ''} onChange={(e) => set('q', e.target.value)} className={cls} placeholder="Search by name" />
            </label>
            <label className="block">
              <span className={label}>Organization</span>
              <select value={f.org ?? ''} onChange={(e) => set('org', e.target.value)} className={cls}>
                <option value="">Any</option>
                {options.organizations.map((o) => (
                  <option key={o.slug} value={o.slug}>
                    {o.name}
                  </option>
                ))}
              </select>
            </label>
            <label className="block">
              <span className={label}>Sort</span>
              <select value={f.sort ?? ''} onChange={(e) => set('sort', e.target.value)} className={cls}>
                <option value="">Recently updated</option>
                <option value="name">Name</option>
                <option value="quality">Data quality</option>
                <option value="first_seen">First seen</option>
              </select>
            </label>
            <p className="col-span-full text-xs text-ink-3">
              {typeLabel(type, true)} use the generic listing filters (name, organization, sort). Dedicated listings have more: models, benchmarks, prices, hardware.
            </p>
          </div>
        )}

        <div className="flex flex-wrap items-center gap-2 border-t border-rule pt-4">
          <Link href={target} className="inline-flex h-11 items-center gap-1.5 bg-ink px-4 text-sm font-medium text-canvas hover:opacity-90" data-run-query>
            <Play className="size-4" aria-hidden /> Run query
          </Link>
          <code className="mono min-w-0 flex-1 truncate border border-rule bg-surface px-2 py-2 text-xs text-ink-2" title={target} data-target-url>
            {target}
          </code>
          <button type="button" onClick={copy} className="inline-flex h-11 items-center gap-1.5 border border-rule px-3 text-sm text-ink-2 hover:border-rule-strong hover:text-ink">
            <Copy className="size-4" aria-hidden /> {copied ? 'Copied' : 'Copy share link'}
          </button>
          <span className="tnum text-xs text-ink-3">{active} filter{active === 1 ? '' : 's'}</span>
        </div>
      </div>

      <aside className="min-w-0 space-y-4">
        <div>
          <p className="eyebrow mb-1.5">Save this query</p>
          <div className="flex gap-2">
            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Name (optional)" className={cls} aria-label="Saved query name" />
            <button type="button" onClick={save} className="inline-flex h-10 shrink-0 items-center gap-1.5 border border-rule px-3 text-sm text-ink-2 hover:border-rule-strong hover:text-ink" data-save-query>
              <Bookmark className="size-4" aria-hidden /> Save
            </button>
          </div>
          <p className="mt-1 text-[11px] text-ink-3">Stored in this browser only (localStorage). Share the link instead to send it to someone.</p>
        </div>
        <div>
          <p className="eyebrow mb-1.5">
            Saved queries <span className="tnum normal-case tracking-normal text-ink-3">{ready ? saved.length : ''}</span>
          </p>
          {!ready ? null : saved.length === 0 ? (
            <p className="text-xs text-ink-3">Nothing saved yet.</p>
          ) : (
            <ul className="divide-y divide-rule border-y border-rule" data-saved-queries>
              {saved.map((s) => (
                <li key={s.url} className="flex items-center gap-2 py-2 text-sm">
                  <Link href={s.url} className="min-w-0 flex-1 truncate text-ink hover:text-accent" title={s.url}>
                    {s.name}
                  </Link>
                  <button type="button" onClick={() => persist(saved.filter((x) => x.url !== s.url))} className="flex size-9 items-center justify-center text-ink-3 hover:text-danger" aria-label={`Remove ${s.name}`}>
                    <Trash2 className="size-4" aria-hidden />
                  </button>
                </li>
              ))}
            </ul>
          )}
        </div>
      </aside>
    </div>
  );
}