// ── Bildirimler Sayfası — NEXOR · İzmir Ana Tesis ──────────────────────────

const ALL_NOTIFICATIONS = [
  { id:'n1', type:'info',    title:'Aylık enerji maliyeti tahmini güncellendi', desc:'Mayıs ayı için öngörülen toplam maliyet 612.000 TL olarak revize edilmiştir.', time:'10 dk önce', date:'Bugün' },
  { id:'n2', type:'report',  title:'Yeni güç kalitesi raporu hazır', desc:'Nisan ayı detaylı harmonik ve güç faktörü raporunuz oluşturuldu. Raporlar sekmesinden indirebilirsiniz.', time:'45 dk önce', date:'Bugün' },
  { id:'n3', type:'system',  title:'Sayaç MTR-002 yazılım durumu kontrol edildi', desc:'Üretim Alanı A panosuna ait analizörün firmware güncellemesi başarıyla tamamlandı.', time:'2 saat önce', date:'Bugün' },
  { id:'n4', type:'ai',      title:'AI hafta sonu tüketiminde olağandışı desen tespit etti', desc:'Geçtiğimiz pazar günü, normal hafta sonu baz tüketiminin %15 üzerinde bir enerji harcaması kaydedildi.', time:'Dün 14:30', date:'Dün' },
  { id:'n5', type:'info',    title:'Zamanlanmış rapor enerji yöneticisine gönderildi', desc:'Günlük özet enerji raporu kayıtlı e-posta adresine başarıyla iletildi.', time:'Dün 08:00', date:'Dün' },
  { id:'n6', type:'system',  title:'Veritabanı yedekleme işlemi tamamlandı', desc:'Tüm sensör ve sayaç verilerinin haftalık yedeği bulut sunucularına aktarıldı.', time:'Dün 03:00', date:'Dün' },
];

const TYPE_META = {
  info:   { icon:'info',     color:'var(--accent)',       label:'Bilgi' },
  report: { icon:'file',     color:'var(--signal-ok)',    label:'Rapor' },
  system: { icon:'server',   color:'var(--text-muted)',   label:'Sistem' },
  ai:     { icon:'cpu',      color:'var(--signal-warn)',  label:'AI Zeka' },
};

const PageNotifications = ({ 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={{ background:'var(--bg-elevated)', border:'1px solid var(--border)', borderRadius:r, boxShadow:'var(--shadow-1)', overflow:'hidden' }}>
        <div style={{ padding:'14px 20px', borderBottom:'1px solid var(--border)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div>
            <div style={{ fontSize:14, fontWeight:600 }}>Tüm Bildirimler</div>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text-muted)', marginTop:2 }}>Sistem güncellemeleri, rapor uyarıları ve içgörüler</div>
          </div>
          <button style={{ fontSize:11, fontFamily:'var(--font-mono)', padding:'4px 10px', borderRadius:4, background:'var(--surface)', border:'1px solid var(--border)', color:'var(--text-secondary)', cursor:'pointer' }}>Tümünü Okundu İşaretle</button>
        </div>
        <div>
          {ALL_NOTIFICATIONS.map((notif,i)=>{
            const meta = TYPE_META[notif.type];
            return (
              <div key={notif.id} style={{ display:'flex', gap:16, padding:'16px 20px', borderBottom:i<ALL_NOTIFICATIONS.length-1?'1px solid var(--surface-2)':'none', transition:'background 150ms', cursor:'pointer' }}
                   onMouseEnter={e=>e.currentTarget.style.background='var(--surface)'}
                   onMouseLeave={e=>e.currentTarget.style.background=''}>
                
                <div style={{ width:8, height:8, borderRadius:'50%', background:meta.color, marginTop:6 }} />
                
                <div style={{ flex:1 }}>
                  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:6 }}>
                    <div style={{ fontSize:13.5, fontWeight:500, color:'var(--text)' }}>{notif.title}</div>
                    <div style={{ fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text-muted)', whiteSpace:'nowrap' }}>{notif.time}</div>
                  </div>
                  <div style={{ fontSize:12.5, color:'var(--text-secondary)', lineHeight:1.5 }}>
                    {notif.desc}
                  </div>
                  <div style={{ marginTop:8 }}>
                     <span style={{ fontSize:9.5, fontFamily:'var(--font-mono)', padding:'2px 6px', borderRadius:3, background:'var(--surface-2)', color:'var(--text-muted)' }}>{meta.label}</span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { PageNotifications });