/* TurbineList — selectable roster */
const { useState: useStateList } = React;

const TURBINES = [
  { id: 'N-1', name: 'North-1', site: 'Dogger Bank A', status: 'ok',   output: 3.4, avail: 99, spark: [30,32,31,33,34,33,34] },
  { id: 'N-7', name: 'North-7', site: 'Dogger Bank A', status: 'warn', output: 2.8, avail: 92, spark: [34,33,30,28,26,28,28] },
  { id: 'N-12', name: 'North-12', site: 'Dogger Bank A', status: 'ok', output: 3.3, avail: 98, spark: [30,32,33,31,32,33,33] },
  { id: 'S-3', name: 'South-3',  site: 'Hornsea Two',   status: 'ok',   output: 3.5, avail: 99, spark: [34,35,34,35,35,34,35] },
  { id: 'S-9', name: 'South-9',  site: 'Hornsea Two',   status: 'err',  output: 0.0, avail: 0,  spark: [30,28,22,14,6,2,0] },
  { id: 'E-4', name: 'East-4',   site: 'Moray West',    status: 'ok',   output: 3.2, avail: 97, spark: [32,31,32,33,32,32,32] },
  { id: 'E-11',name: 'East-11',  site: 'Moray West',    status: 'ok',   output: 3.1, avail: 96, spark: [30,31,31,30,31,31,31] },
];

function TurbineList() {
  const [sel, setSel] = useStateList('N-7');
  return (
    <div className="panel">
      <div className="panel-head">
        <div>
          <div className="p-title">Turbines</div>
          <div className="p-sub">142 total · 3 need attention</div>
        </div>
        <div className="seg">
          <span className="on">All</span><span>Online</span><span>Alerts</span>
        </div>
      </div>
      <div className="t-head">
        <span/><span>Unit / site</span><span className="right">MW</span><span className="right">%</span><span>7d</span>
      </div>
      {TURBINES.map(t => (
        <div key={t.id}
             className={'t-row' + (sel === t.id ? ' selected' : '')}
             onClick={() => setSel(t.id)}>
          <span className={`t-dot ${t.status}`}/>
          <div>
            <div className="t-name">{t.name}</div>
            <div className="t-site">{t.site}</div>
          </div>
          <div className="t-num">{t.output.toFixed(1)}</div>
          <div className="t-num">{t.avail}</div>
          <Sparkline points={t.spark} color={t.status === 'ok' ? '#2F80ED' : t.status === 'warn' ? '#E8A13C' : '#E15B5B'}/>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { TurbineList });