// ── Panolar ve Sayaçlar Sayfası — NEXOR · İzmir Ana Tesis · Elektrik / Doğal Gaz / Su ──

const METERS_DETAIL = [
  // Elektrik Panoları
  { id:'MTR-01', name:'Ana Dağıtım Panosu',  source:'Elektrik', type:'Ana Pano',    status:'Bağlı', measure:'1.682 kW',   measureMax:'2.000 kW', daily:'14.380 kWh', temp:42, alarms:0 },
  { id:'MTR-02', name:'Üretim Alanı A',      source:'Elektrik', type:'Tali Pano',   status:'Bağlı', measure:'1.294 kW',   measureMax:'1.800 kW', daily:'12.200 kWh', temp:38, alarms:0 },
  { id:'MTR-03', name:'Üretim Alanı B',      source:'Elektrik', type:'Tali Pano',   status:'Bağlı', measure:'640 kW',     measureMax:'900 kW',   daily:'6.200 kWh',  temp:45, alarms:0 },
  { id:'MTR-04', name:'Kompresör Odası',     source:'Elektrik', type:'Güç Panosu',  status:'Uyarı', measure:'720 kW',     measureMax:'900 kW',   daily:'7.100 kWh',  temp:54, alarms:2 },
  { id:'MTR-05', name:'Aydınlatma & HVAC',   source:'Elektrik', type:'Yardımcı',    status:'Bağlı', measure:'110 kW',     measureMax:'300 kW',   daily:'1.520 kWh',  temp:24, alarms:0 },
  // Doğal Gaz Sayaçları
  { id:'GAZ-01', name:'Ana Giriş RMS İstasyonu', source:'Doğal Gaz', type:'Ana Sayaç',  status:'Bağlı', measure:'185 Sm³/h', measureMax:'300 Sm³/h', daily:'4.210 Sm³', temp:14, alarms:0 },
  { id:'GAZ-02', name:'Kütük Isıtma Fırını 1',   source:'Doğal Gaz', type:'Hat Sayacı', status:'Bağlı', measure:'110 Sm³/h', measureMax:'180 Sm³/h', daily:'2.450 Sm³', temp:22, alarms:0 },
  { id:'GAZ-03', name:'Kütük Isıtma Fırını 2',   source:'Doğal Gaz', type:'Hat Sayacı', status:'Bağlı', measure:'65 Sm³/h',  measureMax:'180 Sm³/h', daily:'1.480 Sm³', temp:24, alarms:0 },
  { id:'GAZ-04', name:'Isıl İşlem Fırını',        source:'Doğal Gaz', type:'Hat Sayacı', status:'Uyarı', measure:'10 Sm³/h',  measureMax:'40 Sm³/h',  daily:'280 Sm³',   temp:18, alarms:1 },
  // Su Sayaçları
  { id:'SU-01',  name:'Şebeke Ana Girişi',         source:'Su', type:'Ana Sayaç',   status:'Bağlı', measure:'21.5 m³/h', measureMax:'50 m³/h',  daily:'525 m³',    temp:16, alarms:0 },
  { id:'SU-02',  name:'Soğutma Kuleleri Besleme',  source:'Su', type:'Hat Sayacı',  status:'Bağlı', measure:'14.2 m³/h', measureMax:'30 m³/h',  daily:'340 m³',    temp:28, alarms:0 },
  { id:'SU-03',  name:'Arıtma Tesisi Girişi',      source:'Su', type:'Atık Su',     status:'Bağlı', measure:'6.8 m³/h',  measureMax:'15 m³/h',  daily:'165 m³',    temp:22, alarms:0 },
  { id:'SU-04',  name:'Sosyal Tesisler',            source:'Su', type:'Yardımcı',    status:'Pasif', measure:'0.5 m³/h',  measureMax:'5 m³/h',   daily:'20 m³',     temp:18, alarms:0 },
];

const SOURCE_META = {
  'Elektrik':  { color:'var(--accent)', icon:'⚡' },
  'Doğal Gaz': { color:'#D97706',      icon:'🔥' },
  'Su':        { color:'#0EA5E9',       icon:'💧' },
};

const SM_TR = {
  'Bağlı':     { color:'var(--signal-ok)',   bg:'rgba(74,123,78,0.09)'   },
  'Pasif':     { color:'var(--signal-warn)', bg:'rgba(160,122,46,0.09)'  },
  'Çevrimdışı':{ color:'var(--text-muted)',  bg:'rgba(138,138,132,0.10)' },
  'Uyarı':     { color:'var(--signal-err)',  bg:'rgba(142,58,58,0.09)'   },
};

function MeterDetailCard({ m, tweaks, selected, onSelect }) {
  const s=SM_TR[m.status];
  const src=SOURCE_META[m.source];
  const r=tweaks.radius==='round'?12:tweaks.radius==='medium'?7:4;

  return (
    <div onClick={()=>onSelect(selected?null:m.id)}
      style={{ background:'var(--bg-elevated)', border:`1px solid ${selected?src.color:'var(--border)'}`, borderRadius:r, padding:'14px 16px', cursor:'pointer', boxShadow:selected?'var(--shadow-2)':'var(--shadow-1)', transition:'all 160ms', position:'relative', overflow:'hidden' }}>
      <div style={{ position:'absolute', left:0, top:0, bottom:0, width:3, background:src.color, borderRadius:`${r}px 0 0 ${r}px` }}/>
      <div style={{ paddingLeft:8 }}>
        <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', marginBottom:10 }}>
          <div>
            <div style={{ fontSize:12.5, fontWeight:600, letterSpacing:'-0.01em', lineHeight:1.3 }}>{m.name}</div>
            <div style={{ display:'flex', gap:6, marginTop:4, alignItems:'center' }}>
              <span style={{ fontSize:9, fontFamily:'var(--font-mono)', padding:'1px 5px', borderRadius:3, background:`${src.color}14`, color:src.color, border:`1px solid ${src.color}22` }}>{m.source}</span>
              <span style={{ fontFamily:'var(--font-mono)', fontSize:9, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.04em' }}>{m.type}</span>
            </div>
          </div>
          <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-end', gap:4 }}>
            <span style={{ fontSize:9.5, fontFamily:'var(--font-mono)', padding:'2px 6px', borderRadius:3, background:s.bg, color:s.color, border:`1px solid ${s.color}22`, textTransform:'uppercase' }}>{m.status}</span>
            {m.alarms>0&&<span style={{ fontSize:9.5, fontFamily:'var(--font-mono)', padding:'1px 5px', borderRadius:3, background:'rgba(142,58,58,0.1)', color:'var(--signal-err)', border:'1px solid rgba(142,58,58,0.2)' }}>{m.alarms} alarm</span>}
          </div>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
          <div>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:9, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.04em', marginBottom:2 }}>Anlık Ölçüm</div>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:13, fontWeight:600, color:src.color }}>{m.measure}</div>
          </div>
          <div>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:9, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.04em', marginBottom:2 }}>Günlük Toplam</div>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:13, fontWeight:600, color:'var(--text)' }}>{m.daily}</div>
          </div>
        </div>

        <div style={{ marginTop:10, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div style={{ fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text-muted)' }}>Maks: {m.measureMax}</div>
          <div style={{ fontFamily:'var(--font-mono)', fontSize:10, color:m.temp>50?'var(--signal-warn)':'var(--text-muted)' }}>{m.temp}°C</div>
        </div>
      </div>
    </div>
  );
}

const PageMeters = ({ tweaks }) => {
  const [selectedId, setSelectedId] = React.useState(null);
  const [filter, setFilter] = React.useState('Tümü');
  const [sourceFilter, setSourceFilter] = React.useState('Tümü');
  const r=tweaks.radius==='round'?14:tweaks.radius==='medium'?8:4;

  const statusCounts={'Tümü':METERS_DETAIL.length,'Bağlı':0,'Pasif':0,'Uyarı':0,'Çevrimdışı':0};
  METERS_DETAIL.forEach(m=>statusCounts[m.status]++);

  let filtered=filter==='Tümü'?METERS_DETAIL:METERS_DETAIL.filter(m=>m.status===filter);
  if(sourceFilter!=='Tümü') filtered=filtered.filter(m=>m.source===sourceFilter);

  const selected=METERS_DETAIL.find(m=>m.id===selectedId);

  return (
    <div className="page-enter" style={{ display:'flex', flexDirection:'column', gap:20 }}>
      {/* Kaynak filtre tabları */}
      <div style={{ display:'flex', gap:4, background:'var(--surface)', border:'1px solid var(--border)', borderRadius:r, padding:3, width:'fit-content' }}>
        {['Tümü','Elektrik','Doğal Gaz','Su'].map(src=>{
          const active=sourceFilter===src;
          const col=src==='Tümü'?'var(--text)':SOURCE_META[src]?.color||'var(--text)';
          return (
            <button key={src} onClick={()=>setSourceFilter(src)} style={{ padding:'7px 16px', borderRadius:r-2, border:0, fontSize:12, fontWeight:active?600:400, cursor:'pointer', background:active?'var(--bg-elevated)':'transparent', color:active?col:'var(--text-muted)', boxShadow:active?'var(--shadow-1)':'none', transition:'all 140ms', fontFamily:'var(--font-sans)', display:'flex', alignItems:'center', gap:5 }}>
              {src!=='Tümü'&&<div style={{ width:7, height:7, borderRadius:'50%', background:SOURCE_META[src]?.color, opacity:active?1:0.4 }}/>}
              {src} ({src==='Tümü'?METERS_DETAIL.length:METERS_DETAIL.filter(m=>m.source===src).length})
            </button>
          );
        })}
      </div>

      {/* Durum filtreleri */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:10 }}>
        {Object.entries(statusCounts).map(([k,v])=>{
          const col=k==='Bağlı'?'var(--signal-ok)':k==='Uyarı'?'var(--signal-err)':k==='Pasif'?'var(--signal-warn)':k==='Çevrimdışı'?'var(--text-muted)':'var(--accent)';
          return (
            <button key={k} onClick={()=>setFilter(k)} style={{ background:filter===k?'var(--accent-weak)':'var(--bg-elevated)', border:`1px solid ${filter===k?'var(--accent)':'var(--border)'}`, borderRadius:r, padding:'11px 14px', cursor:'pointer', textAlign:'left', transition:'all 140ms' }}>
              <div style={{ fontFamily:'var(--font-mono)', fontSize:9, color:filter===k?'var(--accent)':'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:5 }}>{k}</div>
              <div style={{ fontSize:22, fontWeight:600, letterSpacing:'-0.03em', color:filter===k?'var(--accent)':'var(--text)' }}>{v}</div>
              {k!=='Tümü'&&<div style={{ marginTop:6, height:3, background:'var(--surface-2)', borderRadius:2 }}><div style={{ width:`${(v/METERS_DETAIL.length)*100}%`, height:'100%', borderRadius:2, background:col, opacity:0.7 }}/></div>}
            </button>
          );
        })}
      </div>

      {/* Kartlar + Detay paneli */}
      <div style={{ display:'grid', gridTemplateColumns:selected?'1fr 320px':'1fr', gap:14, alignItems:'start' }}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))', gap:10 }}>
          {filtered.map(m=><MeterDetailCard key={m.id} m={m} tweaks={tweaks} selected={selectedId===m.id} onSelect={setSelectedId}/>)}
        </div>

        {selected && (
          <div style={{ background:'var(--bg-elevated)', border:`1px solid ${SOURCE_META[selected.source].color}`, borderRadius:r, boxShadow:'var(--shadow-2)', overflow:'hidden', position:'sticky', top:20 }}>
            <div style={{ padding:'13px 16px 11px', borderBottom:'1px solid var(--border)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <div>
                <div style={{ fontSize:13, fontWeight:600 }}>{selected.name}</div>
                <span style={{ fontSize:9, fontFamily:'var(--font-mono)', padding:'1px 5px', borderRadius:3, background:`${SOURCE_META[selected.source].color}14`, color:SOURCE_META[selected.source].color, border:`1px solid ${SOURCE_META[selected.source].color}22` }}>{selected.source}</span>
              </div>
              <button onClick={()=>setSelectedId(null)} style={{ background:'none', border:0, cursor:'pointer', color:'var(--text-muted)', padding:4 }}><DashIcon name="close" size={13}/></button>
            </div>
            <div style={{ padding:'14px 16px', display:'flex', flexDirection:'column', gap:12 }}>
              {[
                { label:'Durum',          value:selected.status, color:SM_TR[selected.status].color },
                { label:'Kaynak Tipi',    value:selected.source, color:SOURCE_META[selected.source].color },
                { label:'Ekipman Tipi',   value:selected.type },
                { label:'Anlık Ölçüm',   value:selected.measure, color:SOURCE_META[selected.source].color },
                { label:'Günlük Toplam',  value:selected.daily },
                { label:'Maksimum Kapasite', value:selected.measureMax },
                { label:'Sıcaklık',       value:`${selected.temp}°C`, color:selected.temp>50?'var(--signal-warn)':undefined },
                { label:'Aktif Alarm',    value:selected.alarms>0?`${selected.alarms} adet`:'Yok', color:selected.alarms>0?'var(--signal-err)':undefined },
              ].map((row,i)=>(
                <div key={i} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', paddingBottom:'10px', borderBottom:i<7?'1px solid var(--border)':'none' }}>
                  <span style={{ fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.04em' }}>{row.label}</span>
                  <span style={{ fontFamily:'var(--font-mono)', fontSize:11.5, fontWeight:500, color:row.color||'var(--text)' }}>{row.value}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { PageMeters });