preview.jsx

import { useState, useEffect } from "react";

// ─── Palette ────────────────────────────────────────────────────────────────
const M = {
  rosewater: "#f5e0dc", peach: "#fab387", mauve: "#cba6f7",
  yellow: "#f9e2af", green: "#a6e3a1", sapphire: "#74c7ec",
  blue: "#89b4fa", text: "#cdd6f4", subtext0: "#a6adc8",
  overlay1: "#7f849c", surface2: "#585b70", surface1: "#45475a",
  surface0: "#313244", base: "#1f1f28", crust: "#11111b",
  tabActive: "#7FB4CA",
};

const P = {
  session: "#c386f1", sessionFg: "#000",
  path: "#3B7390",    pathFg: "#000",
  git: "#82D4BB",     gitFg: "#000",
  python: "#D8C878",  pythonFg: "#111",
  npm: "#917295",     npmFg: "#fff",
  node: "#5f4a62",    nodeFg: "#fff",
  connector: "#c386f1",
  arrow: "#e0f8ff",
};

// ─── Helpers ─────────────────────────────────────────────────────────────────
function useTime() {
  const [t, setT] = useState(new Date());
  useEffect(() => { const id = setInterval(() => setT(new Date()), 1000); return () => clearInterval(id); }, []);
  return t;
}
const pad = n => String(n).padStart(2, "0");
const fmtDate = d => {
  const days = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
  const mons = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  return `${days[d.getDay()]} ${pad(d.getDate())} ${mons[d.getMonth()]} ${d.getFullYear()}`;
};
const fmtTime = d => `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;

// ─── Powerline glyph components ──────────────────────────────────────────────
const DiamondL = ({ color }) => <span style={{ color, fontSize: 17, verticalAlign: "middle", lineHeight: 1 }}>&#xE0B6;</span>;
const DiamondR = ({ color }) => <span style={{ color, fontSize: 17, verticalAlign: "middle", lineHeight: 1 }}>&#xE0B4;</span>;
const PLRight  = ({ color }) => <span style={{ color, fontSize: 17, verticalAlign: "middle", lineHeight: 1 }}>&#xE0B0;</span>;

function Seg({ bg, fg, children, leadDiamond, trailDiamond, trailPL, trailColor }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center" }}>
      {leadDiamond && <DiamondL color={bg} />}
      <span style={{
        background: bg, color: fg,
        padding: "2px 8px", fontSize: 11.5, fontWeight: "bold",
        fontFamily: "'JetBrains Mono','Cascadia Code','Consolas',monospace",
        display: "inline-flex", alignItems: "center", gap: 5, height: 24,
      }}>{children}</span>
      {trailDiamond && <DiamondR color={bg} />}
      {trailPL      && <PLRight color={trailColor || "#000"} />}
    </span>
  );
}

// ─── Oh My Posh prompt scenes ─────────────────────────────────────────────────
const SCENES = [
  { label: "home",       path: "~",                    git: null,                               python: null,    npm: null,      node: null,      ok: true  },
  { label: "git clean",  path: "~/projects/posh-koo",  git: { branch: "main",           n: 0 }, python: null,    npm: null,      node: null,      ok: true  },
  { label: "git dirty",  path: "~/projects/dotfiles",  git: { branch: "feat/wezterm",   n: 3 }, python: null,    npm: null,      node: null,      ok: true  },
  { label: "python",     path: "~/projects/api",       git: { branch: "main",           n: 0 }, python: "3.11.2",npm: null,      node: null,      ok: true  },
  { label: "node",       path: "~/projects/style-pg",  git: { branch: "main",           n: 0 }, python: null,    npm: "9.8.1",   node: "18.17.0", ok: true  },
  { label: "error exit", path: "~",                    git: null,                               python: null,    npm: null,      node: null,      ok: false },
];

function OhMyPoshPrompt({ scene }) {
  const gitNextColor = scene.python ? P.python : M.base;
  return (
    <div style={{ fontFamily: "'JetBrains Mono','Consolas',monospace" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 4 }}>
        {/* LEFT */}
        <div style={{ display: "inline-flex", alignItems: "center" }}>
          <Seg bg={P.session} fg={P.sessionFg} leadDiamond trailPL trailColor={P.path}>
            koo@raldisk
          </Seg>
          <Seg bg={P.path} fg={P.pathFg} trailPL trailColor={scene.git ? P.git : gitNextColor}>
            <span style={{ opacity: 0.7 }}>&#xE5FF;</span>
            <span style={{ opacity: 0.5, fontSize: 9 }}>&#xE0B1;</span>
            {scene.path}
          </Seg>
          {scene.git && (
            <Seg bg={P.git} fg={P.gitFg} leadDiamond trailPL trailColor={gitNextColor}>
              ⎇ {scene.git.branch}
              {scene.git.n > 0 && <span style={{ color: "#f38ba8" }}> ✎{scene.git.n}</span>}
            </Seg>
          )}
          {scene.python && (
            <Seg bg={P.python} fg={P.pythonFg} trailPL trailColor={M.base}>
              🐍 {scene.python}
            </Seg>
          )}
          <span style={{
            color: scene.ok ? M.green : "#f38ba8",
            fontSize: 13, fontWeight: "bold", paddingLeft: 8,
          }}>{scene.ok ? "✔" : "✘"}</span>
        </div>
        {/* RIGHT */}
        {(scene.npm || scene.node) && (
          <div style={{ display: "inline-flex", alignItems: "center" }}>
            {scene.npm && <Seg bg={P.npm} fg={P.npmFg} leadDiamond trailDiamond>&#xE71E; {scene.npm}</Seg>}
            {scene.node && <Seg bg={P.node} fg={P.nodeFg} trailDiamond> &#xE718; {scene.node}</Seg>}
          </div>
        )}
      </div>
      {/* line 2 */}
      <div style={{ display: "flex", alignItems: "center", marginTop: 2 }}>
        <span style={{ color: P.connector, fontSize: 12 }}>╰─</span>
        <span style={{ color: P.arrow, fontSize: 12, fontWeight: "bold" }}>❯❯❯ </span>
        <span style={{
          display: "inline-block", width: 7, height: 13,
          background: M.rosewater, verticalAlign: "text-bottom",
          animation: "blink 1.1s step-end infinite", borderRadius: 1,
        }} />
      </div>
    </div>
  );
}

// ─── WezTerm Tab Bar ──────────────────────────────────────────────────────────
function TabBar({ now }) {
  return (
    <div style={{
      background: "rgba(0,0,0,0.45)",
      height: 28, display: "flex", alignItems: "center",
      justifyContent: "space-between", backdropFilter: "blur(6px)", flexShrink: 0,
    }}>
      {/* LEFT: workspace label */}
      <div style={{ display: "flex", alignItems: "center", height: "100%", marginLeft: 6, gap: 0 }}>
        <DiamondL color={M.peach} />
        <span style={{
          background: M.peach, color: M.crust, fontWeight: "bold", fontSize: 11,
          padding: "0 8px", height: "100%", display: "flex", alignItems: "center",
          fontFamily: "monospace",
        }}>koo@raldisk</span>
        <PLRight color={M.tabActive} />
        {/* active tab */}
        <span style={{
          background: M.tabActive, color: M.crust, fontWeight: "bold", fontSize: 11,
          padding: "0 10px", height: "100%", display: "flex", alignItems: "center",
          fontFamily: "monospace", gap: 5,
        }}>
          <span style={{ opacity: 0.6, fontSize: 9 }}>1</span> pwsh
        </span>
        <PLRight color={M.surface1} />
        {/* inactive tab */}
        <span style={{
          background: M.surface1, color: M.subtext0, fontWeight: "bold", fontSize: 11,
          padding: "0 10px", height: "100%", display: "flex", alignItems: "center",
          fontFamily: "monospace", gap: 5,
        }}>
          <span style={{ opacity: 0.6, fontSize: 9 }}>2</span> pwsh
        </span>
        <PLRight color="rgba(0,0,0,0)" />
        <span style={{ color: M.text, opacity: 0.4, paddingLeft: 8, fontSize: 13 }}>+</span>
      </div>
      {/* RIGHT: status */}
      <div style={{
        display: "flex", alignItems: "center", gap: 0,
        fontSize: 10.5, fontWeight: "bold", paddingRight: 8, fontFamily: "monospace",
      }}>
        <span style={{ color: M.subtext0 }}>📅 {fmtDate(now)}</span>
        <span style={{ color: M.sapphire, margin: "0 5px" }}>─</span>
        <span style={{ color: M.mauve }}>🕐 {fmtTime(now)}</span>
        <span style={{ color: M.sapphire, margin: "0 5px" }}>─</span>
        <span style={{ color: M.yellow }}>🔋 85%</span>
      </div>
    </div>
  );
}

// ─── Terminal body ────────────────────────────────────────────────────────────
function TerminalBody({ scene }) {
  const prev = SCENES[(SCENES.findIndex(s => s === scene) + SCENES.length - 1) % SCENES.length];
  return (
    <div style={{
      flex: 1, padding: "12px 14px 10px 10px",
      fontFamily: "'JetBrains Mono','Consolas',monospace",
      fontSize: 11.5, lineHeight: 1.7, color: M.text,
      overflowY: "auto", display: "flex", flexDirection: "column", gap: 10,
    }}>
      {/* ghost of previous prompt */}
      <div style={{ opacity: 0.35 }}>
        <OhMyPoshPrompt scene={prev} />
      </div>
      {/* output lines */}
      <div style={{ color: M.subtext0, paddingLeft: 2, fontSize: 11 }}>
        {scene.label === "error exit"
          ? <span style={{ color: "#f38ba8" }}>command not found: pyhton</span>
          : scene.label === "node"
          ? <><span style={{ color: M.green }}>✔ </span>Installed packages: react, vite, tailwindcss</>
          : scene.label === "python"
          ? <><span style={{ color: M.green }}>✔ </span>Virtual env active: .venv</>
          : <>&nbsp;</>}
      </div>
      {/* active prompt */}
      <OhMyPoshPrompt scene={scene} />
    </div>
  );
}

// ─── Scrollbar ────────────────────────────────────────────────────────────────
function Scrollbar() {
  return (
    <div style={{ width: 6, background: "rgba(0,0,0,0.15)", flexShrink: 0, display: "flex", justifyContent: "center", paddingTop: 8 }}>
      <div style={{ width: 4, height: 50, background: M.surface2, borderRadius: 3 }} />
    </div>
  );
}

// ─── Full WezTerm window ──────────────────────────────────────────────────────
function WezTermWindow({ scene, focused, now }) {
  return (
    <div style={{
      width: "100%", maxWidth: 900, margin: "0 auto",
      borderRadius: 10, overflow: "hidden",
      boxShadow: focused ? "0 28px 90px rgba(0,0,0,0.85)" : "0 8px 30px rgba(0,0,0,0.5)",
      border: `1px solid ${M.surface0}`,
      display: "flex", flexDirection: "column", height: 380,
      position: "relative",
      transition: "box-shadow 0.3s, opacity 0.3s",
      opacity: focused ? 1 : 0.58,
    }}>
      {/* BG layers */}
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse at 65% 35%, #1c0a33 0%, #0d0d1f 45%, #050510 100%)",
        filter: `brightness(${focused ? 1.4 : 0.7})`,
        transition: "filter 0.3s", zIndex: 0,
      }} />
      <div style={{
        position: "absolute", inset: 0,
        background: M.base,
        opacity: focused ? 0.82 : 0.93,
        transition: "opacity 0.3s", zIndex: 1,
      }} />

      {/* Chrome */}
      <div style={{ position: "relative", zIndex: 2, display: "flex", flexDirection: "column", height: "100%" }}>
        {/* Titlebar */}
        <div style={{
          background: "#090909", height: 26, display: "flex", alignItems: "center",
          justifyContent: "space-between", borderBottom: `1px solid ${M.crust}`, flexShrink: 0,
        }}>
          <span style={{ color: M.overlay1, fontSize: 10.5, paddingLeft: 10, fontFamily: "monospace" }}>
            pwsh · koo@raldisk
          </span>
          <div style={{ display: "flex", gap: 10, paddingRight: 12, alignItems: "center" }}>
            <span style={{ color: M.overlay1, fontSize: 11 }}>─</span>
            <span style={{ color: M.overlay1, fontSize: 11 }}>□</span>
            <span style={{ color: "#E74856", fontSize: 11 }}>✕</span>
          </div>
        </div>
        <TabBar now={now} />
        <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
          <TerminalBody scene={scene} />
          <Scrollbar />
        </div>
      </div>
    </div>
  );
}

// ─── Root ─────────────────────────────────────────────────────────────────────
export default function DotfilesPreview() {
  const now = useTime();
  const [sceneIdx, setSceneIdx] = useState(1);
  const [focused, setFocused] = useState(true);
  const scene = SCENES[sceneIdx];

  return (
    <div style={{
      minHeight: "100vh",
      background: "#08080f",
      display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center",
      padding: "32px 16px",
      fontFamily: "system-ui, sans-serif",
    }}>
      <style>{`
        @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
        * { box-sizing: border-box; }
        button:hover { opacity: 0.85; }
      `}</style>

      {/* Header */}
      <div style={{ textAlign: "center", marginBottom: 20 }}>
        <div style={{ fontSize: 20, fontWeight: "bold", color: M.peach, letterSpacing: "0.04em" }}>
          dotfiles-koo
        </div>
        <div style={{ fontSize: 11, color: M.overlay1, marginTop: 4 }}>
          WezTerm + Oh My Posh · raldisk/dotfiles-koo
        </div>
        <div style={{ marginTop: 10, display: "flex", gap: 6, justifyContent: "center", flexWrap: "wrap" }}>
          {["WezTerm","Oh My Posh","PowerShell 7","Windows 10"].map(b => (
            <span key={b} style={{
              fontSize: 9.5, padding: "2px 8px", borderRadius: 4,
              background: "rgba(195,134,241,0.12)", color: P.session,
              border: "1px solid rgba(195,134,241,0.3)", fontWeight: "bold",
            }}>{b}</span>
          ))}
        </div>
      </div>

      {/* WezTerm window */}
      <WezTermWindow scene={scene} focused={focused} now={now} />

      {/* Controls */}
      <div style={{ marginTop: 16, display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "center", alignItems: "center" }}>
        {SCENES.map((s, i) => (
          <button key={i} onClick={() => setSceneIdx(i)} style={{
            padding: "4px 11px", borderRadius: 5,
            border: `1px solid ${sceneIdx === i ? P.session : "#2a2a3a"}`,
            background: sceneIdx === i ? "rgba(195,134,241,0.15)" : "transparent",
            color: sceneIdx === i ? P.session : M.overlay1,
            fontSize: 10.5, cursor: "pointer", fontFamily: "monospace",
            transition: "all 0.15s",
          }}>{s.label}</button>
        ))}
        <div style={{ width: 1, height: 18, background: M.surface1 }} />
        <button onClick={() => setFocused(f => !f)} style={{
          padding: "4px 11px", borderRadius: 5,
          border: `1px solid ${focused ? M.green : "#f38ba8"}`,
          background: "transparent",
          color: focused ? M.green : "#f38ba8",
          fontSize: 10.5, cursor: "pointer", fontFamily: "monospace",
          transition: "all 0.15s",
        }}>
          {focused ? "● focused" : "○ unfocused"}
        </button>
      </div>

      {/* Legend grid */}
      <div style={{
        marginTop: 20, display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(130px, 1fr))",
        gap: 7, width: "100%", maxWidth: 900,
      }}>
        {[
          { color: M.peach,       label: "workspace",  desc: "koo@raldisk (tab bar)" },
          { color: M.tabActive,   label: "active tab", desc: "#7FB4CA powerline" },
          { color: P.session,     label: "session",    desc: "oh-my-posh prompt" },
          { color: P.git,         label: "git",        desc: "branch + dirty state" },
          { color: P.python,      label: "python",     desc: "version (files mode)" },
          { color: M.mauve,       label: "right status",desc: "date · time · battery" },
        ].map(s => (
          <div key={s.label} style={{
            background: "#0f0f1a", border: "1px solid #1e1e2e",
            borderRadius: 6, padding: "7px 9px",
            display: "flex", alignItems: "center", gap: 8,
          }}>
            <div style={{ width: 9, height: 9, borderRadius: 2, background: s.color, flexShrink: 0 }} />
            <div>
              <div style={{ fontSize: 10.5, color: M.text, fontFamily: "monospace" }}>{s.label}</div>
              <div style={{ fontSize: 9.5, color: M.overlay1 }}>{s.desc}</div>
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 16, fontSize: 9.5, color: M.surface2, textAlign: "center" }}>
        Catppuccin Mocha · JetBrainsMono Nerd Font · OpenGL · Acrylic backdrop
      </div>
    </div>
  );
}