// chrome.jsx — Brand, Sidebar, Topbar, common primitives

const NAV = [
  { key: 'dashboard',     label: 'Dashboard',     icon: 'dashboard' },
  { key: 'profile',       label: 'Profile',       icon: 'profile' },
  { key: 'signals',       label: 'Signals',       icon: 'signals' },
  { key: 'connections',   label: 'Connections',   icon: 'connections' },
  { key: 'pings',         label: 'Ping Requests', icon: 'ping', badge: 3 },
  { key: 'notifications', label: 'Notifications', icon: 'bell',  badge: 24 },
  { key: 'events',        label: 'Events',        icon: 'events' },
  { key: 'analytics',     label: 'Analytics',     icon: 'analytics' },
  { key: 'wallet',        label: 'Wallet',        icon: 'wallet' },
  { key: 'settings',      label: 'Settings',      icon: 'settings' },
];

const Brand = () => (
  <div className="brand" aria-label="Beeprd">
    <div className="brand-mark" aria-hidden="true">
      <span className="brand-mark-letter">B</span>
    </div>
    <div className="brand-name">BEEPRD</div>
  </div>
);

const Sidebar = ({ active, onGo, onUpgrade, onClose }) => (
  <aside className="sidebar" aria-label="Sidebar">
    <div className="row between" style={{alignItems:'center'}}>
      <Brand />
      <button className="icon-btn nav-toggle" aria-label="Close navigation" onClick={onClose} style={{width:34, height:34}}>
        <I name="plus" size={18} style={{transform:'rotate(45deg)'}}/>
      </button>
    </div>
    <nav className="nav" aria-label="Primary">
      {NAV.map(n => (
        <div
          key={n.key}
          className={"nav-item" + (active === n.key ? " active" : "")}
          onClick={() => { onGo(n.key); onClose?.(); }}
          role="button"
          tabIndex={0}
          onKeyDown={(e) => {
            if (e.key === 'Enter' || e.key === ' ') {
              e.preventDefault();
              onGo(n.key);
              onClose?.();
            }
          }}
        >
          <I name={n.icon} size={17}/>
          <span>{n.label}</span>
          {n.badge ? <span className="nav-badge num">{n.badge}</span> : null}
        </div>
      ))}
    </nav>

    <div className="side-footer">
      <div className="upgrade-card">
        <h4>Upgrade to Pro</h4>
        <p>Advanced analytics, custom themes, AI signal summaries.</p>
        <button className="upgrade-btn" onClick={onUpgrade}>Upgrade Now</button>
      </div>
      <div className="me-chip">
        <div className="avatar sm">CH</div>
        <div style={{minWidth:0, flex:1}}>
          <div className="me-chip-name">Clarence Holmes</div>
          <div className="me-chip-plan">Pro Plan</div>
        </div>
        <I name="chevronDown" size={14}/>
      </div>
    </div>
  </aside>
);

const Topbar = ({ onBroadcast, onPing, onProfile, unread, onToggleNav }) => {
  const [q, setQ] = React.useState('');
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    const onKey = (e) => {
      const isK = (e.key || '').toLowerCase() === 'k';
      const hasMod = e.metaKey || e.ctrlKey;
      if (hasMod && isK) {
        e.preventDefault();
        inputRef.current?.focus?.();
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const toast = (m) => window.__beeprd?.toast?.(m);
  return (
    <header className="topbar">
      <button className="icon-btn nav-toggle" onClick={onToggleNav} aria-label="Open navigation">
        <I name="menu" size={18}/>
      </button>
      <Brand />
      <div className="search">
        <I name="search" size={15}/>
        <input ref={inputRef} value={q} onChange={(e)=>setQ(e.target.value)} placeholder="Search Beeprd — operators, signals, events…" />
        <kbd>⌘K</kbd>
      </div>
      <div className="top-spacer"/>
      <div className="topbar-actions" aria-label="Topbar actions">
        <button className="btn btn-primary broadcast-btn" onClick={onBroadcast} aria-label="Broadcast">
          <I name="broadcast" size={15}/>
          <span className="btn-label">Broadcast</span>
        </button>
        <button className="icon-btn" onClick={onPing} aria-label="Notifications">
          <I name="bell" size={17}/>
          {unread ? <span className="icon-dot" /> : null}
        </button>
        <button className="icon-btn" aria-label="Profile" onClick={onProfile} style={{padding:0, overflow:'hidden'}}>
          <div className="avatar" style={{width:'100%', height:'100%', borderRadius:9, boxShadow:'none'}}>CH</div>
        </button>
      </div>
    </header>
  );
};

// Pager card with "HELLO" or any custom screen text
const PagerCard = ({ msg = 'HELLO', id = 'CLARENCE', subtitle = 'Beeprd ID', actions = true, compact = false }) => (
  <div className="pager-card" style={compact ? { padding: 14 } : null}>
    <div className="pager-clip" />
    <div className="row between" style={{ marginTop: 6 }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: '.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,.45)' }}>{subtitle}</div>
      <div className="row gap-sm">
        <span className="dot" style={{ background: 'var(--lcd-ink)', boxShadow: '0 0 6px var(--lcd-ink)' }}></span>
        <div className="mono" style={{ fontSize: 9.5, letterSpacing: '.1em', color: 'rgba(255,255,255,.45)' }}>LIVE</div>
      </div>
    </div>
    <div className="pager-screen">
      <div className="pager-screen-big" aria-label={String(msg || '')}>
        <span aria-hidden="true">▌ </span>
        <span className="pager-reveal">
          {String(msg || '').split('').map((ch, i) => (
            <span key={i} style={{'--i': i}}>{ch}</span>
          ))}
        </span>
      </div>
      <div className="row between" style={{ marginTop: 6, fontSize: 9.5, color: 'rgba(199,209,74,.7)' }}>
        <span>NEW · {new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
        <span>BEEPRD</span>
      </div>
    </div>
    <div className="pager-id">ID: {id}</div>
    {actions && (
      <div className="row gap-sm" style={{ marginTop: 12 }}>
        <button
          className="btn btn-ghost"
          style={{ background: 'rgba(255,255,255,.06)', color: '#fff', borderColor: 'rgba(255,255,255,.1)' }}
          onClick={() => window.__beeprd?.openModal?.('share')}
        >
          <I name="qr" size={14}/> Share
        </button>
        <button
          className="btn btn-ghost"
          style={{ background: 'rgba(255,255,255,.06)', color: '#fff', borderColor: 'rgba(255,255,255,.1)' }}
          onClick={() => {
            try { navigator.clipboard?.writeText(String(id || '')); } catch (_) {}
            window.__beeprd?.toast?.('Copied Beeprd ID');
          }}
        >
          <I name="copy" size={14}/> Copy
        </button>
      </div>
    )}
  </div>
);

// KPI tile
const KPI = ({ label, value, delta, sub, deltaDir = 'up' }) => (
  <div className="kpi">
    <div className="kpi-label">{label}</div>
    <div className="kpi-row">
      <div className="kpi-num num">{value}</div>
      {delta && (
        <span className={"delta " + deltaDir}>
          {deltaDir === 'up' ? '↑' : '↓'} {delta}
        </span>
      )}
    </div>
    <div className="kpi-sub">{sub}</div>
  </div>
);

// Platform glyph circle
const PLATFORMS = {
  youtube:   { name: 'YouTube',     icon: 'pYoutube',  bg: '#FFE5E2', fg: '#C8504A' },
  instagram: { name: 'Instagram',   icon: 'pInsta',    bg: '#FCE4F0', fg: '#B53D7C' },
  linkedin:  { name: 'LinkedIn',    icon: 'pLinkedin', bg: '#E2EAF5', fg: '#2A6FDB' },
  x:         { name: 'X (Twitter)', icon: 'pX',        bg: '#E9E7E2', fg: '#0C0B0A' },
  podcast:   { name: 'Podcast',     icon: 'pPodcast',  bg: '#E8E2F8', fg: '#5A48D9' },
  blog:      { name: 'Blog / RSS',  icon: 'pBlog',     bg: '#E2F3EA', fg: '#3F9D6B' },
  tiktok:    { name: 'TikTok',      icon: 'pTiktok',   bg: '#E4F0F4', fg: '#266E80' },
};

const PlatformIcon = ({ kind, size = 36 }) => {
  const p = PLATFORMS[kind];
  if (!p) return null;
  return (
    <div style={{
      width: size, height: size, borderRadius: 9,
      background: p.bg, color: p.fg,
      display: 'grid', placeItems: 'center', flex: '0 0 auto',
    }}>
      <I name={p.icon} size={size * 0.5} />
    </div>
  );
};

// Sparkline
const Sparkline = ({ data, w = 120, h = 32, stroke = 'var(--accent)' }) => {
  const min = Math.min(...data), max = Math.max(...data);
  const span = max - min || 1;
  const step = w / (data.length - 1);
  const pts = data.map((v, i) => [i * step, h - ((v - min) / span) * (h - 4) - 2]);
  const d = pts.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
  const area = d + ` L${w},${h} L0,${h} Z`;
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} className="spark">
      <defs>
        <linearGradient id="gradAccent" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.25"/>
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d={area} className="area"/>
      <path d={d} style={{stroke, strokeWidth: 2, fill: 'none'}}/>
    </svg>
  );
};

// LineChart with axis (used in analytics + dashboard)
const LineChart = ({ data, w = 600, h = 220, labels = [], highlightIdx = null, highlightLabel = '' }) => {
  const padL = 36, padR = 12, padT = 16, padB = 28;
  const iw = w - padL - padR, ih = h - padT - padB;
  const min = Math.min(...data) * 0.9, max = Math.max(...data) * 1.05;
  const span = max - min || 1;
  const step = iw / (data.length - 1);
  const pts = data.map((v, i) => [padL + i * step, padT + ih - ((v - min) / span) * ih]);
  const d = pts.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
  const area = d + ` L${padL + iw},${padT + ih} L${padL},${padT + ih} Z`;
  const yTicks = 4;
  const TIP_W = 98;
  const TIP_H = 36;
  return (
    <svg width="100%" viewBox={`0 0 ${w} ${h}`} className="spark" preserveAspectRatio="none" style={{display:'block'}}>
      <defs>
        <linearGradient id="gradAccent" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.3"/>
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {Array.from({length: yTicks+1}).map((_, i) => {
        const y = padT + (ih * i / yTicks);
        const v = Math.round(max - (span * i / yTicks));
        return (
          <g key={i}>
            <line x1={padL} x2={w-padR} y1={y} y2={y} className="grid-line"/>
            <text x={padL-6} y={y+3} textAnchor="end" className="axis">{v >= 1000 ? (v/1000).toFixed(1)+'K' : v}</text>
          </g>
        );
      })}
      {labels.map((lab, i) => {
        if (i % Math.ceil(labels.length / 6) !== 0 && i !== labels.length-1) return null;
        return <text key={i} x={padL + i*step} y={h-8} textAnchor="middle" className="axis">{lab}</text>;
      })}
      <path d={area} className="area"/>
      <path d={d} style={{stroke:'var(--accent)', strokeWidth:2, fill:'none'}}/>
      {highlightIdx != null && pts[highlightIdx] && (
        <g>
          <line x1={pts[highlightIdx][0]} x2={pts[highlightIdx][0]} y1={padT} y2={padT+ih} stroke="var(--accent)" strokeOpacity="0.25" strokeDasharray="3 3"/>
          <circle cx={pts[highlightIdx][0]} cy={pts[highlightIdx][1]} r="4" fill="var(--accent)" stroke="var(--surface)" strokeWidth="2"/>
          {(() => {
            const rawX = pts[highlightIdx][0] + 8;
            const clampedX = Math.max(padL, Math.min(rawX, (w - padR - TIP_W - 2)));
            const clampedY = Math.max(4, Math.min(pts[highlightIdx][1] - 26, h - TIP_H - 4));
            return (
              <g transform={`translate(${clampedX}, ${clampedY})`}>
                <rect x="0" y="0" width={TIP_W} height={TIP_H} rx="7" fill="var(--ink)"/>
            <text x="8" y="14" fill="var(--bg)" fontSize="10" fontFamily="JetBrains Mono">{labels[highlightIdx]}</text>
            <text x="8" y="28" fill="var(--bg)" fontSize="12" fontWeight="600" fontFamily="Inter Tight">{data[highlightIdx].toLocaleString()} {highlightLabel}</text>
              </g>
            );
          })()}
        </g>
      )}
    </svg>
  );
};

const Donut = ({ data, size = 180, thickness = 26, centerLabel = 'TOTAL', centerValue = null }) => {
  const cx = size/2, cy = size/2, r = size/2 - thickness/2;
  const C = 2 * Math.PI * r;
  const total = data.reduce((s, d) => s + d.value, 0);
  let acc = 0;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={cx} cy={cy} r={r} stroke="var(--line-2)" strokeWidth={thickness} fill="none"/>
      {data.map((d, i) => {
        const dash = (d.value / total) * C;
        const off = -((acc / total) * C);
        acc += d.value;
        return (
          <circle key={i} cx={cx} cy={cy} r={r}
                  stroke={d.color} strokeWidth={thickness}
                  strokeDasharray={`${dash} ${C}`} strokeDashoffset={off}
                  fill="none" transform={`rotate(-90 ${cx} ${cy})`}
                  strokeLinecap="butt" />
        );
      })}
      <text x={cx} y={cy-2} textAnchor="middle" fontSize="22" fontWeight="600" fill="var(--ink)" fontFamily="Inter Tight">{(centerValue ?? total).toLocaleString()}</text>
      <text x={cx} y={cy+16} textAnchor="middle" fontSize="10.5" fill="var(--mute)" fontFamily="Inter Tight" letterSpacing="0.06em">{centerLabel}</text>
    </svg>
  );
};

const Bars = ({ data, w = 600, h = 180 }) => {
  const padL = 28, padR = 8, padT = 12, padB = 24;
  const iw = w - padL - padR, ih = h - padT - padB;
  const max = Math.max(...data.map(d => d.value)) * 1.1;
  const bw = iw / data.length * 0.55;
  const gap = iw / data.length;
  return (
    <svg width="100%" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{display:'block'}}>
      {[0,1,2,3].map((i) => {
        const y = padT + ih * i/3;
        return <line key={i} x1={padL} x2={w-padR} y1={y} y2={y} className="grid-line"/>;
      })}
      {data.map((d, i) => {
        const hgt = (d.value / max) * ih;
        const x = padL + i * gap + (gap - bw)/2;
        return (
          <g key={i}>
            <rect x={x} y={padT + ih - hgt} width={bw} height={hgt} rx="3" fill="var(--accent)" opacity={0.85}/>
            <text x={x + bw/2} y={h-6} textAnchor="middle" className="axis">{d.label}</text>
          </g>
        );
      })}
    </svg>
  );
};

const Stat = ({ label, value, delta, deltaDir }) => (
  <div>
    <div className="eyebrow" style={{marginBottom:6}}>{label}</div>
    <div className="row gap-sm" style={{alignItems:'baseline'}}>
      <div className="num" style={{fontSize:24, fontWeight:600, letterSpacing:'-0.02em'}}>{value}</div>
      {delta && <span className={"delta " + deltaDir}>{deltaDir==='up'?'↑':'↓'} {delta}</span>}
    </div>
  </div>
);

Object.assign(window, {
  NAV, Brand, Sidebar, Topbar, PagerCard, KPI,
  PLATFORMS, PlatformIcon, Sparkline, LineChart, Donut, Bars, Stat,
});