// ── Güç Kalitesi Sayfası — NEXOR · İzmir Ana Tesis ───────────────

const DAILY_THD_DATA = [3.2, 3.5, 4.1, 3.8, 4.5, 5.1, 4.6, 4.2, 3.8, 5.5, 4.8, 4.0, 3.5, 4.2];
const DAILY_LABELS_THD = ['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 POWER_QUALITY_METERS = [
  { id:'PQ-001', name:'Ana Dağıtım Şebekesi',    flow: '399 V', press: '49.98 Hz', m3: 3.2,  source: 'Ana Hat', status:'ok' },
  { id:'PQ-002', name:'Kompresörler ve Sürücüler',flow: '397 V', press: '49.95 Hz', m3: 7.8,  source: 'Harmonik', status:'warn' },
  { id:'PQ-003', name:'Fırın Grubu Trafosu',      flow: '402 V', press: '50.01 Hz', m3: 12.5, source: 'Reaktif', status:'err' },
  { id:'PQ-004', name:'Aydınlatma / Ofisler',     flow: '230 V', press: '50.00 Hz', m3: 1.5,  source: 'Temiz', status:'ok'},
];

function MiniLineChartWater({ vals, labels, color, W=560, H=140, PL=44, PR=14, PT=10, PB=24 }) {
  const cW=W-PL-PR, cH=H-PT-PB;
  const max=Math.max(...vals)*1.08;
  const pts=vals.map((v,i)=>({ x:PL+(i/(vals.length-1))*cW, y:PT+cH-(v/max)*cH }));
  const line=pts.map((p,i)=>`${i===0?'M':'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
  const area=`${line} L${pts[pts.length-1].x},${PT+cH} L${pts[0].x},${PT+cH} Z`;
  const gridYs=[0,0.33,0.67,1].map(t=>PT+cH-t*cH);
  const step=Math.ceil(vals.length/7);
  const gradId=`fill-water-${color.replace(/[^a-z0-9]/gi,'')}`;
  return (
    <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ display:'block' }}>
      <defs><linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor={color} stopOpacity="0.14"/><stop offset="100%" stopColor={color} stopOpacity="0"/></linearGradient></defs>
      {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)}</text>
        </g>
      ))}
      <path d={area} fill={`url(#${gradId})`}/>
      <path d={line} fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
      {vals.map((v,i)=> i%step===0 && (
        <text key={i} x={PL+(i/(vals.length-1))*cW} y={H-5} fontSize="8.5" fill="var(--text-muted)" textAnchor="middle" fontFamily="var(--font-mono)">{labels[i]}</text>
      ))}
    </svg>
  );
}

function SectionCardWater({ title, sub, children, tweaks, action }) {
  const r=tweaks.radius==='round'?14:tweaks.radius==='medium'?8:4;
  return (
    <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', alignItems:'center', justifyContent:'space-between' }}>
        <div>
          <div style={{ fontSize:13, fontWeight:500, letterSpacing:'-0.01em' }}>{title}</div>
          {sub && <div style={{ fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text-muted)', marginTop:2 }}>{sub}</div>}
        </div>
        {action}
      </div>
      <div style={{ padding:'14px 18px' }}>{children}</div>
    </div>
  );
}

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

  const summaryStats = [
    { label:'Ortalama Gerilim',     value:'399',    unit:'V',    color:'var(--accent)' },
    { label:'Şebeke Frekansı',      value:'49.98',  unit:'Hz',      color:'var(--signal-ok)' },
    { label:'Ort. THD-I (Akım)',    value:'%4.5',   unit:'',  color:'var(--signal-warn)' },
    { label:'Ort. THD-V (Gerilim)', value:'%1.2',   unit:'',   color:'var(--text)' },
    { label:'Gerilim Dengesizliği', value:'%0.8',   unit:'',      color:'var(--signal-ok)' },
    { label:'Harmonik Sınır Aşımı', value:'2',      unit:'Kez',   color:'var(--signal-err)' },
  ];

  return (
    <div className="page-enter" style={{ display:'flex', flexDirection:'column', gap:20 }}>
      {/* Özet şerit */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(6,1fr)', gap:10 }}>
        {summaryStats.map((s,i)=>(
          <div key={i} style={{ background:'var(--bg-elevated)', border:'1px solid var(--border)', borderRadius:r, padding:'12px 14px', boxShadow:'var(--shadow-1)' }}>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:9, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:6 }}>{s.label}</div>
            <div style={{ fontSize:20, fontWeight:600, letterSpacing:'-0.03em', color:'var(--text)', display:'flex', alignItems:'baseline', gap:3 }}>
              {s.value}{s.unit&&<span style={{ fontSize:10, color:'var(--text-muted)', fontWeight:400 }}> {s.unit}</span>}
            </div>
          </div>
        ))}
      </div>

      {/* Trend grafiği */}
      <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 }}>Toplam Harmonik Bozulma (THD-I) Trendi</div>
              <div style={{ fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text-muted)', marginTop:2 }}>İzmir Ana Tesis · Günlük Ortalama (%)</div>
            </div>
          </div>
        </div>
        <div style={{ padding:'12px 0 0' }}>
          <MiniLineChartWater vals={DAILY_THD_DATA} labels={DAILY_LABELS_THD} color="#8B5CF6" W={740} H={180} PL={44} PR={14} PT={10} PB={26}/>
        </div>
      </div>

      {/* Sayaçlar */}
      <SectionCardWater title="Güç Kalitesi Analizörleri" sub="Hat bazında anlık kalite ölçümleri ve limit ihlalleri" tweaks={tweaks}>
        <div style={{ overflowX:'auto' }}>
          <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12 }}>
            <thead>
              <tr style={{ background:'var(--surface)' }}>
                {['Analizör Noktası','Hat / Bölge','Karakter','Gerilim (V)','Frekans (Hz)','THD-I (%)','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>
              {POWER_QUALITY_METERS.map((m,i)=>{
                const scol=m.status==='ok'?'var(--signal-ok)':m.status==='warn'?'var(--signal-warn)':'var(--signal-err)';
                const sbg=m.status==='ok'?'rgba(74,123,78,0.08)':m.status==='warn'?'rgba(160,122,46,0.08)':'rgba(142,58,58,0.08)';
                const slabel=m.status==='ok'?'Temiz':m.status==='warn'?'Riskli Seviye':'Limit Aşıldı';
                return (
                  <tr key={m.id} style={{ borderBottom:i<POWER_QUALITY_METERS.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:'#8B5CF6', fontWeight:500 }}>{m.id}</td>
                    <td style={{ padding:'9px 10px', fontSize:12.5 }}>{m.name}</td>
                    <td style={{ padding:'9px 10px' }}><span style={{ fontSize:10, fontFamily:'var(--font-mono)', padding:'1px 6px', borderRadius:3, background:'var(--surface)', border:'1px solid var(--border)', color:'var(--text-secondary)' }}>{m.source}</span></td>
                    <td style={{ padding:'9px 10px', fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-secondary)' }}>{m.flow}</td>
                    <td style={{ padding:'9px 10px', fontFamily:'var(--font-mono)', fontSize:11, fontWeight:500 }}>{m.press}</td>
                    <td style={{ padding:'9px 10px', fontFamily:'var(--font-mono)', fontSize:11 }}>% {m.m3}</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>
      </SectionCardWater>
    </div>
  );
};

Object.assign(window, { PagePower });