"use client";
import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { Braces, Globe, Wrench } from "lucide-react";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { cn } from "@/lib/utils";
import { Check, Section, SectionHeading, Window } from "./section";
import { Reveal } from "./reveal";
import { MOCK_MODELS, type MockModel } from "./mock-data";

type Control = { id: string; label: string; hint: string; render: React.ReactNode };

function Track({ value, label }: { value: number; label: string }) {
  return (
    <div className="flex items-center gap-3">
      <div className="relative h-1.5 flex-1 rounded-full bg-bg-muted">
        <div className="absolute inset-y-0 left-0 rounded-full bg-accent" style={{ width: `${value * 100}%` }} />
        <div className="absolute top-1/2 size-3.5 -translate-y-1/2 rounded-full border border-border-strong bg-bg-elevated shadow-xs" style={{ left: `calc(${value * 100}% - 7px)` }} />
      </div>
      <span className="w-12 text-right font-mono text-[11px] tabular-nums text-fg-muted">{label}</span>
    </div>
  );
}

function Segmented({ options, active }: { options: string[]; active: string }) {
  return (
    <div className="inline-flex rounded-md border border-border bg-bg p-0.5">
      {options.map((o) => (
        <span key={o} className={cn("rounded-[5px] px-2.5 py-1 text-[12px] capitalize", o === active ? "bg-fg text-bg shadow-xs" : "text-fg-muted")}>
          {o}
        </span>
      ))}
    </div>
  );
}

function Toggle({ on, icon, label }: { on: boolean; icon: React.ReactNode; label: string }) {
  return (
    <span className="inline-flex items-center gap-2 text-[13px]">
      <span className={cn("relative inline-flex h-5 w-9 items-center rounded-full transition-colors", on ? "bg-accent" : "bg-bg-muted")} aria-hidden>
        <span className={cn("absolute size-4 rounded-full bg-white shadow-sm transition-transform", on ? "translate-x-[18px]" : "translate-x-0.5")} />
      </span>
      <span className="inline-flex items-center gap-1.5 text-fg [&_svg]:size-3.5 [&_svg]:text-fg-muted">
        {icon}
        {label}
      </span>
    </span>
  );
}

function controlsFor(m: MockModel): Control[] {
  const c: Control[] = [];
  if (m.caps.temperature) c.push({ id: "temperature", label: "Temperature", hint: "0 – 2", render: <Track value={0.35} label="0.70" /> });
  if (m.caps.topK) c.push({ id: "topK", label: "Top-K", hint: "1 – 64", render: <Track value={0.62} label="40" /> });
  if (m.caps.reasoningEffort) c.push({ id: "effort", label: "Reasoning effort", hint: "provider levels", render: <Segmented options={["low", "medium", "high"]} active="medium" /> });
  if (m.caps.thinkingBudget) c.push({ id: "budget", label: "Thinking budget", hint: "1K – 128K tokens", render: <Track value={0.22} label="16K" /> });
  if (m.caps.verbosity) c.push({ id: "verbosity", label: "Verbosity", hint: "response length", render: <Segmented options={["low", "medium", "high"]} active="low" /> });
  const toggles: React.ReactNode[] = [];
  if (m.caps.jsonSchema) toggles.push(<Toggle key="json" on icon={<Braces />} label="JSON schema" />);
  if (m.caps.tools) toggles.push(<Toggle key="tools" on={false} icon={<Wrench />} label="Tools" />);
  if (m.caps.webSearch) toggles.push(<Toggle key="web" on icon={<Globe />} label="Web search" />);
  if (toggles.length) c.push({ id: "toggles", label: "Capabilities", hint: "only what this model supports", render: <div className="flex flex-wrap gap-x-5 gap-y-2">{toggles}</div> });
  return c;
}

const HIDDEN_NOTE: Record<string, string> = {
  "openai/gpt-5.5": "Temperature hidden: this reasoning model does not accept it.",
  "anthropic/claude-opus-5": "Reasoning effort hidden: Claude uses a thinking budget instead.",
  "gemini/gemini-3.8-flash": "Top-K shown: Gemini exposes it, the others don't.",
  "xai/grok-4.6": "Thinking budget hidden: Grok exposes effort levels only.",
};

function ConfigVisual() {
  const [key, setKey] = React.useState(MOCK_MODELS[1].key);
  const reduce = useReducedMotion();
  const model = MOCK_MODELS.find((m) => m.key === key) ?? MOCK_MODELS[0];
  const controls = controlsFor(model);
  return (
    <Window title="Model settings" className="mx-auto w-full max-w-xl">
      <div className="flex gap-1 overflow-x-auto border-b border-border p-2 scrollbar-none" role="tablist" aria-label="Pick a model">
        {MOCK_MODELS.map((m) => (
          <button
            key={m.key}
            type="button"
            role="tab"
            aria-selected={m.key === key}
            onClick={() => setKey(m.key)}
            className={cn(
              "inline-flex shrink-0 items-center gap-1.5 rounded-md px-2.5 py-1.5 text-[13px] font-medium transition-colors",
              m.key === key ? "bg-bg-muted text-fg" : "text-fg-muted hover:bg-bg-subtle hover:text-fg",
            )}
          >
            <ProviderIcon provider={m.provider} size={13} />
            {m.name}
          </button>
        ))}
      </div>
      <div className="p-4">
        <ul className="space-y-4">
          <AnimatePresence initial={false} mode="popLayout">
            {controls.map((c) => (
              <motion.li
                key={c.id}
                layout={!reduce}
                initial={reduce ? false : { opacity: 0, y: 6 }}
                animate={{ opacity: 1, y: 0 }}
                exit={reduce ? undefined : { opacity: 0, y: -6, transition: { duration: 0.12 } }}
                transition={{ duration: 0.22, ease: [0.16, 1, 0.3, 1] }}
              >
                <div className="mb-1.5 flex items-baseline justify-between">
                  <span className="text-[13px] font-medium">{c.label}</span>
                  <span className="font-mono text-[10.5px] text-fg-subtle">{c.hint}</span>
                </div>
                {c.render}
              </motion.li>
            ))}
          </AnimatePresence>
        </ul>
        <p className="mt-5 rounded-md border border-dashed border-border bg-bg px-3 py-2 text-[12px] leading-5 text-fg-muted" aria-live="polite">
          {HIDDEN_NOTE[model.key]}
        </p>
      </div>
    </Window>
  );
}

export function FeatureConfig() {
  return (
    <Section id="configuration">
      <div className="grid items-center gap-10 lg:grid-cols-12 lg:gap-14">
        <div className="lg:col-span-5">
          <SectionHeading
            eyebrow="Advanced configuration"
            title="Every parameter that matters. None that don't."
            description="Each model ships with a capability sheet: what it can see, whether it reasons, which parameters it accepts and in what ranges. The settings panel is generated from that sheet, so you never see a temperature slider on a model that ignores it."
          />
          <Reveal delay={0.1}>
            <ul className="mt-6 space-y-2.5">
              {["Temperature, top-p, top-k, max tokens, stop sequences, seed", "Reasoning effort or thinking budget, depending on the provider", "JSON schema output, tool calling and provider web search", "Save presets and reuse them across models and conversations"].map((b) => (
                <li key={b} className="flex items-start gap-2.5 text-[15px] leading-6">
                  <Check className="mt-1" />
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </Reveal>
          <p className="mt-4 text-[13px] text-fg-subtle">Try it: switch models in the panel.</p>
        </div>
        <Reveal delay={0.1} y={20} className="min-w-0 lg:col-span-7">
          <ConfigVisual />
        </Reveal>
      </div>
    </Section>
  );
}