"use client";
import * as React from "react";
import { Bookmark, Braces, Calculator, ChevronDown, Clock, Dices, Globe, RotateCcw, Save, Settings2, SlidersHorizontal, Sparkles, Terminal, Wrench, X } from "lucide-react";
import type { PolyModel, GenerationSettingsInput, ModelPreset } from "@/lib/client/types";
import { Button } from "@/components/ui/button";
import { Input, Textarea, Label } from "@/components/ui/input";
import { Slider } from "@/components/ui/slider";
import { Switch } from "@/components/ui/switch";
import { Segmented } from "@/components/ui/segmented";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { Tooltip } from "@/components/ui/tooltip";
import { Badge } from "@/components/ui/badge";
import { EmptyState, Skeleton } from "@/components/ui/misc";
import { PromptDialog } from "@/components/common/prompt-dialog";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { useApp } from "@/components/app/store";
import { api, useApi } from "@/lib/client/api";
import { errorMessage } from "@/lib/client/humanize";
import { toast } from "@/components/ui/toast";
import { groupsFor, isSetValue, presetCompatibility, presetToSettings, PARAM_DEFS, type SettingsGroup } from "@/lib/models/params";
import { cn, formatTokens } from "@/lib/utils";

export type ChatSettings = GenerationSettingsInput & { tools?: string[] };

const EFFORT_LABEL: Record<string, string> = { none: "None", minimal: "Minimal", low: "Low", medium: "Medium", high: "High", xhigh: "Extra high", max: "Maximum" };
const GROUP_ICON: Record<SettingsGroup, React.ReactNode> = { generation: <SlidersHorizontal />, reasoning: <Sparkles />, output: <Braces />, tools: <Wrench />, advanced: <Settings2 /> };
const DEFAULT_OPEN: SettingsGroup[] = ["generation", "reasoning"];
const UNSET = "__default";

export function countActiveSettings(s: ChatSettings | undefined): number {
  if (!s) return 0;
  return Object.entries(s).filter(([k, v]) => isSetValue(k, v)).length;
}

/**
 * Capability-driven model configuration, grouped Generation / Reasoning / Output / Tools / Advanced.
 * Only controls the model supports are rendered; unsupported ones are listed at the bottom and never sent.
 * Phone: full bottom sheet. Desktop: right-side panel so the conversation stays visible.
 */
export function ModelConfig({ model, settings, onChange, systemPrompt, onSystemPromptChange, trigger, allowSavePreset = true }: { model: PolyModel | undefined; settings: ChatSettings; onChange: (s: ChatSettings) => void; systemPrompt: string; onSystemPromptChange: (v: string) => void; trigger?: React.ReactNode; allowSavePreset?: boolean }) {
  const [open, setOpen] = React.useState(false);
  const [presetsOpen, setPresetsOpen] = React.useState(false);
  const [saveOpen, setSaveOpen] = React.useState(false);
  const [openGroups, setOpenGroups] = React.useState<Set<SettingsGroup>>(() => new Set(DEFAULT_OPEN));
  const p = model?.parameters ?? {};
  const c = model?.capabilities;
  const set = <K extends keyof ChatSettings>(k: K, v: ChatSettings[K]) => onChange({ ...settings, [k]: v });
  const unset = (k: keyof ChatSettings) => {
    const next = { ...settings };
    delete next[k];
    onChange(next);
  };
  const active = countActiveSettings(settings);
  const groups = React.useMemo(() => (model ? groupsFor(model) : []), [model]);
  const unsupported = React.useMemo(() => (model ? PARAM_DEFS.filter((d) => !d.supports(model)).map((d) => d.label) : []), [model]);
  const toggleGroup = (g: SettingsGroup) =>
    setOpenGroups((prev) => {
      const n = new Set(prev);
      if (n.has(g)) n.delete(g);
      else n.add(g);
      return n;
    });

  const savePreset = async (name: string) => {
    if (!model) return;
    const { tools, ...parameters } = settings;
    try {
      await api("/api/presets?kind=model", { method: "POST", json: { name, modelKey: model.key, systemPrompt: systemPrompt || null, parameters, tools: { builtin: tools ?? [] } } });
      toast.success("Preset saved", "Find it under Presets, or apply it from here.");
    } catch (e) {
      toast.error("Could not save preset", errorMessage(e));
      throw e;
    }
  };

  const applyPreset = (preset: ModelPreset) => {
    const next = presetToSettings(preset) as ChatSettings;
    onChange(next);
    if (preset.systemPrompt) onSystemPromptChange(preset.systemPrompt);
    setPresetsOpen(false);
    toast.success(`Applied “${preset.name}”`, preset.systemPrompt ? "Parameters and system prompt updated." : "Parameters updated.");
  };

  const samplingNote = model?.metadata?.samplingMode === "conditional" && settings.reasoningEffort !== "none" ? "Temperature, top-p and penalties are accepted only when reasoning effort is “None”. They are dropped otherwise." : null;
  const activeIn = (g: SettingsGroup) => PARAM_DEFS.filter((d) => d.group === g && isSetValue(d.key, (settings as Record<string, unknown>)[d.key])).length;

  const renderControl = (key: string) => {
    if (!model) return null;
    switch (key) {
      case "temperature":
        return <SliderRow key={key} label="Temperature" hint="Lower is more deterministic" value={settings.temperature} min={p.temperatureRange?.min ?? 0} max={p.temperatureRange?.max ?? 2} step={0.05} onChange={(v) => (v === undefined ? unset("temperature") : set("temperature", v))} />;
      case "topP":
        return <SliderRow key={key} label="Top-p" hint="Nucleus sampling cutoff" value={settings.topP} min={0} max={1} step={0.01} onChange={(v) => (v === undefined ? unset("topP") : set("topP", v))} />;
      case "topK":
        return <SliderRow key={key} label="Top-k" value={settings.topK} min={1} max={200} step={1} onChange={(v) => (v === undefined ? unset("topK") : set("topK", v))} />;
      case "maxTokens":
        return (
          <NumberRow key={key} label="Max output tokens" hint={model.limits?.maxOutputTokens ? `Up to ${formatTokens(model.limits.maxOutputTokens)}${c?.reasoning ? " — reasoning tokens count against it" : ""}` : undefined} value={settings.maxTokens} min={16} max={model.limits?.maxOutputTokens ?? 400_000} placeholder="default" onChange={(v) => (v === undefined ? unset("maxTokens") : set("maxTokens", v))} />
        );
      case "reasoningEffort": {
        const levels = p.reasoningEffortLevels ?? [];
        return <ChoiceRow key={key} label="Reasoning effort" hint={model.metadata?.defaultReasoningEffort ? `Provider default: ${String(model.metadata.defaultReasoningEffort)}` : undefined} value={settings.reasoningEffort} options={levels.map((l) => ({ value: l, label: EFFORT_LABEL[l] ?? l }))} onChange={(v) => (v === undefined ? unset("reasoningEffort") : set("reasoningEffort", v as ChatSettings["reasoningEffort"]))} />;
      }
      case "thinkingBudget": {
        const r = p.thinkingBudgetRange ?? { min: 0, max: 32_000 };
        return <SliderRow key={key} label="Thinking budget" hint={`${formatTokens(r.min)}–${formatTokens(r.max)} tokens`} value={settings.thinkingBudget} min={r.min} max={r.max} step={Math.max(1, Math.round((r.max - r.min) / 256))} onChange={(v) => (v === undefined ? unset("thinkingBudget") : set("thinkingBudget", Math.round(v)))} />;
      }
      case "includeReasoning":
        return <SwitchRow key={key} label="Show reasoning" hint="Stream the model's reasoning summary when the provider exposes it" checked={settings.includeReasoning !== false} onChange={(v) => (v ? unset("includeReasoning") : set("includeReasoning", false))} />;
      case "verbosity":
        return <ChoiceRow key={key} label="Verbosity" value={settings.verbosity} options={["low", "medium", "high"].map((l) => ({ value: l, label: EFFORT_LABEL[l] }))} onChange={(v) => (v === undefined ? unset("verbosity") : set("verbosity", v as ChatSettings["verbosity"]))} />;
      case "responseFormat":
        return (
          <div key={key} className="space-y-2">
            <ChoiceRow label="Response format" value={settings.responseFormat?.type ?? "text"} noDefault options={[{ value: "text", label: "Text" }, { value: "json", label: "JSON object" }, ...(model.metadata?.jsonSchema === false ? [] : [{ value: "json_schema", label: "JSON schema" }])]} onChange={(v) => (!v || v === "text" ? unset("responseFormat") : set("responseFormat", { type: v as "json" | "json_schema", schema: settings.responseFormat?.schema, strict: true }))} />
            {settings.responseFormat?.type === "json_schema" ? <SchemaEditor value={settings.responseFormat.schema} onChange={(schema) => set("responseFormat", { type: "json_schema", schema, strict: true })} /> : null}
          </div>
        );
      case "stop":
        return (
          <FieldRow key={key} label="Stop sequences" hint="Comma-separated, up to 4">
            <Input className="h-10 sm:h-8 sm:w-56 sm:text-[13px]" value={(settings.stop ?? []).join(", ")} onChange={(e) => set("stop", e.target.value.split(",").map((s) => s.trim()).filter(Boolean).slice(0, 4))} placeholder="e.g. END, ###" />
          </FieldRow>
        );
      case "webSearch":
        return <SwitchRow key={key} icon={<Globe />} label="Web search" hint="Provider-native search with citations (billed by the provider)" checked={Boolean(settings.webSearch)} onChange={(v) => (v ? set("webSearch", true) : unset("webSearch"))} />;
      case "codeExecution":
        return <SwitchRow key={key} icon={<Terminal />} label="Code execution" hint="Provider-hosted sandbox (not combinable with web search on Anthropic)" checked={Boolean(settings.codeExecution)} onChange={(v) => (v ? set("codeExecution", true) : unset("codeExecution"))} />;
      case "tools":
        return (
          <div key={key} className="space-y-2">
            <p className="text-[12px] text-fg-muted">Built-in PolyLLM tools (server-side, side-effect free)</p>
            <div className="flex flex-wrap gap-1.5">
              {[
                { id: "calculator", label: "Calculator", icon: <Calculator className="size-3.5" /> },
                { id: "clock", label: "Clock", icon: <Clock className="size-3.5" /> },
                { id: "random", label: "Random", icon: <Dices className="size-3.5" /> },
              ].map((t) => {
                const on = settings.tools?.includes(t.id);
                return (
                  <button key={t.id} type="button" aria-pressed={on} onClick={() => set("tools", on ? (settings.tools ?? []).filter((x) => x !== t.id) : [...(settings.tools ?? []), t.id])} className={cn("inline-flex h-9 items-center gap-1.5 rounded-md border px-3 text-[13px] transition-colors sm:h-8", on ? "border-accent bg-accent-soft text-accent" : "border-border text-fg-muted hover:border-border-strong")}>
                    {t.icon} {t.label}
                  </button>
                );
              })}
            </div>
          </div>
        );
      case "toolChoice":
        return settings.tools?.length ? <ChoiceRow key={key} label="Tool choice" noDefault value={typeof settings.toolChoice === "string" ? settings.toolChoice : "auto"} options={[{ value: "auto", label: "Auto" }, { value: "required", label: "Required" }, { value: "none", label: "None" }]} onChange={(v) => set("toolChoice", (v ?? "auto") as "auto" | "none" | "required")} /> : null;
      case "seed":
        return <NumberRow key={key} label="Seed" hint="Best-effort determinism" value={settings.seed} min={0} max={2_147_483_647} placeholder="random" onChange={(v) => (v === undefined ? unset("seed") : set("seed", v))} />;
      case "frequencyPenalty":
        return <SliderRow key={key} label="Frequency penalty" value={settings.frequencyPenalty} min={-2} max={2} step={0.1} onChange={(v) => (v === undefined ? unset("frequencyPenalty") : set("frequencyPenalty", v))} />;
      case "presencePenalty":
        return <SliderRow key={key} label="Presence penalty" value={settings.presencePenalty} min={-2} max={2} step={0.1} onChange={(v) => (v === undefined ? unset("presencePenalty") : set("presencePenalty", v))} />;
      default:
        return null;
    }
  };

  return (
    <>
      <span onClick={() => setOpen(true)} className="contents">
        {trigger ?? (
          <Tooltip content="Model configuration">
            <Button variant="outline" size="sm" className="relative" aria-label="Model configuration">
              <Settings2 />
              <span className="hidden sm:inline">Configure</span>
              {active > 0 ? <span className="absolute -right-1 -top-1 flex size-4 items-center justify-center rounded-full bg-accent text-[10px] font-semibold text-accent-fg">{active}</span> : null}
            </Button>
          </Tooltip>
        )}
      </span>

      <ResponsiveDialog
        open={open}
        onOpenChange={setOpen}
        desktop="panel"
        snap="full"
        title={
          <span className="flex items-center gap-2">
            {model ? <ProviderIcon provider={model.provider} size={16} /> : null}
            <span className="truncate">Configure {model?.displayName ?? "model"}</span>
            {model?.limits?.contextTokens ? <Badge variant="outline">{formatTokens(model.limits.contextTokens)} ctx</Badge> : null}
          </span>
        }
        description="Only settings this model supports are shown. Nothing else is ever sent to the provider."
        footer={
          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <Button variant="ghost" size="sm" className="h-10 justify-start sm:h-8" onClick={() => onChange({})} disabled={active === 0}>
              <RotateCcw /> Reset to defaults
            </Button>
            <div className="grid grid-cols-2 gap-2 sm:flex">
              <Button variant="outline" size="sm" className="h-10 sm:h-8" onClick={() => setPresetsOpen(true)} disabled={!model}>
                <Bookmark /> Apply preset
              </Button>
              {allowSavePreset ? (
                <Button variant="outline" size="sm" className="h-10 sm:h-8" onClick={() => setSaveOpen(true)} disabled={!model}>
                  <Save /> Save preset
                </Button>
              ) : (
                <Button size="sm" className="h-10 sm:h-8" onClick={() => setOpen(false)}>
                  Done
                </Button>
              )}
            </div>
          </div>
        }
      >
        <div className="space-y-3 pt-1">
          <section className="space-y-1.5">
            <Label htmlFor="sys">System prompt</Label>
            <Textarea id="sys" value={systemPrompt} onChange={(e) => onSystemPromptChange(e.target.value)} placeholder="Instructions that apply to the whole conversation…" rows={4} className="min-h-[96px]" />
          </section>

          {!model ? <EmptyState title="Pick a model first" description="Settings depend on what the selected model supports." /> : null}
          {samplingNote ? <p className="rounded-md bg-warning-soft px-2.5 py-1.5 text-xs text-warning">{samplingNote}</p> : null}

          {groups.map(({ group, defs }) => {
            const isOpen = openGroups.has(group.key);
            const n = activeIn(group.key);
            return (
              <section key={group.key} className="panel">
                <button type="button" onClick={() => toggleGroup(group.key)} aria-expanded={isOpen} className="flex min-h-11 w-full items-center gap-2.5 px-3 text-left">
                  <span className="text-fg-muted [&_svg]:size-4">{GROUP_ICON[group.key]}</span>
                  <span className="flex-1">
                    <span className="block text-[13.5px] font-semibold">{group.label}</span>
                    {!isOpen ? <span className="block text-[11.5px] text-fg-subtle">{defs.map((d) => d.label).join(" · ")}</span> : null}
                  </span>
                  {n > 0 ? <Badge variant="accent">{n}</Badge> : null}
                  <ChevronDown className={cn("size-4 text-fg-subtle transition-transform", isOpen && "rotate-180")} />
                </button>
                {isOpen ? (
                  <div className="space-y-4 px-3 pb-3.5">
                    {defs.map((d) => renderControl(d.key))}
                    {group.key === "reasoning" && model?.metadata?.alwaysReasoning ? <p className="text-[11.5px] text-fg-subtle">This model always reasons; effort only changes how much.</p> : null}
                  </div>
                ) : null}
              </section>
            );
          })}

          {unsupported.length ? <p className="px-1 text-[11.5px] text-fg-subtle">Not available for this model: {unsupported.join(", ")}.</p> : null}
        </div>
      </ResponsiveDialog>

      {model ? <PresetPicker open={presetsOpen} onOpenChange={setPresetsOpen} model={model} onApply={applyPreset} /> : null}
      <PromptDialog open={saveOpen} onOpenChange={setSaveOpen} title="Save as preset" description="A model, its system prompt and these parameters, saved as one thing." label="Preset name" placeholder={model ? `${model.displayName} custom` : "My preset"} defaultValue={model ? `${model.displayName} custom` : ""} maxLength={80} onSubmit={savePreset} />
    </>
  );
}

/* --------------------------------------------------------------------------------------------- */

function PresetPicker({ open, onOpenChange, model, onApply }: { open: boolean; onOpenChange: (v: boolean) => void; model: PolyModel; onApply: (p: ModelPreset) => void }) {
  const { modelsByKey } = useApp();
  const q = useApi<{ modelPresets: ModelPreset[] }>(open ? "/api/presets" : null);
  const presets = React.useMemo(() => {
    const list = q.data?.modelPresets ?? [];
    return list
      .map((p) => ({ preset: p, compat: presetCompatibility(p, model) }))
      .sort((a, b) => Number(b.compat.compatible) - Number(a.compat.compatible) || Number(b.preset.modelKey === model.key) - Number(a.preset.modelKey === model.key) || a.preset.name.localeCompare(b.preset.name));
  }, [q.data, model]);
  return (
    <ResponsiveDialog open={open} onOpenChange={onOpenChange} title="Apply a preset" description={`Presets whose every parameter is supported by ${model.displayName} can be applied. Others explain why not.`} size="md" snap="full">
      {q.isLoading ? (
        <div className="space-y-2 pt-1">
          {Array.from({ length: 3 }).map((_, i) => (
            <Skeleton key={i} className="h-16" />
          ))}
        </div>
      ) : presets.length === 0 ? (
        <EmptyState className="mt-1" icon={<Bookmark />} title="No presets yet" description="Save your current settings as a preset from the configuration panel, or create one under Presets." />
      ) : (
        <ul className="space-y-2 pt-1">
          {presets.map(({ preset: p, compat }) => {
            const saved = modelsByKey.get(p.modelKey);
            return (
              <li key={p.id} className={cn("panel flex items-start gap-3 p-3", !compat.compatible && "opacity-80")}>
                <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-bg-elevated text-lg leading-none" aria-hidden>
                  {p.icon || <Bookmark className="size-4 text-fg-muted" />}
                </span>
                <div className="min-w-0 flex-1">
                  <p className="truncate text-[14px] font-medium">{p.name}</p>
                  <p className="mt-0.5 flex items-center gap-1.5 text-[12px] text-fg-muted">
                    <ProviderIcon provider={saved?.provider ?? p.modelKey.split("/")[0]} size={11} />
                    <span className="truncate">Saved for {saved?.displayName ?? p.modelKey}</span>
                    <span className="text-fg-subtle">· {compat.total} setting{compat.total === 1 ? "" : "s"}</span>
                  </p>
                  {compat.compatible ? null : (
                    <ul className="mt-1.5 space-y-0.5 text-[11.5px] text-warning">
                      {compat.unsupported.map((u) => (
                        <li key={u.key} className="flex items-start gap-1">
                          <X className="mt-0.5 size-3 shrink-0" /> {u.reason}
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
                <Button size="sm" variant={compat.compatible ? "primary" : "outline"} className="h-9 shrink-0 sm:h-8" disabled={!compat.compatible} onClick={() => onApply(p)}>
                  Apply
                </Button>
              </li>
            );
          })}
        </ul>
      )}
    </ResponsiveDialog>
  );
}

/* --------------------------------------------------------------------------------------------- */

function FieldRow({ label, hint, children }: { label: React.ReactNode; hint?: string; children: React.ReactNode }) {
  return (
    <div className="flex flex-col gap-1.5 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
      <div className="min-w-0">
        <div className="text-[13px] font-medium">{label}</div>
        {hint ? <div className="text-[11.5px] text-fg-subtle">{hint}</div> : null}
      </div>
      <div className="sm:shrink-0">{children}</div>
    </div>
  );
}

function SwitchRow({ label, hint, icon, checked, onChange }: { label: string; hint?: string; icon?: React.ReactNode; checked: boolean; onChange: (v: boolean) => void }) {
  const id = React.useId();
  return (
    <div className="flex items-center justify-between gap-4">
      <label htmlFor={id} className="min-w-0 cursor-pointer">
        <span className="flex items-center gap-1.5 text-[13px] font-medium [&_svg]:size-3.5">
          {icon} {label}
        </span>
        {hint ? <span className="block text-[11.5px] text-fg-subtle">{hint}</span> : null}
      </label>
      <Switch id={id} checked={checked} onCheckedChange={onChange} />
    </div>
  );
}

/** Slider with an inline numeric input; "Default" means unset (provider default). */
function SliderRow({ label, hint, value, min, max, step, onChange }: { label: string; hint?: string; value: number | undefined; min: number; max: number; step: number; onChange: (v: number | undefined) => void }) {
  const id = React.useId();
  const on = value !== undefined;
  const decimals = step >= 1 ? 0 : step >= 0.1 ? 1 : 2;
  const shown = on ? value! : (min + max) / 2;
  return (
    <div className="space-y-1">
      <div className="flex items-center justify-between gap-3">
        <Label htmlFor={id} className="text-fg">
          {label}
        </Label>
        <div className="flex items-center gap-1.5">
          <Input
            id={id}
            type="number"
            inputMode="decimal"
            className="h-9 w-24 text-right font-mono text-[15px] tabular-nums sm:h-7 sm:w-20 sm:text-[12.5px]"
            value={on ? value : ""}
            placeholder="default"
            min={min}
            max={max}
            step={step}
            onChange={(e) => {
              const raw = e.target.value;
              if (raw === "") return onChange(undefined);
              const n = Number(raw);
              if (Number.isFinite(n)) onChange(Math.min(max, Math.max(min, n)));
            }}
          />
          {on ? (
            <button type="button" onClick={() => onChange(undefined)} className="tap rounded p-1 text-fg-subtle hover:text-fg" aria-label={`Reset ${label} to default`}>
              <X className="size-3.5" />
            </button>
          ) : (
            <span className="w-[22px]" />
          )}
        </div>
      </div>
      <Slider value={[shown]} min={min} max={max} step={step} onValueChange={([v]) => onChange(Number(v.toFixed(decimals)))} className={cn("py-2.5 sm:py-2", !on && "opacity-50")} aria-label={label} />
      <div className="flex justify-between text-[10.5px] text-fg-subtle">
        <span>{min}</span>
        {hint ? <span className="truncate px-2">{hint}</span> : null}
        <span>{max}</span>
      </div>
    </div>
  );
}

function NumberRow({ label, hint, value, min, max, placeholder, onChange }: { label: string; hint?: string; value: number | undefined; min: number; max: number; placeholder?: string; onChange: (v: number | undefined) => void }) {
  return (
    <FieldRow label={label} hint={hint}>
      <Input
        type="number"
        inputMode="numeric"
        className="h-10 font-mono tabular-nums sm:h-8 sm:w-36 sm:text-[13px]"
        value={value ?? ""}
        min={min}
        max={max}
        placeholder={placeholder}
        onChange={(e) => {
          const v = e.target.value;
          if (v === "") return onChange(undefined);
          const n = Number(v);
          if (Number.isFinite(n)) onChange(Math.min(max, Math.max(min, Math.floor(n))));
        }}
      />
    </FieldRow>
  );
}

/** Segmented control for ≤ 4 options (plus Default), Select otherwise. */
function ChoiceRow({ label, hint, value, options, onChange, noDefault }: { label: string; hint?: string; value: string | undefined; options: { value: string; label: string }[]; onChange: (v: string | undefined) => void; noDefault?: boolean }) {
  const all = noDefault ? options : [{ value: UNSET, label: "Default" }, ...options];
  const current = value ?? (noDefault ? options[0]?.value : UNSET);
  return (
    <FieldRow label={label} hint={hint}>
      {all.length <= 5 ? (
        <Segmented size="sm" ariaLabel={label} value={current} onChange={(v) => onChange(v === UNSET ? undefined : v)} options={all} className="w-full sm:w-auto" fill />
      ) : (
        <Select value={current} onValueChange={(v) => onChange(v === UNSET ? undefined : v)}>
          <SelectTrigger className="h-10 w-full sm:h-8 sm:w-48 sm:text-[13px]" aria-label={label}>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {all.map((o) => (
              <SelectItem key={o.value} value={o.value}>
                {o.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      )}
    </FieldRow>
  );
}

function SchemaEditor({ value, onChange }: { value: Record<string, unknown> | undefined; onChange: (schema: Record<string, unknown>) => void }) {
  const [text, setText] = React.useState(() => (value ? JSON.stringify(value, null, 2) : '{\n  "type": "object",\n  "properties": {\n    "answer": { "type": "string" }\n  },\n  "required": ["answer"],\n  "additionalProperties": false\n}'));
  const [error, setError] = React.useState<string | null>(null);
  React.useEffect(() => {
    if (!value) {
      try {
        onChange(JSON.parse(text));
      } catch {
        /* ignore */
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <div className="space-y-1">
      <Textarea
        value={text}
        onChange={(e) => {
          setText(e.target.value);
          try {
            const parsed = JSON.parse(e.target.value);
            if (!parsed || typeof parsed !== "object") throw new Error("Schema must be an object");
            setError(null);
            onChange(parsed);
          } catch (err) {
            setError((err as Error).message);
          }
        }}
        className="min-h-[160px] font-mono text-[12px]"
        spellCheck={false}
        aria-label="JSON schema"
      />
      {error ? <p className="text-xs text-danger">{error}</p> : <p className="text-xs text-fg-subtle">JSON Schema (object root, `additionalProperties: false` recommended for strict mode).</p>}
    </div>
  );
}