import { useState, useEffect, useRef, useCallback } from "react";

// ─── Brand tokens ─────────────────────────────────────────────────────────────
const C = {
  bg:       "#0D1117",
  panel:    "#161B22",
  panel2:   "#1C2128",
  border:   "#30363D",
  teal:     "#00D4AA",
  cyan:     "#40E0FF",
  dark:     "#0D2B22",
  text:     "#E6EDF3",
  dim:      "#8B949E",
  muted:    "#484F58",
  red:      "#F85149",
  yellow:   "#D29922",
  green:    "#3FB950",
};

// ─── Pixel color palette ──────────────────────────────────────────────────────
const PALETTE = {
  T: C.teal,     // teal body
  C: C.cyan,     // cyan accent (eyes, V)
  B: C.bg,       // black / transparent (cutouts)
  D: "#0A1628",  // dark blue-black (shadows)
  W: "#E6EDF3",  // white highlight
  R: C.red,      // red (error state)
  Y: C.yellow,   // yellow (warning)
  G: C.green,    // green (success)
  _: null,       // empty/transparent
};

// ─── Robot pose definitions (16×16 pixel grids) ───────────────────────────────
// Each row is 16 chars. Key maps to PALETTE above.
const POSES = {
  idle: {
    label: "Idle",
    desc: "Default resting state",
    frames: [[
      "________________",
      "________________",
      "____TTTTTTTT____",
      "___TTTTTTTTTT___",
      "___TT_BB__BB_TT_",  // eye sockets
      "___TT_BC__BC_TT_",  // eyes with cyan pupils
      "___TTTTTTTTTT___",
      "___TTTTTTTTTT___",  // head bottom
      "__TTTTTTTTTTTT__",  // shoulders
      "__TT__BBBBBB_TT_",  // chest with dark panel
      "__TT__BTCBT__TT_",  // chest V row 1
      "__TT__BBTBB__TT_",  // chest V row 2
      "__TTTTTTTTTTTT__",
      "____TTTT_TTTT___",
      "____TTTT_TTTT___",
      "________________",
    ]],
    fps: 1,
  },

  blink: {
    label: "Blink",
    desc: "Idle with eye blink animation",
    frames: [
      [
        "________________",
        "________________",
        "____TTTTTTTT____",
        "___TTTTTTTTTT___",
        "___TT_BB__BB_TT_",
        "___TT_BC__BC_TT_",
        "___TTTTTTTTTT___",
        "___TTTTTTTTTT___",
        "__TTTTTTTTTTTT__",
        "__TT__BBBBBB_TT_",
        "__TT__BTCBT__TT_",
        "__TT__BBTBB__TT_",
        "__TTTTTTTTTTTT__",
        "____TTTT_TTTT___",
        "____TTTT_TTTT___",
        "________________",
      ],
      [
        "________________",
        "________________",
        "____TTTTTTTT____",
        "___TTTTTTTTTT___",
        "___TT_BB__BB_TT_",
        "___TT_BB__BB_TT_",  // eyes closed
        "___TTTTTTTTTT___",
        "___TTTTTTTTTT___",
        "__TTTTTTTTTTTT__",
        "__TT__BBBBBB_TT_",
        "__TT__BTCBT__TT_",
        "__TT__BBTBB__TT_",
        "__TTTTTTTTTTTT__",
        "____TTTT_TTTT___",
        "____TTTT_TTTT___",
        "________________",
      ],
    ],
    fps: 4,
    sequence: [0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0], // mostly open, quick blink
  },

  thinking: {
    label: "Thinking",
    desc: "Processing / spinner state",
    frames: [
      // eyes look left
      [
        "________________",
        "________________",
        "____TTTTTTTT____",
        "___TTTTTTTTTT___",
        "___TT_CB__BB_TT_",
        "___TT_BB__BB_TT_",
        "___TTTTTTTTTT___",
        "___TTTTTTTTTT___",
        "__TTTTTTTTTTTT__",
        "__TT__BBBBBB_TT_",
        "__TT__BTCBT__TT_",
        "__TT__BBTBB__TT_",
        "__TTTTTTTTTTTT__",
        "____TTTT_TTTT___",
        "____TTTT_TTTT___",
        "________________",
      ],
      // eyes center
      [
        "________________",
        "________________",
        "____TTTTTTTT____",
        "___TTTTTTTTTT___",
        "___TT_BB__BB_TT_",
        "___TT_BC__BC_TT_",
        "___TTTTTTTTTT___",
        "___TTTTTTTTTT___",
        "__TTTTTTTTTTTT__",
        "__TT__BBBBBB_TT_",
        "__TT__BTCBT__TT_",
        "__TT__BBTBB__TT_",
        "__TTTTTTTTTTTT__",
        "____TTTT_TTTT___",
        "____TTTT_TTTT___",
        "________________",
      ],
      // eyes look right
      [
        "________________",
        "________________",
        "____TTTTTTTT____",
        "___TTTTTTTTTT___",
        "___TT_BB__CB_TT_",
        "___TT_BB__BB_TT_",
        "___TTTTTTTTTT___",
        "___TTTTTTTTTT___",
        "__TTTTTTTTTTTT__",
        "__TT__BBBBBB_TT_",
        "__TT__BTCBT__TT_",
        "__TT__BBTBB__TT_",
        "__TTTTTTTTTTTT__",
        "____TTTT_TTTT___",
        "____TTTT_TTTT___",
        "________________",
      ],
    ],
    fps: 3,
    sequence: [0,1,2,1],
  },

  success: {
    label: "Success",
    desc: "Task completed / found results",
    frames: [[
      "________________",
      "____CC______CC__",  // sparkles
      "____TTTTTTTT____",
      "___TTTTTTTTTT___",
      "___TT_CC__CC_TT_",  // bright cyan eyes
      "___TT_CC__CC_TT_",
      "___TTTTTTTTTT___",
      "___TTTGGGGGTTT__",  // green smile
      "__TTTTTTTTTTTT__",
      "__TT__BBBBBB_TT_",
      "__TT__BTCBT__TT_",
      "__TT__BBTBB__TT_",
      "__TTTTTTTTTTTT__",
      "___TTTTT_TTTT___",
      "_TTTTTT___TTTTT_",  // arms up
      "________________",
    ]],
    fps: 1,
  },

  error: {
    label: "Error",
    desc: "Something went wrong",
    frames: [
      [
        "________________",
        "________________",
        "____TTTTTTTT____",
        "___TTTTTTTTTT___",
        "___TT_RB__RB_TT_",  // red eyes
        "___TT_BR__BR_TT_",
        "___TTTTTTTTTT___",
        "___TTTRRRRRTTT__",  // red frown
        "__TTTTTTTTTTTT__",
        "__TT__BBBBBB_TT_",
        "__TT__BRCBT__TT_",
        "__TT__BBTBB__TT_",
        "__TTTTTTTTTTTT__",
        "____TTTT_TTTT___",
        "____TTTT_TTTT___",
        "________________",
      ],
      [
        "________________",
        "________________",
        "____TTTTTTTT____",
        "___TTTTTTTTTT___",
        "___TT_BB__BB_TT_",
        "___TT_RR__RR_TT_",  // dimmer red
        "___TTTTTTTTTT___",
        "___TTTRRRRRTTT__",
        "__TTTTTTTTTTTT__",
        "__TT__BBBBBB_TT_",
        "__TT__BRCBT__TT_",
        "__TT__BBTBB__TT_",
        "__TTTTTTTTTTTT__",
        "____TTTT_TTTT___",
        "____TTTT_TTTT___",
        "________________",
      ],
    ],
    fps: 2,
    sequence: [0, 1],
  },

  wave: {
    label: "Wave",
    desc: "Greeting / welcome",
    frames: [
      [
        "________________",
        "________________",
        "____TTTTTTTT____",
        "___TTTTTTTTTT___",
        "___TT_BB__BB_TT_",
        "___TT_BC__BC_TT_",
        "___TTTTTTTTTT___",
        "___TTTTTTTTTT___",
        "__TTTTTTTTTTTTTT",  // arm raised right
        "__TT__BBBBBB_TTT",
        "__TT__BTCBT__TTT",
        "__TT__BBTBB__TT_",
        "__TTTTTTTTTTTT__",
        "____TTTT_TTTT___",
        "____TTTT_TTTT___",
        "________________",
      ],
      [
        "________________",
        "_______________T",  // hand tip
        "____TTTTTTTT__TT",
        "___TTTTTTTTTTTT_",
        "___TT_BB__BB_TT_",
        "___TT_BC__BC_TT_",
        "___TTTTTTTTTT___",
        "___TTTTTTTTTT___",
        "__TTTTTTTTTTTTT_",
        "__TT__BBBBBB_TT_",
        "__TT__BTCBT__TT_",
        "__TT__BBTBB__TT_",
        "__TTTTTTTTTTTT__",
        "____TTTT_TTTT___",
        "____TTTT_TTTT___",
        "________________",
      ],
    ],
    fps: 3,
    sequence: [0,1,0,1],
  },

  search: {
    label: "Searching",
    desc: "Performing vector search",
    frames: [
      [
        "________________",
        "________________",
        "____TTTTTTTT____",
        "___TTTTTTTTTT___",
        "___TT_BB__CB_TT_",
        "___TT_BB__CC_TT_",  // looking right with magnify
        "___TTTTTTTTTT___",
        "___TTTTTTTTTT___",
        "__TTTTTTTTTTTT__",
        "__TT__BBBBBB_TT_",
        "__TT__BTCBT__TT_",
        "__TT__BBTBB__TT_",
        "__TTTTTTTTTTTT__",
        "____TTTT_TTTT___",
        "____TTTT_TTTT___",
        "________________",
      ],
      [
        "________________",
        "________________",
        "____TTTTTTTT____",
        "___TTTTTTTTTT___",
        "___TT_BB__BB_TT_",
        "___TT_BC__CB_TT_",  // eyes sweep
        "___TTTTTTTTTT___",
        "___TTTTTTTTTT___",
        "__TTTTTTTTTTTT__",
        "__TT__BBBBBB_TT_",
        "__TT__BTCBT__TT_",
        "__TT__BBTBB__TT_",
        "__TTTTTTTTTTTT__",
        "____TTTT_TTTT___",
        "____TTTT_TTTT___",
        "________________",
      ],
      [
        "________________",
        "________________",
        "____TTTTTTTT____",
        "___TTTTTTTTTT___",
        "___TT_CB__BB_TT_",
        "___TT_CC__BB_TT_",  // looking left
        "___TTTTTTTTTT___",
        "___TTTTTTTTTT___",
        "__TTTTTTTTTTTT__",
        "__TT__BBBBBB_TT_",
        "__TT__BTCBT__TT_",
        "__TT__BBTBB__TT_",
        "__TTTTTTTTTTTT__",
        "____TTTT_TTTT___",
        "____TTTT_TTTT___",
        "________________",
      ],
    ],
    fps: 4,
    sequence: [0,1,2,1],
  },

  tiny: {
    label: "Tiny (8×8)",
    desc: "Favicon / status bar size",
    frames: [[
      "________",
      "_TTTTTT_",
      "_TBBTBT_",  // eyes
      "_TTTTTT_",
      "_TCCTTT_",  // V chest
      "_TTTCTT_",
      "_TT_TT__",
      "________",
    ]],
    fps: 1,
    gridSize: 8,
  },

  large: {
    label: "Large (32×32)",
    desc: "Hero / splash screen size",
    frames: [[
      "________________________________",
      "________________________________",
      "________________________________",
      "_________TTTTTTTTTTTT___________",
      "________TTTTTTTTTTTTTT__________",
      "_______TTTTTTTTTTTTTTTT_________",
      "_______TTT_BBBB__BBBB_TTT_______",
      "_______TTT_BBBB__BBBB_TTT_______",
      "_______TTT_BCCC__BCCC_TTT_______",
      "_______TTT_BCCC__BCCC_TTT_______",
      "_______TTTTTTTTTTTTTTTT_________",
      "_______TTTTTTTTTTTTTTTT_________",
      "______TTTTTTTTTTTTTTTTTTT_______",
      "______TTTTTTTTTTTTTTTTTTT_______",
      "______TTT___BBBBBBBBBB_TTT______",
      "______TTT___BBBBBBBBBB_TTT______",
      "______TTT___BTCBBBCBT__TTT______",
      "______TTT___BBTBBBTTB__TTT______",
      "______TTT___BBBCBCBBB__TTT______",
      "______TTT___BBBBBBBBBB_TTT______",
      "______TTTTTTTTTTTTTTTTTTT_______",
      "______TTTTTTTTTTTTTTTTTTT_______",
      "________TTTTTTT_TTTTTTT_________",
      "________TTTTTTT_TTTTTTT_________",
      "________TTTTTTT_TTTTTTT_________",
      "________TTTTTTT_TTTTTTT_________",
      "________________________________",
      "________________________________",
      "________________________________",
      "________________________________",
      "________________________________",
      "________________________________",
    ]],
    fps: 1,
    gridSize: 32,
  },
};

// ─── Render a pixel grid to SVG rects ─────────────────────────────────────────
function renderGrid(grid, pixelSize = 4, palette = PALETTE) {
  const rects = [];
  grid.forEach((row, y) => {
    [...row].forEach((ch, x) => {
      const color = palette[ch];
      if (color) {
        rects.push(
          <rect
            key={`${x}-${y}`}
            x={x * pixelSize}
            y={y * pixelSize}
            width={pixelSize}
            height={pixelSize}
            fill={color}
          />
        );
      }
    });
  });
  return rects;
}

// ─── Animated robot renderer ──────────────────────────────────────────────────
function RobotRenderer({ pose, pixelSize = 6, playing = true }) {
  const { frames, fps, sequence, gridSize = 16 } = pose;
  const [frameIdx, setFrameIdx] = useState(0);
  const totalFrames = sequence ? sequence.length : frames.length;

  useEffect(() => {
    if (!playing || totalFrames <= 1) return;
    const interval = 1000 / fps;
    const t = setInterval(() => {
      setFrameIdx(i => (i + 1) % totalFrames);
    }, interval);
    return () => clearInterval(t);
  }, [playing, fps, totalFrames]);

  const currentFrame = sequence
    ? frames[sequence[frameIdx % sequence.length]]
    : frames[frameIdx % frames.length];

  const size = gridSize * pixelSize;

  return (
    <svg
      width={size}
      height={size}
      viewBox={`0 0 ${size} ${size}`}
      style={{ imageRendering: "pixelated", display: "block" }}
    >
      {renderGrid(currentFrame, pixelSize)}
    </svg>
  );
}

// ─── ASCII export renderer ────────────────────────────────────────────────────
function toAscii(grid) {
  const ASCII_MAP = {
    T: "█", C: "▓", B: "░", D: "▒",
    W: "█", R: "█", Y: "█", G: "█", _: " ",
  };
  return grid.map(row =>
    [...row].map(ch => ASCII_MAP[ch] || " ").join("")
  ).join("\n");
}

function toUnicode(grid, palette = PALETTE) {
  return grid.map(row =>
    [...row].map(ch => palette[ch] ? "█" : " ").join("")
  ).join("\n");
}

function toSvgString(grid, pixelSize = 4, palette = PALETTE) {
  const gridSize = grid.length;
  const size = gridSize * pixelSize;
  const rects = [];
  grid.forEach((row, y) => {
    [...row].forEach((ch, x) => {
      const color = palette[ch];
      if (color) {
        rects.push(`  <rect x="${x * pixelSize}" y="${y * pixelSize}" width="${pixelSize}" height="${pixelSize}" fill="${color}"/>`);
      }
    });
  });
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" shape-rendering="crispEdges">\n${rects.join("\n")}\n</svg>`;
}

function toJsData(grid) {
  return JSON.stringify(grid, null, 2);
}

// ─── Copy button ──────────────────────────────────────────────────────────────
function CopyBtn({ text, label }) {
  const [copied, setCopied] = useState(false);
  const copy = () => {
    navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };
  return (
    <button onClick={copy} style={{
      fontFamily: "monospace", fontSize: 10,
      background: copied ? C.dark : C.panel2,
      border: `1px solid ${copied ? C.teal : C.border}`,
      color: copied ? C.teal : C.dim,
      borderRadius: 3, padding: "3px 10px", cursor: "pointer",
      transition: "all 0.15s",
    }}>
      {copied ? "✓ copied" : label}
    </button>
  );
}

// ─── Pose card ────────────────────────────────────────────────────────────────
function PoseCard({ poseKey, pose, selected, onSelect }) {
  return (
    <div
      onClick={() => onSelect(poseKey)}
      style={{
        border: `1px solid ${selected ? C.teal : C.border}`,
        borderRadius: 6,
        background: selected ? C.dark : C.panel,
        padding: "12px",
        cursor: "pointer",
        transition: "all 0.15s",
        display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
      }}
    >
      <RobotRenderer pose={pose} pixelSize={4} playing={selected} />
      <div style={{ textAlign: "center" }}>
        <div style={{ fontFamily: "monospace", fontSize: 11, color: selected ? C.teal : C.text }}>
          {pose.label}
        </div>
        <div style={{ fontFamily: "monospace", fontSize: 9, color: C.muted, marginTop: 2 }}>
          {pose.frames.length > 1 ? `${pose.frames.length}f · ${pose.fps}fps` : "static"}
        </div>
      </div>
    </div>
  );
}

// ─── Export panel ─────────────────────────────────────────────────────────────
function ExportPanel({ pose }) {
  const frame = pose.frames[0];
  const [activeTab, setActiveTab] = useState("svg");

  const exports = {
    svg: { label: "SVG", content: toSvgString(frame, 4), lang: "xml" },
    ascii: { label: "ASCII", content: toAscii(frame), lang: "text" },
    unicode: { label: "Unicode", content: toUnicode(frame), lang: "text" },
    json: { label: "JSON Grid", content: toJsData(frame), lang: "json" },
    css: {
      label: "CSS Var",
      content: `:root {\n  --vai-robot-teal: ${C.teal};\n  --vai-robot-cyan: ${C.cyan};\n  --vai-robot-bg: ${C.bg};\n}`,
      lang: "css"
    },
  };

  return (
    <div style={{
      border: `1px solid ${C.border}`,
      borderRadius: 6, background: C.panel, overflow: "hidden",
    }}>
      <div style={{
        display: "flex", borderBottom: `1px solid ${C.border}`,
        background: C.panel2,
      }}>
        {Object.entries(exports).map(([key, { label }]) => (
          <button key={key} onClick={() => setActiveTab(key)} style={{
            fontFamily: "monospace", fontSize: 10,
            background: "transparent",
            borderRight: `1px solid ${C.border}`,
            borderTop: "none", borderLeft: "none", borderBottom: "none",
            color: activeTab === key ? C.teal : C.dim,
            padding: "6px 14px", cursor: "pointer",
            borderBottom: activeTab === key ? `2px solid ${C.teal}` : "2px solid transparent",
          }}>
            {label}
          </button>
        ))}
      </div>
      <div style={{ padding: 12 }}>
        <pre style={{
          fontFamily: "monospace", fontSize: 10,
          color: C.text, background: C.bg,
          border: `1px solid ${C.border}`,
          borderRadius: 4, padding: 10,
          overflowX: "auto", maxHeight: 180,
          margin: 0, lineHeight: 1.4,
          whiteSpace: "pre",
        }}>
          {exports[activeTab].content}
        </pre>
        <div style={{ marginTop: 8, display: "flex", gap: 6 }}>
          <CopyBtn text={exports[activeTab].content} label={`copy ${exports[activeTab].label}`} />
        </div>
      </div>
    </div>
  );
}

// ─── Color swatch ─────────────────────────────────────────────────────────────
function Swatch({ name, value, role }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
      <div style={{
        width: 32, height: 32, borderRadius: 4,
        background: value,
        border: `1px solid ${C.border}`,
        flexShrink: 0,
      }} />
      <div>
        <div style={{ fontFamily: "monospace", fontSize: 11, color: C.text }}>{name}</div>
        <div style={{ fontFamily: "monospace", fontSize: 10, color: C.dim }}>{value}</div>
        <div style={{ fontFamily: "monospace", fontSize: 9, color: C.muted }}>{role}</div>
      </div>
      <CopyBtn text={value} label="copy" />
    </div>
  );
}

// ─── Size showcase ────────────────────────────────────────────────────────────
function SizeShowcase({ pose }) {
  const sizes = [
    { px: 2, label: "8px", desc: "favicon" },
    { px: 3, label: "12px", desc: "status bar" },
    { px: 4, label: "16px", desc: "sidebar" },
    { px: 6, label: "24px", desc: "nav icon" },
    { px: 8, label: "32px", desc: "card" },
    { px: 12, label: "48px", desc: "hero small" },
    { px: 18, label: "72px", desc: "hero large" },
  ];

  const frame = pose.frames[0];
  const gridSize = pose.gridSize || 16;

  return (
    <div style={{ display: "flex", alignItems: "flex-end", gap: 16, flexWrap: "wrap" }}>
      {sizes.map(({ px, label, desc }) => (
        <div key={px} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
          <svg
            width={gridSize * px}
            height={gridSize * px}
            viewBox={`0 0 ${gridSize * px} ${gridSize * px}`}
            style={{ imageRendering: "pixelated", display: "block" }}
          >
            {renderGrid(frame, px)}
          </svg>
          <div style={{ fontFamily: "monospace", fontSize: 9, color: C.teal }}>{label}</div>
          <div style={{ fontFamily: "monospace", fontSize: 9, color: C.muted }}>{desc}</div>
        </div>
      ))}
    </div>
  );
}

// ─── Animation timeline ───────────────────────────────────────────────────────
function AnimTimeline({ pose }) {
  const { frames, fps, sequence } = pose;
  if (frames.length <= 1) return (
    <div style={{ fontFamily: "monospace", fontSize: 11, color: C.muted }}>
      Static pose — no animation frames
    </div>
  );

  const seq = sequence || frames.map((_, i) => i);
  return (
    <div>
      <div style={{ fontFamily: "monospace", fontSize: 10, color: C.dim, marginBottom: 8 }}>
        {seq.length} frames · {fps} fps · {(seq.length / fps).toFixed(1)}s loop
      </div>
      <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
        {seq.map((fi, i) => (
          <div key={i} style={{
            border: `1px solid ${C.border}`,
            borderRadius: 3, background: C.bg,
            padding: 4,
          }}>
            <svg
              width={16 * 3} height={16 * 3}
              viewBox={`0 0 ${16 * 3} ${16 * 3}`}
              style={{ imageRendering: "pixelated", display: "block" }}
            >
              {renderGrid(frames[fi], 3)}
            </svg>
            <div style={{ fontFamily: "monospace", fontSize: 8, color: C.muted, textAlign: "center", marginTop: 2 }}>
              f{i + 1}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Tab bar ──────────────────────────────────────────────────────────────────
function TabBar({ tabs, active, onChange }) {
  return (
    <div style={{ display: "flex", borderBottom: `1px solid ${C.border}`, marginBottom: 16 }}>
      {tabs.map(t => (
        <button key={t.id} onClick={() => onChange(t.id)} style={{
          fontFamily: "monospace", fontSize: 11,
          background: "transparent", border: "none",
          borderBottom: active === t.id ? `2px solid ${C.teal}` : "2px solid transparent",
          color: active === t.id ? C.teal : C.dim,
          padding: "8px 16px", cursor: "pointer",
          transition: "all 0.15s",
        }}>
          {t.label}
        </button>
      ))}
    </div>
  );
}

// ─── Section heading ──────────────────────────────────────────────────────────
function SectionHead({ children }) {
  return (
    <div style={{
      fontFamily: "monospace", fontSize: 10, color: C.teal,
      textTransform: "uppercase", letterSpacing: "0.1em",
      marginBottom: 10, marginTop: 4,
    }}>
      {children}
    </div>
  );
}

// ─── Main app ─────────────────────────────────────────────────────────────────
export default function VaiRobotDesignSystem() {
  const [selectedPose, setSelectedPose] = useState("idle");
  const [activeTab, setActiveTab] = useState("poses");
  const [playing, setPlaying] = useState(true);

  const pose = POSES[selectedPose];

  const tabs = [
    { id: "poses",  label: "Pose Library" },
    { id: "sizes",  label: "Size Scale" },
    { id: "anim",   label: "Animation" },
    { id: "export", label: "Export" },
    { id: "brand",  label: "Brand Tokens" },
  ];

  return (
    <div style={{
      background: C.bg, color: C.text,
      minHeight: "100vh", fontFamily: "monospace",
      padding: 0,
    }}>
      {/* Header */}
      <div style={{
        background: C.panel,
        borderBottom: `1px solid ${C.border}`,
        padding: "12px 20px",
        display: "flex", alignItems: "center", gap: 12,
      }}>
        <RobotRenderer pose={POSES.idle} pixelSize={4} playing={true} />
        <div>
          <div style={{ fontSize: 14, color: C.teal, fontWeight: 700, letterSpacing: "0.05em" }}>
            AVI
          </div>
          <div style={{ fontSize: 10, color: C.dim }}>
            Mascot Design System · v1.0
          </div>
        </div>
        <div style={{ marginLeft: "auto", display: "flex", gap: 8, alignItems: "center" }}>
          <button
            onClick={() => setPlaying(p => !p)}
            style={{
              fontFamily: "monospace", fontSize: 10,
              background: playing ? C.dark : C.panel2,
              border: `1px solid ${playing ? C.teal : C.border}`,
              color: playing ? C.teal : C.dim,
              borderRadius: 3, padding: "4px 12px", cursor: "pointer",
            }}
          >
            {playing ? "⏸ pause" : "▶ play"} animations
          </button>
        </div>
      </div>

      {/* Body */}
      <div style={{ display: "flex", height: "calc(100vh - 65px)" }}>

        {/* Left: pose grid */}
        <div style={{
          width: 280, flexShrink: 0,
          borderRight: `1px solid ${C.border}`,
          overflowY: "auto", padding: 12,
          display: "flex", flexDirection: "column", gap: 8,
        }}>
          <SectionHead>poses · {Object.keys(POSES).length} total</SectionHead>
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr",
            gap: 8,
          }}>
            {Object.entries(POSES).map(([key, p]) => (
              <PoseCard
                key={key}
                poseKey={key}
                pose={p}
                selected={selectedPose === key}
                onSelect={setSelectedPose}
                playing={playing}
              />
            ))}
          </div>
        </div>

        {/* Right: detail panel */}
        <div style={{ flex: 1, overflowY: "auto", padding: 20 }}>

          {/* Pose header */}
          <div style={{
            display: "flex", alignItems: "center", gap: 16, marginBottom: 20,
            paddingBottom: 16, borderBottom: `1px solid ${C.border}`,
          }}>
            <RobotRenderer pose={pose} pixelSize={10} playing={playing} />
            <div>
              <div style={{ fontSize: 16, color: C.teal, fontWeight: 700 }}>{pose.label}</div>
              <div style={{ fontSize: 11, color: C.dim, marginTop: 2 }}>{pose.desc}</div>
              <div style={{ fontSize: 10, color: C.muted, marginTop: 4 }}>
                {pose.gridSize || 16}×{pose.gridSize || 16} grid ·{" "}
                {pose.frames.length} frame{pose.frames.length > 1 ? "s" : ""} ·{" "}
                {pose.frames.length > 1 ? `${pose.fps} fps` : "static"}
              </div>
            </div>
          </div>

          {/* Tabs */}
          <TabBar tabs={tabs} active={activeTab} onChange={setActiveTab} />

          {/* Pose library tab */}
          {activeTab === "poses" && (
            <div>
              <SectionHead>usage context</SectionHead>
              <div style={{
                background: C.panel, border: `1px solid ${C.border}`,
                borderRadius: 6, padding: 12, marginBottom: 16,
                fontFamily: "monospace", fontSize: 11, color: C.dim,
                lineHeight: 1.8,
              }}>
                <div style={{ color: C.text, marginBottom: 6 }}>
                  {pose.label} — recommended contexts
                </div>
                {selectedPose === "idle" && "Default state · sidebar header · app launch · config display"}
                {selectedPose === "blink" && "Long-running idle · screensaver · waiting for user input"}
                {selectedPose === "thinking" && "RAG retrieval in progress · embedding · reranking · LLM call"}
                {selectedPose === "success" && "Search complete · documents found · pipeline finished · export done"}
                {selectedPose === "error" && "Connection failed · no results · API error · timeout"}
                {selectedPose === "wave" && "CLI startup greeting · first launch · onboarding · --help output"}
                {selectedPose === "search" && "Vector search executing · scanning collection · top-k in progress"}
                {selectedPose === "tiny" && "Status bar · favicon · tab icon · compact mode · terminal prompt prefix"}
                {selectedPose === "large" && "Welcome screen · splash · README hero · Product Hunt thumbnail"}
              </div>

              <SectionHead>pixel grid data</SectionHead>
              <pre style={{
                fontFamily: "monospace", fontSize: 10, color: C.text,
                background: C.bg, border: `1px solid ${C.border}`,
                borderRadius: 4, padding: 10, overflowX: "auto",
                maxHeight: 240, lineHeight: 1.4,
              }}>
                {pose.frames[0].join("\n")}
              </pre>
              <div style={{ marginTop: 8, display: "flex", gap: 6 }}>
                <CopyBtn text={pose.frames[0].join("\n")} label="copy grid" />
                <CopyBtn text={JSON.stringify(pose.frames[0])} label="copy JSON" />
              </div>
            </div>
          )}

          {/* Sizes tab */}
          {activeTab === "sizes" && (
            <div>
              <SectionHead>size scale — {pose.label}</SectionHead>
              <SizeShowcase pose={pose} />
              <div style={{ marginTop: 20 }}>
                <SectionHead>recommended usage</SectionHead>
                <div style={{
                  background: C.panel, border: `1px solid ${C.border}`,
                  borderRadius: 6, padding: 12,
                  fontFamily: "monospace", fontSize: 10, color: C.dim,
                  lineHeight: 2,
                }}>
                  <div style={{ display: "grid", gridTemplateColumns: "80px 1fr", gap: "2px 16px" }}>
                    <span style={{ color: C.teal }}>8px</span><span>favicon.ico, browser tab, terminal prompt prefix char</span>
                    <span style={{ color: C.teal }}>12px</span><span>TUI status bar, compact sidebar label</span>
                    <span style={{ color: C.teal }}>16px</span><span>nav icon, session list item, inline status indicator</span>
                    <span style={{ color: C.teal }}>24px</span><span>sidebar header, panel title, tooltip avatar</span>
                    <span style={{ color: C.teal }}>32px</span><span>card mascot, chat welcome, desktop taskbar</span>
                    <span style={{ color: C.teal }}>48px</span><span>page section header, onboarding step</span>
                    <span style={{ color: C.teal }}>72px</span><span>hero area, splash screen, README, Product Hunt</span>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Animation tab */}
          {activeTab === "anim" && (
            <div>
              <SectionHead>frame sequence — {pose.label}</SectionHead>
              <AnimTimeline pose={pose} />
              {pose.frames.length > 1 && (
                <div style={{ marginTop: 16 }}>
                  <SectionHead>animation spec</SectionHead>
                  <div style={{
                    background: C.panel, border: `1px solid ${C.border}`,
                    borderRadius: 6, padding: 12,
                    fontFamily: "monospace", fontSize: 10, color: C.dim,
                    lineHeight: 1.8,
                  }}>
                    <div>fps: <span style={{ color: C.teal }}>{pose.fps}</span></div>
                    <div>frame_count: <span style={{ color: C.teal }}>{pose.frames.length}</span></div>
                    <div>sequence: <span style={{ color: C.teal }}>[{(pose.sequence || pose.frames.map((_,i)=>i)).join(", ")}]</span></div>
                    <div>loop_duration: <span style={{ color: C.teal }}>{((pose.sequence || pose.frames).length / pose.fps).toFixed(2)}s</span></div>
                    <div>loop: <span style={{ color: C.teal }}>true</span></div>
                  </div>
                  <div style={{ marginTop: 8 }}>
                    <CopyBtn
                      text={JSON.stringify({ fps: pose.fps, sequence: pose.sequence || pose.frames.map((_,i)=>i), frames: pose.frames }, null, 2)}
                      label="copy animation JSON"
                    />
                  </div>
                </div>
              )}
            </div>
          )}

          {/* Export tab */}
          {activeTab === "export" && (
            <div>
              <SectionHead>export — {pose.label} (frame 1)</SectionHead>
              <ExportPanel pose={pose} />
              <div style={{ marginTop: 16 }}>
                <SectionHead>terminal / ASCII preview</SectionHead>
                <pre style={{
                  fontFamily: "monospace", fontSize: 9, lineHeight: 1.1,
                  color: C.teal, background: "#000",
                  border: `1px solid ${C.border}`,
                  borderRadius: 4, padding: 10,
                  display: "inline-block",
                }}>
                  {toAscii(pose.frames[0])}
                </pre>
              </div>
            </div>
          )}

          {/* Brand tokens tab */}
          {activeTab === "brand" && (
            <div>
              <SectionHead>color tokens</SectionHead>
              <div style={{
                background: C.panel, border: `1px solid ${C.border}`,
                borderRadius: 6, padding: 16, marginBottom: 16,
              }}>
                <Swatch name="--vai-teal" value={C.teal} role="Primary body color · borders · active states" />
                <Swatch name="--vai-cyan" value={C.cyan} role="Accent · eyes · V chest · highlights" />
                <Swatch name="--vai-bg" value={C.bg} role="Background · cutouts · transparent pixels" />
                <Swatch name="--vai-panel" value={C.panel} role="Surface · card background" />
                <Swatch name="--vai-dark" value={C.dark} role="Selected state · chest panel background" />
                <Swatch name="--vai-red" value={C.red} role="Error state robot eyes / mouth" />
                <Swatch name="--vai-green" value={C.green} role="Success state mouth / indicators" />
              </div>

              <SectionHead>pixel key</SectionHead>
              <div style={{
                background: C.panel, border: `1px solid ${C.border}`,
                borderRadius: 6, padding: 12,
                display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8,
              }}>
                {Object.entries(PALETTE).filter(([k]) => k !== "_").map(([key, val]) => (
                  <div key={key} style={{
                    display: "flex", alignItems: "center", gap: 6,
                    fontFamily: "monospace", fontSize: 10,
                  }}>
                    <div style={{
                      width: 16, height: 16, background: val || "transparent",
                      border: `1px solid ${C.border}`, borderRadius: 2, flexShrink: 0,
                    }} />
                    <span style={{ color: C.teal }}>{key}</span>
                    <span style={{ color: C.muted, fontSize: 9 }}>{val?.slice(0,7)}</span>
                  </div>
                ))}
              </div>

              <div style={{ marginTop: 16 }}>
                <SectionHead>CSS variables</SectionHead>
                <pre style={{
                  fontFamily: "monospace", fontSize: 10,
                  color: C.text, background: C.bg,
                  border: `1px solid ${C.border}`,
                  borderRadius: 4, padding: 10, lineHeight: 1.7,
                }}>
{`:root {
  /* Avi Brand Tokens */
  --vai-teal:  ${C.teal};
  --vai-cyan:  ${C.cyan};
  --vai-bg:    ${C.bg};
  --vai-panel: ${C.panel};
  --vai-dark:  ${C.dark};
  --vai-red:   ${C.red};
  --vai-green: ${C.green};
  
  /* Gradient */
  --vai-gradient: linear-gradient(
    135deg, ${C.teal}, ${C.cyan}
  );
}`}
                </pre>
                <div style={{ marginTop: 8 }}>
                  <CopyBtn
                    text={`:root {\n  --vai-teal:  ${C.teal};\n  --vai-cyan:  ${C.cyan};\n  --vai-bg:    ${C.bg};\n  --vai-panel: ${C.panel};\n  --vai-dark:  ${C.dark};\n  --vai-red:   ${C.red};\n  --vai-green: ${C.green};\n  --vai-gradient: linear-gradient(135deg, ${C.teal}, ${C.cyan});\n}`}
                    label="copy CSS vars"
                  />
                </div>
              </div>
            </div>
          )}

        </div>
      </div>
    </div>
  );
}