// onnext-ui.jsx — shared primitives for the Drift prototype
const DRIFT = {
  midnight:'#0B0F14', carbon:'#12171E', carbon2:'#171D26', carbon3:'#1E2530',
  slate:'#232B35', line:'#232B35', ink:'#ECEFF3', muted:'#7C8896', faint:'#495464',
  signal:'#C9F25D', drift:'#F2A03D',
  hold:'#5BE3B0', watch:'#F2C94C', break:'#F2685C',
  font:"'Space Grotesk', system-ui, sans-serif",
  mono:"'JetBrains Mono', ui-monospace, monospace",
};

function Mark({ w = 44, sig = DRIFT.signal, base = '#3A4453', sw = 6 }) {
  return (
    <svg width={w} height={w*50/64} viewBox="0 0 64 50" fill="none" style={{ display:'block' }}>
      <path d="M5 40 H59" stroke={base} strokeWidth={sw*0.6} strokeLinecap="round" strokeDasharray="4 6"/>
      <path d="M5 40 L24 40 L54 12" stroke={sig} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="54" cy="12" r={sw} fill={sig}/>
    </svg>
  );
}
function Wordmark({ size = 22, color = DRIFT.ink }) {
  return (
    <span style={{ fontFamily:DRIFT.font, fontSize:size, letterSpacing:'-0.5px', color, display:'inline-flex', alignItems:'baseline' }}>
      <span style={{ opacity:0.42, fontWeight:500, fontSize:size*0.64 }}>on</span>
      <span style={{ fontWeight:700 }}>next</span>
    </span>
  );
}

// Telemetry sparkline: baseline (dashed) + signal line that drifts into amber
function MiniChart({ h = 70, drift = true, level = 0.5 }) {
  // build a path that holds then drifts down by `level`
  const W = 320, base = h*0.42;
  const pts = [[0,base+2],[60,base-3],[120,base+1],[180,base-2]];
  const driftPts = drift ? [[180,base-2],[235,base+10*level],[285,base+26*level],[320,base+40*level]] : [[180,base-2],[320,base-4]];
  const toStr = a => a.map((p,i)=>(i?'L':'M')+p[0]+' '+p[1]).join(' ');
  return (
    <svg viewBox={`0 0 ${W} ${h}`} width="100%" height={h} preserveAspectRatio="none" style={{ display:'block' }}>
      <line x1="0" y1={base} x2={W} y2={base} stroke="#3A4453" strokeWidth="1.5" strokeDasharray="3 6"/>
      <path d={toStr(pts)} fill="none" stroke={DRIFT.signal} strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round"/>
      {drift && <path d={toStr(driftPts)} fill="none" stroke={DRIFT.drift} strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round"/>}
      {drift && <circle cx="180" cy={base-2} r="3.5" fill={DRIFT.drift}/>}
    </svg>
  );
}

// Big circular Momentum gauge
function ScoreRing({ score = 82, size = 168, color = DRIFT.signal, label = 'MOMENTUM' }) {
  const r = size/2 - 9, c = 2*Math.PI*r, off = c*(1-score/100);
  return (
    <div style={{ position:'relative', width:size, height:size }}>
      <svg width={size} height={size} style={{ transform:'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} stroke={DRIFT.carbon3} strokeWidth="9" fill="none"/>
        <circle cx={size/2} cy={size/2} r={r} stroke={color} strokeWidth="9" fill="none"
          strokeLinecap="round" strokeDasharray={c} strokeDashoffset={off}/>
      </svg>
      <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center' }}>
        <span style={{ fontFamily:DRIFT.mono, fontSize:size*0.3, fontWeight:500, letterSpacing:'-2px', color:DRIFT.ink }}>{score}</span>
        <span style={{ fontFamily:DRIFT.mono, fontSize:10, letterSpacing:'1px', color:DRIFT.muted, marginTop:2 }}>{label}</span>
      </div>
    </div>
  );
}

function BandPill({ level = 'hold' }) {
  const map = { hold:[DRIFT.hold,'HOLDING'], watch:[DRIFT.watch,'DRIFTING'], break:[DRIFT.break,'BREAKING'] };
  const [c,t] = map[level];
  return (
    <span style={{ display:'inline-flex', alignItems:'center', gap:7, fontFamily:DRIFT.mono, fontSize:11.5, letterSpacing:'0.8px', color:c, border:`1px solid ${c}55`, padding:'5px 11px', borderRadius:100 }}>
      <span style={{ width:7, height:7, borderRadius:'50%', background:c }}/>{t}
    </span>
  );
}

function Readout({ label, value, unit, color = DRIFT.ink }) {
  return (
    <div>
      <div style={{ fontFamily:DRIFT.mono, fontSize:10, letterSpacing:'1px', color:DRIFT.muted, marginBottom:5 }}>{label}</div>
      <div style={{ fontFamily:DRIFT.mono, fontSize:24, fontWeight:500, letterSpacing:'-1px', color }}>{value}<span style={{ fontSize:13, color:DRIFT.muted }}>{unit}</span></div>
    </div>
  );
}

function Chip({ children, active, onClick }) {
  return (
    <button onClick={onClick} style={{
      fontFamily:DRIFT.font, fontSize:14, fontWeight:500, cursor:'pointer', padding:'9px 15px', borderRadius:100,
      border:`1px solid ${active?DRIFT.signal:DRIFT.line}`, transition:'all .15s',
      background: active?'rgba(201,242,93,0.12)':'transparent', color: active?DRIFT.signal:DRIFT.muted }}>{children}</button>
  );
}
function PrimaryBtn({ children, full, onClick, style }) {
  return (
    <button onClick={onClick} style={{
      fontFamily:DRIFT.font, fontSize:16, fontWeight:600, cursor:'pointer', padding:'15px 24px', borderRadius:12,
      border:'none', background:DRIFT.signal, color:DRIFT.midnight, width:full?'100%':'auto',
      display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8, ...style }}
      onMouseEnter={e=>e.currentTarget.style.filter='brightness(1.07)'}
      onMouseLeave={e=>e.currentTarget.style.filter='none'}>{children}</button>
  );
}
function GhostBtn({ children, full, onClick }) {
  return (
    <button onClick={onClick} style={{
      fontFamily:DRIFT.font, fontSize:16, fontWeight:600, cursor:'pointer', padding:'15px 24px', borderRadius:12,
      background:'transparent', color:DRIFT.ink, border:`1px solid ${DRIFT.line}`, width:full?'100%':'auto',
      display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8 }}>{children}</button>
  );
}

function Eyebrow({ children, color = DRIFT.muted }) {
  return <div style={{ fontFamily:DRIFT.mono, fontSize:11, fontWeight:500, letterSpacing:'1px', textTransform:'uppercase', color }}>{children}</div>;
}

// integration glyph (simple, brand-neutral)
function SourceIcon({ name, on }) {
  const c = on ? DRIFT.signal : DRIFT.faint;
  return (
    <div style={{ width:40, height:40, borderRadius:10, border:`1px solid ${on?DRIFT.signal+'66':DRIFT.line}`, display:'grid', placeItems:'center', flex:'none', background: on?'rgba(201,242,93,0.08)':'transparent' }}>
      <span style={{ fontFamily:DRIFT.mono, fontWeight:700, fontSize:13, color:c }}>{name.slice(0,2).toUpperCase()}</span>
    </div>
  );
}

function BottomNav({ active = 'today' }) {
  const items = [['today','Today'],['ask','Ask'],['trends','Trends'],['you','You']];
  return (
    <div style={{ display:'flex', justifyContent:'space-around', padding:'12px 8px 26px', borderTop:`1px solid ${DRIFT.line}`, background:DRIFT.midnight }}>
      {items.map(([k,l])=>(
        <div key={k} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:5 }}>
          {k==='today'
            ? <Mark w={22} sw={5} sig={active===k?DRIFT.signal:DRIFT.faint} base={DRIFT.faint}/>
            : <div style={{ width:16, height:16, borderRadius: k==='you'?'50%':3, border:`2px solid ${active===k?DRIFT.ink:DRIFT.faint}` }}/>}
          <span style={{ fontFamily:DRIFT.mono, fontSize:10, letterSpacing:'0.5px', color: active===k?DRIFT.ink:DRIFT.faint }}>{l}</span>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { DRIFT, Mark, Wordmark, MiniChart, ScoreRing, BandPill, Readout, Chip, PrimaryBtn, GhostBtn, Eyebrow, SourceIcon, BottomNav });