/* global React, HeartRow, Panel, Badge, Chapter, StatLine, CounterHUD, PixelBtn, QuestLog, PixelImagePlaceholder, PixelSprite, PixelCharacter, Typewriter, PixelDivider */

// ============================================================================
// CASE STUDIES — Content Creation Kit (CCK) modules
// ============================================================================

const CCK_MEDIA = [
  {
    src: "assets/cck/all-nodes.png",
    note: "BASE CCK",
    label: "Asset view, custom inspector, node view, project, custom hierarchy, and more",
    span: 2,
  },
  {
    src: "assets/cck/snap-to.gif",
    note: "NPC PATHING TOOL",
    label: "Simple editor for creating pathing for NPCs",
    span: 2,
  },
  {
    src: "assets/cck/welcome.gif",
    note: "WELCOME WINDOW",
    label: "All info a user needs to get started, in one place",
    span: 1,
  },
  {
    src: "assets/cck/login.gif",
    note: "LOGIN",
    label: "Login window with serial key bypass",
    span: 1,
  },
    {
    src: "assets/cck/theater.png",
    note: "EXAMPLE PROJECT",
    label: "Extensive example project built on the CCK, with hundreds of nodes",
    span: 2,
  },
];

function CCKMediaTile({ item }) {
  return (
    <figure style={{
      gridColumn: `span ${item.span}`,
      margin: 0,
      background: "var(--ink)",
      boxShadow: "0 0 0 4px var(--ink), 4px 4px 0 4px var(--shadow)",
      display: "flex",
      flexDirection: "column",
      height: "fit-content",
    }}>
      <div style={{ background: "var(--ink)", overflow: "hidden", borderBottom: "4px solid var(--ink)" }}>
        <img
          src={item.src}
          alt={item.label}
          loading="lazy"
          className="cck-image"
          style={{
            //display: "block",
            width: "100%",
            height: "auto",
            imageRendering: "auto",
          }}
        />
      </div>
      <figcaption style={{
        background: "var(--parchment-3)",
        padding: "10px 12px",
        borderTop: "4px solid var(--ink)",
      }}>
        <div className="px-tiny" style={{ color: "var(--gold-deep)", marginBottom: 4 }}>{item.label}</div>
        <div style={{ fontSize: 16, color: "var(--ink-soft)", fontFamily: "var(--font-pixel)" }}>{item.note}</div>
      </figcaption>
    </figure>
  );
}

function CCKGallery() {
  return (
    <Panel style={{ marginBottom: 32 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12, marginBottom: 14 }}>
        <div className="px-sm">CCK IN ACTION</div>
        <div style={{ fontSize: 18, color: "var(--ink-soft)" }}>Screens from a live CCK project</div>
      </div>
      <div className="divider--dashed" style={{ marginBottom: 16 }}></div>
      <div className="cck-gallery">
        {CCK_MEDIA.map((m, i) => <CCKMediaTile key={i} item={m} />)}
      </div>
    </Panel>
  );
}

const TOOLS = [
  {
    id: "installer",
    icon: "chest",
    name: "CCK INSTALLER",
    tagline: "One-click setup, zero config",
    color: "grass",
    pitch: "A single-binary installer that gets a fresh machine from zero to building CCK projects — no manual env setup, no missing dependencies.",
    bullets: [
      "One-click install — no terminal required",
      "Bundles + installs Git if missing",
      "Validates existing installs before touching them",
      "Sets PATH and CCK env vars automatically",
    ],
    metrics: [
      { k: "Onboarding time", v: "4 hours → 2 min" },
      { k: "Manual steps", v: "0" },
    ],
  },
  {
    id: "no-code",
    icon: "pc",
    name: "NO-CODE EXPERIENCE",
    tagline: "Visual authoring for non-engineers",
    color: "river",
    pitch: "A node based system that lets designers, writers, and QA build gameplay logic without touching code. Covers everything from simple interactions to complex branching logic.",
    bullets: [
      "Custom graph view in UI Toolkit",
      "Compiles to ScriptableObjects at edit time",
      "Simple C# API for custom nodes",
      "Versioned, mergeable JSON under the hood",
    ],
    metrics: [
      { k: "Time to first prototype", v: "5 days → 15 min" },
      { k: "Learning curve", v: "1 week → 4 hours" },
    ],
  },
  {
    id: "asset-db",
    icon: "chest",
    name: "ASSET DATABASE",
    tagline: "One source of truth for users assets",
    color: "gold",
    pitch: "Users dont want to see all the DLLs and we dont want to have to search the whole database. We built our own asset database to keep search times down and sanity up.",
    bullets: [
      "Indexes on asset add, remove, and move",
      "Showns only relevant assets to users based on project",
    ],
    metrics: [],
  },
  {
    id: "licensing",
    icon: "coin",
    name: "LICENSING / LOGIN",
    tagline: "Does what it says on the tin",
    color: "gold",
    pitch: "A login window so that we can keep people out who does not have a valid license. Works offline and allows for using keys instead.",
    bullets: [
      "Encrypted token storage in EditorPrefs",
      "Offline grace period",
    ],
    metrics: [],
  },
  {
    id: "multiplayer",
    icon: "gem",
    name: "INSTANT MULTIPLAYER",
    tagline: "N-player co-op in one component",
    color: "river",
    pitch: "Drop node into your prject and your singleplayer prototype is suddenly co-op. Lobby, Items, Async join, and more all built in - no need to mess with Photon or Mirror directly.",
    bullets: [
      "Auto-syncs Transforms",
      "Host migration and disconnect handling built in",
      "Lobby UI with simple Pin-code",
      "Late-join + reconnect built in",
    ],
    metrics: [
      { k: "Setup time", v: "~1 minutes" },
      { k: "Player count", v: "10+" },
    ],
  },
  {
    id: "anim-assistant",
    icon: "sword",
    name: "ANIMATION ASSISTANT",
    tagline: "Animator graph wrangler",
    color: "river",
    pitch: "Bulk-edit Animator state machines, generate transitions from naming conventions, and lint for unreachable states.",
    bullets: [
      "Pattern-based transition generation",
      "Unreachable / orphaned state detector",
      "Param renaming across all states",
      "Diff view — see what changed before commit",
    ],
    metrics: [
      { k: "Hand-wired transitions saved", v: "Hundreds" },
      { k: "Lint errors caught", v: "Pre-merge" },
    ],
  },
  {
    id: "ui-system",
    icon: "heart",
    name: "ALL UI",
    tagline: "Designed and built all windows",
    color: "river",
    pitch: "I built the UI for the entire project. Some items were designed by others, but I implemented all interactions.",
    bullets: [
      "Designed and built UI across the entire project",
    ],
    metrics: [
    ],
  },
];

function ToolCard({ tool, expanded, onToggle }) {
  return (
    <Panel style={{ height: "100%" }}>
      <div style={{ display: "flex", alignItems: "flex-start", gap: 16, marginBottom: 14 }}>
        <div style={{ flexShrink: 0, padding: 8, background: "var(--parchment-3)", boxShadow: "0 0 0 3px var(--ink)" }}>
          <PixelSprite kind={tool.icon} size={48} />
        </div>
        <div style={{ flex: 1 }}>
          <div className="px-sm" style={{ marginBottom: 6, lineHeight: 1.4 }}>{tool.name}</div>
          <div style={{ fontSize: 20, color: "var(--ink-soft)" }}>{tool.tagline}</div>
        </div>
        <Badge kind="maintained">CCK</Badge>
      </div>

      <div className="divider--dashed"></div>

      <p style={{ fontSize: 20, margin: "10px 0 14px" }}>{tool.pitch}</p>

      <div className="px-xs" style={{ marginBottom: 8 }}>KEY FEATURES</div>
      <ul style={{ listStyle: "none", marginBottom: 14 }}>
        {tool.bullets.map((b, i) => (
          <li key={i} style={{ display: "flex", gap: 10, fontSize: 19, padding: "4px 0" }}>
            <span style={{ color: "var(--heart)" }}>◆</span>
            <span>{b}</span>
          </li>
        ))}
      </ul>

      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        {tool.metrics.map((m, i) => (
          <div key={i} style={{
            flex: "1 1 140px",
            background: "var(--ink)",
            color: "var(--parchment)",
            padding: "8px 10px",
            boxShadow: "0 0 0 3px var(--ink), 3px 3px 0 3px var(--shadow)",
          }}>
            <div className="px-tiny" style={{ color: "var(--gold)", marginBottom: 4 }}>{m.k}</div>
            <div className="px-xs">{m.v}</div>
          </div>
        ))}
      </div>
    </Panel>
  );
}

const CCK_SIDE_QUESTS = [
  {
    id: "deck-download-all",
    icon: "gem",
    name: "STEAM DECK - DOWNLOAD ALL",
    tagline: "Decky plugin · weekend project",
    pitch: "A small Decky plugin for Steam Deck that queues scheduled downloads. Created auto build script. Built to scratch a personal itch - got beat to market by a better product by one day.",
    tags: ["Decky", "Python", "Weekend project"],
  },
];

function SideQuestCard({ item }) {
  return (
    <Panel style={{ height: "100%" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 10 }}>
        <div style={{ flexShrink: 0, padding: 6, background: "var(--parchment-3)", boxShadow: "0 0 0 3px var(--ink)" }}>
          <PixelSprite kind={item.icon} size={32} />
        </div>
        <div style={{ flex: 1 }}>
          <div className="px-xs" style={{ marginBottom: 4, lineHeight: 1.4 }}>{item.name}</div>
          <div style={{ fontSize: 16, color: "var(--ink-soft)" }}>{item.tagline}</div>
        </div>
      </div>
      <p style={{ fontSize: 17, margin: "6px 0 10px", lineHeight: 1.5 }}>{item.pitch}</p>
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
        {item.tags.map((t, i) => (
          <span key={i} className="px-tiny" style={{
            background: "var(--ink)",
            color: "var(--parchment)",
            padding: "4px 8px",
            boxShadow: "0 0 0 2px var(--ink)",
          }}>{t}</span>
        ))}
      </div>
    </Panel>
  );
}

function CaseStudies() {
  return (
    <section id="tools" className="tile-bg" style={{ paddingTop: 80, paddingBottom: 100 }}>
      <div className="wrap">
        <Chapter
          tag="◆ CHAPTER 02"
          title="TOOLS"
          sub="The Content Creation Kit (CCK) for Unity. A compleate overhaul of Unity so that a designer can focus on creativity rather than boilerplate code."
        />

        <Panel variant="dark" style={{ marginBottom: 32 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
            <div>
              <div className="px-sm" style={{ color: "var(--gold)", marginBottom: 6 }}>★ CONTENT CREATION KIT</div>
              <div style={{ fontSize: 22, color: "var(--parchment-2)" }}>A modular Unity package for studios that want to move faster.</div>
            </div>
            <div style={{ display: "flex", gap: 12 }}>
              <CounterHUD icon="◆" label="LANG" value="C# / UI Tk" />
              <CounterHUD icon="★" label="STATUS" value="LIVE" />
            </div>
          </div>
        </Panel>

        <CCKGallery />

        <div className="grid-2">
          {TOOLS.map(t => <ToolCard key={t.id} tool={t} />)}
        </div>

        <div style={{ marginTop: 40 }}>
          <div className="px-sm" style={{ marginBottom: 12, color: "var(--ink-soft)" }}></div>
          <div className="grid-3">
            {CCK_SIDE_QUESTS.map(s => <SideQuestCard key={s.id} item={s} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CaseStudies });