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 /run-locally (no JavaScript needed). Memory presets by platform + a free field; GPU count; quantization; context;
  batch; use-case filter. In "hardware mode" (`?hardware=<slug>`) the memory select lists the device's own memory options.
*/
export const AMD_PRESETS = [16, 24, 32, 48, 128, 192, 256];
export const GPU_COUNTS = [1, 2, 4, 8];
export const PLATFORMS = [
  { value: 'any', label: 'Any platform' },
  { value: 'apple', label: 'Apple silicon (MLX, llama.cpp)' },
  { value: 'nvidia', label: 'NVIDIA (CUDA, vLLM, TensorRT-LLM)' },
  { value: 'amd', label: 'AMD (ROCm)' },
];
export const CONTEXT_PRESETS = [
  { value: 4096, label: '4K' },
  { value: 8192, label: '8K' },
  { value: 32768, label: '32K' },
  { value: 131072, label: '128K' },
  { value: 262144, label: '256K' },
  { value: 1000000, label: '1M' },
];
export const BATCHES = [1, 2, 4, 8, 16];
export const USE_CASES = [
  { value: '', label: 'Any use case' },
  { value: 'chat', label: 'Chat' },
  { value: 'coding', label: 'Coding' },
  { value: 'reasoning', label: 'Reasoning' },
  { value: 'agentic', label: 'Agentic / tool use' },
  { value: 'vision', label: 'Vision' },
  { value: 'embeddings', label: 'Embeddings' },
  { value: 'long_context', label: 'Long context' },
];

export type RunLocallyInputs = { memory: number | null; gpuCount: number; quant: string; context: number; batch: number; platform: string; useCase: string; openness: string; hardware: string | null; fitsOnly: boolean };

export function RunLocallyForm({ v, hardwareName, memoryOptions, className }: { v: RunLocallyInputs; hardwareName?: string | null; memoryOptions?: number[]; className?: string }) {
  const presets = [...APPLE_PRESETS, ...NVIDIA_PRESETS, ...AMD_PRESETS];
  const presetSelected = v.memory !== null && (memoryOptions?.includes(v.memory) || presets.includes(v.memory)) ? String(v.memory) : '';
  return (
    <form action="/run-locally" method="get" className={`space-y-3 ${className ?? ''}`} data-run-locally-form>
      {v.hardware && (
        <div className="border border-rule bg-surface-2 px-2.5 py-2 text-xs text-ink-2">
          <input type="hidden" name="hardware" value={v.hardware} />
          Device: <span className="font-medium text-ink">{hardwareName ?? v.hardware}</span>{' '}
          <Link href="/run-locally" className="link">
            change
          </Link>
        </div>
      )}
      {!v.hardware && (
        <Field label="Platform">
          <select name="platform" defaultValue={v.platform} className={CTRL}>
            {PLATFORMS.map((p) => (
              <option key={p.value} value={p.value}>
                {p.label}
              </option>
            ))}
          </select>
        </Field>
      )}
      <Field label={v.hardware ? 'Device memory' : 'Memory per device (preset)'}>
        <select name="memory_gb" defaultValue={presetSelected} className={CTRL}>
          <option value="">{v.hardware ? 'Largest configuration' : 'Choose a preset…'}</option>
          {memoryOptions && memoryOptions.length > 0 ? (
            memoryOptions.map((g) => (
              <option key={g} value={g}>
                {g} GB
              </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>
              <optgroup label="AMD (VRAM)">
                {AMD_PRESETS.map((g) => (
                  <option key={`d${g}`} value={g}>
                    {g} GB
                  </option>
                ))}
              </optgroup>
            </>
          )}
        </select>
      </Field>
      {!v.hardware && (
        <Field label="…or any memory (GB)" hint="Wins over the preset when filled.">
          <input name="memory_custom" inputMode="decimal" pattern="[0-9]*\.?[0-9]*" defaultValue={presetSelected ? '' : v.memory ?? ''} placeholder="e.g. 20" className={CTRL} />
        </Field>
      )}
      <Field label="GPUs / devices" hint="Memories are summed; interconnect is not modelled.">
        <select name="gpu_count" defaultValue={String(v.gpuCount)} className={CTRL}>
          {GPU_COUNTS.map((n) => (
            <option key={n} value={n}>
              {n}
            </option>
          ))}
        </select>
      </Field>
      <Field label="Quantization">
        <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 window">
        <select name="context" defaultValue={String(v.context)} className={CTRL}>
          {CONTEXT_PRESETS.map((c) => (
            <option key={c.value} value={c.value}>
              {c.label} tokens
            </option>
          ))}
          {!CONTEXT_PRESETS.some((c) => c.value === v.context) && <option value={v.context}>{v.context} tokens</option>}
        </select>
      </Field>
      <Field label="Batch (concurrent sequences)">
        <select name="batch" defaultValue={String(v.batch)} className={CTRL}>
          {BATCHES.map((b) => (
            <option key={b} value={b}>
              {b}
            </option>
          ))}
        </select>
      </Field>
      <Field label="Use case">
        <select name="use_case" defaultValue={v.useCase} className={CTRL}>
          {USE_CASES.map((u) => (
            <option key={u.value} value={u.value}>
              {u.label}
            </option>
          ))}
        </select>
      </Field>
      <Field label="Openness">
        <select name="openness" defaultValue={v.openness} className={CTRL}>
          <option value="">Any downloadable weights</option>
          <option value="open-source">Open source</option>
          <option value="open-weights">Open weights</option>
          <option value="restricted-weights">Restricted weights</option>
        </select>
      </Field>
      <label className="flex min-h-11 items-center gap-2 text-sm text-ink-2">
        <input type="checkbox" name="fits" value="1" defaultChecked={v.fitsOnly} className="size-4 accent-[var(--accent)]" /> Only models that fit
      </label>
      <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">
          Estimate
        </button>
        <Link href="/run-locally" className={BTN_GHOST}>
          Reset
        </Link>
      </div>
    </form>
  );
}