/* ============================================================
   NeuralScout — Dashboard preview
   ============================================================ */

function DashboardPreview() {
  const now = useTick(100);
  const t = (now % 8000) / 8000;

  // Chart data - animated bars
  const barData = React.useMemo(() => {
    const base = [42, 58, 71, 64, 82, 96, 110, 118, 104, 88, 72, 54];
    return base;
  }, []);
  const liveIdx = Math.floor(t * barData.length);

  // Sparkline
  const sparkPts = React.useMemo(() =>
    Array.from({length: 40}).map((_,i) => 30 + Math.sin(i * 0.4) * 12 + Math.sin(i * 0.15) * 6 + (i * 0.3)),
  []);

  const tickerVal = 1842 + Math.floor(t * 12);

  return (
    <div style={dashStyles.wrap}>
      {/* Top bar */}
      <div style={dashStyles.topbar}>
        <div style={{display:'flex', alignItems:'center', gap: 10}}>
          <img
            src="assets/logos/logo.png"
            alt="Neuralscout"
            style={{ height: 22, width: 'auto', display: 'block', objectFit: 'contain' }}
          />
          <span style={{color:'var(--ns-fg-dimmer)', fontSize: 12, marginLeft: 2}}>/ North Gate</span>
        </div>
        <div style={{display:'flex', gap: 10, alignItems:'center'}}>
          <div style={dashStyles.filter}>Last 24h ▾</div>
          <div style={dashStyles.filter}>All cameras ▾</div>
          <div style={{width: 28, height: 28, borderRadius:99, background:'linear-gradient(135deg, #b794ff, #22e3ff)'}}/>
        </div>
      </div>

      {/* Nav rail */}
      <div style={dashStyles.body}>
        <div style={dashStyles.rail}>
          {['⌂', '◉', '▦', '∿', '⚙'].map((c, i) => (
            <div key={i} style={{
              ...dashStyles.railBtn,
              background: i === 1 ? 'var(--ns-bg-3)' : 'transparent',
              color: i === 1 ? 'var(--ns-fg)' : 'var(--ns-fg-dimmer)',
            }}>{c}</div>
          ))}
        </div>

        <div style={dashStyles.main}>
          {/* KPI row */}
          <div style={dashStyles.kpiRow}>
            <KPI label="Visitors today" value={tickerVal.toLocaleString()} delta="+12.4%" deltaColor="var(--ns-lime)" />
            <KPI label="Avg. dwell" value="3m 42s" delta="-8.1%" deltaColor="var(--ns-lime)" />
            <KPI label="Peak occupancy" value="287" delta="11:42" deltaColor="var(--ns-fg-dim)" />
            <KPI label="Vehicles IN" value="96" delta="+4" deltaColor="var(--ns-cyan)" />
          </div>

          {/* Chart card */}
          <div style={dashStyles.chartCard}>
            <div style={dashStyles.chartHead}>
              <div>
                <div className="ns-eyebrow" style={{fontSize: 9}}>Traffic</div>
                <div style={{fontSize: 14, marginTop: 6, fontWeight: 500}}>Hourly IN / OUT — last 12 hours</div>
              </div>
              <div style={{display:'flex', gap: 6}}>
                <div style={{...dashStyles.legendDot, background:'var(--ns-cyan)'}}/>
                <span style={{fontSize:11, color:'var(--ns-fg-dim)', marginRight:8}}>IN</span>
                <div style={{...dashStyles.legendDot, background:'var(--ns-amber)'}}/>
                <span style={{fontSize:11, color:'var(--ns-fg-dim)'}}>OUT</span>
              </div>
            </div>
            <div style={dashStyles.chart}>
              {/* y grid */}
              {[0, 25, 50, 75, 100].map(y => (
                <div key={y} style={{position:'absolute', left:0, right:0, bottom: `${y}%`, borderTop:'1px dashed var(--ns-line)'}} />
              ))}
              {/* bars */}
              <div style={dashStyles.barsWrap}>
                {barData.map((v, i) => (
                  <div key={i} style={{flex:1, display:'flex', gap: 3, alignItems:'flex-end', height:'100%'}}>
                    <div style={{
                      flex:1, height: `${(v/130)*100}%`,
                      background: i === liveIdx ? 'var(--ns-cyan)' : (i < liveIdx ? 'var(--ns-cyan)' : 'var(--ns-line-3)'),
                      opacity: i === liveIdx ? 1 : (i < liveIdx ? 0.9 : 0.35),
                      transition: 'all 0.3s',
                      boxShadow: i === liveIdx ? '0 0 12px var(--ns-cyan)' : 'none',
                    }}/>
                    <div style={{
                      flex:1, height: `${((v*0.75)/130)*100}%`,
                      background: i === liveIdx ? 'var(--ns-amber)' : (i < liveIdx ? 'var(--ns-amber)' : 'var(--ns-line-3)'),
                      opacity: i === liveIdx ? 1 : (i < liveIdx ? 0.9 : 0.35),
                      transition: 'all 0.3s',
                    }}/>
                  </div>
                ))}
              </div>
              {/* x labels */}
              <div style={dashStyles.xLabels}>
                {['2a','4a','6a','8a','10a','12p','2p','4p','6p','8p','10p','now'].map((l,i) => (
                  <div key={i} style={{
                    flex:1, textAlign:'center', fontSize:9, fontFamily:'var(--ns-mono)',
                    color: i === liveIdx ? 'var(--ns-cyan)' : 'var(--ns-fg-dimmer)',
                    fontWeight: i === liveIdx ? 700 : 400,
                  }}>{l}</div>
                ))}
              </div>
            </div>
          </div>

          {/* Bottom row */}
          <div style={dashStyles.bottomRow}>
            {/* Sparkline card */}
            <div style={dashStyles.smallCard}>
              <div className="ns-eyebrow" style={{fontSize: 9}}>Dwell heatmap · Zone A</div>
              <div style={{fontSize: 22, fontFamily:'var(--ns-mono)', color:'var(--ns-lime)', marginTop: 10, fontWeight: 600}}>
                3m 42s <span style={{fontSize: 11, color:'var(--ns-fg-dim)'}}>avg</span>
              </div>
              <svg viewBox="0 0 200 60" style={{width:'100%', marginTop: 10, display:'block'}}>
                <defs>
                  <linearGradient id="sparkGrad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="var(--ns-lime)" stopOpacity="0.4"/>
                    <stop offset="100%" stopColor="var(--ns-lime)" stopOpacity="0"/>
                  </linearGradient>
                </defs>
                <path d={`M 0 ${60 - sparkPts[0]} ${sparkPts.map((p, i) => `L ${(i/(sparkPts.length-1))*200} ${60-p}`).join(' ')} L 200 60 L 0 60 Z`} fill="url(#sparkGrad)"/>
                <path d={`M 0 ${60 - sparkPts[0]} ${sparkPts.map((p, i) => `L ${(i/(sparkPts.length-1))*200} ${60-p}`).join(' ')}`} stroke="var(--ns-lime)" strokeWidth="1.5" fill="none"/>
              </svg>
            </div>

            {/* Camera strip */}
            <div style={dashStyles.smallCard}>
              <div className="ns-eyebrow" style={{fontSize: 9}}>Cameras · 12 active</div>
              <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap: 6, marginTop: 10}}>
                {Array.from({length: 6}).map((_,i) => (
                  <div key={i} style={{
                    aspectRatio:'16/10',
                    background:`linear-gradient(135deg, #1a2030, #0c1018)`,
                    border:'1px solid var(--ns-line)',
                    position:'relative', overflow:'hidden',
                  }}>
                    <div style={{
                      position:'absolute', top: 3, left: 4,
                      fontFamily:'var(--ns-mono)', fontSize: 7,
                      color:'var(--ns-fg-dim)',
                    }}>CAM_0{i+1}</div>
                    <div style={{
                      position:'absolute', top: 3, right: 4,
                      width: 4, height: 4, borderRadius: 99,
                      background: i === (Math.floor(t*6) % 6) ? 'var(--ns-coral)' : 'var(--ns-lime)',
                      animation: i === (Math.floor(t*6) % 6) ? 'ns-blink 1s infinite' : 'none',
                    }}/>
                    {/* fake detection */}
                    <div style={{
                      position:'absolute', left: `${20 + (i*13)%50}%`, top: '45%',
                      width: 14, height: 18,
                      border:'1px solid var(--ns-cyan)',
                    }}/>
                  </div>
                ))}
              </div>
            </div>

            {/* Recent events */}
            <div style={dashStyles.smallCard}>
              <div className="ns-eyebrow" style={{fontSize: 9}}>Recent events</div>
              <div style={{display:'flex', flexDirection:'column', gap: 6, marginTop: 10, fontFamily:'var(--ns-mono)', fontSize: 10.5}}>
                {[
                  { c:'var(--ns-lime)', t:'12:42:19', e:'Vehicle IN · KR-8472' },
                  { c:'var(--ns-cyan)', t:'12:41:55', e:'Person COUNTED · Zone A' },
                  { c:'var(--ns-violet)', t:'12:41:12', e:'Face matched · Priya K.' },
                  { c:'var(--ns-amber)', t:'12:40:48', e:'Dwell exceeded · Zone B' },
                  { c:'var(--ns-lime)', t:'12:40:21', e:'Vehicle OUT · DL-9931' },
                ].map((ev, i) => (
                  <div key={i} style={{display:'flex', gap: 8, alignItems:'center', opacity: 1 - i*0.13}}>
                    <div style={{width: 5, height: 5, borderRadius: 99, background: ev.c, flexShrink: 0}}/>
                    <span style={{color:'var(--ns-fg-dimmer)'}}>{ev.t}</span>
                    <span style={{color:'var(--ns-fg)'}}>{ev.e}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function KPI({label, value, delta, deltaColor}) {
  return (
    <div style={dashStyles.kpi}>
      <div style={{fontSize: 11, color:'var(--ns-fg-dim)', fontFamily:'var(--ns-mono)', letterSpacing:'0.04em'}}>{label}</div>
      <div style={{fontSize: 26, fontFamily:'var(--ns-display)', fontWeight: 500, marginTop: 6, letterSpacing:'-0.02em', fontVariantNumeric:'tabular-nums'}}>{value}</div>
      <div style={{fontSize: 11, color: deltaColor, fontFamily:'var(--ns-mono)', marginTop: 4}}>{delta}</div>
    </div>
  );
}

const dashStyles = {
  wrap: {
    background:'var(--ns-bg-1)',
    border:'1px solid var(--ns-line)',
    borderRadius:'var(--ns-r-3)',
    overflow:'hidden',
    display:'flex', flexDirection:'column',
  },
  topbar: {
    padding:'12px 18px',
    display:'flex', justifyContent:'space-between', alignItems:'center',
    borderBottom:'1px solid var(--ns-line)',
    background:'var(--ns-bg-2)',
  },
  filter: {
    fontFamily:'var(--ns-mono)', fontSize: 11,
    color:'var(--ns-fg-dim)', padding:'6px 10px',
    border:'1px solid var(--ns-line-2)', borderRadius: 3,
  },
  body: { display:'flex', minHeight: 0 },
  rail: {
    width: 52, background:'var(--ns-bg-2)',
    borderRight:'1px solid var(--ns-line)',
    padding:'16px 0', display:'flex', flexDirection:'column', gap: 6, alignItems:'center',
  },
  railBtn: {
    width: 36, height: 36, display:'flex', alignItems:'center', justifyContent:'center',
    fontSize: 16, borderRadius: 4, cursor: 'default',
  },
  main: { flex: 1, padding: 18, display:'flex', flexDirection:'column', gap: 14 },
  kpiRow: { display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 10 },
  kpi: {
    padding:'14px 16px',
    background:'var(--ns-bg-2)',
    border:'1px solid var(--ns-line)',
    borderRadius: 6,
  },
  chartCard: {
    padding:'16px 18px',
    background:'var(--ns-bg-2)',
    border:'1px solid var(--ns-line)',
    borderRadius: 6,
  },
  chartHead: { display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 14 },
  legendDot: { width: 8, height: 8, borderRadius:99, alignSelf:'center', marginRight: 4 },
  chart: { position:'relative', height: 160, paddingBottom: 20 },
  barsWrap: { position:'absolute', inset: 0, bottom: 20, display:'flex', gap: 4, alignItems:'flex-end' },
  xLabels: { position:'absolute', left: 0, right: 0, bottom: 0, display:'flex' },
  bottomRow: { display:'grid', gridTemplateColumns: '1fr 1.2fr 1.3fr', gap: 10 },
  smallCard: {
    padding:'14px 16px',
    background:'var(--ns-bg-2)',
    border:'1px solid var(--ns-line)',
    borderRadius: 6,
  },
};

window.DashboardPreview = DashboardPreview;