// Operations Dashboard — mission control
const DashboardPage = ({ setPage }) => {
  const [tab, setTab] = useState('overview');
  const oeeData = useMemo(() => series(48, 11, 78, 6), []);
  const productionData = useMemo(() => series(48, 22, 320, 30), []);
  const downtimeData = useMemo(() => series(48, 33, 8, 4), []);
  const energyData = useMemo(() => series(48, 44, 240, 15), []);

  return (
    <>
      <div className="page-header">
        <div>
          <h1 className="page-title">Operations</h1>
          <div className="page-sub">Pune North Plant · Shift B · 14:32 IST</div>
        </div>
        <div className="page-actions">
          <SegControl value="live" onChange={() => {}} options={[
            { label: 'Live', value: 'live' },
            { label: '1H', value: '1h' },
            { label: '24H', value: '24h' },
            { label: '7D', value: '7d' },
          ]}/>
          <button className="btn"><Icon name="download" size={12}/>Export</button>
          <button className="btn primary"><Icon name="plus" size={12}/>New incident</button>
        </div>
      </div>

      <div className="tabs">
        {[
          { id: 'overview', label: 'Overview' },
          { id: 'lines', label: 'Production lines', count: 8 },
          { id: 'shift', label: 'Shift performance' },
          { id: 'incidents', label: 'Active incidents', count: 3 },
        ].map(t => (
          <div key={t.id} className={`tab ${tab === t.id ? 'active' : ''}`} onClick={() => setTab(t.id)}>
            {t.label}{t.count && <span className="count">{t.count}</span>}
          </div>
        ))}
      </div>

      <div className="page-body">
        {/* KPI strip */}
        <div className="stat-grid" style={{ marginBottom: 16, gridTemplateColumns: 'repeat(6, 1fr)' }}>
          <StatCell label="Plant OEE" value="78.4" unit="%" delta="+2.1%" up sparkData={oeeData}/>
          <StatCell label="Units produced" value="14,238" delta="+8.4%" up sparkData={productionData}/>
          <StatCell label="Downtime" value="42" unit="min" delta="-12 min" up sparkData={downtimeData} sparkColor="var(--green)"/>
          <StatCell label="First-pass yield" value="96.8" unit="%" delta="-0.4%" down sparkData={series(48,55,96,1)}/>
          <StatCell label="Energy" value="4,820" unit="kWh" delta="+3.2%" sparkData={energyData} sparkColor="var(--blue)"/>
          <StatCell label="Active alerts" value="12" delta="3 critical" alert sparkData={series(48,66,8,3)} sparkColor="var(--red)"/>
        </div>

        {/* Main grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 380px', gap: 12 }}>
          {/* Production trend */}
          <div className="card" style={{ gridColumn: '1 / 3' }}>
            <div className="card-header">
              <div className="card-title">Production output · last 8 hours</div>
              <div style={{ display: 'flex', gap: 12, fontSize: 11, marginLeft: 16 }}>
                <Legend color="var(--accent)" label="Actual"/>
                <Legend color="var(--text-3)" label="Target" dashed/>
                <Legend color="var(--blue)" label="Forecast" dashed/>
              </div>
              <div className="card-meta">updated 2s ago</div>
            </div>
            <div style={{ padding: 14 }}>
              <LineChart w={760} h={200} multi={[
                { data: series(40, 1, 320, 25), color: 'var(--accent)' },
                { data: series(40, 2, 340, 5), color: 'var(--text-3)', dashed: true },
                { data: series(40, 3, 330, 15), color: 'var(--blue)', dashed: true },
              ]}/>
            </div>
          </div>

          {/* Active alerts feed */}
          <div className="card" style={{ gridRow: 'span 2' }}>
            <div className="card-header">
              <div className="card-title">Live event feed</div>
              <span className="pill running" style={{ marginLeft: 8 }}><span className="dot"/>Live</span>
              <button className="btn ghost sm" style={{ marginLeft: 'auto' }} onClick={() => setPage('events')}>View all <Icon name="arrowRight" size={11}/></button>
            </div>
            <div style={{ maxHeight: 540, overflow: 'auto' }}>
              {EVENT_FEED.map((e, i) => <EventRow key={i} {...e}/>)}
            </div>
          </div>

          {/* Plant floor */}
          <div className="card">
            <div className="card-header">
              <div className="card-title">Plant floor — line status</div>
              <button className="btn ghost sm" style={{ marginLeft: 'auto' }} onClick={() => setPage('machines')}>Open machines</button>
            </div>
            <div style={{ padding: 14 }}>
              <PlantFloor/>
            </div>
          </div>

          {/* OEE breakdown */}
          <div className="card">
            <div className="card-header">
              <div className="card-title">OEE breakdown</div>
              <div className="card-meta">shift B</div>
            </div>
            <div style={{ padding: 14, display: 'flex', gap: 16, alignItems: 'center' }}>
              <Donut size={120} label="78.4%" sub="OEE" segments={[
                { value: 92, color: 'var(--accent)' },
                { value: 8, color: 'var(--panel-3)' },
              ]}/>
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
                <KpiBar label="Availability" value={92.4} color="var(--green)"/>
                <KpiBar label="Performance" value={87.1} color="var(--accent)"/>
                <KpiBar label="Quality" value={97.4} color="var(--blue)"/>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom row */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
          <div className="card">
            <div className="card-header">
              <div className="card-title">Top downtime causes — today</div>
            </div>
            <div style={{ padding: 14 }}>
              {DOWNTIME_CAUSES.map((c, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0', borderBottom: i < 4 ? '1px solid var(--line)' : 'none' }}>
                  <div style={{ width: 14, fontSize: 10, color: 'var(--text-3)', fontFamily: 'JetBrains Mono' }}>{(i+1).toString().padStart(2,'0')}</div>
                  <div style={{ width: 200, fontSize: 12 }}>{c.label}</div>
                  <div style={{ flex: 1 }}>
                    <div className="bar"><div className="bar-fill" style={{ width: `${c.pct}%`, background: c.color }}/></div>
                  </div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--text-2)', width: 60, textAlign: 'right' }}>{c.minutes} min</div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)', width: 40, textAlign: 'right' }}>{c.pct}%</div>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-header">
              <div className="card-title">Shift performance — Shift B</div>
              <div className="card-meta">06:00 — 14:00</div>
            </div>
            <div style={{ padding: 14 }}>
              <BarChart w={560} h={170} data={[
                { label: '06', value: 280 }, { label: '07', value: 340 },
                { label: '08', value: 410, color: 'var(--accent)' }, { label: '09', value: 425, color: 'var(--accent)' },
                { label: '10', value: 380 }, { label: '11', value: 360 },
                { label: '12', value: 220, muted: true }, { label: '13', value: 295 },
                { label: '14', value: 318 },
              ].map(d => ({ ...d, color: d.color || 'var(--accent-soft)' }))}/>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12, fontSize: 11, color: 'var(--text-3)' }}>
                <span>Target: 350 units/hr</span>
                <span className="mono">Avg 336 · Peak 425 · Min 220</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

const StatCell = ({ label, value, unit, delta, up, down, alert, sparkData, sparkColor = 'var(--accent)' }) => (
  <div className="stat">
    <div className="stat-label">{label}</div>
    <div className="stat-value">{value}{unit && <span className="unit">{unit}</span>}</div>
    <div className={`stat-delta ${up ? 'up' : down ? 'down' : ''}`}>
      {up && <Icon name="trend" size={11}/>}
      {down && <Icon name="trendDown" size={11}/>}
      {alert && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--red)' }}/>}
      <span>{delta}</span>
    </div>
    <div className="stat-spark"><Sparkline data={sparkData} w={140} h={22} color={sparkColor} fill/></div>
  </div>
);

const Legend = ({ color, label, dashed }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--text-3)' }}>
    <span style={{ width: 14, height: 0, borderTop: `1.5px ${dashed ? 'dashed' : 'solid'} ${color}` }}/>
    {label}
  </div>
);

const KpiBar = ({ label, value, color }) => (
  <div>
    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 3 }}>
      <span style={{ color: 'var(--text-2)' }}>{label}</span>
      <span className="mono" style={{ color: 'var(--text)' }}>{value.toFixed(1)}%</span>
    </div>
    <div className="bar"><div className="bar-fill" style={{ width: `${value}%`, background: color }}/></div>
  </div>
);

const EVENT_FEED = [
  { time: '14:31', sev: 'critical', machine: 'CNC-04', title: 'Spindle temperature exceeded 85°C', meta: 'TRIGGERED · auto-escalated to maintenance' },
  { time: '14:28', sev: 'warn', machine: 'PRESS-12', title: 'Cycle time variance > 8%', meta: 'last 50 cycles · review queue' },
  { time: '14:22', sev: 'info', machine: 'PACK-03', title: 'Shift changeover complete', meta: 'operator: R. Mehta → S. Joshi' },
  { time: '14:18', sev: 'critical', machine: 'WELD-07', title: 'Emergency stop activated', meta: 'ack by P. Kulkarni · 3m 12s' },
  { time: '14:11', sev: 'warn', machine: 'CNC-02', title: 'Tool wear > 78% threshold', meta: 'replacement scheduled 16:00' },
  { time: '14:04', sev: 'ok', machine: 'ASM-L1', title: 'QA inspection passed', meta: 'lot #4823-A · 240 units · all metrics nominal' },
  { time: '13:58', sev: 'info', machine: 'PACK-01', title: 'Material refill request', meta: 'PE-Film-22µ · ETA 14:30' },
  { time: '13:52', sev: 'warn', machine: 'CNC-04', title: 'Coolant level low — 18%', meta: 'maintenance ticket #M-0294' },
  { time: '13:45', sev: 'ok', machine: 'WELD-02', title: 'Cycle target met', meta: '420/420 weld points · 0 defects' },
  { time: '13:38', sev: 'info', machine: 'PRESS-08', title: 'Operator log entry', meta: 'note: minor adjustment to feed rate' },
  { time: '13:30', sev: 'critical', machine: 'CNC-01', title: 'Servo drive fault — code E-0312', meta: 'auto-recovered after 47s' },
];

const sevConfig = {
  critical: { color: 'var(--red)', icon: 'alert' },
  warn: { color: 'var(--accent)', icon: 'alertCircle' },
  info: { color: 'var(--blue)', icon: 'info' },
  ok: { color: 'var(--green)', icon: 'check' },
};

const EventRow = ({ time, sev, machine, title, meta }) => {
  const c = sevConfig[sev];
  return (
    <div style={{ display: 'flex', gap: 10, padding: '10px 14px', borderBottom: '1px solid var(--line)', alignItems: 'flex-start' }}>
      <div style={{ color: c.color, marginTop: 1 }}><Icon name={c.icon} size={14}/></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
          <span style={{ fontWeight: 500 }}>{title}</span>
        </div>
        <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 2 }}>
          <span className="mono" style={{ color: 'var(--text-2)' }}>{machine}</span>
          <span style={{ margin: '0 6px' }}>·</span>
          {meta}
        </div>
      </div>
      <div className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)', marginTop: 2 }}>{time}</div>
    </div>
  );
};

const PlantFloor = () => {
  const lines = [
    { name: 'Line A — CNC Machining', status: 'running', oee: 84, machines: [{name:'CNC-01',s:'r'},{name:'CNC-02',s:'r'},{name:'CNC-03',s:'i'},{name:'CNC-04',s:'d'}] },
    { name: 'Line B — Press & Weld', status: 'running', oee: 79, machines: [{name:'PRESS-08',s:'r'},{name:'PRESS-12',s:'w'},{name:'WELD-02',s:'r'},{name:'WELD-07',s:'d'}] },
    { name: 'Line C — Assembly',     status: 'running', oee: 88, machines: [{name:'ASM-01',s:'r'},{name:'ASM-02',s:'r'},{name:'ASM-03',s:'r'},{name:'ASM-04',s:'r'}] },
    { name: 'Line D — Packaging',    status: 'idle', oee: 62, machines: [{name:'PACK-01',s:'i'},{name:'PACK-02',s:'r'},{name:'PACK-03',s:'r'}] },
  ];
  const sColor = { r: 'var(--green)', i: 'var(--blue)', w: 'var(--accent)', d: 'var(--red)', m: 'var(--text-3)' };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {lines.map(l => (
        <div key={l.name} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 160, fontSize: 12 }}>
            {l.name}
            <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)' }}>OEE {l.oee}%</div>
          </div>
          <div style={{ display: 'flex', gap: 4, flex: 1 }}>
            {l.machines.map(m => (
              <div key={m.name} title={m.name} style={{
                flex: 1,
                height: 32,
                borderRadius: 3,
                background: `color-mix(in srgb, ${sColor[m.s]} 14%, transparent)`,
                border: `1px solid color-mix(in srgb, ${sColor[m.s]} 40%, transparent)`,
                color: sColor[m.s],
                fontSize: 10,
                fontFamily: 'JetBrains Mono',
                display: 'grid', placeItems: 'center',
                position: 'relative',
                cursor: 'pointer'
              }}>
                {m.name}
                <span style={{ position: 'absolute', top: 3, right: 3, width: 5, height: 5, borderRadius: '50%', background: sColor[m.s] }}/>
              </div>
            ))}
          </div>
        </div>
      ))}
      <div style={{ display: 'flex', gap: 12, fontSize: 10.5, color: 'var(--text-3)', marginTop: 6, paddingTop: 8, borderTop: '1px solid var(--line)' }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--green)' }}/>Running</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--blue)' }}/>Idle</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--accent)' }}/>Warning</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--red)' }}/>Down</span>
      </div>
    </div>
  );
};

const DOWNTIME_CAUSES = [
  { label: 'Tooling change', minutes: 18, pct: 32, color: 'var(--accent)' },
  { label: 'Material starve', minutes: 12, pct: 21, color: 'var(--accent)' },
  { label: 'Quality hold', minutes: 9, pct: 16, color: 'var(--accent-soft)' },
  { label: 'Operator break', minutes: 7, pct: 12, color: 'var(--accent-soft)' },
  { label: 'Mechanical fault', minutes: 6, pct: 11, color: 'var(--red)' },
];

window.DashboardPage = DashboardPage;