// Machines page — single, line, multi
const MachinesPage = ({ setPage }) => {
  const [view, setView] = useState('multi');
  const [selected, setSelected] = useState(null);
  const [filter, setFilter] = useState('all');

  const filtered = MACHINES.filter(m =>
    filter === 'all' || (filter === 'running' && m.state === 'running') ||
    (filter === 'attention' && (m.state === 'warn' || m.state === 'down'))
  );

  return (
    <>
      <div className="page-header">
        <div>
          <h1 className="page-title">Machines</h1>
          <div className="page-sub">47 connected · 4 production lines · 3 attention required</div>
        </div>
        <div className="page-actions">
          <SegControl value={view} onChange={setView} options={[
            { label: 'Multi', value: 'multi' },
            { label: 'Line', value: 'line' },
            { label: 'Single', value: 'single' },
          ]}/>
          <button className="btn"><Icon name="filter" size={12}/>Filter</button>
          <button className="btn"><Icon name="download" size={12}/>Export</button>
        </div>
      </div>

      {view === 'multi' && <MultiMachineView machines={filtered} filter={filter} setFilter={setFilter} onSelect={(m)=>{setSelected(m);setView('single');}}/>}
      {view === 'line' && <LineView/>}
      {view === 'single' && <SingleMachineView machine={selected || MACHINES[3]}/>}
    </>
  );
};

const MACHINES = [
  { id: 'CNC-01', name: 'Haas VF-2', line: 'A', state: 'running', oee: 88, util: 92, output: 124, target: 130, temp: 42, cycle: 4.2, alerts: 0 },
  { id: 'CNC-02', name: 'Haas VF-2', line: 'A', state: 'running', oee: 84, util: 89, output: 118, target: 130, temp: 44, cycle: 4.4, alerts: 0 },
  { id: 'CNC-03', name: 'DMG Mori', line: 'A', state: 'idle', oee: 71, util: 64, output: 0, target: 130, temp: 28, cycle: 0, alerts: 0 },
  { id: 'CNC-04', name: 'Haas VF-4', line: 'A', state: 'down', oee: 0, util: 0, output: 0, target: 130, temp: 87, cycle: 0, alerts: 3 },
  { id: 'PRESS-08', name: 'Schuler 400T', line: 'B', state: 'running', oee: 79, util: 84, output: 86, target: 100, temp: 56, cycle: 6.8, alerts: 0 },
  { id: 'PRESS-12', name: 'Schuler 250T', line: 'B', state: 'warn', oee: 68, util: 71, output: 72, target: 100, temp: 64, cycle: 7.2, alerts: 1 },
  { id: 'WELD-02', name: 'Fronius TPS', line: 'B', state: 'running', oee: 91, util: 95, output: 240, target: 240, temp: 38, cycle: 1.2, alerts: 0 },
  { id: 'WELD-07', name: 'Fronius TPS', line: 'B', state: 'down', oee: 0, util: 0, output: 0, target: 240, temp: 24, cycle: 0, alerts: 2 },
  { id: 'ASM-01', name: 'Assembly Cell', line: 'C', state: 'running', oee: 89, util: 93, output: 412, target: 440, temp: 32, cycle: 0.8, alerts: 0 },
  { id: 'ASM-02', name: 'Assembly Cell', line: 'C', state: 'running', oee: 86, util: 90, output: 398, target: 440, temp: 33, cycle: 0.9, alerts: 0 },
  { id: 'PACK-01', name: 'Bosch Wrap', line: 'D', state: 'idle', oee: 58, util: 62, output: 0, target: 600, temp: 26, cycle: 0, alerts: 0 },
  { id: 'PACK-02', name: 'Bosch Wrap', line: 'D', state: 'running', oee: 82, util: 88, output: 564, target: 600, temp: 31, cycle: 0.5, alerts: 0 },
];

const MultiMachineView = ({ machines, filter, setFilter, onSelect }) => (
  <>
    <div className="tabs">
      {[
        { id: 'all', label: 'All machines', count: 47 },
        { id: 'running', label: 'Running', count: 38 },
        { id: 'attention', label: 'Needs attention', count: 5 },
        { id: 'maintenance', label: 'In maintenance', count: 2 },
        { id: 'offline', label: 'Offline', count: 2 },
      ].map(t => (
        <div key={t.id} className={`tab ${filter === t.id ? 'active' : ''}`} onClick={() => setFilter(t.id)}>
          {t.label}<span className="count">{t.count}</span>
        </div>
      ))}
    </div>

    <div className="page-body">
      <div style={{ display: 'flex', gap: 8, marginBottom: 12, alignItems: 'center' }}>
        <input className="input" placeholder="Search by ID, model, line…" style={{ width: 280 }}/>
        <select className="select"><option>All lines</option></select>
        <select className="select"><option>All states</option></select>
        <div style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--text-3)' }} className="mono">{machines.length} machines</div>
      </div>

      <div className="card" style={{ overflow: 'hidden' }}>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 14 }}><input type="checkbox"/></th>
              <th>Machine</th>
              <th>State</th>
              <th>OEE</th>
              <th>Output / Target</th>
              <th>Cycle</th>
              <th>Temp</th>
              <th>Trend</th>
              <th>Alerts</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {machines.map((m, i) => (
              <tr key={m.id} onClick={() => onSelect(m)} style={{ cursor: 'pointer' }}>
                <td><input type="checkbox" onClick={e=>e.stopPropagation()}/></td>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div style={{ width: 24, height: 24, borderRadius: 4, background: 'var(--panel-2)', display: 'grid', placeItems: 'center', color: 'var(--text-3)' }}>
                      <Icon name="cpu" size={13}/>
                    </div>
                    <div>
                      <div className="mono" style={{ fontSize: 12, fontWeight: 500 }}>{m.id}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{m.name} · Line {m.line}</div>
                    </div>
                  </div>
                </td>
                <td><span className={`pill ${m.state}`}><span className="dot"/>{m.state}</span></td>
                <td className="mono">{m.oee}%</td>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span className="mono" style={{ fontSize: 11.5, width: 50 }}>{m.output}/{m.target}</span>
                    <div style={{ width: 80 }}>
                      <div className="bar"><div className="bar-fill" style={{ width: `${(m.output/m.target)*100}%`, background: m.state === 'down' ? 'var(--red)' : m.state === 'warn' ? 'var(--accent)' : 'var(--green)' }}/></div>
                    </div>
                  </div>
                </td>
                <td className="mono">{m.cycle ? `${m.cycle}s` : '—'}</td>
                <td className="mono" style={{ color: m.temp > 70 ? 'var(--red)' : m.temp > 50 ? 'var(--accent)' : 'var(--text-2)' }}>{m.temp}°C</td>
                <td><Sparkline data={series(20, i+5, 50, 12)} w={70} h={20} color={m.state === 'down' ? 'var(--red)' : 'var(--accent)'}/></td>
                <td>{m.alerts > 0 ? <span className="pill down">{m.alerts}</span> : <span style={{ color: 'var(--text-4)' }}>—</span>}</td>
                <td><button className="btn ghost icon sm"><Icon name="more" size={12}/></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  </>
);

const LineView = () => (
  <div className="page-body">
    <div className="row" style={{ marginBottom: 12, alignItems: 'center' }}>
      <select className="select"><option>Line A — CNC Machining</option></select>
      <span className="pill running"><span className="dot"/>Running</span>
      <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>4 machines · 12 sensors · 1 down</span>
      <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
        <button className="btn"><Icon name="pause" size={11}/>Pause line</button>
        <button className="btn primary">Line summary</button>
      </div>
    </div>

    <div className="card" style={{ marginBottom: 12 }}>
      <div className="card-header">
        <div className="card-title">Line A · material flow</div>
        <div className="card-meta">14:32 IST</div>
      </div>
      <div style={{ padding: 18 }}>
        <FlowDiagram/>
      </div>
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
      {MACHINES.filter(m => m.line === 'A').map(m => <MachineCard key={m.id} m={m}/>)}
    </div>
  </div>
);

const FlowDiagram = () => {
  const stages = [
    { name: 'Input', units: 1240, state: 'ok' },
    { name: 'CNC-01', units: 124, state: 'running' },
    { name: 'CNC-02', units: 118, state: 'running' },
    { name: 'CNC-03', units: 0, state: 'idle' },
    { name: 'CNC-04', units: 0, state: 'down' },
    { name: 'QA Gate', units: 240, state: 'ok' },
    { name: 'Output', units: 234, state: 'ok' },
  ];
  const colorMap = { running: 'var(--green)', idle: 'var(--blue)', down: 'var(--red)', warn: 'var(--accent)', ok: 'var(--text-3)' };
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
      {stages.map((s, i) => (
        <div key={i} style={{ display: 'contents' }}>
          <div style={{ flex: 1, padding: '12px 8px', border: `1px solid color-mix(in srgb, ${colorMap[s.state]} 30%, transparent)`, borderRadius: 5, background: `color-mix(in srgb, ${colorMap[s.state]} 6%, var(--panel))`, textAlign: 'center' }}>
            <div className="mono" style={{ fontSize: 11, color: colorMap[s.state], fontWeight: 500 }}>{s.name}</div>
            <div className="mono" style={{ fontSize: 16, fontWeight: 500, marginTop: 4 }}>{s.units}</div>
            <div style={{ fontSize: 10, color: 'var(--text-3)' }}>units</div>
          </div>
          {i < stages.length - 1 && (
            <div style={{ color: 'var(--text-4)', fontSize: 14 }}>→</div>
          )}
        </div>
      ))}
    </div>
  );
};

const MachineCard = ({ m }) => (
  <div className="card">
    <div className="card-header">
      <div>
        <div className="mono" style={{ fontSize: 12, fontWeight: 500 }}>{m.id}</div>
        <div style={{ fontSize: 10.5, color: 'var(--text-3)' }}>{m.name}</div>
      </div>
      <div style={{ marginLeft: 'auto' }}>
        <span className={`pill ${m.state}`}><span className="dot"/>{m.state}</span>
      </div>
    </div>
    <div style={{ padding: 12 }}>
      <Sparkline data={series(30, m.id.length, 70, 8)} w={220} h={36} color={m.state === 'down' ? 'var(--red)' : 'var(--accent)'} fill/>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 10, fontSize: 11 }}>
        <Mini label="OEE" value={`${m.oee}%`}/>
        <Mini label="Cycle" value={m.cycle ? `${m.cycle}s` : '—'}/>
        <Mini label="Output" value={m.output}/>
        <Mini label="Temp" value={`${m.temp}°C`}/>
      </div>
    </div>
  </div>
);
const Mini = ({ label, value }) => (
  <div>
    <div style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>{label}</div>
    <div className="mono" style={{ fontSize: 13, fontWeight: 500, marginTop: 2 }}>{value}</div>
  </div>
);

const SingleMachineView = ({ machine }) => {
  const [tab, setTab] = useState('telemetry');
  return (
    <>
      <div style={{ padding: '14px 24px', borderBottom: '1px solid var(--line)', background: 'var(--panel)', display: 'flex', alignItems: 'center', gap: 14 }}>
        <button className="btn ghost icon"><Icon name="arrowLeft" size={13}/></button>
        <div style={{ width: 40, height: 40, borderRadius: 6, background: 'var(--panel-2)', display: 'grid', placeItems: 'center' }}><Icon name="cpu" size={18}/></div>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span className="mono" style={{ fontSize: 16, fontWeight: 500 }}>{machine.id}</span>
            <span className={`pill ${machine.state}`}><span className="dot"/>{machine.state}</span>
            {machine.alerts > 0 && <span className="pill down">{machine.alerts} active alerts</span>}
          </div>
          <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 2 }}>
            {machine.name} · Line {machine.line} · Bay 02 · IP 10.42.108.34 · Last comm 2s ago
          </div>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <button className="btn"><Icon name="wrench" size={12}/>Schedule maintenance</button>
          <button className="btn"><Icon name="pause" size={12}/>Stop</button>
          <button className="btn primary">Acknowledge alerts</button>
        </div>
      </div>

      <div className="tabs">
        {['telemetry','events','maintenance','sensors','utilization'].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: 12, gridTemplateColumns: 'repeat(6, 1fr)' }}>
          <StatCellSingle label="State" value={machine.state.toUpperCase()} color={machine.state === 'down' ? 'var(--red)' : 'var(--green)'}/>
          <StatCellSingle label="OEE" value={`${machine.oee}%`}/>
          <StatCellSingle label="Output today" value={machine.output} sub={`target ${machine.target}`}/>
          <StatCellSingle label="Cycle time" value={machine.cycle ? `${machine.cycle}s` : '—'} sub="target 4.0s"/>
          <StatCellSingle label="Spindle temp" value={`${machine.temp}°C`} color={machine.temp > 70 ? 'var(--red)' : 'var(--text)'} sub="threshold 75°C"/>
          <StatCellSingle label="Tool wear" value="78%" sub="replace at 85%"/>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 12 }}>
          <div className="card">
            <div className="card-header">
              <div className="card-title">Live telemetry — last 4h</div>
              <SegControl value="all" onChange={()=>{}} options={[{label:'All',value:'all'},{label:'Temp',value:'t'},{label:'Vibration',value:'v'},{label:'Energy',value:'e'}]}/>
            </div>
            <div style={{ padding: 14 }}>
              <div style={{ marginBottom: 14 }}>
                <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 4 }}>Spindle temperature (°C)</div>
                <LineChart w={680} h={120} data={series(60, 11, 65, 8, 0.3)} color="var(--red)"/>
              </div>
              <div style={{ marginBottom: 14 }}>
                <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 4 }}>Vibration (mm/s)</div>
                <LineChart w={680} h={120} data={series(60, 22, 4, 1)} color="var(--accent)"/>
              </div>
              <div>
                <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 4 }}>Power consumption (kW)</div>
                <LineChart w={680} h={120} data={series(60, 33, 18, 3)} color="var(--blue)"/>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card-header">
              <div className="card-title">Recent events</div>
            </div>
            <div style={{ maxHeight: 480, overflow: 'auto' }}>
              {EVENT_FEED.filter(e => e.machine === machine.id || true).slice(0,6).map((e,i) => <EventRow key={i} {...e} machine={machine.id}/>)}
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

const StatCellSingle = ({ label, value, sub, color }) => (
  <div className="stat">
    <div className="stat-label">{label}</div>
    <div className="stat-value" style={{ color }}>{value}</div>
    {sub && <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 4 }} className="mono">{sub}</div>}
  </div>
);

window.MachinesPage = MachinesPage;