import Link from 'next/link';
import { APPLE_PRESETS, NVIDIA_PRESETS, QUANTS } from '@/components/hardware/fit-form';
import { BTN_GHOST, CTRL, Field } from './bits';

/* GET form for /find-a-model — "What do you need?" Every field maps 1:1 to a `/find-a-model` parameter. */
export const FINDER_USE_CASES = [
  { value: '', label: 'Any' },
  { value: 'chat', label: 'Chat / assistant' },
  { value: 'coding', label: 'Coding' },
  { value: 'reasoning', label: 'Reasoning / math' },
  { value: 'agentic', label: 'Agentic / tool use' },
  { value: 'long_context', label: 'Long context' },
  { value: 'vision', label: 'Vision' },
  { value: 'embeddings', label: 'Embeddings' },
  { value: 'low_cost', label: 'Low cost' },
  { value: 'local', label: 'Runs locally' },
];
export const MODALITIES = ['text', 'image', 'audio', 'video', 'embedding'];
export type FinderInputs = { useCase: string; deployment: 'any' | 'local' | 'api'; memory: number | null; quant: string; contextMin: number | null; license: 'any' | 'commercial'; openness: string; maxIn: number | null; maxOut: number | null; modalities: string[] };

export function FinderForm({ v, className }: { v: FinderInputs; className?: string }) {
  const presets = [...APPLE_PRESETS, ...NVIDIA_PRESETS];
  const presetSelected = v.memory !== null && presets.includes(v.memory) ? String(v.memory) : '';
  const radio = (name: string, value: string, current: string, label: string) => (
    <label className="inline-flex min-h-11 cursor-pointer items-center lg:min-h-9 gap-1.5 border border-rule px-2.5 text-sm text-ink-2 has-[:checked]:border-ink has-[:checked]:bg-ink has-[:checked]:text-canvas">
      <input type="radio" name={name} value={value} defaultChecked={current === value} className="sr-only" /> {label}
    </label>
  );
  return (
    <form action="/find-a-model" method="get" className={`space-y-3 ${className ?? ''}`} data-finder-form>
      <Field label="Use case">
        <select name="use_case" defaultValue={v.useCase} className={CTRL}>
          {FINDER_USE_CASES.map((u) => (
            <option key={u.value} value={u.value}>
              {u.label}
            </option>
          ))}
        </select>
      </Field>
      <div>
        <span className="eyebrow block pb-1">Deployment</span>
        <div className="flex flex-wrap gap-1.5" role="radiogroup" aria-label="Deployment">
          {radio('deployment', 'any', v.deployment, 'Any')}
          {radio('deployment', 'local', v.deployment, 'Local')}
          {radio('deployment', 'api', v.deployment, 'API')}
        </div>
      </div>
      <Field label="Memory (local)" hint="Used for the estimated fit when deployment is local.">
        <select name="memory_gb" defaultValue={presetSelected} className={CTRL}>
          <option value="">Not specified</option>
          <optgroup label="Apple silicon">
            {APPLE_PRESETS.map((g) => (
              <option key={`a${g}`} value={g}>
                {g} GB
              </option>
            ))}
          </optgroup>
          <optgroup label="NVIDIA">
            {NVIDIA_PRESETS.map((g) => (
              <option key={`n${g}`} value={g}>
                {g} GB
              </option>
            ))}
          </optgroup>
        </select>
      </Field>
      <Field label="…or any memory (GB)">
        <input name="memory_custom" inputMode="decimal" defaultValue={presetSelected ? '' : v.memory ?? ''} placeholder="e.g. 20" className={CTRL} />
      </Field>
      <Field label="Quantization (local)">
        <select name="quant" defaultValue={v.quant} className={CTRL}>
          {QUANTS.map((q) => (
            <option key={q.value} value={q.value}>
              {q.label}
            </option>
          ))}
        </select>
      </Field>
      <Field label="Context ≥ (tokens)">
        <select name="context_min" defaultValue={v.contextMin ? String(v.contextMin) : ''} className={CTRL}>
          <option value="">Any</option>
          <option value="32768">32K</option>
          <option value="128000">128K</option>
          <option value="200000">200K</option>
          <option value="1000000">1M</option>
        </select>
      </Field>
      <div>
        <span className="eyebrow block pb-1">Licence</span>
        <div className="flex flex-wrap gap-1.5" role="radiogroup" aria-label="Licence">
          {radio('license', 'any', v.license, 'Any')}
          {radio('license', 'commercial', v.license, 'Commercial use allowed')}
        </div>
      </div>
      <Field label="Openness">
        <select name="openness" defaultValue={v.openness} className={CTRL}>
          <option value="">Any</option>
          <option value="open-source">Open source</option>
          <option value="open-weights">Open weights</option>
          <option value="restricted-weights">Restricted weights</option>
          <option value="proprietary">Proprietary</option>
        </select>
      </Field>
      <div className="grid grid-cols-2 gap-2">
        <Field label="Max input $/1M">
          <input name="max_input_price" inputMode="decimal" defaultValue={v.maxIn ?? ''} placeholder="e.g. 1" className={CTRL} />
        </Field>
        <Field label="Max output $/1M">
          <input name="max_output_price" inputMode="decimal" defaultValue={v.maxOut ?? ''} placeholder="e.g. 5" className={CTRL} />
        </Field>
      </div>
      <div>
        <span className="eyebrow block pb-1">Modalities (all required)</span>
        <div className="flex flex-wrap gap-1.5">
          {MODALITIES.map((m) => (
            <label key={m} className="inline-flex min-h-11 cursor-pointer items-center lg:min-h-9 gap-1.5 border border-rule px-2.5 text-sm text-ink-2 has-[:checked]:border-ink has-[:checked]:bg-ink has-[:checked]:text-canvas">
              <input type="checkbox" name="mod" value={m} defaultChecked={v.modalities.includes(m)} className="sr-only" /> {m}
            </label>
          ))}
        </div>
      </div>
      <div className="flex gap-2">
        <button type="submit" className="inline-flex h-11 flex-1 items-center justify-center bg-ink lg:h-10 px-3 text-sm font-medium text-canvas hover:opacity-90">
          Find models
        </button>
        <Link href="/find-a-model" className={BTN_GHOST}>
          Reset
        </Link>
      </div>
    </form>
  );
}