// Plants — multi-plant view
const PLANTS = [
  { id: 'PUN-N', name: 'Pune North', region: 'IN-MH', tz: 'IST', oee: 78.4, output: 14238, target: 18000, alerts: 12, machines: 47, headcount: 184, status: 'running', shift: 'B' },
  { id: 'PUN-S', name: 'Pune South', region: 'IN-MH', tz: 'IST', oee: 82.1, output: 9420, target: 11000, alerts: 4, machines: 38, headcount: 142, status: 'running', shift: 'B' },
  { id: 'CHN-1', name: 'Chennai 1', region: 'IN-TN', tz: 'IST', oee: 71.2, output: 6840, target: 9000, alerts: 8, machines: 52, headcount: 210, status: 'attention', shift: 'B' },
  { id: 'KRC-1', name: 'Karachi Plant', region: 'PK-SD', tz: 'PKT', oee: 76.8, output: 3420, target: 4500, alerts: 3, machines: 24, headcount: 98, status: 'running', shift: 'A' },
  { id: 'DAC-1', name: 'Dhaka Industrial', region: 'BD-DH', tz: 'BST', oee: 84.2, output: 5680, target: 6500, alerts: 1, machines: 31, headcount: 124, status: 'running', shift: 'B' },
  { id: 'BKK-1', name: 'Bangkok Assembly', region: 'TH-10', tz: 'ICT', oee: 88.0, output: 8240, target: 8800, alerts: 0, machines: 28, headcount: 88, status: 'running', shift: 'B' },
];

const PlantsPage = () => {
  const [view, setView] = useState('grid');
  return (
    <>
      <div className="page-header">
        <div>
          <h1 className="page-title">Plants</h1>
          <div className="page-sub">6 plants · 4 regions · 220 machines · 79.8% rolled-up OEE · 28 active alerts</div>
        </div>
        <div className="page-actions">
          <SegControl value={view} onChange={setView} options={[{label:'Grid',value:'grid'},{label:'Map',value:'map'},{label:'Compare',value:'compare'}]}/>
          <button className="btn"><Icon name="download" size={12}/>Export</button>
        </div>
      </div>

      <div className="page-body">
        <div className="stat-grid" style={{ marginBottom: 16, gridTemplateColumns: 'repeat(5, 1fr)' }}>
          <StatCellSingle label="Group OEE" value="79.8%" sub="+1.4% vs last week"/>
          <StatCellSingle label="Output today" value="47,840" sub="of 57,800 target"/>
          <StatCellSingle label="Active alerts" value="28" sub="3 critical" color="var(--red)"/>
          <StatCellSingle label="Machines online" value="216 / 220"/>
          <StatCellSingle label="Workforce on shift" value="846"/>
        </div>

        {view === 'grid' && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))', gap: 12 }}>
            {PLANTS.map(p => <PlantCard key={p.id} p={p}/>)}
          </div>
        )}
        {view === 'map' && <PlantMap/>}
        {view === 'compare' && <PlantCompare/>}
      </div>
    </>
  );
};

const PlantCard = ({ p }) => (
  <div className="card">
    <div className="card-header">
      <div style={{ width: 32, height: 32, borderRadius: 5, background: 'var(--panel-2)', display: 'grid', placeItems: 'center' }}><Icon name="factory" size={16}/></div>
      <div>
        <div style={{ fontSize: 13, fontWeight: 600 }}>{p.name}</div>
        <div className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)' }}>{p.id} · {p.region} · Shift {p.shift}</div>
      </div>
      <span className={`pill ${p.status === 'running' ? 'running' : 'warn'}`} style={{ marginLeft: 'auto' }}><span className="dot"/>{p.status}</span>
    </div>
    <div style={{ padding: 14 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 12 }}>
        <Mini label="OEE" value={`${p.oee}%`}/>
        <Mini label="Output" value={`${p.output.toLocaleString()} / ${p.target.toLocaleString()}`}/>
        <Mini label="Machines" value={`${p.machines}`}/>
        <Mini label="Headcount" value={`${p.headcount}`}/>
      </div>
      <Sparkline data={series(40, p.id.length+1, 78, 6)} w={330} h={40} color="var(--accent)" fill/>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontSize: 11, color: 'var(--text-3)' }} className="mono">
        <span>{p.alerts} active alerts</span>
        <span>{p.tz}</span>
      </div>
    </div>
  </div>
);

const PlantMap = () => (
  <div className="card">
    <div style={{ padding: 24, height: 420, position: 'relative', background: 'var(--panel-2)' }}>
      {/* Stylized map */}
      <svg width="100%" height="100%" viewBox="0 0 800 380" style={{ position: 'absolute', inset: 24 }}>
        <rect x="0" y="0" width="800" height="380" fill="none"/>
        {/* fake region outlines */}
        <path d="M150,80 L320,60 L400,120 L380,220 L300,260 L200,240 L120,180 Z" fill="var(--panel-3)" stroke="var(--line-2)" strokeDasharray="3 4"/>
        <path d="M420,80 L580,90 L600,170 L520,210 L450,180 Z" fill="var(--panel-3)" stroke="var(--line-2)" strokeDasharray="3 4"/>
        <path d="M540,220 L680,220 L700,300 L580,310 Z" fill="var(--panel-3)" stroke="var(--line-2)" strokeDasharray="3 4"/>
        {/* plant markers */}
        {[
          {x:240,y:160,p:PLANTS[0]},
          {x:250,y:200,p:PLANTS[1]},
          {x:280,y:240,p:PLANTS[2]},
          {x:160,y:140,p:PLANTS[3]},
          {x:330,y:120,p:PLANTS[4]},
          {x:580,y:240,p:PLANTS[5]},
        ].map(({x,y,p},i) => (
          <g key={i}>
            <circle cx={x} cy={y} r="22" fill={p.alerts > 5 ? 'var(--red)' : 'var(--accent)'} opacity="0.15"/>
            <circle cx={x} cy={y} r="8" fill={p.alerts > 5 ? 'var(--red)' : 'var(--accent)'}/>
            <text x={x+14} y={y-8} fontSize="11" fill="var(--text)" fontWeight="500">{p.name}</text>
            <text x={x+14} y={y+5} fontSize="10" fill="var(--text-3)" fontFamily="JetBrains Mono">{p.oee}% · {p.alerts} alerts</text>
          </g>
        ))}
      </svg>
    </div>
  </div>
);

const PlantCompare = () => (
  <div className="card">
    <table className="tbl">
      <thead><tr><th>Plant</th><th>OEE</th><th>Output</th><th>Quality</th><th>Downtime</th><th>Energy/unit</th><th>Trend</th></tr></thead>
      <tbody>
        {PLANTS.map((p,i)=>(
          <tr key={p.id}>
            <td><span style={{ fontWeight: 500 }}>{p.name}</span> <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>· {p.id}</span></td>
            <td className="mono">{p.oee}%</td>
            <td><div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span className="mono" style={{ fontSize: 11.5 }}>{p.output.toLocaleString()}</span><div style={{ width: 80 }}><div className="bar"><div className="bar-fill" style={{ width: `${(p.output/p.target)*100}%` }}/></div></div></div></td>
            <td className="mono">{(95 + (p.id.length % 4)).toFixed(1)}%</td>
            <td className="mono">{p.alerts * 4} min</td>
            <td className="mono">{(0.32 + i*0.04).toFixed(2)} kWh</td>
            <td><Sparkline data={series(20, i+9, 78, 5)} w={70} h={18} color="var(--accent)"/></td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

window.PlantsPage = PlantsPage;