/* ========================================================================
   primitives.jsx — small reusable bits shared across screens
   ====================================================================== */

const AppIco = ({ size = 40, bg = "#EFFF00", color = "#1A1813", letter = "R" }) => (
  <div className="app-ico" style={{ width: size, height: size, background: bg, color, fontSize: size * 0.42 }}>
    {letter}
  </div>
);

const Pill = ({ tone = "dark", children, className = "" }) => (
  <span className={"pill pill-" + tone + " " + className}>
    <span className="dot" />
    {children}
  </span>
);

const Meter = ({ v = 50, tone = "yellow" }) => (
  <div className="meter">
    <span style={{ width: v + "%", background: tone === "yellow" ? "#EFFF00" : tone === "green" ? "#4ADE80" : tone === "amber" ? "#FFB23F" : "#4DA8FF" }} />
  </div>
);

const SyncChip = ({ state = "sync" }) => {
  const map = {
    sync:  { l: "Synced · Supabase" },
    save:  { l: "Saving…" },
    local: { l: "Local fallback" },
    fail:  { l: "Save failed" },
  };
  return (
    <div className={"sync-chip " + state}>
      <span className="d" />
      <span>{map[state].l}</span>
    </div>
  );
};

const BoltMini = ({ size = 14, color = "currentColor" }) => (
  <svg viewBox="0 0 32 32" width={size} height={size} aria-hidden="true">
    <path d="M20.2 2 L7 17.4 L13.4 17.4 L11.6 30 L25.6 13.2 L18.9 13.2 L20.2 2 Z" fill={color} />
  </svg>
);

const RingScore = ({ score = 87, size = 90, label = "READINESS" }) => {
  const r = (size - 12) / 2;
  const c = 2 * Math.PI * r;
  const off = c - (score / 100) * c;
  return (
    <div className="ring-wrap" style={{ width: size, height: size }}>
      <svg width={size} height={size}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="#3A372F" strokeWidth="4" />
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="#EFFF00"
          strokeWidth="4" strokeLinecap="square" strokeDasharray={c} strokeDashoffset={off}
          transform={`rotate(-90 ${size/2} ${size/2})`}
          style={{ filter: "drop-shadow(0 0 6px rgba(239,255,0,0.5))" }}
        />
      </svg>
      <div className="ring-num">
        <div className="n">{score}</div>
        <div className="l">{label}</div>
      </div>
    </div>
  );
};

/* Mini phone mockup used inside dashboard screens */
const MiniPhone = ({ children, w = 130 }) => (
  <div style={{
    width: w, aspectRatio: "9/19",
    background: "#201E18", border: "1px solid #3A372F",
    borderRadius: 14, overflow: "hidden",
    position: "relative",
  }}>{children}</div>
);

/* Diagonal yellow ribbon */
const Ribbon = ({ children, top = 12, right = -8, rotate = -8 }) => (
  <div style={{
    position: "absolute", top, right,
    transform: `rotate(${rotate}deg)`,
    background: "#EFFF00", color: "#1A1813",
    padding: "4px 14px",
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 10, fontWeight: 800,
    letterSpacing: "0.18em",
    boxShadow: "0 4px 12px rgba(239,255,0,0.3)",
    zIndex: 5,
  }}>{children}</div>
);

/* Sidebar nav (reusable inside dashboard frames) */
const SidebarNav = ({ active = "dashboard", compact = false }) => {
  const go = (id) => {
    const map = {
      projects: "overview",
      packs: "outputs",
      instagram: "instagram-scheduler",
      "connect-socials": "connect-socials",
      ads: "generate",
      billing: "billing",
    };
    const next = map[id] || id;
    if (window.BoltKitGo) window.BoltKitGo(next);
    else window.location.hash = next;
  };
  const items = [
    { id: "dashboard", l: "Home", ico: "grid" },
    { id: "projects",  l: "Workspaces",     ico: "folder", n: "6" },
    { id: "assets",    l: "Photos & Files", ico: "image",  n: "132" },
    { id: "extractor", l: "Post Extractor", ico: "zip" },
    { id: "brand",     l: "Brand Style",    ico: "palette" },
    { id: "launch-os", l: "Content Plan",   ico: "rocket" },
    { id: "generate",  l: "AI Create",      ico: "sparkle" },
    { id: "packs",     l: "Content Packs",  ico: "package", n: "11" },
  ];
  const sched = [
    { id: "connect-socials", l: "Connect Socials", ico: "link" },
    { id: "instagram", l: "Instagram",      ico: "insta",  n: "30" },
    { id: "calendar",  l: "Calendar",       ico: "calendar" },
    { id: "video",     l: "Video Studio",   ico: "video" },
    { id: "ads",       l: "Ads Studio",     ico: "megaphone" },
  ];
  const sys = [
    { id: "exports",   l: "Export Centre",  ico: "download" },
    { id: "billing",   l: "Plans · Credits",ico: "receipt" },
    { id: "settings",  l: "Settings",       ico: "settings" },
  ];
  return (
    <div style={{
      width: compact ? 64 : 220, background: "#1A1813",
      borderRight: "1px solid #34312A",
      display: "flex", flexDirection: "column",
      height: "100%", flex: "none",
    }}>
      {/* brand */}
      <button onClick={() => go("dashboard")} style={{ width: "100%", textAlign: "left", padding: "16px 14px 12px", borderBottom: "1px solid #34312A", position: "relative", display: "flex", alignItems: "center", gap: 10, background: "transparent", color: "inherit", cursor: "pointer" }} title="Go to dashboard">
        <div style={{ width: 30, height: 30, borderRadius: 6, background: "#EFFF00", display: "grid", placeItems: "center", flex: "none" }}>
          <BoltMini size={18} color="#1A1813" />
        </div>
        {!compact && (
          <div style={{ lineHeight: 1 }}>
            <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 18, letterSpacing: "0.02em", color: "#FFF" }}>BOLTKIT</div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 8.5, letterSpacing: "0.18em", color: "#5C5C5C", fontWeight: 700, marginTop: 3 }}>CONTENT OS</div>
          </div>
        )}
        <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 2, background: "repeating-linear-gradient(135deg, #EFFF00 0 8px, #1A1813 8px 16px)" }} />
      </button>

      <div style={{ padding: 10, overflowY: "auto", flex: 1 }}>
        {!compact && <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 8.5, letterSpacing: "0.2em", color: "#5C5C5C", padding: "10px 8px 6px", fontWeight: 800 }}>WORKSPACE</div>}
        {items.map(it => (
          <button key={it.id} onClick={() => go(it.id)} style={{
            width: "100%",
            display: "flex", alignItems: "center", gap: 9,
            padding: compact ? "9px 0" : "8px 10px",
            justifyContent: compact ? "center" : "flex-start",
            borderRadius: 4, fontSize: 12, fontWeight: 700,
            color: it.id === active ? "#1A1813" : "#C8C8C5",
            background: it.id === active ? "#EFFF00" : "transparent",
            marginBottom: 2,
            cursor: "pointer",
          }}>
            <Icon name={it.ico} size={14} stroke={2} />
            {!compact && <span>{it.l}</span>}
            {!compact && it.n && <span style={{ marginLeft: "auto", fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, padding: "1px 5px", background: it.id === active ? "#1A1813" : "#1A1A1A", color: it.id === active ? "#EFFF00" : "#8A8A8A", borderRadius: 3, fontWeight: 700 }}>{it.n}</span>}
          </button>
        ))}
        {!compact && <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 8.5, letterSpacing: "0.2em", color: "#5C5C5C", padding: "14px 8px 6px", fontWeight: 800 }}>SCHEDULE</div>}
        {sched.map(it => {
          const isActive = it.id === active || (it.id === "connect-socials" && active === "instagram-scheduler");
          return (
          <button key={it.id} onClick={() => go(it.id)} style={{ width: "100%", display: "flex", alignItems: "center", gap: 9, padding: compact ? "9px 0" : "8px 10px", justifyContent: compact ? "center" : "flex-start", borderRadius: 4, fontSize: 12, fontWeight: 700, color: isActive ? "#1A1813" : "#C8C8C5", background: isActive ? "#EFFF00" : "transparent", marginBottom: 2, cursor: "pointer" }}>
            <Icon name={it.ico} size={14} stroke={2} />
            {!compact && <span>{it.l}</span>}
            {!compact && it.n && <span style={{ marginLeft: "auto", fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, padding: "1px 5px", background: isActive ? "#1A1813" : "#1A1A1A", color: isActive ? "#EFFF00" : "#8A8A8A", borderRadius: 3, fontWeight: 700 }}>{it.n}</span>}
          </button>
          );
        })}
        {!compact && <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 8.5, letterSpacing: "0.2em", color: "#5C5C5C", padding: "14px 8px 6px", fontWeight: 800 }}>SYSTEM</div>}
        {sys.map(it => (
          <button key={it.id} onClick={() => go(it.id)} style={{ width: "100%", display: "flex", alignItems: "center", gap: 9, padding: compact ? "9px 0" : "8px 10px", justifyContent: compact ? "center" : "flex-start", borderRadius: 4, fontSize: 12, fontWeight: 700, color: it.id === active ? "#1A1813" : "#C8C8C5", background: it.id === active ? "#EFFF00" : "transparent", marginBottom: 2, cursor: "pointer" }}>
            <Icon name={it.ico} size={14} stroke={2} />
            {!compact && <span>{it.l}</span>}
          </button>
        ))}
      </div>

      {/* workspace card */}
      {!compact && (
        <div style={{ padding: 10, borderTop: "1px solid #34312A" }}>
          <button onClick={() => go("settings")} style={{ width: "100%", background: "#26241E", border: "1px solid #34312A", borderRadius: 5, padding: 9, display: "flex", alignItems: "center", gap: 9, position: "relative", overflow: "hidden", textAlign: "left", cursor: "pointer" }}>
            <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 3, background: "#EFFF00" }} />
            <div style={{ width: 26, height: 26, background: "#EFFF00", color: "#1A1813", display: "grid", placeItems: "center", borderRadius: 4, fontFamily: "'Anton', Impact, sans-serif", fontSize: 12, flex: "none" }}>JL</div>
            <div style={{ minWidth: 0 }}>
              <div style={{ color: "#FFF", fontSize: 11, fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>Joel · Studio</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 8.5, letterSpacing: "0.12em", color: "#5C5C5C", textTransform: "uppercase", fontWeight: 700, marginTop: 1 }}>DEMO WORKSPACE</div>
            </div>
          </button>
        </div>
      )}
    </div>
  );
};

/* Top bar (reusable) */
const TopBar = ({ project = "Renoo · Notes", showSync = true }) => (
  <div style={{
    height: 52, background: "rgba(5,5,5,0.9)",
    borderBottom: "1px solid #3A372F",
    display: "flex", alignItems: "center", gap: 10,
    padding: "0 16px", flex: "none",
  }}>
    <button onClick={() => window.BoltKitGo ? window.BoltKitGo("overview") : window.location.hash = "overview"} style={{ display: "flex", alignItems: "center", gap: 8, background: "#26241E", border: "1px solid #3A372F", padding: "6px 10px", borderRadius: 4, fontSize: 12, fontWeight: 700, color: "#F4F4F0", cursor: "pointer" }}>
      <div style={{ width: 22, height: 22, borderRadius: 4, background: "#FF6B35" }} />
      <span>{project}</span>
      <Icon name="chevron_down" size={11} stroke={2} />
    </button>
    <div style={{ display: "flex", alignItems: "center", gap: 8, background: "#26241E", border: "1px solid #3A372F", padding: "6px 10px", borderRadius: 4, fontSize: 12, color: "#8A8A8A", flex: 1, maxWidth: 380 }}>
      <Icon name="search" size={13} stroke={2} />
      <span>Search posts, photos, files, captions…</span>
      <span style={{ marginLeft: "auto", fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, padding: "1px 5px", background: "#1A1A1A", border: "1px solid #3A372F", borderRadius: 2, fontWeight: 700, color: "#8A8A8A" }}>⌘K</span>
    </div>
    {showSync && <SyncChip state="sync" />}
    <span style={{ marginLeft: "auto" }} />
    <button onClick={() => window.dispatchEvent(new CustomEvent("boltkit:generate", { detail: { packType: "full-launch-pack" } }))} style={{ background: "#EFFF00", color: "#1A1813", border: 0, padding: "7px 12px", fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: 0.14 * 14 + "em", fontWeight: 800, letterSpacing: "0.14em", textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 6, cursor: "pointer" }}>
      <BoltMini size={12} color="#1A1813" />
      Quick Generate
    </button>
    <div style={{ width: 28, height: 28, background: "#EFFF00", color: "#1A1813", display: "grid", placeItems: "center", borderRadius: 999, fontFamily: "'Anton', Impact, sans-serif", fontSize: 13 }}>JL</div>
  </div>
);

Object.assign(window, { AppIco, Pill, Meter, SyncChip, BoltMini, RingScore, MiniPhone, Ribbon, SidebarNav, TopBar });