// Makine Kartları, Alarmlar, YZ Öngörüleri, İş Emirleri — Akın Haddecilik A.Ş.

// ── Makine / Hat Durumu ───────────────────────────────────────────────────

const MACHINES = [
  { id: 'm1', name: 'Haddehane Hattı 1',  status: 'Çalışıyor', power: 1480, energy: 12400, count: 124, eff: 87 },
  { id: 'm2', name: 'Haddehane Hattı 2',  status: 'Çalışıyor', power: 980,  energy: 9800,  count: 98,  eff: 91 },
  { id: 'm3', name: 'Fırın Grubu 1',      status: 'Çalışıyor', power: 640,  energy: 6200,  count: 124, eff: 89 },
  { id: 'm4', name: 'Fırın Grubu 2',      status: 'Alarm',     power: 720,  energy: 7100,  count: 62,  eff: 67 },
  { id: 'm5', name: 'Soğutma Masaları',   status: 'Boşta',     power: 48,   energy: 1240,  count: 0,   eff: 0  },
  { id: 'm6', name: 'Makas & Bölme',      status: 'Çalışıyor', power: 94,   energy: 980,   count: 222, eff: 94 },
  { id: 'm7', name: 'Şanzıman Odası',     status: 'Çalışıyor', power: 62,   energy: 640,   count: 0,   eff: 96 },
  { id: 'm8', name: 'Kompresör Odası',    status: 'Durduruldu',power: 0,    energy: 880,   count: 0,   eff: 0  },
];

const STATUS_META = {
  'Çalışıyor':  { color: 'var(--signal-ok)',   bg: 'rgba(74,123,78,0.09)'  },
  'Boşta':      { color: 'var(--signal-warn)', bg: 'rgba(160,122,46,0.09)' },
  'Durduruldu': { color: 'var(--text-muted)',  bg: 'rgba(138,138,132,0.10)'},
  'Alarm':      { color: 'var(--signal-err)',  bg: 'rgba(142,58,58,0.09)'  },
};

const MachineCard = ({ m, tweaks }) => {
  const [hov, setHov] = React.useState(false);
  const s = STATUS_META[m.status];
  const r = tweaks.radius === 'round' ? 12 : tweaks.radius === 'medium' ? 7 : 4;

  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        background: 'var(--bg-elevated)',
        border: `1px solid ${m.status === 'Alarm' && hov ? 'var(--signal-err)' : 'var(--border)'}`,
        borderRadius: r,
        padding: '14px 16px',
        display: 'flex',
        flexDirection: 'column',
        gap: 10,
        boxShadow: hov ? 'var(--shadow-2)' : 'var(--shadow-1)',
        transition: 'box-shadow 160ms, border-color 160ms',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: s.color, borderRadius: '4px 0 0 4px' }} />
      <div style={{ paddingLeft: 8 }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 8 }}>
          <div style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--text)', letterSpacing: '-0.01em', lineHeight: 1.3 }}>{m.name}</div>
          <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', padding: '2px 6px', borderRadius: 3, background: s.bg, color: s.color, border: `1px solid ${s.color}22`, flexShrink: 0, marginLeft: 6 }}>{m.status}</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px 0' }}>
          <MetricRow label="Anlık Güç"    value={m.status === 'Durduruldu' ? '—' : `${m.power} kW`} />
          <MetricRow label="Günlük Enerji" value={`${(m.energy/1000).toFixed(1)} MWh`} />
          <MetricRow label="Üretim"        value={m.count > 0 ? `${m.count} ton` : '—'} />
          <MetricRow label="Verimlilik"    value={m.eff > 0 ? `${m.eff}%` : '—'} highlight={m.eff > 0 ? (m.eff >= 90 ? 'ok' : m.eff >= 75 ? 'warn' : 'err') : null} />
        </div>
        {m.eff > 0 && (
          <div style={{ marginTop: 8, height: 3, background: 'var(--surface-2)', borderRadius: 2 }}>
            <div style={{ width: `${m.eff}%`, height: '100%', borderRadius: 2, background: m.eff >= 90 ? 'var(--signal-ok)' : m.eff >= 75 ? 'var(--signal-warn)' : 'var(--signal-err)', transition: 'width 600ms ease' }} />
          </div>
        )}
      </div>
    </div>
  );
};

const MetricRow = ({ label, value, highlight }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>{label}</span>
    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 500,
      color: highlight === 'ok' ? 'var(--signal-ok)' : highlight === 'warn' ? 'var(--signal-warn)' : highlight === 'err' ? 'var(--signal-err)' : 'var(--text)' }}>{value}</span>
  </div>
);

const MachineGrid = ({ tweaks }) => (
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
    {MACHINES.map(m => <MachineCard key={m.id} m={m} tweaks={tweaks} />)}
  </div>
);

// ── Aktif Alarmlar ────────────────────────────────────────────────────────

const ALARMS = [
  { id: 'a1', severity: 'err',  machine: 'Kompresör Odası Panosu', code: 'ALM-01', msg: 'Güç faktörü eşik değerin altında', time: '10:42', ack: false },
  { id: 'a2', severity: 'warn', machine: 'Ana Dağıtım Panosu',     code: 'ALM-02', msg: 'Pik talep aylık limite yaklaşıyor', time: '10:18', ack: false },
  { id: 'a3', severity: 'warn', machine: 'Üretim Panosu B',        code: 'ALM-03', msg: 'Reaktif enerji beklenenden hızlı artıyor', time: '09:55', ack: false },
  { id: 'a4', severity: 'ok',   machine: 'Sayaç MTR-004',          code: 'SYS-01', msg: 'Veri bağlantısı geri geldi', time: '09:20', ack: true },
  { id: 'a5', severity: 'err',  machine: 'HVAC Panosu',            code: 'ALM-04', msg: 'Gece tüketiminde anormallik tespit edildi', time: '08:47', ack: false },
];

const AlarmRow = ({ alarm }) => {
  const [acked, setAcked] = React.useState(alarm.ack);
  const col = alarm.severity === 'err' ? 'var(--signal-err)' : 'var(--signal-warn)';
  const bg  = alarm.severity === 'err' ? 'rgba(142,58,58,0.06)' : 'rgba(160,122,46,0.06)';

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '6px 1fr auto', gap: 12, alignItems: 'center', padding: '10px 14px', borderBottom: '1px solid var(--border)', background: acked ? 'transparent' : bg, transition: 'background 200ms', opacity: acked ? 0.55 : 1 }}>
      <div style={{ width: 6, height: 6, borderRadius: '50%', background: col, flexShrink: 0 }} />
      <div style={{ minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 2 }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: col, letterSpacing: '0.03em' }}>{alarm.code}</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)' }}>· {alarm.machine}</span>
        </div>
        <div style={{ fontSize: 12.5, color: 'var(--text-secondary)', lineHeight: 1.4 }}>{alarm.msg}</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 5 }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)' }}>{alarm.time}</span>
        <button onClick={() => setAcked(a => !a)} style={{ fontSize: 10, fontFamily: 'var(--font-mono)', padding: '2px 7px', borderRadius: 3, border: `1px solid ${acked ? 'var(--border)' : col}`, background: 'transparent', color: acked ? 'var(--text-muted)' : col, cursor: 'pointer', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
          {acked ? 'Onaylandı' : 'Onayla'}
        </button>
      </div>
    </div>
  );
};

const AlarmsPanel = ({ tweaks }) => {
  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', height: '100%' }}>
      <div style={{ padding: '14px 18px 12px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 500 }}>Aktif Alarmlar</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)', marginTop: 2 }}>5 çözümsüz · Son güncelleme 11:07</div>
        </div>
        <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', padding: '2px 7px', borderRadius: 3, background: 'rgba(142,58,58,0.1)', color: 'var(--signal-err)', border: '1px solid rgba(142,58,58,0.2)' }}>5 Aktif</span>
      </div>
      <div>{ALARMS.map(a => <AlarmRow key={a.id} alarm={a} />)}</div>
    </div>
  );
};

// ── YZ Öngörüleri ─────────────────────────────────────────────────────────

const AI_INSIGHTS = [
  {
    id: 'ai1', priority: 'high',
    title: 'Gece Tüketimi Normalin Üzerinde',
    body: 'Tesisiniz, operasyon dışı saatlerde son 7 günlük ortalamaya göre %18 daha fazla enerji tüketti.',
    action: 'Kritik olmayan yüklerin kapanma saatlerini kontrol edin.',
    saving: 'aylık 12.400 TL',
    icon: 'activity',
  },
  {
    id: 'ai2', priority: 'medium',
    title: 'Reaktif Enerji Riski',
    body: 'Kompresör Odası Panosundaki güç faktörü eğilimi, reaktif ceza riskini artırabilir.',
    action: 'Öneri: kompanzasyon sistemini kontrol edin.',
    saving: 'Ceza önleme: ~18.000 TL',
    icon: 'zap',
  },
  {
    id: 'ai3', priority: 'medium',
    title: 'Pik Talep Uyarısı',
    body: 'Anlık talep değeri aylık pik sınırına yaklaşıyor.',
    action: 'Öneri: kritik olmayan yükleri pik saat dışına kaydırın.',
    saving: 'Pik maliyeti önleme',
    icon: 'cpu',
  },
];

const PRI_META = {
  high:   { color: 'var(--signal-err)',  bg: 'rgba(142,58,58,0.07)',  label: 'Yüksek Öncelik' },
  medium: { color: 'var(--signal-warn)', bg: 'rgba(160,122,46,0.07)', label: 'İnceleme' },
  low:    { color: 'var(--signal-ok)',   bg: 'rgba(74,123,78,0.07)',  label: 'Bilgi' },
};

const AIInsightCard = ({ insight, tweaks }) => {
  const [expanded, setExpanded] = React.useState(false);
  const p = PRI_META[insight.priority];
  const r = tweaks.radius === 'round' ? 10 : tweaks.radius === 'medium' ? 6 : 3;

  return (
    <div style={{ border: '1px solid var(--border)', borderRadius: r, background: 'var(--bg-elevated)', overflow: 'hidden' }}>
      <button onClick={() => setExpanded(e => !e)} style={{ width: '100%', padding: '12px 14px', display: 'flex', alignItems: 'flex-start', gap: 10, background: 'none', border: 0, cursor: 'pointer', textAlign: 'left', borderBottom: expanded ? '1px solid var(--border)' : 'none' }}>
        <div style={{ width: 28, height: 28, borderRadius: r, background: p.bg, color: p.color, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
          <DashIcon name={insight.icon} size={13} color={p.color} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
            <span style={{ fontSize: 9.5, fontFamily: 'var(--font-mono)', letterSpacing: '0.05em', textTransform: 'uppercase', color: p.color, padding: '1px 5px', background: p.bg, borderRadius: 2, border: `1px solid ${p.color}22` }}>{p.label}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--signal-ok)' }}>Tasarruf tahmini: {insight.saving}</span>
          </div>
          <div style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--text)', lineHeight: 1.35 }}>{insight.title}</div>
        </div>
        <DashIcon name={expanded ? 'chevron-down' : 'chevron-right'} size={13} color="var(--text-muted)" />
      </button>
      {expanded && (
        <div style={{ padding: '12px 14px 14px', paddingLeft: 52, background: 'var(--surface)' }}>
          <p style={{ margin: '0 0 10px', fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.6 }}>{insight.body}</p>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, padding: '8px 10px', background: 'var(--bg-elevated)', border: '1px solid var(--border)', borderRadius: r }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--accent)', flexShrink: 0, marginTop: 1 }}>→</span>
            <span style={{ fontSize: 12.5, color: 'var(--text)', lineHeight: 1.5 }}>{insight.action}</span>
          </div>
        </div>
      )}
    </div>
  );
};

const AIInsightsPanel = ({ tweaks }) => {
  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', height: '100%' }}>
      <div style={{ padding: '14px 18px 12px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 7 }}>
            <DashIcon name="ai" size={14} color="var(--accent)" />
            YZ Öngörüleri
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)', marginTop: 2 }}>3 aktif öneri · Model: NEXOR-Ops v2.1</div>
        </div>
        <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', padding: '2px 7px', borderRadius: 3, background: 'var(--accent-weak)', color: 'var(--accent)', border: '1px solid var(--accent)22' }}>3 Yeni</span>
      </div>
      <div style={{ padding: '10px 14px', display: 'flex', flexDirection: 'column', gap: 6 }}>
        {AI_INSIGHTS.map(i => <AIInsightCard key={i.id} insight={i} tweaks={tweaks} />)}
      </div>
    </div>
  );
};

// ── Panolar ve Sayaçlar Tablosu ───────────────────────────────────────────

const METERS = [
  { name: 'Ana Dağıtım Panosu', source: 'Elektrik', power: '386 kW', energy: '4.820 kWh', pf: '0,91', status: 'İzlenmeli', update: '1 dk önce' },
  { name: 'Üretim Panosu A',    source: 'Elektrik', power: '142 kW', energy: '1.680 kWh', pf: '0,94', status: 'Normal',    update: '1 dk önce' },
  { name: 'Kompresör Odası',    source: 'Elektrik', power: '64 kW',  energy: '740 kWh',   pf: '0,86', status: 'Kritik',    update: '1 dk önce' },
  { name: 'Ana Gaz RMS İstasyonu', source: 'Doğal Gaz', power: '185 Sm³/h', energy: '4.210 Sm³', pf: '—', status: 'Normal', update: '1 dk önce' },
  { name: 'Fırın Gaz Hattı',    source: 'Doğal Gaz', power: '175 Sm³/h', energy: '3.930 Sm³', pf: '—', status: 'Normal',    update: '2 dk önce' },
  { name: 'Şebeke Su Girişi',   source: 'Su',       power: '21.5 m³/h', energy: '525 m³',    pf: '—', status: 'Normal',    update: '2 dk önce' },
  { name: 'Soğutma Suyu Hattı', source: 'Su',       power: '14.2 m³/h', energy: '340 m³',    pf: '—', status: 'İzlenmeli', update: '3 dk önce' },
];

const SOURCE_COLORS = { 'Elektrik': 'var(--accent)', 'Doğal Gaz': '#D97706', 'Su': '#0EA5E9' };

const METER_STATUS = {
  Normal:    { color: 'var(--signal-ok)',   bg: 'rgba(74,123,78,0.08)'  },
  İzlenmeli: { color: 'var(--signal-warn)', bg: 'rgba(160,122,46,0.08)' },
  Kritik:    { color: 'var(--signal-err)',  bg: 'rgba(142,58,58,0.08)'  },
};

const MetersTable = ({ tweaks }) => {
  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: '14px 18px 12px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 500 }}>Panolar ve Sayaçlar (Tri-Utility)</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)', marginTop: 2 }}>Elektrik · Doğal Gaz · Su — Anlık ölçümler</div>
        </div>
        <button style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '5px 10px', border: '1px solid var(--border)', borderRadius: 4, background: 'var(--bg-elevated)', cursor: 'pointer', fontSize: 12, color: 'var(--text-secondary)', fontFamily: 'var(--font-sans)' }}>
          <DashIcon name="external" size={12} />
          Pano Detayı
        </button>
      </div>
      <div style={{ overflowX: 'auto' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
          <thead>
            <tr style={{ background: 'var(--surface)' }}>
              {['Pano / Sayaç', 'Kaynak', 'Anlık Ölçüm', 'Bugünkü Toplam', 'Durum', 'Güncelleme'].map(h => (
                <th key={h} style={{ padding: '9px 14px', textAlign: 'left', fontSize: 10, 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>
            {METERS.map((m, i) => {
              const st = METER_STATUS[m.status];
              const srcCol = SOURCE_COLORS[m.source] || 'var(--text-muted)';
              return (
                <tr key={i} style={{ borderBottom: i < METERS.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', color: 'var(--text)', fontWeight: 500 }}>{m.name}</td>
                  <td style={{ padding: '10px 14px' }}>
                    <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', padding: '2px 7px', borderRadius: 3, background: `${srcCol}14`, color: srcCol, border: `1px solid ${srcCol}22` }}>{m.source}</span>
                  </td>
                  <td style={{ padding: '10px 14px', fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>{m.power}</td>
                  <td style={{ padding: '10px 14px', fontFamily: 'var(--font-mono)', color: srcCol }}>{m.energy}</td>
                  <td style={{ padding: '10px 14px' }}>
                    <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', padding: '2px 7px', borderRadius: 3, background: st.bg, color: st.color, border: `1px solid ${st.color}22`, whiteSpace: 'nowrap' }}>{m.status}</span>
                  </td>
                  <td style={{ padding: '10px 14px', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)' }}>{m.update}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

// ── Bildirimler ───────────────────────────────────────────────────────────

const NOTIFICATIONS = [
  'Aylık enerji maliyeti tahmini güncellendi',
  'Yeni güç kalitesi raporu hazır',
  'Zamanlanmış rapor enerji yöneticisine gönderildi',
  'Sayaç MTR-002 yazılım durumu kontrol edildi',
  'AI hafta sonu tüketiminde olağandışı desen tespit etti'
];

const NotificationsPanel = ({ tweaks }) => {
  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', height: '100%' }}>
      <div style={{ padding: '14px 18px 12px', borderBottom: '1px solid var(--border)' }}>
        <div style={{ fontSize: 13, fontWeight: 500 }}>Bildirimler</div>
      </div>
      <div style={{ padding: '10px 0' }}>
        {NOTIFICATIONS.map((n, i) => (
          <div key={i} style={{ padding: '8px 18px', fontSize: 12.5, color: 'var(--text-secondary)', borderBottom: i < NOTIFICATIONS.length - 1 ? '1px solid var(--surface-2)' : 'none', display: 'flex', alignItems: 'flex-start', gap: 10 }}>
            <span style={{ color: 'var(--accent)', marginTop: 2 }}>•</span>
            <span style={{ lineHeight: 1.4 }}>{n}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// ── Raporlar Kısayol ──────────────────────────────────────────────────────

const REPORTS_LIST = [
  'Günlük Enerji Raporu',
  'Aylık Maliyet Özeti',
  'Güç Kalitesi Raporu',
  'Alarm Geçmişi',
  'Pano Tüketim Raporu',
  'Reaktif Enerji Raporu'
];

const ReportsPanel = ({ tweaks }) => {
  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', height: '100%' }}>
      <div style={{ padding: '14px 18px 12px', borderBottom: '1px solid var(--border)' }}>
        <div style={{ fontSize: 13, fontWeight: 500 }}>Raporlar</div>
      </div>
      <div style={{ padding: '12px 14px', display: 'grid', gridTemplateColumns: '1fr', gap: 6 }}>
        {REPORTS_LIST.map((rep, i) => (
          <button key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 6, cursor: 'pointer', textAlign: 'left', color: 'var(--text)' }}
            onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--accent)'}
            onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}>
            <DashIcon name="report" size={14} color="var(--accent)" />
            <span style={{ fontSize: 12.5 }}>{rep}</span>
          </button>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { MachineGrid, AlarmsPanel, AIInsightsPanel, MetersTable, NotificationsPanel, ReportsPanel });