import * as React from "react";
import Link from "next/link";
import { ArrowRight, Check, Columns2, Download, EyeOff, FileText, FolderOpen, Keyboard, Paperclip, Route, ServerCog, Smartphone, Sparkles, Star, WandSparkles } from "lucide-react";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { Check as CheckMark, Section, SectionHeading } from "./section";
import { Reveal } from "./reveal";
import { DesktopFrame } from "./frames";
import { DesktopModelsMock, DesktopUsageMock, ScoreboardMock } from "./product-mock";
import { MOCK_MODELS } from "./mock-data";

/* ------------------------------------------------------------------------------------------------
 * Shared two-column feature block — spatial grouping, no boxed cards
 * ---------------------------------------------------------------------------------------------- */
function FeatureBlock({
  id,
  eyebrow,
  title,
  description,
  bullets,
  visual,
  flip = false,
  tone,
  cta,
}: {
  id?: string;
  eyebrow: string;
  title: React.ReactNode;
  description: React.ReactNode;
  bullets?: string[];
  visual: React.ReactNode;
  flip?: boolean;
  tone?: "default" | "subtle";
  cta?: { label: string; href: string };
}) {
  return (
    <Section id={id} tone={tone} className="py-14 sm:py-20">
      <div className="grid items-center gap-10 lg:grid-cols-12 lg:gap-14">
        <div className={cn("lg:col-span-5", flip && "lg:order-2")}>
          <SectionHeading eyebrow={eyebrow} title={title} description={description} />
          {bullets ? (
            <Reveal delay={0.1}>
              <ul className="mt-6 space-y-2.5">
                {bullets.map((b) => (
                  <li key={b} className="flex items-start gap-2.5 text-[15px] leading-6 text-fg">
                    <CheckMark className="mt-1" />
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </Reveal>
          ) : null}
          {cta ? (
            <Reveal delay={0.15}>
              <Link href={cta.href} className="mt-6 inline-flex items-center gap-1.5 text-[14px] font-medium text-accent underline-offset-4 hover:underline">
                {cta.label} <ArrowRight className="size-4" aria-hidden />
              </Link>
            </Reveal>
          ) : null}
        </div>
        <Reveal delay={0.1} y={20} className={cn("min-w-0 lg:col-span-7", flip && "lg:order-1")}>
          {visual}
        </Reveal>
      </div>
    </Section>
  );
}

/* ------------------------------------------------------------------------------------------------
 * 1. Smart Router (AUTO)
 * ---------------------------------------------------------------------------------------------- */
function RouterVisual() {
  const rec = MOCK_MODELS[2]; // Gemini 3.8 Flash
  const alt = [MOCK_MODELS[1], MOCK_MODELS[5]];
  return (
    <div className="panel mx-auto w-full max-w-xl p-4 sm:p-5">
      <div className="flex items-center gap-2 text-[12.5px] text-fg-muted">
        <span className="inline-flex h-7 items-center gap-1.5 rounded-md border border-border bg-bg-elevated px-2 text-[12.5px] font-medium text-fg">
          <Route className="size-3.5 text-accent" /> AUTO
          <span className="font-normal text-fg-subtle">· balanced</span>
        </span>
        <span className="hidden sm:inline">Smart Router picks from the models you connected.</span>
      </div>
      <p className="mt-4 rounded-2xl rounded-br-md bg-bg-muted px-3.5 py-2 text-[13.5px] leading-6">Summarize this 40-page PDF into a one-page brief for the board. Keep the numbers exact.</p>
      <div className="mt-2 flex flex-wrap gap-1.5" aria-label="Prompt analysis">
        {["document · 38K tokens", "summarization", "precision matters", "no code", "English"].map((t) => (
          <span key={t} className="rounded-full bg-bg-elevated px-2 py-0.5 font-mono text-[10.5px] text-fg-muted">
            {t}
          </span>
        ))}
      </div>
      <div className="mt-4 rounded-xl border border-accent/30 bg-bg-elevated p-3.5 shadow-xs">
        <div className="flex items-center gap-2">
          <ProviderIcon provider={rec.provider} size={16} />
          <span className="text-[14px] font-semibold">{rec.name}</span>
          <Badge variant="accent">recommended</Badge>
          <span className="ml-auto font-mono text-[11px] tabular-nums text-fg-subtle">≈ $0.014</span>
        </div>
        <p className="mt-2 text-[13px] leading-6 text-fg-muted">Long document, no reasoning needed: a 1M-context model at $0.30 / M input is 17× cheaper than Opus here and finishes in about 6 s. Vision is on for the charts.</p>
        <div className="mt-3 flex flex-wrap gap-2">
          <span className="inline-flex h-8 items-center rounded-md bg-fg px-3 text-[12.5px] font-medium text-bg">Use {rec.name}</span>
          <span className="inline-flex h-8 items-center rounded-md border border-border px-3 text-[12.5px] font-medium">Choose another</span>
          <span className="inline-flex h-8 items-center rounded-md px-2 text-[12.5px] text-fg-muted">Always auto-route</span>
        </div>
      </div>
      <ul className="mt-3 space-y-1.5 px-1 text-[12px] text-fg-muted">
        {alt.map((m, i) => (
          <li key={m.key} className="flex items-center gap-2">
            <ProviderIcon provider={m.provider} size={12} />
            <span className="text-fg">{m.name}</span>
            <span className="font-mono text-[10.5px] text-fg-subtle">{i === 0 ? "≈ $0.062 · reasoning on" : "≈ $0.024 · no vision"}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export function FeatureRouter() {
  return (
    <FeatureBlock
      id="features"
      eyebrow="Smart Router"
      title="Pick AUTO and let the prompt choose the model"
      description="The router reads your prompt — length, code, attachments, reasoning needs, language — and recommends one of your connected models with a one-line explanation and a cost estimate before anything is sent. Accept, choose another, or let it route every time."
      bullets={["Modes: balanced, cheapest, fastest, best quality", "Runs in your browser — the prompt never leaves until you press Send", "Transparent: every recommendation says why"]}
      visual={<RouterVisual />}
    />
  );
}

/* ------------------------------------------------------------------------------------------------
 * 2. Arena + Blind Arena + scoreboard
 * ---------------------------------------------------------------------------------------------- */
function BlindArenaVisual() {
  return (
    <div className="panel p-4">
      <div className="flex items-center gap-2 text-[12.5px] font-semibold">
        <EyeOff className="size-4 text-fg-muted" /> Blind Arena
        <span className="ml-auto font-mono text-[10.5px] font-normal text-fg-subtle">models hidden until you vote</span>
      </div>
      <div className="mt-3 grid grid-cols-2 gap-2">
        {(["Model A", "Model B"] as const).map((label, i) => (
          <div key={label} className="rounded-lg bg-bg-elevated p-3 text-[12.5px]">
            <div className="flex items-center justify-between">
              <span className="font-medium">{label}</span>
              <span className="font-mono text-[10.5px] text-fg-subtle">{i === 0 ? "1.9 s" : "1.1 s"}</span>
            </div>
            <p className="mt-1.5 line-clamp-3 leading-5 text-fg-muted">{i === 0 ? "A retry budget caps the total number of retries across a call tree so cascading retries can't amplify load…" : "Think of a retry budget as a shared allowance: every retry spends from it, and when the pool is empty callers fail fast…"}</p>
            <span className={cn("mt-2.5 inline-flex h-7 items-center gap-1 rounded-full border px-2.5 text-[11.5px] font-medium", i === 1 ? "border-fg bg-fg text-bg" : "border-border text-fg-muted")}>
              {i === 1 ? <Check className="size-3" /> : null} Best
            </span>
          </div>
        ))}
      </div>
      <p className="mt-3 flex items-center gap-2 text-[12px] text-fg-muted">
        <Sparkles className="size-3.5 text-accent" /> Revealed: B was <span className="inline-flex items-center gap-1 font-medium text-fg"><ProviderIcon provider="gemini" size={12} /> Gemini 3.8 Flash</span> at $0.0011.
      </p>
    </div>
  );
}

export function FeatureArena() {
  return (
    <FeatureBlock
      id="arena"
      eyebrow="Arena"
      title="Compare models side by side, then keep score"
      description="Send one prompt to up to four models at once and watch the answers stream in parallel with time to first token, throughput and cost per column. Vote — Best, Most accurate, Best writing, Best coding, Best value, Fastest — and PolyLLM builds a personal scoreboard of which model earns its price for your actual work."
      bullets={["Blind Arena hides the models until you vote", "Scoreboard filters: coding, research, writing, reasoning, cost efficiency", "Export a comparison as Markdown or JSON, or share it with a link"]}
      visual={
        <div className="grid gap-3 sm:grid-cols-2">
          <ScoreboardMock />
          <BlindArenaVisual />
        </div>
      }
      flip
      tone="subtle"
      cta={{ label: "Try the Arena", href: "/app/arena" }}
    />
  );
}

/* ------------------------------------------------------------------------------------------------
 * 3. Catalog & compare
 * ---------------------------------------------------------------------------------------------- */
export function FeatureCatalog() {
  return (
    <FeatureBlock
      eyebrow="Model catalog"
      title="Every model your keys unlock, with its real capability sheet"
      description="PolyLLM syncs each provider's model list and merges it with a documented catalog: context window, prices, lifecycle (new, active, deprecated, retiring), and exactly which parameters the model accepts. Search by intent — “cheap vision model”, “1M context”, “under $1/M” — and open any two models in a public compare page."
      bullets={["Public /models and /compare pages, no account needed", "Badges: New, Fast, Cheap, Reasoning, Vision, Coding, Long context", "Favorites, recents and custom labels in the picker (⌘/)"]}
      visual={
        <DesktopFrame url="polyllm.io/models" className="mx-auto w-full max-w-2xl">
          <DesktopModelsMock className="min-h-0 [&_aside]:hidden" />
        </DesktopFrame>
      }
      cta={{ label: "Browse the catalog", href: "/models" }}
    />
  );
}

/* ------------------------------------------------------------------------------------------------
 * 4. Projects, prompt library, context library
 * ---------------------------------------------------------------------------------------------- */
function WorkspaceVisual() {
  return (
    <div className="panel grid gap-px overflow-hidden p-1 sm:grid-cols-[1.1fr_1fr]">
      <div className="rounded-[14px] bg-bg-elevated p-4">
        <div className="flex items-center gap-2 text-[13px] font-semibold">
          <FolderOpen className="size-4 text-accent" /> Research
          <Badge className="ml-auto">3 models</Badge>
        </div>
        <p className="mt-3 text-[11px] font-medium uppercase tracking-[0.08em] text-fg-subtle">Instructions</p>
        <p className="mt-1 text-[12.5px] leading-5 text-fg-muted">Answer like a careful analyst. Cite sources inline. Use CAD unless told otherwise. Prefer tables for comparisons.</p>
        <p className="mt-3 text-[11px] font-medium uppercase tracking-[0.08em] text-fg-subtle">Files</p>
        <ul className="mt-1 space-y-1 text-[12.5px]">
          {[
            ["Q3-board-deck.pdf", "38K tok"],
            ["pricing-2026.csv", "4K tok"],
          ].map(([n, t]) => (
            <li key={n} className="flex items-center gap-2">
              <FileText className="size-3.5 text-fg-subtle" /> {n}
              <span className="ml-auto font-mono text-[10.5px] text-fg-subtle">{t}</span>
            </li>
          ))}
        </ul>
        <p className="mt-3 text-[11px] font-medium uppercase tracking-[0.08em] text-fg-subtle">Conversations</p>
        <ul className="mt-1 space-y-1 text-[12.5px] text-fg-muted">
          <li>Board brief, draft 2</li>
          <li>Competitor pricing scan</li>
        </ul>
      </div>
      <div className="flex flex-col gap-px">
        <div className="rounded-[14px] bg-bg-elevated p-4">
          <div className="flex items-center gap-2 text-[13px] font-semibold">
            <WandSparkles className="size-4 text-accent" /> Prompt library
          </div>
          <div className="mt-3 rounded-lg bg-bg-subtle p-3 font-mono text-[11.5px] leading-5 text-fg-muted">
            Review <span className="rounded bg-accent-soft px-1 text-accent">{"{{language}}"}</span> code for <span className="rounded bg-accent-soft px-1 text-accent">{"{{focus}}"}</span>. Return findings as a table with severity.
          </div>
          <p className="mt-2 text-[11.5px] text-fg-subtle">Variables are filled in a sheet before insertion.</p>
        </div>
        <div className="rounded-[14px] bg-bg-elevated p-4">
          <div className="flex items-center gap-2 text-[13px] font-semibold">
            <Paperclip className="size-4 text-accent" /> Context library
          </div>
          <p className="mt-2 text-[12.5px] leading-5 text-fg-muted">Upload once, attach anywhere. Every file shows its token estimate so you know what it costs before sending.</p>
        </div>
      </div>
    </div>
  );
}

export function FeatureWorkspace() {
  return (
    <FeatureBlock
      eyebrow="Projects & libraries"
      title="Give every piece of work its own instructions, files and prompts"
      description="Projects carry system instructions, preferred models, notes and files that apply to every conversation inside them. The prompt library keeps reusable prompts with {{variables}}; the context library keeps documents you attach again and again."
      bullets={["Conversations filtered by project, folders, pins and tags", "Prompt variables with defaults and a fill-in sheet", "Token estimates on every file before you attach it"]}
      visual={<WorkspaceVisual />}
      flip
      tone="subtle"
    />
  );
}

/* ------------------------------------------------------------------------------------------------
 * 5. Usage analytics with savings
 * ---------------------------------------------------------------------------------------------- */
export function FeatureAnalytics() {
  return (
    <FeatureBlock
      eyebrow="Usage analytics"
      title="Know what every conversation costs — and where to save"
      description="Every request records input and output tokens, the cost from the provider's current price sheet, time to first token and throughput. Filter by period, provider, model or project, see the projected monthly cost, and get savings opportunities computed from your own usage."
      bullets={["KPIs: requests, tokens, cost, avg TTFT, tok/s, error rate", "Charts by day, by provider and by model", "Cost estimate before you send; confirmation above a threshold"]}
      visual={
        <DesktopFrame url="polyllm.io/app/usage" className="mx-auto w-full max-w-2xl">
          <DesktopUsageMock className="min-h-0 [&_aside]:hidden" />
        </DesktopFrame>
      }
    />
  );
}

/* ------------------------------------------------------------------------------------------------
 * 6. Custom endpoints for local models
 * ---------------------------------------------------------------------------------------------- */
const ENDPOINTS = [
  { name: "Ollama (Mac Studio)", url: "http://m3u96a.local:11434/v1", models: ["qwen3.6:32b", "gemma-4-27b", "llama-4-scout"], status: "Connected" },
  { name: "LM Studio", url: "http://127.0.0.1:1234/v1", models: ["mistral-small-4"], status: "Connected" },
  { name: "vLLM · lab GPU", url: "https://vllm.lab.example/v1", models: ["deepseek-v4-flash"], status: "Discovering…" },
];

function EndpointsVisual() {
  return (
    <div className="panel p-2">
      <ul className="divide-y divide-hairline rounded-[14px] bg-bg-elevated">
        {ENDPOINTS.map((e, i) => (
          <li key={e.name} className="flex items-start gap-3 p-3.5 text-[12.5px]">
            <span className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-bg-subtle">
              <ServerCog className="size-4 text-fg-muted" />
            </span>
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-2">
                <span className="font-medium">{e.name}</span>
                <Badge variant={i === 2 ? "warning" : "success"}>{e.status}</Badge>
              </div>
              <p className="mt-0.5 truncate font-mono text-[11px] text-fg-subtle">{e.url}</p>
              <div className="mt-2 flex flex-wrap gap-1">
                {e.models.map((m) => (
                  <span key={m} className="rounded-md bg-bg-subtle px-1.5 py-0.5 font-mono text-[10.5px] text-fg-muted">
                    custom/{m}
                  </span>
                ))}
              </div>
            </div>
          </li>
        ))}
      </ul>
      <p className="px-2 pb-1 pt-2.5 text-[11.5px] text-fg-subtle">Models are discovered from GET {"{baseUrl}"}/models or entered by hand, then appear in the picker and the Arena like any other model.</p>
    </div>
  );
}

export function FeatureEndpoints() {
  return (
    <FeatureBlock
      eyebrow="Custom endpoints"
      title="Bring your local models too"
      description="Point PolyLLM at any OpenAI-compatible endpoint — Ollama, LM Studio, vLLM, llama.cpp, MLX — with its own base URL and headers. Discovered models sit next to the cloud ones in the picker, the Arena and the usage dashboard."
      bullets={["Per-endpoint base URL, headers and manual model list", "Compare a local model with a frontier model in the same Arena", "Zero-cost pricing tracked like everything else"]}
      visual={<EndpointsVisual />}
      flip
      tone="subtle"
    />
  );
}

/* ------------------------------------------------------------------------------------------------
 * 7. Also: mobile PWA, keyboard-first, exports
 * ---------------------------------------------------------------------------------------------- */
const ALSO = [
  { icon: <Smartphone />, title: "Designed for phones first", body: "Bottom navigation, swipeable Arena, bottom sheets, a composer that stays above the keyboard. Install it to your home screen and it behaves like a native app." },
  { icon: <Keyboard />, title: "Keyboard-first on desktop", body: "⌘K command palette and search, ⌘N new chat, ⌘/ model picker, ⌘Enter send, Esc stop, ⌘B sidebar. Everything reachable without a mouse." },
  { icon: <Download />, title: "Your data, portable", body: "Export any conversation as Markdown, TXT, JSON or PDF, export your whole account in one file, share a conversation or an Arena comparison with a revocable link." },
  { icon: <Columns2 />, title: "Compare inside a chat", body: "Pick “Compare with…” on any message to run it through two to four models and continue with the one you prefer." },
  { icon: <Star />, title: "Presets that travel", body: "Save temperature, reasoning effort, output format and tools as a preset and apply it to any compatible model." },
  { icon: <EyeOff />, title: "Temporary chats", body: "A chat you never want stored: streamed, shown, gone. Marked “Not stored in history”." },
];

export function FeatureAlso() {
  return (
    <Section className="py-14 sm:py-20">
      <SectionHeading eyebrow="And more" title="The details that make it feel finished" />
      <ul className="mt-10 grid gap-x-8 gap-y-8 sm:grid-cols-2 lg:grid-cols-3">
        {ALSO.map((item, i) => (
          <Reveal key={item.title} as="li" delay={0.04 * i} className="flex gap-3.5">
            <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent-soft text-accent [&_svg]:size-4.5">{item.icon}</span>
            <div className="min-w-0">
              <h3 className="text-[15px] font-semibold tracking-tight">{item.title}</h3>
              <p className="mt-1 text-[13.5px] leading-6 text-fg-muted">{item.body}</p>
            </div>
          </Reveal>
        ))}
      </ul>
    </Section>
  );
}