// ── Makine Sarfiyatları — NEXOR · İzmir Ana Tesis · Tri-Utility ──────────

const MACHINES_DATA = [
  { id:'MAK-01', name:'Haddehane Fırını 1',     type:'Isıtma',  elec:4800,  gas:62000,  water:120,  secElec:'—', secGas:'50.0 Sm³/t', secWater:'—', idle:1200, status:'Aktif' },
  { id:'MAK-02', name:'Haddehane Fırını 2',     type:'Isıtma',  elec:3600,  gas:51940,  water:95,   secElec:'—', secGas:'53.0 Sm³/t', secWater:'—', idle:3400, status:'Uyarı' },
  { id:'MAK-03', name:'Sürekli Döküm Makinesi', type:'Döküm',   elec:247250,gas:0,      water:4200, secElec:'115 kWh/t', secGas:'—', secWater:'1.95 m³/t', idle:450, status:'Aktif' },
  { id:'MAK-04', name:'Kaba Hadde Motoru',      type:'Motor',   elec:103200,gas:0,      water:0,    secElec:'48 kWh/t',  secGas:'—', secWater:'—', idle:120, status:'Aktif' },
  { id:'MAK-05', name:'İnce Hadde Motoru',      type:'Motor',   elec:130200,gas:0,      water:0,    secElec:'62 kWh/t',  secGas:'—', secWater:'—', idle:0, status:'Kapalı' },
  { id:'MAK-06', name:'Ana Kompresör 1',        type:'Basınç',  elec:8100,  gas:0,      water:480,  secElec:'0.18 kWh/m³',secGas:'—',secWater:'—', idle:420, status:'Aktif' },
  { id:'MAK-07', name:'Soğutma Pompaları',      type:'Soğutma', elec:4200,  gas:0,      water:12000,secElec:'0.35 kWh/m³',secGas:'—',secWater:'—', idle:80, status:'Aktif' },
];

const PageMachines = ({ tweaks }) => {
  const r=tweaks.radius==='round'?14:tweaks.radius==='medium'?8:4;
  const totElec=MACHINES_DATA.reduce((a,m)=>a+m.elec,0);
  const totGas=MACHINES_DATA.reduce((a,m)=>a+m.gas,0);
  const totWater=MACHINES_DATA.reduce((a,m)=>a+m.water,0);

  return (
    <div className="page-enter" style={{ display:'flex', flexDirection:'column', gap:20 }}>
      {/* Özet */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:10 }}>
        {[
          { label:'İzlenen Makine',     value:MACHINES_DATA.length,                   unit:'Adet', color:'var(--text)' },
          { label:'Toplam Elektrik',    value:totElec.toLocaleString('tr-TR'),        unit:'kWh',  color:'var(--accent)' },
          { label:'Toplam Doğal Gaz',   value:totGas.toLocaleString('tr-TR'),         unit:'Sm³',  color:'#D97706' },
          { label:'Toplam Su',          value:totWater.toLocaleString('tr-TR'),        unit:'m³',   color:'#0EA5E9' },
        ].map((s,i)=>(
          <div key={i} style={{ background:'var(--bg-elevated)', border:'1px solid var(--border)', borderRadius:r, padding:'14px 18px', boxShadow:'var(--shadow-1)' }}>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:9.5, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:6 }}>{s.label}</div>
            <div style={{ fontSize:22, fontWeight:600, letterSpacing:'-0.02em', display:'flex', alignItems:'baseline', gap:4 }}>
              <span style={{ color:s.color }}>{s.value}</span>
              <span style={{ fontSize:11, color:'var(--text-muted)', fontWeight:500 }}>{s.unit}</span>
            </div>
          </div>
        ))}
      </div>

      {/* Tablo */}
      <div style={{ background:'var(--bg-elevated)', border:'1px solid var(--border)', borderRadius:r, boxShadow:'var(--shadow-1)', overflow:'hidden' }}>
        <div style={{ padding:'14px 18px 12px', borderBottom:'1px solid var(--border)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div>
            <div style={{ fontSize:14, fontWeight:600 }}>Makine Bazlı Enerji Sarfiyatları (3 Kaynak)</div>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:10.5, color:'var(--text-muted)', marginTop:3 }}>Elektrik · Doğal Gaz · Su — Birim üretim başına spesifik tüketimler</div>
          </div>
          <button style={{ display:'flex', alignItems:'center', gap:6, padding:'6px 12px', background:'var(--surface)', color:'var(--text-secondary)', border:'1px solid var(--border)', borderRadius:r-4, cursor:'pointer', fontSize:11, fontFamily:'var(--font-mono)' }}>
            <DashIcon name="download" size={12}/> Dışa Aktar
          </button>
        </div>
        <div style={{ overflowX:'auto' }}>
          <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12.5 }}>
            <thead>
              <tr style={{ background:'var(--surface)' }}>
                {['Makine Kodu','Makine / Ünite','Tip','⚡ Elektrik','🔥 Doğal Gaz','💧 Su','SEC (Spesifik)','Boşta İsraf'].map(h=>(
                  <th key={h} style={{ padding:'12px 14px', textAlign:'left', fontSize:10, fontFamily:'var(--font-mono)', color:'var(--text-muted)', letterSpacing:'0.04em', textTransform:'uppercase', borderBottom:'1px solid var(--border)', whiteSpace:'nowrap' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {MACHINES_DATA.map((m,i)=>(
                <tr key={m.id} style={{ borderBottom:i<MACHINES_DATA.length-1?'1px solid var(--surface-2)':'none' }}
                  onMouseEnter={e=>e.currentTarget.style.background='var(--surface)'}
                  onMouseLeave={e=>e.currentTarget.style.background=''}>
                  <td style={{ padding:'12px 14px', fontFamily:'var(--font-mono)', fontSize:11.5, color:'var(--accent)', fontWeight:600 }}>{m.id}</td>
                  <td style={{ padding:'12px 14px', fontWeight:500 }}>
                    {m.name}
                    <span style={{ display:'inline-block', marginLeft:8, width:6, height:6, borderRadius:'50%', background:m.status==='Aktif'?'var(--signal-ok)':m.status==='Kapalı'?'var(--text-muted)':'var(--signal-err)' }}/>
                  </td>
                  <td style={{ padding:'12px 14px', color:'var(--text-secondary)' }}>{m.type}</td>
                  <td style={{ padding:'12px 14px', fontFamily:'var(--font-mono)', fontSize:11, color:m.elec>0?'var(--text)':'var(--text-muted)' }}>{m.elec>0?`${m.elec.toLocaleString('tr-TR')} kWh`:'—'}</td>
                  <td style={{ padding:'12px 14px', fontFamily:'var(--font-mono)', fontSize:11, color:m.gas>0?'#D97706':'var(--text-muted)' }}>{m.gas>0?`${m.gas.toLocaleString('tr-TR')} Sm³`:'—'}</td>
                  <td style={{ padding:'12px 14px', fontFamily:'var(--font-mono)', fontSize:11, color:m.water>0?'#0EA5E9':'var(--text-muted)' }}>{m.water>0?`${m.water.toLocaleString('tr-TR')} m³`:'—'}</td>
                  <td style={{ padding:'12px 14px', fontFamily:'var(--font-mono)', fontSize:10 }}>
                    {[m.secElec,m.secGas,m.secWater].filter(s=>s!=='—').map((s,si)=>(
                      <div key={si} style={{ marginBottom:si<2?2:0 }}>{s}</div>
                    ))}
                    {m.secElec==='—'&&m.secGas==='—'&&m.secWater==='—'&&<span style={{ color:'var(--text-muted)' }}>—</span>}
                  </td>
                  <td style={{ padding:'12px 14px' }}>
                    {m.idle>0 ? (
                      <span style={{ fontSize:11, fontFamily:'var(--font-mono)', padding:'3px 8px', borderRadius:4, background:m.idle>1000?'rgba(142,58,58,0.1)':'rgba(160,122,46,0.1)', color:m.idle>1000?'var(--signal-err)':'var(--signal-warn)', border:`1px solid ${m.idle>1000?'rgba(142,58,58,0.2)':'rgba(160,122,46,0.2)'}` }}>
                        {m.idle} kWh
                      </span>
                    ) : <span style={{ fontSize:11, color:'var(--text-muted)' }}>Yok</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { PageMachines });