// Slash command registry. Each command returns JSX (the response body).
// Free text falls through to claude.complete with a system prompt.

const RESUME = JSON.parse(document.getElementById("user-data").textContent);

const COMMANDS = [
  { name: "/help",       desc: "show this help screen" },
  { name: "/about",      desc: "who I am, in ~3 sentences" },
  { name: "/skills",     desc: "tech stack and what I'm good at" },
  { name: "/experience", desc: "where I've worked, what I shipped" },
  { name: "/projects",   desc: "side projects on the App Store + GitHub" },
  { name: "/now",        desc: "what I'm working on this week" },
  { name: "/uses",       desc: "hardware + software + dotfiles" },
  { name: "/blog",       desc: "things I've written" },
  { name: "/contact",    desc: "how to reach me" },
  { name: "/coffee",     desc: "buy me a coffee ☕" },
  { name: "/theme",      desc: "switch color theme — terra | cool | phosphor | paper" },
  { name: "/history",    desc: "recent commands in this session" },
  { name: "/clear",      desc: "clear the screen" },
  { name: "/sudo",       desc: "elevated privileges (try it…)" },
  { name: "/exit",       desc: "log out (refresh)" },
];

function HelpResponse() {
  return (
    <div>
      <p>Hey, I'm <b>Gokul</b>. Welcome to my shell. Standing by.</p>
      <p className="dim">Here's what you can do in this session:</p>

      <h3>About me</h3>
      <ul>
        <li><span className="cmd">/about</span> — who I am, what I care about</li>
        <li><span className="cmd">/skills</span> — Swift, SwiftUI, the rest of the toolkit</li>
        <li><span className="cmd">/experience</span> — Fetch Rewards · Dish · Diagnal</li>
        <li><span className="cmd">/projects</span> — apps I've shipped on my own</li>
      </ul>

      <h3>Currently</h3>
      <ul>
        <li><span className="cmd">/now</span> — what I'm building this week</li>
        <li><span className="cmd">/uses</span> — gear, editor, dotfiles</li>
        <li><span className="cmd">/blog</span> — recent posts</li>
      </ul>

      <h3>Get in touch</h3>
      <ul>
        <li><span className="cmd">/contact</span> — email, GitHub, LinkedIn</li>
        <li><span className="cmd">/coffee</span> — keep me caffeinated</li>
      </ul>

      <h3>Built-in CLI</h3>
      <ul>
        <li><span className="cmd">/theme</span> <span className="dim">terra | cool | phosphor | paper</span></li>
        <li><span className="cmd">/history</span> — recent commands</li>
        <li><span className="cmd">/clear</span> — clear the screen</li>
        <li><span className="cmd">/sudo</span> — for emergencies only</li>
      </ul>

      <p className="dim" style={{marginTop: 10}}>Or just type a question. I'll answer in character.</p>
      <p className="ok">What would you like to tackle?</p>
      <p className="footer-meta">✶ Baked for 11s</p>
    </div>
  );
}

function AboutResponse() {
  return (
    <div>
      <p>I'm <b>Gokul Pulikkal</b> — an iOS engineer based in <span className="cyan">Amherst, MA</span>.</p>
      <p>Right now I'm at <span className="pink">Fetch Rewards</span>, quietly shipping features to an app millions of people poke at every day. The day-job specifics stay at the day job — but outside of it I keep busy with side projects: AI-powered tools, on-device ML experiments, and the occasional weekend rabbit hole.</p>
      <p>Before that I built tvOS streaming apps at Dish and led a small team at Diagnal shipping OTT players for Apple TV and Roku. I like long-lived consumer surfaces, multi-platform Swift, and writing tests that actually catch things.</p>
      <p className="dim">"{RESUME.tagline}"</p>
      <p className="footer-meta">✶ Compiled with care</p>
    </div>
  );
}

function SkillsResponse() {
  const groups = [
    { k: "Languages",   v: "Swift · Objective-C · Python · C / C++ · BrightScript · Verilog" },
    { k: "Apple stack", v: "SwiftUI · UIKit · MVVM · @Observable · Combine · Swift Concurrency · Swift Testing · XCTest" },
    { k: "Persistence", v: "SwiftData · Core Data · CloudKit · Firestore" },
    { k: "Frameworks",  v: "Vision · CoreML hooks · MapKit · WidgetKit · App Intents" },
    { k: "Tooling",     v: "Swift Package Manager · CocoaPods · Xcode Cloud · Fastlane · Git" },
    { k: "Backend-ish", v: "GraphQL · REST · AWS Lambda · Flask · Firebase · Gemini API" },
    { k: "Platforms",   v: "iOS · iPadOS · macOS · tvOS · watchOS · Roku" },
  ];
  return (
    <div>
      <p>Things I reach for, roughly in order of how often:</p>
      <div className="table">
        {groups.map(g => (
          <React.Fragment key={g.k}>
            <div className="k">{g.k}</div>
            <div className="v">{g.v}</div>
          </React.Fragment>
        ))}
      </div>
      <p className="dim" style={{marginTop:8}}>Comfortable across mobile, set-top, and the small AI/back-end glue that makes apps feel smart.</p>
    </div>
  );
}

function ExperienceResponse() {
  return (
    <div>
      <p>Last <span className="ok">~6 years</span> in shipping order:</p>

      <h3><span className="pink">Fetch Rewards</span> <span className="dim">— iOS Developer · Remote · Mar 2025 → present</span></h3>
      <ul>
        <li>iOS engineer on a consumer app used by millions of users daily.</li>
        <li>Cross-functional work with product, design, and data — experiments, rollouts, and end-to-end production accountability.</li>
        <li>Day-to-day specifics stay at the day job. Happy to chat about engineering tradeoffs in person.</li>
      </ul>

      <h3><span className="pink">Dish Network Technologies</span> <span className="dim">— Senior Engineer · India · May 2022 → Jul 2023</span></h3>
      <ul>
        <li>Designed live video player, EPG, and DVR for a leading streaming app on tvOS — drove a <span className="ok">25%</span> lift in content consumption duration.</li>
        <li>Built CMS-driven app customization that shared a single codebase across Apple + Roku clients — cut dev/maintenance effort by <span className="ok">~70%</span>.</li>
        <li>Cross-functional work with design, PM, and backend to land scalable features on schedule.</li>
      </ul>

      <h3><span className="pink">Diagnal Technologies</span> <span className="dim">— Engineer · India · Jul 2019 → May 2022</span></h3>
      <ul>
        <li>Contributed heavily in a 3-person team building a streaming app on tvOS + Roku — used as the base template for several entertainment + sports OTT clients.</li>
        <li>Shipped player (VOD + Live), multi-profile, and core platform features across Apple + Roku.</li>
        <li>Owned client support: triage, hot-fixes, release cadence.</li>
      </ul>
    </div>
  );
}

function ProjectsResponse() {
  const PAGE_SIZE = 3;
  const projects = [
    (
      <React.Fragment key="newsletters">
        <h3><a href="https://github.com/gokulpulikkal/NewsLetters" target="_blank" rel="noopener noreferrer"><span className="cyan">NewsLetters</span></a> <span className="dim">— iOS · <a href="https://apps.apple.com/us/developer/gokul-pulikkal/id1759789658" target="_blank" rel="noopener noreferrer">App Store</a></span></h3>
        <p>An AI-powered system that quietly intercepts newsletter emails as they hit your mailbox and turns them into a structured, browsable feed. Stop missing the ones that matter; stop seeing the ones that don't. Backend lives in <a href="https://github.com/gokulpulikkal/NewsLetters-Summarizer-backend" target="_blank" rel="noopener noreferrer">NewsLetters-Summarizer-backend</a>.</p>
        <p className="dim">Stack: SwiftUI · Flask · Gemini · Firebase Firestore · Make</p>
      </React.Fragment>
    ),
    (
      <React.Fragment key="clipboard-buddy">
        <h3><a href="https://github.com/gokulpulikkal/ClipBoardClientMac" target="_blank" rel="noopener noreferrer"><span className="cyan">Clipboard Buddy</span></a> <span className="dim">— macOS · iOS · iPadOS · <a href="https://apps.apple.com/us/developer/gokul-pulikkal/id1759789658" target="_blank" rel="noopener noreferrer">App Store</a></span></h3>
        <p>A menu-bar clipboard manager with searchable history. Copy on your Mac, paste on your phone, find that link from Tuesday. Persistent, private, syncs via iCloud.</p>
        <p className="dim">Stack: SwiftUI · SwiftData · Swift Testing</p>
      </React.Fragment>
    ),
    (
      <React.Fragment key="see-your-agents">
        <h3><a href="https://github.com/pulikkalgokul/SeeYourAgents" target="_blank" rel="noopener noreferrer"><span className="cyan">SeeYourAgents</span></a> <span className="dim">— macOS · 2026</span></h3>
        <p>A macOS app that detects your running Claude Code sessions and visualises them as live, animated pixel-art agents in a virtual office. Tails transcript files via kqueue, parses agent activity from JSONL, and renders status (active / thinking / waiting) live.</p>
        <p className="dim">Stack: SwiftUI · kqueue · JSONL parsing · pixel-art rendering</p>
      </React.Fragment>
    ),
    (
      <React.Fragment key="catai">
        <h3><a href="https://github.com/gokulpulikkal/CatAi" target="_blank" rel="noopener noreferrer"><span className="cyan">CatAi</span></a> <span className="dim">— macOS · 2025</span></h3>
        <p>A clipboard-watcher that offers in-context text transforms (summarize, rephrase, translate) using Apple's on-device Foundation Models. No round-trip to a server.</p>
        <p className="dim">Stack: SwiftUI · FoundationModels · Swift Concurrency</p>
      </React.Fragment>
    ),
    (
      <React.Fragment key="claude-skill-generators">
        <h3><a href="https://github.com/pulikkalgokul/ClaudeSkillGenerators" target="_blank" rel="noopener noreferrer"><span className="cyan">ClaudeSkillGenerators</span></a> <span className="dim">— Python · 2026</span></h3>
        <p>Tooling that converts GitHub READMEs and Apple's Swift DocC documentation into Claude Skills — handles badge cleanup, alert blocks, smart section splitting, and emits a structured SKILL.md ready to drop into an agent.</p>
        <p className="dim">Stack: Python · Markdown parsing · Swift DocC</p>
      </React.Fragment>
    ),
    (
      <React.Fragment key="latex-engine-goku">
        <h3><a href="https://github.com/pulikkalgokul/latex_engine_goku" target="_blank" rel="noopener noreferrer"><span className="cyan">latex_engine_goku</span></a> <span className="dim">— Python · 2026</span></h3>
        <p>A small LaTeX-as-a-service: POST a ZIP of <span className="cmd">.tex</span> files, get a compiled PDF back. Auth, custom main-path header, deployable on Render. The thing I built so I'd stop installing TeX Live on every machine.</p>
        <p className="dim">Stack: Python · LaTeX · Render</p>
      </React.Fragment>
    ),
    (
      <React.Fragment key="expensepal">
        <h3><a href="https://github.com/gokulpulikkal/ExpensePal" target="_blank" rel="noopener noreferrer"><span className="cyan">ExpensePal</span></a> <span className="dim">— iOS · 2025</span></h3>
        <p>A smart expense tracker — point your camera at a receipt, the Vision framework + a small ML pipeline does the rest. Logs the line items so you don't have to.</p>
        <p className="dim">Stack: SwiftUI · Vision · SwiftData</p>
      </React.Fragment>
    ),
    (
      <React.Fragment key="handwriting-recognizer">
        <h3><a href="https://github.com/gokulpulikkal/HandwritingRecognizer" target="_blank" rel="noopener noreferrer"><span className="cyan">HandwritingRecognizer</span></a> <span className="dim">— iOS · 2025</span></h3>
        <p>Draw a character, get a prediction. End-to-end side project: trained a model on EMNIST in PyTorch, converted to CoreML with coremltools, and wired it into a SwiftUI drawing canvas.</p>
        <p className="dim">Stack: SwiftUI · CoreML · PyTorch · coremltools</p>
      </React.Fragment>
    ),
    (
      <React.Fragment key="rude-pomodoro">
        <h3><a href="https://github.com/gokulpulikkal/RudePomodoro" target="_blank" rel="noopener noreferrer"><span className="cyan">RudePomodoro</span></a> <span className="dim">— iOS · 2025</span></h3>
        <p>A tough-love productivity timer. Pick up your phone during a focus block and it roasts you with a rude notification. Built for the bit; surprisingly effective.</p>
        <p className="dim">Stack: SwiftUI · UserNotifications</p>
      </React.Fragment>
    ),
    (
      <React.Fragment key="tictactoe-multiplayer">
        <h3><a href="https://github.com/gokulpulikkal/TicTacToeMultiplayer" target="_blank" rel="noopener noreferrer"><span className="cyan">TicTacToeMultiplayer</span></a> <span className="dim">— iOS</span></h3>
        <p>Online + offline multiplayer Tic-Tac-Toe over WebSockets. <a href="https://github.com/gokulpulikkal/TicTacToeGameWebSocketBackend" target="_blank" rel="noopener noreferrer">Backend</a> in TypeScript.</p>
        <p className="dim">Stack: SwiftUI · TypeScript · WebSockets</p>
      </React.Fragment>
    ),
    (
      <React.Fragment key="roku-bits">
        <h3><span className="cyan">Roku / BrightScript open-source bits</span> <span className="dim">— from my OTT days</span></h3>
        <p>Reusable SceneGraph components: <a href="https://github.com/gokulpulikkal/CustomProgressBar" target="_blank" rel="noopener noreferrer">CustomProgressBar</a>, <a href="https://github.com/gokulpulikkal/PositionIndicatorRoku" target="_blank" rel="noopener noreferrer">PositionIndicatorRoku</a>, <a href="https://github.com/gokulpulikkal/RokuWeatherApp" target="_blank" rel="noopener noreferrer">RokuWeatherApp</a>, <a href="https://github.com/gokulpulikkal/GameLauncher" target="_blank" rel="noopener noreferrer">GameLauncher</a> (RoScreen games inside a SceneGraph channel), and <a href="https://github.com/gokulpulikkal/NetFlix-Roku-Clone" target="_blank" rel="noopener noreferrer">NetFlix-Roku-Clone</a>.</p>
      </React.Fragment>
    ),
    (
      <React.Fragment key="labs">
        <h3><span className="cyan">Labs / experiments</span></h3>
        <p>
          <a href="https://github.com/gokulpulikkal/8-Bit-MIPS" target="_blank" rel="noopener noreferrer">8-Bit-MIPS</a> — an 8-bit processor in Verilog, simulated and synthesized to a Xilinx FPGA.{" "}
          <a href="https://github.com/gokulpulikkal/DSAVisualizer" target="_blank" rel="noopener noreferrer">DSAVisualizer</a> — SwiftUI visualisations of common data-structure operations.{" "}
          <a href="https://github.com/gokulpulikkal/UsedCarPricePrediction" target="_blank" rel="noopener noreferrer">UsedCarPricePrediction</a> — Python ML pipeline for used-car pricing.
        </p>
      </React.Fragment>
    ),
  ];

  const [visible, setVisible] = React.useState(PAGE_SIZE);
  const shown = projects.slice(0, visible);
  const remaining = projects.length - visible;
  const nextBatch = Math.min(PAGE_SIZE, remaining);

  return (
    <div>
      <p>A curated tour of side projects I've shipped or am actively building. Each title links to its repo:</p>

      {shown}

      {remaining > 0 ? (
        <p>
          <a
            href="#"
            className="key"
            onClick={(e) => { e.preventDefault(); setVisible(v => v + PAGE_SIZE); }}
          >
            [ see more ({nextBatch} of {remaining}) ]
          </a>
          <span className="dim"> — showing {visible} of {projects.length}</span>
        </p>
      ) : (
        <p className="footer-meta">✶ This is a curated list — full source on <a href="https://github.com/gokulpulikkal" target="_blank" rel="noopener noreferrer">@gokulpulikkal</a> and <a href="https://github.com/pulikkalgokul" target="_blank" rel="noopener noreferrer">@pulikkalgokul</a>. App Store apps: <a href="https://apps.apple.com/us/developer/gokul-pulikkal/id1759789658" target="_blank" rel="noopener noreferrer">portfolio</a>.</p>
      )}
    </div>
  );
}

function NowResponse() {
  return (
    <div>
      <p><span className="ok">●</span> Currently working on <span className="dim">(updated weekly):</span></p>
      <ul>
        <li>Day job: shipping iOS at Fetch (specifics stay at the day job).</li>
        <li>Side: rebuilding NewsLetters' summarization pipeline behind a smaller, cheaper model.</li>
        <li>Side: tinkering with <span className="cyan">CatAi</span> — using Apple's on-device Foundation Models for clipboard-driven text transforms.</li>
        <li>Reading: <i>A Philosophy of Software Design</i> (re-read), and the latest WWDC SwiftUI session notes.</li>
      </ul>
      <p className="dim">Inspired by <a href="https://nownownow.com" target="_blank">/now pages</a>.</p>
    </div>
  );
}

function UsesResponse() {
  const rows = [
    { k: "Machine",  v: "MacBook Pro 14\" · M4 Max · 36GB" },
    { k: "Editor",   v: "Xcode (work) · Claude and Codex (everything else)" },
    { k: "Terminal", v: "Mac's own terminal" },
    { k: "Phone",    v: "iPhone 12 · iOS 26" },
    { k: "Watch",    v: "Apple Watch Series 9 — mostly for HealthKit experiments" },
    { k: "Keyboard", v: "Keychron Q1 · Gateron Brown" },
    { k: "Audio",    v: "AirPods Pro 2 · Sony WH-1000XM5 for flights" },
    { k: "Coffee",   v: "Aeropress · Onyx Coffee Lab · oat milk, sorry" },
    { k: "Notes",    v: "Obsedian for journal · Notion at work" },
  ];
  return (
    <div>
      <p>Gear and tools that survive long-term:</p>
      <div className="table">
        {rows.map(r => (
          <React.Fragment key={r.k}>
            <div className="k">{r.k}</div>
            <div className="v">{r.v}</div>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function BlogResponse() {
  const posts = [
    { d: "2026-03-12", t: "On-device LLMs in iOS 26: what CatAi taught me", tag: "ai" },
    { d: "2026-01-28", t: "@Observable in production: a year-in review", tag: "swift" },
    { d: "2025-11-04", t: "Building Clipboard Buddy with SwiftData (the hard parts)", tag: "swiftdata" },
    { d: "2025-08-19", t: "Why I keep rewriting my newsletter parser", tag: "ai" },
    { d: "2025-05-02", t: "tvOS is still the most underrated Apple platform", tag: "tvos" },
  ];
  return (
    <div>
      <p>Recent writing — long-form lives at <a href="#" data-cmd="/contact">my site / GitHub Pages</a>:</p>
      <ul>
        {posts.map(p => (
          <li key={p.d}>
            <span className="mute">{p.d}</span>{" · "}
            <a href="#">{p.t}</a>{" "}
            <span className="tag">{p.tag}</span>
          </li>
        ))}
      </ul>
      <p className="dim">RSS available — copy <span className="cmd">https://gokul.sh/feed.xml</span></p>
    </div>
  );
}

function ContactResponse() {
  const rows = [
    { k: "GitHub",    v: <a href={`https://${RESUME.github}`} target="_blank">{RESUME.github}</a> },
    { k: "LinkedIn",  v: <a href={`https://${RESUME.linkedin}`} target="_blank">{RESUME.linkedin}</a> },
    { k: "App Store", v: <a href="https://apps.apple.com/us/developer/gokul-pulikkal/id1759789658" target="_blank" rel="noopener noreferrer">apps.apple.com/developer/gokul-pulikkal</a> },
    { k: "Location",  v: <span>{RESUME.location} · open to remote</span> },
  ];
  return (
    <div>
      <p>Best ways to reach me:</p>
      <div className="table">
        {rows.map(r => (
          <React.Fragment key={r.k}>
            <div className="k">{r.k}</div>
            <div className="v">{r.v}</div>
          </React.Fragment>
        ))}
      </div>
      <p className="dim" style={{marginTop:8}}>I read everything. Reply latency: ~24h on weekdays.</p>
    </div>
  );
}

function CoffeeResponse() {
  const [thanked, setThanked] = React.useState(false);
  const onTip = (e) => { e.preventDefault(); setThanked(true); };

  if (thanked) {
    return (
      <div>
        <pre style={{margin:"4px 0", color:"var(--pink)"}}>{`   ,d88b.  ,d88b,
   88888888888888
   \`Y888888888Y'
     \`Y88888Y'
       \`Y8Y'
         \`'`}</pre>
        <p>Noted, and appreciated.</p>
        <p>That big heart of yours? <span className="ok">The world is better for it.</span> Even the gesture lands — thank you.</p>
        <p className="dim">Full disclosure: I haven't actually wired up the tip jar yet. <span className="cmd">Setting up the accounts soon</span> — for now, please consider this a warm IOU and a sincere high-five.</p>
        <p className="dim">Until then, <span className="cmd" data-cmd="/contact">/contact</span> works just as well — a kind note keeps the lights on too.</p>
      </div>
    );
  }

  return (
    <div>
      <pre style={{margin:"4px 0", color:"var(--accent)"}}>{`     ( (
      ) )
   ........
   |      |]
   \\      /
    \`----'`}</pre>
      <p>If something on this site saved you time or made you smile, a coffee goes a long way.</p>
      <p>
        <a href="#" className="key" onClick={onTip}>[ buymeacoffee.com/gokul ]</a>{"  "}
        <a href="#" className="key" onClick={onTip}>[ venmo @gokulplkl ]</a>
      </p>
      <p className="dim">— or just send me a note. that works too.</p>
    </div>
  );
}

function ThemeResponse({ current, onSet }) {
  const themes = [
    { id: "terra",    label: "terra",    desc: "warm dark · terracotta accents" },
    { id: "cool",     label: "cool",     desc: "dark · tokyo-night ish blues" },
    { id: "phosphor", label: "phosphor", desc: "classic CRT green-on-black" },
    { id: "paper",    label: "paper",    desc: "light · paper terminal" },
  ];
  return (
    <div>
      <p>Active theme: <span className="ok">{current}</span></p>
      <ul>
        {themes.map(t => (
          <li key={t.id}>
            <a href="#" onClick={(e) => { e.preventDefault(); onSet(t.id); }}>
              <span className="cmd">/theme {t.label}</span>
            </a>
            <span className="dim"> — {t.desc}</span>
          </li>
        ))}
      </ul>
      <p className="dim">tip: themes also rotate via the Tweaks panel.</p>
    </div>
  );
}

function HistoryResponse({ history }) {
  if (!history.length) {
    return <p className="dim">No commands yet this session.</p>;
  }
  return (
    <div>
      <p>Recent commands (most recent first):</p>
      <ul>
        {history.slice().reverse().slice(0, 20).map((h, i) => (
          <li key={i}><span className="mute">{String(history.length - i).padStart(2, "0")}</span>{"  "}{h}</li>
        ))}
      </ul>
      <p className="dim">↑/↓ to scroll through them in the prompt.</p>
    </div>
  );
}

function SudoResponse() {
  return (
    <div>
      <p className="warn">[sudo] password for gokul:</p>
      <p>· · · · · · · ·</p>
      <p className="pink">Sorry. <b>{RESUME.handle}</b> is not in the sudoers file.</p>
      <p className="dim">This incident has been reported to a small pixel robot, who is mildly disappointed.</p>
      <p className="ok">→ try <span className="cmd">/coffee</span> for an apology</p>
    </div>
  );
}

function ExitResponse() {
  return (
    <div>
      <p className="dim">logout</p>
      <p>Saving session… <span className="ok">done.</span></p>
      <p>Thanks for stopping by. Connection closed.</p>
      <p className="mute">[Process completed — refresh to reconnect]</p>
    </div>
  );
}

function NotFoundResponse({ cmd }) {
  return (
    <div>
      <p><span className="pink">command not found:</span> {cmd}</p>
      <p className="dim">try <span className="cmd">/help</span> to see what's available.</p>
    </div>
  );
}

window.COMMANDS = COMMANDS;
window.RESUME = RESUME;
window.Responses = {
  HelpResponse, AboutResponse, SkillsResponse, ExperienceResponse,
  ProjectsResponse, NowResponse, UsesResponse, BlogResponse,
  ContactResponse, CoffeeResponse, ThemeResponse,
  HistoryResponse, SudoResponse, ExitResponse, NotFoundResponse,
};