// ── Maliyet Analizi — NEXOR · İzmir Ana Tesis · Tri-Utility ───────

const COST_DAILY_ELEC = [14200,15100,16800,14900,17200,18400,17800,16900,15800,18900,17600,16200,15100,18450];
const COST_DAILY_GAS  = [3200,3400,3800,3350,3900,4100,3950,3700,3500,4200,3900,3600,3350,4050];
const COST_DAILY_WATER= [820,870,960,840,990,1020,920,890,820,1010,960,860,830,1050];
const COST_LABELS = ['18 Nis','19 Nis','20 Nis','21 Nis','22 Nis','23 Nis','24 Nis','25 Nis','26 Nis','27 Nis','28 Nis','29 Nis','30 Nis','01 May'];

const DEPT_COSTS = [
  { id:'D-01', name:'Üretim Alanı (Hat 1-2)',  elec:42100, gas:18200, water:2400, total:62700, status:'warn' },
  { id:'D-02', name:'Fırın Grubu ve Isıl',     elec:24800, gas:14500, water:800,  total:40100, status:'err' },
  { id:'D-03', name:'Kompresörler ve Hava',    elec:28400, gas:0,     water:1200, total:29600, status:'ok' },
  { id:'D-04', name:'Soğutma ve Pompalar',     elec:8200,  gas:0,     water:5400, total:13600, status:'ok' },
  { id:'D-05', name:'Aydınlatma / Ofisler',    elec:5400,  gas:1200,  water:800,  total:7400,  status:'ok' },
];

function CostTrendChart({ W=740, H=180, PL=44, PR=14, PT=10, PB=26 }) {
  const cW=W-PL-PR, cH=H-PT-PB, n=COST_LABELS.length;
  const max=22000;
  function mkLine(vals,col){ const pts=vals.map((v,i)=>({x:PL+(i/(n-1))*cW,y:PT+cH-(v/max)*cH})); return pts.map((p,i)=>`${i===0?'M':'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' '); }
  const elecLine=mkLine(COST_DAILY_ELEC); const gasLine=mkLine(COST_DAILY_GAS); const waterLine=mkLine(COST_DAILY_WATER);
  const gridYs=[0,0.33,0.67,1].map(t=>PT+cH-t*cH);
  return (
    <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ display:'block' }}>
      {gridYs.map((y,i)=>(<g key={i}><line x1={PL} y1={y} x2={W-PR} y2={y} stroke="var(--border)" strokeWidth="0.5" strokeDasharray="2 3"/><text x={PL-4} y={y+4} fontSize="8.5" fill="var(--text-muted)" textAnchor="end" fontFamily="var(--font-mono)">₺{Math.round((1-i/3)*max/1000)}k</text></g>))}
      <path d={elecLine} fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      <path d={gasLine} fill="none" stroke="#D97706" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4 3" opacity="0.85"/>
      <path d={waterLine} fill="none" stroke="#0EA5E9" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="2 2" opacity="0.8"/>
      {COST_LABELS.map((l,i)=>i%2===0&&(<text key={i} x={PL+(i/(n-1))*cW} y={H-5} fontSize="8.5" fill="var(--text-muted)" textAnchor="middle" fontFamily="var(--font-mono)">{l}</text>))}
    </svg>
  );
}

const PageCost = ({ tweaks }) => {
  const r=tweaks.radius==='round'?14:tweaks.radius==='medium'?8:4;
  const totalElec=166400, totalGas=36850, totalWater=11550, totalAll=totalElec+totalGas+totalWater;

  return (
    <div className="page-enter" style={{ display:'flex', flexDirection:'column', gap:20 }}>
      {/* 4'lü özet */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:10 }}>
        {[
          { label:'Elektrik Maliyeti', value:`₺${totalElec.toLocaleString('tr-TR')}`, color:'var(--accent)', icon:'⚡' },
          { label:'Doğal Gaz Maliyeti', value:`₺${totalGas.toLocaleString('tr-TR')}`, color:'#D97706', icon:'🔥' },
          { label:'Su Maliyeti', value:`₺${totalWater.toLocaleString('tr-TR')}`, color:'#0EA5E9', icon:'💧' },
          { label:'Toplam Enerji Maliyeti', value:`₺${totalAll.toLocaleString('tr-TR')}`, color:'var(--signal-warn)', icon:'📊' },
        ].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:8 }}>{s.label}</div>
            <div style={{ fontSize:22, fontWeight:600, letterSpacing:'-0.02em', color:s.color }}>{s.value}</div>
          </div>
        ))}
      </div>

      {/* Trend */}
      <div style={{ background:'var(--bg-elevated)', border:'1px solid var(--border)', borderRadius:r, boxShadow:'var(--shadow-1)', overflow:'hidden' }}>
        <div style={{ padding:'13px 18px 0', borderBottom:'1px solid var(--border)' }}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', paddingBottom:12 }}>
            <div>
              <div style={{ fontSize:13, fontWeight:500 }}>Kaynak Bazlı Maliyet Trendi</div>
              <div style={{ fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text-muted)', marginTop:2 }}>İzmir Ana Tesis · Günlük (TL)</div>
            </div>
            <div style={{ display:'flex', gap:12 }}>
              {[{l:'Elektrik',c:'var(--accent)'},{l:'Doğal Gaz',c:'#D97706'},{l:'Su',c:'#0EA5E9'}].map(x=>(
                <div key={x.l} style={{ display:'flex', alignItems:'center', gap:4, fontSize:11, color:'var(--text-secondary)' }}><div style={{ width:10, height:3, background:x.c, borderRadius:2 }}/><span>{x.l}</span></div>
              ))}
            </div>
          </div>
        </div>
        <div style={{ padding:'12px 0 0' }}><CostTrendChart/></div>
      </div>

      {/* Departman tablosu */}
      <div style={{ background:'var(--bg-elevated)', border:'1px solid var(--border)', borderRadius:r, boxShadow:'var(--shadow-1)', overflow:'hidden' }}>
        <div style={{ padding:'13px 18px 11px', borderBottom:'1px solid var(--border)' }}>
          <div style={{ fontSize:13, fontWeight:500 }}>Departman Bazlı Maliyet Kırılımı (3 Kaynak)</div>
          <div style={{ fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text-muted)', marginTop:2 }}>Aylık bazda gerçekleşen toplam maliyetlerin kaynak ve bölge analizi</div>
        </div>
        <div style={{ overflowX:'auto' }}>
          <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12 }}>
            <thead>
              <tr style={{ background:'var(--surface)' }}>
                {['Kod','Departman','⚡ Elektrik (TL)','🔥 Doğal Gaz (TL)','💧 Su (TL)','Toplam (TL)','Durum'].map(h=>(
                  <th key={h} style={{ padding:'8px 10px', textAlign:'left', fontSize:9.5, 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>
              {DEPT_COSTS.map((d,i)=>{
                const scol=d.status==='ok'?'var(--signal-ok)':d.status==='warn'?'var(--signal-warn)':'var(--signal-err)';
                const sbg=d.status==='ok'?'rgba(74,123,78,0.08)':d.status==='warn'?'rgba(160,122,46,0.08)':'rgba(142,58,58,0.08)';
                const slabel=d.status==='ok'?'Bütçe İçi':d.status==='warn'?'Sınırda':'Aşıldı';
                return (
                  <tr key={d.id} style={{ borderBottom:i<DEPT_COSTS.length-1?'1px solid var(--border)':'none' }}
                    onMouseEnter={e=>e.currentTarget.style.background='var(--surface)'}
                    onMouseLeave={e=>e.currentTarget.style.background=''}>
                    <td style={{ padding:'9px 10px', fontFamily:'var(--font-mono)', fontSize:11, color:'var(--accent)', fontWeight:500 }}>{d.id}</td>
                    <td style={{ padding:'9px 10px', fontSize:12.5 }}>{d.name}</td>
                    <td style={{ padding:'9px 10px', fontFamily:'var(--font-mono)', fontSize:11 }}>₺{d.elec.toLocaleString('tr-TR')}</td>
                    <td style={{ padding:'9px 10px', fontFamily:'var(--font-mono)', fontSize:11, color:d.gas>0?'#D97706':'var(--text-muted)' }}>{d.gas>0?`₺${d.gas.toLocaleString('tr-TR')}`:'—'}</td>
                    <td style={{ padding:'9px 10px', fontFamily:'var(--font-mono)', fontSize:11, color:d.water>0?'#0EA5E9':'var(--text-muted)' }}>{d.water>0?`₺${d.water.toLocaleString('tr-TR')}`:'—'}</td>
                    <td style={{ padding:'9px 10px', fontFamily:'var(--font-mono)', fontSize:11, fontWeight:600 }}>₺{d.total.toLocaleString('tr-TR')}</td>
                    <td style={{ padding:'9px 10px' }}><span style={{ fontSize:9.5, fontFamily:'var(--font-mono)', padding:'2px 6px', borderRadius:3, background:sbg, color:scol, border:`1px solid ${scol}22`, textTransform:'uppercase' }}>{slabel}</span></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { PageCost });