"use client";
import * as React from "react";
import { X, RotateCcw } from "lucide-react";
import { Slider } from "@/components/ui/slider";
import { Input, Label } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import type { GenerationSettingsInput, PolyModel, ReasoningEffort } from "@/lib/client/types";

export type Params = GenerationSettingsInput;

const UNSET = "__unset__";
const EFFORTS: ReasoningEffort[] = ["none", "minimal", "low", "medium", "high", "xhigh", "max"];

export const BUILTIN_TOOLS: { id: string; label: string; description: string }[] = [
  { id: "calculator", label: "Calculator", description: "Exact arithmetic and unit conversion." },
  { id: "clock", label: "Clock", description: "Current date and time in any timezone." },
  { id: "random", label: "Random", description: "Random numbers, UUIDs and picks." },
];

/** Human chips for a stored parameter object — used on preset cards. */
export function parameterChips(p: Record<string, unknown> | null | undefined): string[] {
  if (!p) return [];
  const out: string[] = [];
  if (typeof p.temperature === "number") out.push(`temp ${p.temperature}`);
  if (typeof p.topP === "number") out.push(`top-p ${p.topP}`);
  if (typeof p.topK === "number") out.push(`top-k ${p.topK}`);
  if (typeof p.maxTokens === "number") out.push(`${p.maxTokens.toLocaleString()} max`);
  if (typeof p.reasoningEffort === "string") out.push(`effort ${p.reasoningEffort}`);
  if (typeof p.thinkingBudget === "number") out.push(`budget ${p.thinkingBudget.toLocaleString()}`);
  if (typeof p.verbosity === "string") out.push(`verbosity ${p.verbosity}`);
  if (typeof p.frequencyPenalty === "number") out.push(`freq ${p.frequencyPenalty}`);
  if (typeof p.presencePenalty === "number") out.push(`pres ${p.presencePenalty}`);
  if (typeof p.seed === "number") out.push(`seed ${p.seed}`);
  if (Array.isArray(p.stop) && p.stop.length) out.push(`${p.stop.length} stop`);
  if (p.webSearch) out.push("web search");
  if (Array.isArray(p.tools) && p.tools.length) out.push(`tools: ${(p.tools as string[]).join(", ")}`);
  if (p.responseFormat && typeof p.responseFormat === "object" && (p.responseFormat as { type?: string }).type !== "text") out.push("JSON output");
  return out;
}

interface Props {
  value: Params;
  onChange: (next: Params) => void;
  /**
   * When provided, only controls the model supports are shown (its `parameters` sheet + capabilities).
   * When omitted (prompt presets), a compact generic subset is shown.
   */
  model?: PolyModel | null;
  compact?: boolean;
  className?: string;
}

/** Parameters editor driven by a model's capability sheet. Never shows a control the model does not support. */
export function ParametersForm({ value, onChange, model, compact, className }: Props) {
  const sheet = model?.parameters;
  const caps = model?.capabilities;
  const generic = !model;

  const set = <K extends keyof Params>(k: K, v: Params[K] | undefined) => {
    const next = { ...value };
    if (v === undefined) delete next[k];
    else next[k] = v;
    onChange(next);
  };

  const show = {
    temperature: generic || Boolean(sheet?.temperature),
    topP: !compact && Boolean(sheet?.topP),
    topK: !compact && Boolean(sheet?.topK),
    maxTokens: generic || Boolean(sheet?.maxTokens),
    reasoningEffort: generic || Boolean(sheet?.reasoningEffort),
    thinkingBudget: !compact && Boolean(sheet?.thinkingBudget),
    verbosity: !compact && Boolean(sheet?.verbosity),
    frequencyPenalty: !compact && Boolean(sheet?.frequencyPenalty),
    presencePenalty: !compact && Boolean(sheet?.presencePenalty),
    seed: !compact && Boolean(sheet?.seed),
    stop: !compact && Boolean(sheet?.stop),
    tools: !compact && (generic || Boolean(caps?.tools)),
    webSearch: !compact && Boolean(caps?.webSearch),
    structured: !compact && Boolean(caps?.structuredOutput),
  };

  const tempRange = sheet?.temperatureRange ?? { min: 0, max: 2 };
  const effortLevels = (sheet?.reasoningEffortLevels?.length ? sheet.reasoningEffortLevels : EFFORTS) as string[];
  const budgetRange = sheet?.thinkingBudgetRange ?? { min: 0, max: 200_000 };
  const maxOut = model?.limits?.maxOutputTokens;
  const anySet = Object.keys(value).length > 0;

  const nothing = !Object.values(show).some(Boolean);

  return (
    <div className={cn("space-y-4", className)}>
      <div className="flex items-center justify-between">
        <p className="text-[13px] font-medium text-fg-muted">Parameters</p>
        {anySet ? (
          <Button type="button" variant="ghost" size="xs" onClick={() => onChange({})}>
            <RotateCcw /> Reset to model defaults
          </Button>
        ) : (
          <span className="text-[11px] text-fg-subtle">Unset = provider default</span>
        )}
      </div>

      {nothing ? <p className="rounded-lg border border-dashed border-border px-3 py-4 text-center text-xs text-fg-subtle">This model exposes no tunable parameters.</p> : null}

      {show.temperature ? (
        <SliderField label="Temperature" hint="Lower is more deterministic." value={value.temperature} min={tempRange.min} max={tempRange.max} step={0.05} onChange={(v) => set("temperature", v)} />
      ) : null}
      {show.topP ? <SliderField label="Top-p" hint="Nucleus sampling cutoff." value={value.topP} min={0} max={1} step={0.01} onChange={(v) => set("topP", v)} /> : null}
      {show.topK ? <NumberField label="Top-k" value={value.topK} min={1} max={500} step={1} onChange={(v) => set("topK", v)} /> : null}
      {show.maxTokens ? <NumberField label="Max output tokens" hint={maxOut ? `Model limit ${maxOut.toLocaleString()}` : undefined} value={value.maxTokens} min={1} max={maxOut ?? 400_000} step={1} onChange={(v) => set("maxTokens", v)} /> : null}

      {show.reasoningEffort ? (
        <SelectField label="Reasoning effort" value={value.reasoningEffort} options={effortLevels.map((l) => ({ value: l, label: l }))} onChange={(v) => set("reasoningEffort", v as ReasoningEffort | undefined)} />
      ) : null}
      {show.thinkingBudget ? <NumberField label="Thinking budget (tokens)" hint={`${budgetRange.min.toLocaleString()} – ${budgetRange.max.toLocaleString()}`} value={value.thinkingBudget} min={budgetRange.min} max={budgetRange.max} step={256} onChange={(v) => set("thinkingBudget", v)} /> : null}
      {show.verbosity ? <SelectField label="Verbosity" value={value.verbosity} options={["low", "medium", "high"].map((l) => ({ value: l, label: l }))} onChange={(v) => set("verbosity", v as Params["verbosity"])} /> : null}

      {show.frequencyPenalty || show.presencePenalty ? (
        <div className="grid gap-4 sm:grid-cols-2">
          {show.frequencyPenalty ? <SliderField label="Frequency penalty" value={value.frequencyPenalty} min={-2} max={2} step={0.1} onChange={(v) => set("frequencyPenalty", v)} /> : null}
          {show.presencePenalty ? <SliderField label="Presence penalty" value={value.presencePenalty} min={-2} max={2} step={0.1} onChange={(v) => set("presencePenalty", v)} /> : null}
        </div>
      ) : null}

      {show.seed ? <NumberField label="Seed" hint="Best-effort reproducibility." value={value.seed} min={0} max={2_147_483_647} step={1} onChange={(v) => set("seed", v)} /> : null}
      {show.stop ? <StopField value={value.stop ?? []} onChange={(v) => set("stop", v.length ? v : undefined)} /> : null}

      {show.structured ? (
        <ToggleField label="Strict JSON output" hint="Ask the model to return a JSON object." checked={value.responseFormat?.type === "json"} onChange={(v) => set("responseFormat", v ? { type: "json" } : undefined)} />
      ) : null}
      {show.webSearch ? <ToggleField label="Web search" hint="Let the provider search the live web and cite sources." checked={Boolean(value.webSearch)} onChange={(v) => set("webSearch", v || undefined)} /> : null}

      {show.tools ? (
        <div className="space-y-2">
          <Label>Built-in tools</Label>
          <div className="grid gap-2 sm:grid-cols-3">
            {BUILTIN_TOOLS.map((t) => {
              const on = value.tools?.includes(t.id) ?? false;
              return (
                <label key={t.id} className={cn("flex cursor-pointer items-start gap-2.5 rounded-lg border p-2.5 transition-colors", on ? "border-accent/50 bg-accent-soft/40" : "border-border hover:border-border-strong")}>
                  <Switch
                    size="sm"
                    checked={on}
                    onCheckedChange={(v) => {
                      const cur = new Set(value.tools ?? []);
                      if (v) cur.add(t.id);
                      else cur.delete(t.id);
                      set("tools", cur.size ? [...cur] : undefined);
                    }}
                    className="mt-0.5"
                  />
                  <span className="min-w-0">
                    <span className="block text-[13px] font-medium leading-4">{t.label}</span>
                    <span className="block text-[11px] leading-4 text-fg-subtle">{t.description}</span>
                  </span>
                </label>
              );
            })}
          </div>
        </div>
      ) : null}
    </div>
  );
}

function SliderField({ 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 isSet = value !== undefined;
  const shown = value ?? (min + max) / 2;
  return (
    <div className="space-y-1.5">
      <div className="flex items-center justify-between gap-2">
        <Label htmlFor={id}>{label}</Label>
        <span className="flex items-center gap-1.5">
          {isSet ? (
            <>
              <span className="font-mono text-xs tabular-nums text-fg">{value}</span>
              <button type="button" onClick={() => onChange(undefined)} className="rounded p-0.5 text-fg-subtle hover:text-fg" aria-label={`Unset ${label}`}>
                <X className="size-3" />
              </button>
            </>
          ) : (
            <Badge>default</Badge>
          )}
        </span>
      </div>
      <Slider id={id} min={min} max={max} step={step} value={[shown]} onValueChange={([v]) => onChange(Number(v.toFixed(2)))} className={cn(!isSet && "opacity-60")} aria-label={label} />
      <div className="flex justify-between text-[10.5px] text-fg-subtle">
        <span>{min}</span>
        {hint ? <span>{hint}</span> : null}
        <span>{max}</span>
      </div>
    </div>
  );
}

function NumberField({ 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();
  return (
    <div className="space-y-1.5">
      <div className="flex items-center justify-between">
        <Label htmlFor={id}>{label}</Label>
        {hint ? <span className="text-[11px] text-fg-subtle">{hint}</span> : null}
      </div>
      <Input
        id={id}
        type="number"
        inputMode="numeric"
        min={min}
        max={max}
        step={step}
        value={value ?? ""}
        placeholder="default"
        onChange={(e) => {
          const raw = e.target.value;
          if (raw === "") return onChange(undefined);
          const n = Number(raw);
          if (Number.isNaN(n)) return;
          onChange(Math.min(max, Math.max(min, step >= 1 ? Math.round(n) : n)));
        }}
        className="font-mono"
      />
    </div>
  );
}

function SelectField({ label, value, options, onChange }: { label: string; value: string | undefined; options: { value: string; label: string }[]; onChange: (v: string | undefined) => void }) {
  const id = React.useId();
  return (
    <div className="space-y-1.5">
      <Label htmlFor={id}>{label}</Label>
      <Select value={value ?? UNSET} onValueChange={(v) => onChange(v === UNSET ? undefined : v)}>
        <SelectTrigger id={id}>
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value={UNSET}>Provider default</SelectItem>
          {options.map((o) => (
            <SelectItem key={o.value} value={o.value} className="capitalize">
              {o.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}

function ToggleField({ label, hint, checked, onChange }: { label: string; hint?: string; checked: boolean; onChange: (v: boolean) => void }) {
  const id = React.useId();
  return (
    <div className="flex items-center justify-between gap-3 rounded-lg border border-border px-3 py-2.5">
      <div className="min-w-0">
        <label htmlFor={id} className="text-[13px] font-medium">
          {label}
        </label>
        {hint ? <p className="text-[11px] text-fg-subtle">{hint}</p> : null}
      </div>
      <Switch id={id} size="sm" checked={checked} onCheckedChange={onChange} />
    </div>
  );
}

function StopField({ value, onChange }: { value: string[]; onChange: (v: string[]) => void }) {
  const [draft, setDraft] = React.useState("");
  const id = React.useId();
  const add = () => {
    const s = draft.trim();
    if (!s || value.includes(s) || value.length >= 4) return;
    onChange([...value, s.slice(0, 64)]);
    setDraft("");
  };
  return (
    <div className="space-y-1.5">
      <div className="flex items-center justify-between">
        <Label htmlFor={id}>Stop sequences</Label>
        <span className="text-[11px] text-fg-subtle">{value.length}/4</span>
      </div>
      <div className="flex flex-wrap items-center gap-1.5 rounded-md border border-border bg-bg-elevated px-2 py-1.5 focus-within:border-accent focus-within:ring-2 focus-within:ring-accent/25">
        {value.map((s) => (
          <span key={s} className="inline-flex items-center gap-1 rounded bg-bg-muted px-1.5 py-0.5 font-mono text-xs">
            {JSON.stringify(s).slice(1, -1)}
            <button type="button" onClick={() => onChange(value.filter((x) => x !== s))} className="text-fg-subtle hover:text-fg" aria-label={`Remove stop sequence ${s}`}>
              <X className="size-3" />
            </button>
          </span>
        ))}
        <input
          id={id}
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" || e.key === ",") {
              e.preventDefault();
              add();
            }
          }}
          onBlur={add}
          placeholder={value.length ? "" : "Type and press Enter"}
          disabled={value.length >= 4}
          className="min-w-[8ch] flex-1 bg-transparent font-mono text-[15px] outline-none placeholder:text-fg-subtle sm:text-xs"
        />
      </div>
    </div>
  );
}