/* ========================================================================
   screens-dashboard.jsx — Launch Command Centre + project detail
   ====================================================================== */

const BeginnerHelpPanel = () => {
  const steps = [
    ["1", "Add your business", "Tell BoltKit what you sell, teach or post about."],
    ["2", "Upload useful files", "Photos, logos, screenshots, designs and videos are called assets."],
    ["3", "Let AI write the plan", "BoltKit turns your info into captions, post ideas, ads and a calendar."],
    ["4", "Export or schedule", "Download everything, or move posts into your content calendar."]
  ];
  return (
    <div className="beginner-help-panel">
      <div>
        <div className="beginner-kicker"><span />BEGINNER MODE</div>
        <h2>Not sure where to start? BoltKit makes content from what you already have.</h2>
        <p>Plain English version: upload your photos, brand files, website or social page, then BoltKit helps you make posts, captions, adverts, video ideas and a schedule for your business.</p>
      </div>
      <div className="beginner-step-grid">
        {steps.map(step => (
          <button key={step[0]} onClick={() => window.BoltKitGo?.(step[0] === "1" ? "wizard" : step[0] === "2" ? "assets" : step[0] === "3" ? "generate" : "calendar")}>
            <b>{step[0]}</b>
            <strong>{step[1]}</strong>
            <span>{step[2]}</span>
          </button>
        ))}
      </div>
      <div className="beginner-glossary">
        <div><b>Assets</b><span>Your photos, logos, videos, screenshots, post designs and brand files.</span></div>
        <div><b>Brand style</b><span>Your colours, logo, tone of voice and rules so content feels like you.</span></div>
        <div><b>Content pack</b><span>A ready-made bundle of captions, hooks, ads, scripts and calendar ideas.</span></div>
      </div>
    </div>
  );
};

const DashboardScreen = () => (
  <div style={{ height: "100%", display: "flex", background: "#1A1813" }}>
    <SidebarNav active="dashboard" />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <TopBar />
      <div style={{ flex: 1, overflowY: "auto", padding: "24px 28px 40px" }}>
        {/* header */}
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16, marginBottom: 22, flexWrap: "wrap" }}>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 8 }}><span style={{ width: 18, height: 1, background: "#EFFF00" }} />FRI · NOV 6 · 09:14 BST</div>
            <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 56, lineHeight: 0.94, textTransform: "uppercase", margin: "8px 0 0", color: "#FFF" }}>CONTENT <span style={{ background: "#EFFF00", color: "#1A1813", padding: "0 8px", display: "inline-block", transform: "skewX(-6deg)" }}><span style={{ display: "inline-block", transform: "skewX(6deg)" }}>HOME</span></span></h1>
            <div style={{ color: "#8A8A8A", marginTop: 8, fontSize: 13 }}>Your simple place to create posts, captions, adverts and content plans.</div>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn btn-secondary" onClick={() => window.BoltKitGo?.("exports")}><Icon name="download" size={12} stroke={2} /> Download content</button>
            <button className="btn btn-primary" onClick={() => window.BoltKitGo?.("wizard")}><BoltMini size={13} color="#1A1813" /> Start here</button>
          </div>
        </div>

        <BeginnerHelpPanel />

        {/* stat strip */}
        <div className="mini-tiles" style={{ marginBottom: 22 }}>
          <div className="mini-tile">
            <div className="l">Projects</div>
            <div className="v">6</div>
            <div className="t"><span className="up">+1</span> Renoo added</div>
          </div>
          <div className="mini-tile">
            <div className="l">Packs ready</div>
            <div className="v">11</div>
            <div className="t">3 awaiting brand-lock</div>
          </div>
          <div className="mini-tile">
            <div className="l">Scheduled</div>
            <div className="v">28<span className="u">/30</span></div>
            <div className="t"><span className="up">↑12</span> this week</div>
          </div>
          <div className="mini-tile">
            <div className="l">Readiness avg</div>
            <div className="v">82<span className="u">%</span></div>
            <div className="t">Top: Renoo · 94%</div>
          </div>
        </div>

        {/* main grid */}
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 16 }}>
          {/* projects */}
          <div className="card has-corners" style={{ overflow: "hidden" }}>
            <div className="card-head">
              <div>
                <div className="card-title">Projects</div>
                <div className="card-sub">Active workspaces · click to open</div>
              </div>
              <div style={{ display: "flex", gap: 6 }}>
                <button className="icon-btn"><Icon name="filter" size={14} stroke={2} /></button>
                <button className="btn btn-secondary btn-sm"><Icon name="plus" size={11} stroke={2.4} /> New project</button>
              </div>
            </div>
            <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 8 }}>
              {[
                { nm: "Renoo · Notes",         st: "Active",       ico: "RN", bg: "#FF6B35", score: 94, missing: 0,  packs: 11, sch: 28, lastSync: "Synced 12s ago" },
                { nm: "Lofti · Audio rooms",   st: "Brand lock",   ico: "LF", bg: "#4DA8FF", score: 78, missing: 2,  packs: 6,  sch: 0,  lastSync: "Synced 4m ago"  },
                { nm: "Spritely · Lists",      st: "Drafting",     ico: "SP", bg: "#A86BFF", score: 64, missing: 3,  packs: 4,  sch: 0,  lastSync: "Local fallback" },
                { nm: "Atelier · Design",      st: "Active",       ico: "AT", bg: "#EFFF00", score: 88, missing: 0,  packs: 9,  sch: 14, lastSync: "Synced now"    },
                { nm: "Halftone · Cameras",    st: "Idle",         ico: "HT", bg: "#4ADE80", score: 52, missing: 5,  packs: 3,  sch: 0,  lastSync: "Synced 1d ago" },
              ].map(p => (
                <div key={p.nm} style={{ background: "#201E18", border: "1px solid #3A372F", padding: 14, display: "grid", gridTemplateColumns: "auto 1fr auto auto", gap: 14, alignItems: "center" }}>
                  <AppIco size={40} bg={p.bg} color={p.bg === "#EFFF00" ? "#1A1813" : "#FFF"} letter={p.ico} />
                  <div style={{ minWidth: 0 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                      <div style={{ fontWeight: 800, fontSize: 14, color: "#FFF" }}>{p.nm}</div>
                      <span className={"pill " + (p.st === "Active" ? "pill-yellow" : p.st === "Brand lock" ? "pill-amber" : p.st === "Drafting" ? "pill-blue" : "pill-dark")} style={{ fontSize: 9 }}>{p.st}</span>
                    </div>
                    <div style={{ display: "flex", alignItems: "center", gap: 12, color: "#8A8A8A", fontSize: 11.5, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.06em" }}>
                      <span>{p.packs} PACKS</span>
                      <span>·</span>
                      <span>{p.sch} SCHED</span>
                      <span>·</span>
                      <span style={{ color: p.missing ? "#FFB23F" : "#4ADE80" }}>{p.missing ? `${p.missing} missing` : "Complete"}</span>
                      <span>·</span>
                      <span>{p.lastSync}</span>
                    </div>
                  </div>
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", minWidth: 130 }}>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.18em", color: "#8A8A8A", fontWeight: 800 }}>READINESS</div>
                    <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 4 }}>
                      <div style={{ width: 80 }}><Meter v={p.score} tone={p.score >= 85 ? "yellow" : p.score >= 65 ? "amber" : "amber"} /></div>
                      <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 18, color: "#FFF" }}>{p.score}</div>
                    </div>
                  </div>
                  <button className="btn btn-secondary btn-sm">Open <Icon name="arrow_right" size={11} stroke={2.4} /></button>
                </div>
              ))}
            </div>
          </div>

          {/* side col */}
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {/* readiness */}
            <div className="ai-surface" style={{ padding: 18, display: "flex", gap: 16, alignItems: "center" }}>
              <RingScore score={87} size={92} label="READINESS" />
              <div style={{ minWidth: 0, position: "relative" }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.18em", color: "#EFFF00", fontWeight: 800 }}>RENOO · ACTIVE PROJECT</div>
                <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 26, color: "#FFF", textTransform: "uppercase", lineHeight: 1, marginTop: 4 }}>Almost launch-ready.</div>
                <div style={{ color: "#C8C8C5", fontSize: 11.5, marginTop: 6 }}>Add one wide screenshot + an app store icon to hit 95+.</div>
                <button className="btn btn-primary btn-sm" style={{ marginTop: 10 }}>Improve score</button>
              </div>
            </div>

            {/* missing */}
            <div className="card">
              <div className="card-head">
                <div className="card-title">Missing assets</div>
                <span className="pill pill-amber" style={{ fontSize: 9 }}>3 ACROSS PROJECTS</span>
              </div>
              <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 6 }}>
                {[
                  { p: "Renoo · Notes",     m: "Wide hero screenshot" },
                  { p: "Lofti · Audio",     m: "App icon · 1024px" },
                  { p: "Spritely · Lists",  m: "Brand voice / rules" },
                ].map((m, i) => (
                  <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 8, padding: "8px 10px", background: "#201E18", border: "1px solid #3A372F" }}>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 12, fontWeight: 700, color: "#FFF" }}>{m.m}</div>
                      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, color: "#8A8A8A", letterSpacing: "0.12em", textTransform: "uppercase", marginTop: 2 }}>{m.p}</div>
                    </div>
                    <button className="btn btn-ghost btn-sm">Add</button>
                  </div>
                ))}
              </div>
            </div>

            {/* recent generated */}
            <div className="card">
              <div className="card-head">
                <div className="card-title">Recent packs</div>
                <a style={{ fontSize: 10, color: "#EFFF00", fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.14em", fontWeight: 800, textTransform: "uppercase" }}>View all</a>
              </div>
              <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 6 }}>
                {[
                  { p: "Renoo",      n: "Instagram Pack · 30",   t: "9:02", ico: "insta",     score: 94 },
                  { p: "Renoo",      n: "Video Scripts · 12",    t: "9:01", ico: "video",     score: 88 },
                  { p: "Atelier",    n: "Landing Page Copy",     t: "8:54", ico: "layout",    score: 92 },
                  { p: "Lofti",      n: "Paid Ads · A/B 28",     t: "8:41", ico: "megaphone", score: 79 },
                ].map((r, i) => (
                  <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto auto", gap: 10, alignItems: "center", padding: "8px 10px", background: "#201E18", border: "1px solid #3A372F" }}>
                    <div style={{ width: 28, height: 28, background: "rgba(239,255,0,0.08)", border: "1px solid rgba(239,255,0,0.3)", display: "grid", placeItems: "center", color: "#EFFF00" }}>
                      <Icon name={r.ico} size={13} stroke={2} />
                    </div>
                    <div>
                      <div style={{ fontSize: 12, fontWeight: 700, color: "#FFF" }}>{r.n}</div>
                      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#8A8A8A", letterSpacing: "0.12em", textTransform: "uppercase", marginTop: 2 }}>{r.p} · {r.t}</div>
                    </div>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#4ADE80", fontWeight: 800 }}>QS {r.score}</div>
                    <button className="icon-btn"><Icon name="external" size={12} stroke={2} /></button>
                  </div>
                ))}
              </div>
            </div>

            {/* upgrade */}
            <div style={{ background: "#EFFF00", color: "#1A1813", padding: 18, position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(135deg, transparent 0 16px, rgba(0,0,0,0.04) 16px 32px)", pointerEvents: "none" }} />
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.22em", fontWeight: 800, position: "relative" }}>UPGRADE</div>
              <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 28, textTransform: "uppercase", lineHeight: 1, marginTop: 6, position: "relative" }}>Unlock video + Codex packs</div>
              <div style={{ fontSize: 12, marginTop: 6, position: "relative" }}>£29 / mo · cancel any time · payments coming soon</div>
              <button className="btn btn-dark btn-sm" style={{ marginTop: 12, position: "relative" }}>Upgrade to Pro</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

/* PROJECT DETAIL — single-project view */
const ProjectDetailScreen = () => (
  <div style={{ height: "100%", display: "flex", background: "#1A1813" }}>
    <SidebarNav active="projects" />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <TopBar project="Renoo · Notes" />
      <div style={{ flex: 1, overflowY: "auto", padding: "20px 28px 40px" }}>
        {/* breadcrumbs + header */}
        <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.18em", color: "#8A8A8A", textTransform: "uppercase", fontWeight: 800, marginBottom: 14 }}>
          <span>Projects</span>
          <Icon name="chevron_right" size={10} stroke={2} />
          <span style={{ color: "#EFFF00" }}>Renoo · Notes</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 18, alignItems: "center", marginBottom: 24 }}>
          <AppIco size={72} bg="#FF6B35" color="#FFF" letter="RN" />
          <div>
            <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 56, lineHeight: 1, margin: 0, color: "#FFF", textTransform: "uppercase", letterSpacing: "0.01em" }}>RENOO</h1>
            <div style={{ color: "#8A8A8A", fontSize: 13, marginTop: 6 }}>Daily notes app for builders shipping under chaos · <a style={{ color: "#EFFF00" }}>renoo.app</a></div>
            <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
              <Pill tone="yellow">v3.2 BRAND-LOCKED</Pill>
              <Pill tone="green">SCHEDULED</Pill>
              <SyncChip state="sync" />
            </div>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn btn-secondary"><Icon name="edit" size={12} stroke={2} /> Edit</button>
            <button className="btn btn-secondary"><Icon name="download" size={12} stroke={2} /> Export</button>
            <button className="btn btn-primary"><BoltMini size={12} color="#1A1813" /> Generate</button>
          </div>
        </div>

        {/* tabs */}
        <div className="tabs" style={{ marginBottom: 16, background: "#201E18", border: "1px solid #3A372F" }}>
          <div className="tab active">Overview</div>
          <div className="tab">Assets <span className="count">42</span></div>
          <div className="tab">Brand</div>
          <div className="tab">Packs <span className="count">11</span></div>
          <div className="tab">Schedule <span className="count">28</span></div>
          <div className="tab">AI Analysis</div>
          <div className="tab">Settings</div>
        </div>

        {/* layout */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 16 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            {/* readiness + summary */}
            <div className="card has-corners" style={{ padding: 18, gridColumn: "1 / -1" }}>
              <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
                <RingScore score={94} size={110} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800 }}>AI SUMMARY</div>
                  <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 26, color: "#FFF", textTransform: "uppercase", lineHeight: 1.05, marginTop: 4 }}>A focused notes app for builders. Premium tone. Daily streak hook. Codex-friendly.</div>
                  <div style={{ display: "flex", gap: 6, marginTop: 12, flexWrap: "wrap" }}>
                    {["Solo builders","No-code","Indie hackers","Productivity","Premium","B2C"].map(c => <span key={c} className="chip">{c}</span>)}
                  </div>
                </div>
              </div>
            </div>

            {/* pain/benefit panels */}
            <div className="card" style={{ padding: 18 }}>
              <div className="card-title" style={{ marginBottom: 12 }}>Pain points</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                {["Half-finished ideas across 14 apps","No daily ritual for capture","Notion is too heavy"].map(p => (
                  <li key={p} style={{ display: "flex", gap: 8, alignItems: "flex-start", fontSize: 12.5 }}>
                    <span style={{ width: 6, height: 6, background: "#FF4D5E", marginTop: 7, flex: "none" }} />
                    <span style={{ color: "#C8C8C5" }}>{p}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="card" style={{ padding: 18 }}>
              <div className="card-title" style={{ marginBottom: 12 }}>Benefits</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                {["One folder. Every idea.","Daily streak hooks you back","Codex-friendly export"].map(p => (
                  <li key={p} style={{ display: "flex", gap: 8, alignItems: "flex-start", fontSize: 12.5 }}>
                    <span style={{ width: 6, height: 6, background: "#EFFF00", marginTop: 7, flex: "none" }} />
                    <span style={{ color: "#C8C8C5" }}>{p}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* packs grid */}
            <div className="card" style={{ padding: 18, gridColumn: "1 / -1" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
                <div className="card-title">Generated packs</div>
                <button className="btn btn-secondary btn-sm">Generate more <BoltMini size={11} color="#EFFF00" /></button>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}>
                {[
                  { i: "package",   t: "Full Launch Pack", c: 132, s: 94 },
                  { i: "insta",     t: "Instagram · 30",   c: 30,  s: 91 },
                  { i: "video",     t: "Reel Scripts · 12",c: 12,  s: 88 },
                  { i: "megaphone", t: "Paid Ads · A/B",   c: 28,  s: 79 },
                  { i: "shop",      t: "App Store",        c: 15,  s: 92 },
                  { i: "layout",    t: "Landing Copy",     c: 1,   s: 95 },
                ].map((p, i) => (
                  <div key={i} className="pack-card">
                    <div className="ico-wrap"><Icon name={p.i} size={16} stroke={2} /></div>
                    <div className="nm">{p.t}</div>
                    <div className="ft"><span>{p.c} assets</span><span className="c">QS {p.s}</span></div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* side */}
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div className="card">
              <div className="card-head"><div className="card-title">Brand</div><span className="pill pill-yellow" style={{ fontSize: 9 }}>v3.2 LOCKED</span></div>
              <div style={{ padding: 14 }}>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6, marginBottom: 10 }}>
                  {["#FF6B35","#1E1E1E","#F4F4F0"].map(c => (
                    <div key={c} style={{ aspectRatio: "1/1", background: c, position: "relative", border: "1px solid #3A372F" }}>
                      <span style={{ position: "absolute", bottom: 4, left: 4, fontFamily: "'JetBrains Mono', monospace", fontSize: 9, padding: "2px 5px", background: "rgba(0,0,0,0.85)", color: "#FFF", fontWeight: 800 }}>{c}</span>
                    </div>
                  ))}
                </div>
                <div style={{ fontSize: 11.5, color: "#8A8A8A", display: "grid", gridTemplateColumns: "70px 1fr", rowGap: 4 }}>
                  <span style={{ color: "#C8C8C5", fontWeight: 700 }}>Heading</span><span>Anton</span>
                  <span style={{ color: "#C8C8C5", fontWeight: 700 }}>Body</span><span>Inter</span>
                  <span style={{ color: "#C8C8C5", fontWeight: 700 }}>Voice</span><span>Builder, premium, punchy</span>
                </div>
              </div>
            </div>

            <div className="card">
              <div className="card-head"><div className="card-title">Latest export</div></div>
              <div style={{ padding: 14 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <div style={{ width: 38, height: 38, background: "#201E18", border: "1px solid #3A372F", display: "grid", placeItems: "center", color: "#EFFF00" }}>
                    <Icon name="zip" size={16} stroke={2} />
                  </div>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{ fontSize: 12, color: "#FFF", fontWeight: 700 }}>Renoo · BoltKit Export.zip</div>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, color: "#8A8A8A", letterSpacing: "0.12em", textTransform: "uppercase", marginTop: 2 }}>12 FILES · 4.2 MB · 9:02</div>
                  </div>
                  <button className="icon-btn"><Icon name="download" size={13} stroke={2} /></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

Object.assign(window, { DashboardScreen, ProjectDetailScreen });