import { Cpu } from 'lucide-react';
import { cn } from '@/lib/cn';

/**
 * GET form for /hardware/fit — no JavaScript needed. Memory presets are grouped by platform; a free numeric field
 * overrides the preset when filled. Quantization and context are plain selects (the API accepts 4bit|8bit|fp16 and
 * any positive context; we offer the three common windows).
 */
export const APPLE_PRESETS = [16, 24, 32, 36, 48, 64, 96, 128, 192, 256, 512];
export const NVIDIA_PRESETS = [24, 32, 80, 141, 192];
export const QUANTS = [
  { value: '4bit', label: '4-bit (≈ 0.5 byte / param)' },
  { value: '8bit', label: '8-bit (1 byte / param)' },
  { value: 'fp16', label: 'fp16 / bf16 (2 bytes / param)' },
];
export const CONTEXTS = [
  { value: '8192', label: '8k tokens' },
  { value: '32768', label: '32k tokens' },
  { value: '131072', label: '128k tokens' },
];

export function FitForm({ memory, quant, context, className }: { memory?: string; quant?: string; context?: string; className?: string }) {
  const cls = 'h-11 w-full border border-rule bg-surface px-2.5 text-[15px] text-ink focus:border-accent focus:outline-none';
  const presetSelected = memory && [...APPLE_PRESETS, ...NVIDIA_PRESETS].includes(Number(memory)) ? memory : '';
  return (
    <form action="/hardware/fit" method="get" className={cn('grid gap-3 sm:grid-cols-2 lg:grid-cols-[1.4fr_1fr_1.1fr_1fr_auto] lg:items-end', className)}>
      <label className="block min-w-0">
        <span className="eyebrow block pb-1">Device memory (preset)</span>
        <select name="memory_gb" defaultValue={presetSelected} className={cls} aria-describedby="fit-memory-hint">
          <option value="">Choose a preset…</option>
          <optgroup label="Apple silicon (unified memory)">
            {APPLE_PRESETS.map((g) => (
              <option key={`a${g}`} value={g}>
                {g} GB
              </option>
            ))}
          </optgroup>
          <optgroup label="NVIDIA (VRAM)">
            {NVIDIA_PRESETS.map((g) => (
              <option key={`n${g}`} value={g}>
                {g} GB
              </option>
            ))}
          </optgroup>
        </select>
      </label>
      <label className="block min-w-0">
        <span className="eyebrow block pb-1">…or any memory (GB)</span>
        <input name="memory_custom" inputMode="decimal" pattern="[0-9]*\.?[0-9]*" defaultValue={presetSelected ? '' : memory ?? ''} placeholder="e.g. 20" className={cls} />
      </label>
      <label className="block min-w-0">
        <span className="eyebrow block pb-1">Quantization</span>
        <select name="quant" defaultValue={quant ?? '4bit'} className={cls}>
          {QUANTS.map((q) => (
            <option key={q.value} value={q.value}>
              {q.label}
            </option>
          ))}
        </select>
      </label>
      <label className="block min-w-0">
        <span className="eyebrow block pb-1">Context window</span>
        <select name="context" defaultValue={context ?? '8192'} className={cls}>
          {CONTEXTS.map((c) => (
            <option key={c.value} value={c.value}>
              {c.label}
            </option>
          ))}
        </select>
      </label>
      <button type="submit" className="inline-flex h-11 items-center justify-center gap-1.5 bg-ink px-4 text-sm font-medium text-canvas hover:opacity-90 sm:col-span-2 lg:col-span-1">
        <Cpu className="size-4" aria-hidden /> Estimate fit
      </button>
      <p id="fit-memory-hint" className="text-xs text-ink-3 sm:col-span-2 lg:col-span-5">
        The custom field wins over the preset when both are filled. Estimates reserve 2 GB for the OS and framework.
      </p>
    </form>
  );
}