// Analytics & Reporting
const AnalyticsPage = () => {
  const [tab, setTab] = useState('production');
  return (
    <>
      <div className="page-header">
        <div>
          <h1 className="page-title">Analytics</h1>
          <div className="page-sub">7-day rolling · all plants · last refresh 14:32 IST</div>
        </div>
        <div className="page-actions">
          <SegControl value="7d" onChange={()=>{}} options={[{label:'24H',value:'1d'},{label:'7D',value:'7d'},{label:'30D',value:'30d'},{label:'QTD',value:'q'}]}/>
          <button className="btn"><Icon name="download" size={12}/>Export PDF</button>
          <button className="btn primary"><Icon name="plus" size={12}/>New report</button>
        </div>
      </div>

      <div className="tabs">
        {['production','downtime','quality','energy','utilization','predictive'].map(t => (
          <div key={t} className={`tab ${tab===t?'active':''}`} onClick={()=>setTab(t)} style={{textTransform:'capitalize'}}>{t}</div>
        ))}
      </div>

      <div className="page-body">
        <div className="stat-grid" style={{ marginBottom: 16, gridTemplateColumns: 'repeat(5, 1fr)' }}>
          <StatCellSingle label="Throughput" value="312k" sub="units · +12% wow"/>
          <StatCellSingle label="OEE — group" value="79.8%" sub="+1.4%"/>
          <StatCellSingle label="Yield" value="96.4%" sub="-0.3%"/>
          <StatCellSingle label="Downtime" value="284" sub="hrs · -22 hrs wow"/>
          <StatCellSingle label="Energy/unit" value="0.42" sub="kWh · -5%"/>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
          <div className="card">
            <div className="card-header"><div className="card-title">Production · 7-day output</div></div>
            <div style={{ padding: 14 }}>
              <LineChart w={460} h={200} multi={[
                { data: series(48, 1, 18000, 1500), color: 'var(--accent)' },
                { data: series(48, 2, 17500, 200), color: 'var(--text-3)', dashed: true },
              ]}/>
            </div>
          </div>
          <div className="card">
            <div className="card-header"><div className="card-title">Downtime · pareto</div></div>
            <div style={{ padding: 14 }}>
              <BarChart w={460} h={200} data={[
                {label:'Tooling',value:84},{label:'Material',value:62},{label:'QA hold',value:41},
                {label:'Mech',value:38},{label:'Operator',value:24},{label:'Setup',value:18},
                {label:'Util',value:14},{label:'Other',value:9},
              ].map(d=>({...d,color:'var(--accent)'}))}/>
            </div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 12 }}>
          <div className="card">
            <div className="card-header"><div className="card-title">Machine utilization heatmap · 7×24</div></div>
            <div style={{ padding: 14 }}>
              <Heatmap rows={7} cols={24} w={680} h={140} gap={3}
                getVal={(r,c) => {
                  const r2 = (r*c*7+r+c) % 100;
                  return c < 6 ? 30 : c < 22 ? 60 + r2 % 35 : 35;
                }}
                getColor={(v) => {
                  const t = Math.min(1, v/95);
                  return `color-mix(in srgb, var(--accent) ${Math.round(t*80)}%, var(--panel-2))`;
                }}/>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 10, color: 'var(--text-3)' }} className="mono">
                <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
              </div>
            </div>
          </div>
          <div className="card">
            <div className="card-header"><div className="card-title">Quality — first-pass yield</div></div>
            <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[['Line A · CNC',97.4],['Line B · Press',94.8],['Line C · Assembly',98.1],['Line D · Pack',96.2]].map(([n,v]) => (
                <div key={n}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 }}><span>{n}</span><span className="mono">{v}%</span></div>
                  <div className="bar"><div className="bar-fill" style={{ width: `${v}%`, background: v > 97 ? 'var(--green)' : v > 95 ? 'var(--accent)' : 'var(--red)' }}/></div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="card" style={{ marginTop: 12 }}>
          <div className="card-header"><div className="card-title">Predictive insights</div><span className="pill warn" style={{ marginLeft: 8 }}>beta</span></div>
          <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              ['CNC-04 likely to require maintenance within 18 hours', 'spindle vibration baseline drift detected', '78% confidence', 'var(--accent)'],
              ['PRESS-12 cycle time trending 6% above target', 'recommend tooling inspection at next changeover', '64% confidence', 'var(--blue)'],
              ['Line D undertilized 11:30—13:30 (recurring)', 'consider rescheduling break to align with material refill', '82% confidence', 'var(--green)'],
            ].map((r,i)=>(
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, border: '1px solid var(--line)', borderRadius: 4, background: 'var(--panel-2)' }}>
                <div style={{ width: 4, alignSelf: 'stretch', background: r[3], borderRadius: 2 }}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>{r[0]}</div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 2 }}>{r[1]}</div>
                </div>
                <span className="pill mono">{r[2]}</span>
                <button className="btn sm">Investigate</button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
};
window.AnalyticsPage = AnalyticsPage;