<script lang="ts">
  interface Classifier {
    model?: string;
    contextWindow?: number;
    minSeverity?: "low" | "med" | "high";
  }
  interface Props {
    classifier: Classifier;
    onChange: (next: Classifier) => void;
  }
  let { classifier, onChange }: Props = $props();

  function update(key: keyof Classifier, value: any) {
    onChange({ ...classifier, [key]: value });
  }
</script>

<section class="space-y-3">
  <header>
    <h2 class="text-base font-semibold text-[var(--color-fg)]">Classifier <span class="ml-1 text-xs font-normal text-[var(--color-fg-subtle)]">advanced</span></h2>
    <p class="text-xs text-[var(--color-fg-muted)]">Model and detection thresholds.</p>
  </header>
  <div class="grid grid-cols-1 gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-4 sm:grid-cols-3">
    <label class="block">
      <span class="mb-1 block text-xs font-medium text-[var(--color-fg-muted)]">Model</span>
      <select
        class="h-10 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface-2)] px-3 text-sm text-[var(--color-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]"
        value={classifier.model ?? "claude-haiku-4-5"}
        oninput={(e) => update("model", (e.target as HTMLSelectElement).value)}>
        <option value="claude-haiku-4-5">Haiku 4.5 — fast/cheap</option>
        <option value="claude-sonnet-4-5">Sonnet 4.5 — accurate</option>
      </select>
    </label>
    <label class="block">
      <span class="mb-1 block text-xs font-medium text-[var(--color-fg-muted)]">Context window</span>
      <input
        type="number"
        min="1"
        max="20"
        class="tabular h-10 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface-2)] px-3 text-sm text-[var(--color-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]"
        value={classifier.contextWindow ?? 5}
        oninput={(e) => update("contextWindow", Number((e.target as HTMLInputElement).value))} />
      <span class="mt-1 block text-[11px] text-[var(--color-fg-subtle)]">Messages of history to consider (1–20)</span>
    </label>
    <label class="block">
      <span class="mb-1 block text-xs font-medium text-[var(--color-fg-muted)]">Minimum severity</span>
      <select
        class="h-10 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface-2)] px-3 text-sm text-[var(--color-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]"
        value={classifier.minSeverity ?? "low"}
        oninput={(e) =>
          update("minSeverity", (e.target as HTMLSelectElement).value as "low" | "med" | "high")}>
        <option value="low">Low — alert on everything</option>
        <option value="med">Medium — moderate+ only</option>
        <option value="high">High — critical only</option>
      </select>
    </label>
  </div>
</section>
