// ── ISO 50001 Raporlar — NEXOR · İzmir Ana Tesis · Tri-Utility ────────────

const ENPI_DATA = [
  { id:'EnPI-01', seu:'Doğal Gaz Fırınları',  metric:'Spesifik Gaz Tüketimi (SEC)', value:42.5, unit:'Sm³/ton', target:45.0, status:'ok', baseline:48.2, source:'gaz' },
  { id:'EnPI-02', seu:'Haddehane Motorları',   metric:'Elektrik Tüketim İndeksi',    value:115,  unit:'kWh/ton', target:110,  status:'warn', baseline:118, source:'elec' },
  { id:'EnPI-03', seu:'Kompresör Grubu',       metric:'Basınçlı Hava Maliyeti',      value:0.85, unit:'₺/m³',   target:0.80, status:'warn', baseline:0.92, source:'elec' },
  { id:'EnPI-04', seu:'Soğutma Kuleleri',      metric:'Su Tüketim İndeksi',          value:1.2,  unit:'m³/ton', target:1.5,  status:'ok', baseline:1.8, source:'su' },
  { id:'EnPI-05', seu:'Aydınlatma',            metric:'Aydınlatma Yoğunluğu',        value:12.4, unit:'W/m²',   target:15.0, status:'ok', baseline:18.5, source:'elec' },
  { id:'EnPI-06', seu:'Arıtma Tesisi',         metric:'Atık Su Geri Kazanım',        value:18.5, unit:'%',      target:20.0, status:'warn', baseline:12.0, source:'su' },
];

const SOURCE_BADGE = { elec:{label:'Elektrik',color:'var(--accent)'}, gaz:{label:'Doğal Gaz',color:'#D97706'}, su:{label:'Su',color:'#0EA5E9'} };

const SEU_DISTRIBUTION = [
  { name:'Fırın Grubu (Doğal Gaz)', percent:38, color:'#D97706', source:'gaz' },
  { name:'Haddehane Motorları (Elektrik)', percent:28, color:'var(--accent)', source:'elec' },
  { name:'Kompresörler (Elektrik)', percent:14, color:'var(--accent)', source:'elec' },
  { name:'Soğutma ve Pompalar (Elektrik+Su)', percent:12, color:'#0EA5E9', source:'su' },
  { name:'Aydınlatma ve Diğer', percent:5, color:'var(--text-muted)', source:'elec' },
  { name:'Su Arıtma ve Geri Kazanım', percent:3, color:'#0EA5E9', source:'su' },
];

const GHG_EMISSIONS = [
  { scope:'Kapsam 1', desc:'Doğrudan (Doğal Gaz Yakımı)', value:4250, unit:'tCO₂e', prev:4400 },
  { scope:'Kapsam 2', desc:'Dolaylı (Şebeke Elektriği)',   value:8120, unit:'tCO₂e', prev:8350 },
  { scope:'Toplam',   desc:'Tesis Karbon Ayak İzi',        value:12370,unit:'tCO₂e', prev:12750 },
];

const REPORT_LIST = [
  { id:'ISO-2026-05', name:'Aylık Enerji Gözden Geçirme Raporu', period:'Nisan 2026', size:'5.2 MB', status:'Hazır', type:'ISO 50001' },
  { id:'SEU-2026-Q1', name:'SEU Analizi (3 Kaynak)', period:'Q1 / 2026', size:'2.8 MB', status:'Hazır', type:'Analiz' },
  { id:'GHG-2026-Q1', name:'Sera Gazı Emisyon Raporu', period:'Q1 / 2026', size:'2.1 MB', status:'Hazır', type:'Çevre' },
  { id:'ENB-2026',    name:'EnB Güncellemesi (Tri-Utility)', period:'Yıllık 2026', size:'4.9 MB', status:'Hazır', type:'ISO 50001' },
  { id:'RPT-COST-Q1', name:'3 Kaynak Maliyet Karşılaştırma Raporu', period:'Q1 / 2026', size:'1.6 MB', status:'Hazır', type:'Enerji' },
];

const TYPE_COLORS = { Enerji:'var(--accent)', 'ISO 50001':'var(--signal-ok)', Analiz:'var(--signal-warn)', Çevre:'#10B981' };

const PageReports = ({ tweaks }) => {
  const r=tweaks.radius==='round'?14:tweaks.radius==='medium'?8:4;

  return (
    <div className="page-enter" style={{ display:'flex', flexDirection:'column', gap:20 }}>
      <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr', gap:20 }}>
        {/* EnPI 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 }}>Enerji Performans Göstergeleri (EnPI)</div>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text-muted)', marginTop:2 }}>3 kaynak bazında hedef ve referans izleme (ISO 50001)</div>
          </div>
          <div style={{ overflowX:'auto' }}>
            <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12 }}>
              <thead><tr style={{ background:'var(--surface)' }}>
                {['Gösterge','SEU','Kaynak','Referans','Hedef','Güncel','Durum'].map(h=>(
                  <th key={h} style={{ padding:'10px 14px', 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>
                {ENPI_DATA.map((row,i) => {
                  const scol=row.status==='ok'?'var(--signal-ok)':'var(--signal-warn)';
                  const sbg=row.status==='ok'?'rgba(74,123,78,0.08)':'rgba(160,122,46,0.08)';
                  const slabel=row.status==='ok'?'Hedefte':'Sınırda';
                  const src=SOURCE_BADGE[row.source];
                  return (
                    <tr key={row.id} style={{ borderBottom:i<ENPI_DATA.length-1?'1px solid var(--border)':'none' }}
                      onMouseEnter={e=>e.currentTarget.style.background='var(--surface)'}
                      onMouseLeave={e=>e.currentTarget.style.background=''}>
                      <td style={{ padding:'10px 14px', fontFamily:'var(--font-mono)', fontSize:11, color:'var(--accent)', fontWeight:500 }}>{row.id}</td>
                      <td style={{ padding:'10px 14px', fontWeight:500 }}>{row.seu}</td>
                      <td style={{ padding:'10px 14px' }}><span style={{ fontSize:9.5, fontFamily:'var(--font-mono)', padding:'2px 6px', borderRadius:3, background:`${src.color}14`, color:src.color, border:`1px solid ${src.color}22` }}>{src.label}</span></td>
                      <td style={{ padding:'10px 14px', fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-muted)' }}>{row.baseline} {row.unit}</td>
                      <td style={{ padding:'10px 14px', fontFamily:'var(--font-mono)', fontSize:11 }}>{row.target} {row.unit}</td>
                      <td style={{ padding:'10px 14px', fontFamily:'var(--font-mono)', fontSize:11, fontWeight:600 }}>{row.value} {row.unit}</td>
                      <td style={{ padding:'10px 14px' }}><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>

        {/* SEU Dağılımı */}
        <div style={{ background:'var(--bg-elevated)', border:'1px solid var(--border)', borderRadius:r, boxShadow:'var(--shadow-1)', display:'flex', flexDirection:'column' }}>
          <div style={{ padding:'13px 18px 11px', borderBottom:'1px solid var(--border)' }}>
            <div style={{ fontSize:13, fontWeight:500 }}>SEU Dağılımı (3 Kaynak)</div>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text-muted)', marginTop:2 }}>Tesis geneli enerji Pareto analizi</div>
          </div>
          <div style={{ padding:'16px 18px', flex:1, display:'flex', flexDirection:'column', justifyContent:'center', gap:10 }}>
            {SEU_DISTRIBUTION.map((seu,i) => (
              <div key={i}>
                <div style={{ display:'flex', justifyContent:'space-between', marginBottom:4 }}>
                  <span style={{ fontSize:11.5, color:'var(--text)' }}>{seu.name}</span>
                  <span style={{ fontFamily:'var(--font-mono)', fontSize:11, fontWeight:600, color:seu.color }}>%{seu.percent}</span>
                </div>
                <div style={{ height:6, background:'var(--surface-2)', borderRadius:3 }}>
                  <div style={{ width:`${seu.percent}%`, height:'100%', background:seu.color, borderRadius:3 }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* GHG */}
      <div style={{ background:'var(--bg-elevated)', border:'1px solid var(--border)', borderRadius:r, boxShadow:'var(--shadow-1)' }}>
        <div style={{ padding:'13px 18px 11px', borderBottom:'1px solid var(--border)' }}>
          <div style={{ fontSize:13, fontWeight:500 }}>Sera Gazı (GHG) Emisyon Raporu</div>
          <div style={{ fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text-muted)', marginTop:2 }}>Kapsam 1 (Doğal Gaz) ve Kapsam 2 (Elektrik) takibi</div>
        </div>
        <div style={{ padding:'16px 18px', display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16 }}>
          {GHG_EMISSIONS.map((ghg,i) => {
            const diff=ghg.value-ghg.prev; const pct=((diff/ghg.prev)*100).toFixed(1);
            return (
              <div key={i} style={{ padding:'12px 16px', background:'var(--surface)', borderRadius:r-4, border:'1px solid var(--border)' }}>
                <div style={{ fontSize:12.5, fontWeight:600, color:ghg.scope==='Toplam'?'var(--accent)':'var(--text)', marginBottom:4 }}>{ghg.scope}</div>
                <div style={{ fontSize:11, color:'var(--text-secondary)', marginBottom:8 }}>{ghg.desc}</div>
                <div style={{ fontFamily:'var(--font-mono)', fontSize:18, fontWeight:600, color:ghg.scope==='Toplam'?'var(--accent)':'var(--text)' }}>{ghg.value.toLocaleString('tr-TR')} <span style={{ fontSize:10, color:'var(--text-muted)' }}>{ghg.unit}</span></div>
                <div style={{ fontFamily:'var(--font-mono)', fontSize:10, color:'var(--signal-ok)', marginTop:4 }}>{pct}% vs geçen yıl</div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Rapor arşivi */}
      <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)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div>
            <div style={{ fontSize:13, fontWeight:500 }}>Sistem Rapor Arşivi</div>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text-muted)', marginTop:2 }}>YGG, iç denetim ve periyodik raporlar</div>
          </div>
          <button style={{ display:'flex', alignItems:'center', gap:6, padding:'6px 12px', background:'var(--accent)', color:'var(--accent-fg)', border:0, borderRadius:r-4, cursor:'pointer', fontSize:12, fontWeight:500 }}><DashIcon name="plus" size={13} color="white"/>Yeni Rapor</button>
        </div>
        <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12.5 }}>
          <thead><tr style={{ background:'var(--surface)' }}>
            {['Referans','Doküman Adı','Dönem','Tür','Boyut',''].map(h=>(
              <th key={h} style={{ padding:'8px 14px', textAlign:'left', fontSize:9.5, fontFamily:'var(--font-mono)', color:'var(--text-muted)', letterSpacing:'0.04em', textTransform:'uppercase', borderBottom:'1px solid var(--border)' }}>{h}</th>
            ))}
          </tr></thead>
          <tbody>
            {REPORT_LIST.map((rep,i)=>(
              <tr key={rep.id} style={{ borderBottom:i<REPORT_LIST.length-1?'1px solid var(--border)':'none', cursor:'pointer' }}
                onMouseEnter={e=>e.currentTarget.style.background='var(--surface)'}
                onMouseLeave={e=>e.currentTarget.style.background=''}>
                <td style={{ padding:'10px 14px', fontFamily:'var(--font-mono)', fontSize:11, color:'var(--accent)' }}>{rep.id}</td>
                <td style={{ padding:'10px 14px', fontWeight:500 }}>{rep.name}</td>
                <td style={{ padding:'10px 14px', fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-muted)' }}>{rep.period}</td>
                <td style={{ padding:'10px 14px' }}><span style={{ fontSize:10, fontFamily:'var(--font-mono)', padding:'1px 6px', borderRadius:3, background:'var(--surface)', border:'1px solid var(--border)', color:TYPE_COLORS[rep.type]||'var(--text-muted)' }}>{rep.type}</span></td>
                <td style={{ padding:'10px 14px', fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-muted)' }}>{rep.size}</td>
                <td style={{ padding:'10px 14px', textAlign:'right' }}><button style={{ display:'flex', alignItems:'center', gap:4, padding:'4px 10px', border:'1px solid var(--border)', borderRadius:3, background:'var(--bg-elevated)', color:'var(--text-secondary)', fontSize:11, cursor:'pointer' }}><DashIcon name="download" size={12}/>İndir</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

Object.assign(window, { PageReports });