/* global React */
const { useState: _u1 } = React;

// ───────────────────────────────────────────────────────────────
// Puig wordmark + crest
// Renders the Puig wordmark as a stylized text glyph (geometric sans,
// wide tracking in Puig's reference style) alongside the warm-grey crest.
function PuigMark({ size = 16, crest = true, color = "currentColor", crestColor = "#8B8378" }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: Math.max(4, size * 0.4), verticalAlign: "baseline", lineHeight: 1 }}>
      <span style={{
        fontFamily: "'Helvetica Neue', 'Arial Black', sans-serif",
        fontWeight: 900,
        fontStretch: "condensed",
        fontSize: size,
        letterSpacing: size > 14 ? "0.04em" : "0.06em",
        color: color,
        lineHeight: 1,
        textTransform: "uppercase",
      }}>PUIG</span>
      {crest && (
        <svg height={size * 0.95} viewBox="0 0 40 40" style={{ display: "block" }} aria-label="Puig crest">
          {/* Outer circle */}
          <circle cx="20" cy="20" r="18" fill="none" stroke={crestColor} strokeWidth="1.2"/>
          {/* Stylized sunburst / flame — simplified Puig crest */}
          <g fill={crestColor}>
            <path d="M20 6 L22 16 L20 18 L18 16 Z"/>
            <path d="M34 20 L24 22 L22 20 L24 18 Z"/>
            <path d="M20 34 L18 24 L20 22 L22 24 Z"/>
            <path d="M6 20 L16 18 L18 20 L16 22 Z"/>
            <path d="M29.9 10.1 L23.5 17.8 L21 17 L21.8 14.4 Z"/>
            <path d="M29.9 29.9 L22.2 23.5 L23 21 L25.6 21.8 Z"/>
            <path d="M10.1 29.9 L16.5 22.2 L19 23 L18.2 25.6 Z"/>
            <path d="M10.1 10.1 L17.8 16.5 L17 19 L14.4 18.2 Z"/>
          </g>
          <circle cx="20" cy="20" r="2.4" fill={crestColor}/>
        </svg>
      )}
    </span>
  );
}

// ───────────────────────────────────────────────────────────────
// Sparkline
function Sparkline({ data, color }) {
  const w = 80, h = 20;
  const max = Math.max(...data), min = Math.min(...data);
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = h - ((v - min) / Math.max(1, max - min)) * h;
    return `${x},${y}`;
  }).join(" ");
  return (
    <svg viewBox={`0 0 ${w} ${h}`} className="sparkline" preserveAspectRatio="none" style={{ color: color || "var(--accent)" }}>
      <polyline points={pts} fill="none" stroke="currentColor" strokeWidth="1.2" vectorEffect="non-scaling-stroke" />
    </svg>
  );
}

// ───────────────────────────────────────────────────────────────
// Sidebar
function Sidebar({ route, setRoute, openCmd }) {
  const nav = [
    { sec: "Rooms" },
    { id: "home", label: "Home" },
    { id: "analyst", label: "Analyst", sub: "Pulse · Looking Glass · Ledger · Postscript" },
    { id: "strategist", label: "Strategist", sub: "Chorus · Briefs" },
    { id: "predictor", label: "Predictor", sub: "Spate · Materia", badge: "Spate" },
    { sec: "Work" },
    { id: "briefs", label: "Briefs" },
    { id: "library", label: "Library" },
  ];
  return (
    <aside className="side">
      <div className="mark">
        <img
          src="images/puig-logo.svg"
          alt="PUIG"
          style={{ width: 96, height: "auto", display: "block", marginBottom: 14 }}
        />
        <p style={{
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          letterSpacing: "0.14em",
          textTransform: "uppercase",
          color: "var(--ink-50)",
          margin: 0,
          lineHeight: 1.4,
        }}>
          Consumer Intelligence<br/>for Brands
        </p>
      </div>
      <div className="ws">
        <div className="k">Workspace</div>
        <div className="v">CH Good Girl</div>
        <div className="k" style={{ marginTop: 10 }}>EU5 · Fragrance · Q1 '26</div>
      </div>
      <nav className="nav">
        {nav.map((n, i) =>
          n.sec ? (
            <div key={i} className="sec">{n.sec}</div>
          ) : (
            <a key={n.id} className={route === n.id ? "on" : ""} onClick={() => setRoute(n.id)}>
              <span className="col" style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                <span>{n.label}</span>
                {n.sub && <span style={{ fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.08em", color: "var(--ink-50)", textTransform: "uppercase" }}>{n.sub}</span>}
              </span>
              {n.badge && <span className="badge">{n.badge}</span>}
            </a>
          )
        )}
      </nav>
      <div className="cmd-cta" onClick={openCmd}>
        <span>Ask Canvas…</span>
        <span className="kbd">⌘K</span>
      </div>
    </aside>
  );
}

// ───────────────────────────────────────────────────────────────
// Topbar
function Topbar({ route, tab, openCmd }) {
  const crumbs = {
    home: "Home",
    analyst: "Analyst",
    strategist: "Strategist",
    predictor: "Predictor",
    briefs: "Briefs · Good Girl Refill",
    library: "Library",
  };
  return (
    <header className="topbar">
      <div className="bread" style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <PuigMark size={13} crest={true} color="#171513" />
        <span style={{ color: "var(--ink-30)" }}>/</span>
        <b>{crumbs[route]}</b>
        {tab && <span style={{ color: "var(--accent-ink)" }}>· {tab}</span>}
      </div>
      <div className="right">
        <div className="search" onClick={openCmd}>
          <span>Ask Canvas anything…</span>
          <span className="kbd" style={{ marginLeft: "auto" }}>⌘K</span>
        </div>
        <button className="btn icon" title="Notifications">⌁</button>
        <div className="avatar">MP</div>
      </div>
    </header>
  );
}

// ───────────────────────────────────────────────────────────────
// Agent ribbon
function Agent({ eyebrow, text, actions = [] }) {
  return (
    <div className="agent">
      <div className="eb"><span className="dot" /> {eyebrow}</div>
      <div className="text" dangerouslySetInnerHTML={{ __html: text }} />
      {actions.length > 0 && (
        <div className="acts">
          {actions.map((a, i) => (
            <button key={i} className={`btn ${a.variant || ""}`} onClick={a.onClick}>{a.label}</button>
          ))}
        </div>
      )}
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
// Stat card
function StatGrid({ items }) {
  return (
    <div className="stat-grid">
      {items.map((s, i) => (
        <div className="s" key={i}>
          <div className="k">{s.k}</div>
          <div className="n">{s.n}</div>
          <div className={`d ${s.tone || ""}`}>{s.d}</div>
          {s.spark && <div className="spark"><Sparkline data={s.spark} /></div>}
        </div>
      ))}
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
// Module header — shown at top of sub-rooms
function ModuleHead({ code, name, tagline }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 4, paddingBottom: 12, borderBottom: "1px solid var(--rule)" }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", color: "var(--accent-ink)" }}>{code}</span>
        <span style={{ fontFamily: "var(--font-display)", fontSize: 28, fontStyle: "italic", letterSpacing: "-0.01em" }}>{name}</span>
        <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 16, color: "var(--ink-50)" }}>— {tagline}</span>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
// Tab bar for sub-rooms
function TabBar({ tabs, active, setActive }) {
  return (
    <div style={{ display: "flex", gap: 4, borderBottom: "1px solid var(--rule)", marginBottom: 8, flexWrap: "wrap" }}>
      {tabs.map(t => (
        <button
          key={t.id}
          onClick={() => setActive(t.id)}
          className="btn ghost"
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 11,
            letterSpacing: "0.12em",
            textTransform: "uppercase",
            padding: "12px 18px",
            borderRadius: 0,
            borderBottom: active === t.id ? "2px solid var(--accent)" : "2px solid transparent",
            color: active === t.id ? "var(--accent-ink)" : "var(--ink-70)",
            marginBottom: "-1px",
            minWidth: 160,
            textAlign: "left",
          }}
        >
          <span style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 4 }}>
            <span style={{ fontWeight: active === t.id ? 500 : 400, whiteSpace: "nowrap" }}>{t.label}</span>
            <span style={{ fontSize: 11, opacity: 0.7, fontFamily: "var(--font-display)", fontStyle: "italic", textTransform: "none", letterSpacing: 0, whiteSpace: "nowrap" }}>{t.sub}</span>
          </span>
        </button>
      ))}
    </div>
  );
}

Object.assign(window, { PuigMark, Sparkline, Sidebar, Topbar, Agent, StatGrid, ModuleHead, TabBar });