import * as React from "react";
import { createRoot } from "react-dom/client";
import { SiteErrorBoundary } from "@colineapp/sdk/site/react";
import { IconBrandNpm, IconCode, IconDeviceDesktop, IconFileText, IconMoon, IconRobot, IconSun } from "@tabler/icons-react";
import {
  Badge,
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  ColineSiteProvider,
  EmptyState,
  SegmentedControl,
  Separator,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
  type ColineSiteTheme,
} from "@colineapp/ui";
import { LiquidGlass } from "@colineapp/liquid-glass/react";
import "@colineapp/ui/styles.css";
import "@colineapp/liquid-glass/styles.css";
import "./app.css";
import { EXAMPLES, INSTALL, NPM_URL, PACKAGE, SITE_URL, SOURCE_URL, VERSION } from "./api";
import { CodeBlock, CopyButton, InstallCommand } from "./code";
import { Playground } from "./playground";
import { Reference, Rules } from "./reference";
import { GlassCard, GlassDialog, GlassMenu, GlassSearch, GlassTabs, GlassToolbar } from "./showcase";
import { Stage, type BackdropKind } from "./stage";

// The @colineapp/liquid-glass site: the page chrome is Coline's own
// components (@colineapp/ui); everything made of glass is the package,
// installed from npm like anyone else would. app.config.ts lists the plain-text
// docs for agents and the two tools agents in the browser can call.

const ACCENT = "#5b5bd6";
const THEME_KEY = "liquid-glass-theme";

const example = (id: string) => EXAMPLES.find((item) => item.id === id)?.code ?? "";

const NAV = [
  { href: "#playground", label: "Playground" },
  { href: "#components", label: "Components" },
  { href: "#install", label: "Install" },
  { href: "#reference", label: "Reference" },
  { href: "#agents", label: "For agents" },
];

function readTheme(): ColineSiteTheme {
  try {
    const saved = localStorage.getItem(THEME_KEY);
    return saved === "light" || saved === "dark" ? saved : "system";
  } catch {
    return "system";
  }
}

function Mark() {
  return (
    <span className="relative grid size-8 place-items-center rounded-full" aria-hidden="true">
      <LiquidGlass appearance="class" />
      <span className="size-3 rounded-full bg-action" />
    </span>
  );
}

function Header({ theme, onTheme }: { theme: ColineSiteTheme; onTheme: (theme: ColineSiteTheme) => void }) {
  return (
    <header className="sticky top-3 z-50 px-3 sm:px-4">
      <nav className="relative mx-auto flex h-14 max-w-6xl items-center gap-2 rounded-full pr-2 pl-3 text-foreground" aria-label="Main">
        <LiquidGlass appearance="class" interactive />
        <a href="#top" className="flex items-center gap-2.5 pr-2 font-semibold tracking-tight">
          <Mark />
          <span>Liquid Glass</span>
        </a>
        <div className="hidden flex-1 items-center gap-0.5 md:flex">
          {NAV.map((item) => (
            <a
              key={item.href}
              href={item.href}
              className="rounded-full px-3 py-1.5 text-sm font-medium text-foreground/65 transition-colors hover:text-foreground"
            >
              {item.label}
            </a>
          ))}
        </div>
        <div className="ml-auto flex items-center gap-1.5">
          <SegmentedControl
            label="Appearance"
            size="sm"
            value={theme}
            onValueChange={onTheme}
            options={[
              { value: "system", label: <IconDeviceDesktop className="size-4" aria-label="System" /> },
              { value: "light", label: <IconSun className="size-4" aria-label="Light" /> },
              { value: "dark", label: <IconMoon className="size-4" aria-label="Dark" /> },
            ]}
          />
          <Button asChild variant="ghost" size="icon-sm" className="hidden sm:inline-flex">
            <a href={NPM_URL} aria-label="npm">
              <IconBrandNpm className="size-5" />
            </a>
          </Button>
          <Button asChild variant="ghost" size="icon-sm" className="hidden sm:inline-flex">
            <a href={SOURCE_URL} aria-label="Source on upstream.codes">
              <IconCode className="size-5" />
            </a>
          </Button>
        </div>
      </nav>
    </header>
  );
}

function Hero() {
  const [tab, setTab] = React.useState("Library");
  return (
    <section id="top" className="mx-auto grid w-full max-w-6xl gap-10 px-4 pt-16 sm:px-6 sm:pt-24">
      <div className="grid justify-items-center gap-6 text-center">
        <Badge variant="secondary">
          {PACKAGE} {VERSION} · MIT
        </Badge>
        <h1 className="max-w-3xl text-[clamp(40px,7vw,76px)] leading-[1.02] font-semibold tracking-[-0.035em] text-balance">
          Liquid Glass for the web
        </h1>
        <p className="max-w-2xl text-lg leading-relaxed text-pretty text-muted-foreground">
          The rim refraction, light and motion of iOS 27&apos;s glass, on any rounded element. With React bindings and pill
          tabs whose thumb lifts into a lens.
        </p>
        <div className="flex flex-wrap items-center justify-center gap-3">
          <InstallCommand command={INSTALL} />
          <Button asChild size="lg">
            <a href="#playground">Open the playground</a>
          </Button>
        </div>
      </div>
      <Stage backdrop="landscape" className="h-[520px] sm:h-[600px]">
        <div className="absolute inset-x-0 top-6 flex justify-center px-4">
          <GlassTabs label="Photos" options={["Library", "Albums", "People", "Places"]} value={tab} onChange={setTab} />
        </div>
        <div className="absolute inset-x-0 top-[38%] flex justify-center px-6">
          <GlassSearch className="w-full max-w-md" placeholder={`Search ${tab.toLowerCase()}`} />
        </div>
        <div className="absolute bottom-6 left-1/2 hidden -translate-x-1/2 sm:block">
          <GlassToolbar />
        </div>
      </Stage>
      <p className="-mt-6 text-center text-sm text-muted-foreground">
        Press and drag the tabs, and press the search field. Everything here is the package.
      </p>
    </section>
  );
}

function SectionHeading({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
  return (
    <div className="grid max-w-2xl gap-2">
      <h2 id={`${id}-title`} className="text-3xl font-semibold tracking-tight">
        {title}
      </h2>
      <p className="leading-relaxed text-muted-foreground">{children}</p>
    </div>
  );
}

function Section({ id, title, intro, children }: { id: string; title: string; intro: React.ReactNode; children: React.ReactNode }) {
  return (
    <section id={id} aria-labelledby={`${id}-title`} className="mx-auto grid w-full max-w-6xl scroll-mt-24 gap-8 px-4 sm:px-6">
      <SectionHeading id={id} title={title}>
        {intro}
      </SectionHeading>
      {children}
    </section>
  );
}

function DemoCard({
  title,
  description,
  code,
  backdrop,
  children,
}: {
  title: string;
  description: string;
  code: string;
  backdrop: BackdropKind;
  children: React.ReactNode;
}) {
  return (
    <Card className="overflow-hidden">
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <Stage backdrop={backdrop} className="h-72">
          {children}
        </Stage>
      </CardContent>
      <CardFooter className="justify-end">
        <CopyButton text={code} label="Copy code" />
      </CardFooter>
    </Card>
  );
}

function Components() {
  const [tab, setTab] = React.useState("Week");
  return (
    <Section id="components" title="Components" intro="The surfaces you'd build with it, made from the package the way its docs describe. Each card copies its code.">
      <div className="grid gap-5 md:grid-cols-2">
        <DemoCard title="Pill tabs" description="The thumb lifts into a lens, stretches, magnifies the labels and squashes as it lands. Drag the selected tab." code={example("tabs")} backdrop="night">
          <div className="absolute inset-0 grid place-items-center px-4">
            <GlassTabs label="Period" options={["Day", "Week", "Month", "Year"]} value={tab} onChange={setTab} />
          </div>
        </DemoCard>
        <DemoCard title="Menu" description="Floating glass that materializes from clear as it opens, with a well under the item you point at." code={example("menu")} backdrop="landscape">
          <div className="absolute top-8 left-8">
            <GlassMenu />
          </div>
        </DemoCard>
        <DemoCard title="Dialog" description={'floating="dialog" diffuses the page more and casts a deeper shadow.'} code={example("dialog")} backdrop="clouds">
          <GlassDialog />
        </DemoCard>
        <DemoCard title="Search field" description="interactive lights the glass under the pointer; swell springs it when pressed, like the tab bar." code={example("search")} backdrop="landscape">
          <div className="absolute inset-0 grid place-items-center px-6">
            <GlassSearch className="w-full max-w-sm" />
          </div>
        </DemoCard>
        <DemoCard title="Card" description="Regular glass over text. The rim bends what crosses it, and the body evens out the rest so the card's own text stays legible." code={example("card")} backdrop="page">
          <GlassCard initial={{ x: 0.55, y: 0.6 }} />
        </DemoCard>
        <DemoCard title="Toolbar" description="Controls on glass get no glass of their own: the pressed ones are wells in it." code={example("react")} backdrop="night">
          <div className="absolute inset-0 grid place-items-center px-4">
            <GlassToolbar />
          </div>
        </DemoCard>
      </div>
    </Section>
  );
}

function Install() {
  return (
    <Section id="install" title="Install" intro={<>One package, no dependencies, with React bindings under <code className="font-mono text-[0.9em]">/react</code>. Import the stylesheet once.</>}>
      <div className="grid gap-6">
        <div>
          <InstallCommand command={INSTALL} />
        </div>
        <Tabs defaultValue="react">
          <TabsList>
            <TabsTrigger value="react">React</TabsTrigger>
            <TabsTrigger value="vanilla">TypeScript</TabsTrigger>
            <TabsTrigger value="tabs">Tabs</TabsTrigger>
            <TabsTrigger value="menu">Menu</TabsTrigger>
          </TabsList>
          {["react", "vanilla", "tabs", "menu"].map((id) => {
            const item = EXAMPLES.find((entry) => entry.id === id);
            return item ? (
              <TabsContent key={id} value={id}>
                <CodeBlock title={item.description} code={item.code} />
              </TabsContent>
            ) : null;
          })}
        </Tabs>
        <div className="grid gap-3">
          <h3 className="text-lg font-semibold tracking-tight">Six rules for the surface</h3>
          <Rules />
        </div>
      </div>
    </Section>
  );
}

const AGENT_PROMPT = `Add Liquid Glass to the nav bar with ${PACKAGE}. Read ${SITE_URL}/agents.md first and follow its rules.`;

const AGENT_FILES = [
  { href: "/llms.txt", title: "llms.txt", description: "The index: every doc and option, one link each." },
  { href: "/agents.md", title: "agents.md", description: "How to use the package, which options suit which surface, and the rules that keep the glass working." },
  { href: "/docs/api.md", title: "docs/api.md", description: "The whole reference in Markdown." },
  { href: "/llms-full.txt", title: "llms-full.txt", description: "Reference and examples in one file." },
  { href: "/options.json", title: "options.json", description: "The reference as JSON, for tools." },
  { href: "/docs/options/swell.md", title: "docs/options/*.md", description: "One plain-text page per option, geometry field and method." },
];

function Agents() {
  return (
    <Section id="agents" title="For agents" intro="Everything on this page is also plain text, so a coding agent can use the package without reading its source.">
      <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_380px]">
        <Card>
          <CardHeader>
            <CardTitle>Plain-text docs</CardTitle>
            <CardDescription>Served from this site, generated from the same reference as the page.</CardDescription>
          </CardHeader>
          <CardContent>
            <ul className="divide-y divide-border">
              {AGENT_FILES.map((file) => (
                <li key={file.href} className="flex items-start gap-3 py-3 first:pt-0 last:pb-0">
                  <IconFileText className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                  <div className="grid gap-0.5">
                    <a href={file.href} className="font-mono text-sm font-medium text-action hover:underline">
                      {file.title}
                    </a>
                    <span className="text-sm text-muted-foreground">{file.description}</span>
                  </div>
                </li>
              ))}
            </ul>
          </CardContent>
        </Card>
        <div className="grid content-start gap-5">
          <Card>
            <CardHeader>
              <CardTitle>Hand it to your agent</CardTitle>
              <CardDescription>Paste this into Claude Code, Codex, Cursor or any agent.</CardDescription>
            </CardHeader>
            <CardContent>
              <CodeBlock code={AGENT_PROMPT} title="Prompt" wrap />
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <IconRobot className="size-4" />
                Agents in the browser
              </CardTitle>
              <CardDescription>
                This page offers two read-only tools over WebMCP: <code className="font-mono">liquid-glass.reference</code> looks up
                any option, and <code className="font-mono">liquid-glass.snippet</code> writes the code for a set of options.
              </CardDescription>
            </CardHeader>
          </Card>
        </div>
      </div>
    </Section>
  );
}

function Footer() {
  return (
    <footer className="mx-auto grid w-full max-w-6xl gap-6 px-4 pb-16 sm:px-6">
      <Separator />
      <div className="flex flex-wrap items-center justify-between gap-4 text-sm text-muted-foreground">
        <span>
          {PACKAGE} {VERSION}, MIT. Made by Coline.
        </span>
        <div className="flex flex-wrap gap-1">
          <Button asChild variant="ghost" size="sm">
            <a href={NPM_URL}>npm</a>
          </Button>
          <Button asChild variant="ghost" size="sm">
            <a href={SOURCE_URL}>Source</a>
          </Button>
          <Button asChild variant="ghost" size="sm">
            <a href="/llms.txt">llms.txt</a>
          </Button>
        </div>
      </div>
    </footer>
  );
}

function App() {
  const [theme, setTheme] = React.useState<ColineSiteTheme>(readTheme);
  const changeTheme = (next: ColineSiteTheme) => {
    setTheme(next);
    try {
      localStorage.setItem(THEME_KEY, next);
    } catch {
      // The choice lasts this visit.
    }
  };
  return (
    <ColineSiteProvider theme={theme} accent={ACCENT}>
      <div className="min-h-dvh bg-background text-foreground">
        <Header theme={theme} onTheme={changeTheme} />
        <main className="grid gap-28 pb-24 sm:gap-36">
          <Hero />
          <Section
            id="playground"
            title="Playground"
            intro="Every option, live. Drag the glass across the picture, change the rim, and copy the code for what you made."
          >
            <Playground />
          </Section>
          <Components />
          <Install />
          <Section id="reference" title="Reference" intro={`Every option, method and export of ${PACKAGE}. Each name links to its plain-text page.`}>
            <Reference />
          </Section>
          <Agents />
        </main>
        <Footer />
      </div>
    </ColineSiteProvider>
  );
}

createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <SiteErrorBoundary
      fallback={(_error, retry) => (
        <ColineSiteProvider>
          <main className="mx-auto max-w-xl px-5 py-16">
            <EmptyState
              title="Something went wrong"
              action={
                <Button variant="outline" onClick={retry}>
                  Try again
                </Button>
              }
            />
          </main>
        </ColineSiteProvider>
      )}
    >
      <App />
    </SiteErrorBoundary>
  </React.StrictMode>,
);