// Kenar çubuğu + Üst çubuk bileşenleri

const NAV_ITEMS = [
  { id: 'overview',    label: 'Genel Bakış',            icon: 'overview' },
  { id: 'energy',      label: 'Tüketim İzleme',         icon: 'energy' },
  { id: 'cost',        label: 'Maliyet Analizi',        icon: 'activity' },
  { id: 'power',       label: 'Güç Kalitesi',           icon: 'zap' },
  { id: 'meters',      label: 'Panolar ve Sayaçlar',    icon: 'machine' },
  { id: 'machines',    label: 'Makinalar',              icon: 'server' },
  { id: 'alarms',      label: 'Alarmlar',               icon: 'alarm',  badge: 5 },
  { id: 'notifications',label: 'Bildirimler',           icon: 'bell' },
  { id: 'reports',     label: 'Raporlar',               icon: 'report' },
  { id: 'ai',          label: 'AI İçgörüleri',          icon: 'ai',     badge: 3, badgeAccent: true },
  { id: 'settings',    label: 'Ayarlar',                icon: 'settings', bottom: true },
];

const NEXOR_LOGO = ({ size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <rect x="1.5" y="1.5" width="21" height="21" rx="3" stroke="currentColor" strokeWidth="1.5"/>
    <path d="M7 17V7l10 10V7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Sidebar = ({ activePage, setActivePage }) => {
  const mainItems = NAV_ITEMS.filter(i => !i.bottom);
  const bottomItems = NAV_ITEMS.filter(i => i.bottom);

  return (
    <aside style={{
      width: 224,
      flexShrink: 0,
      background: 'var(--bg-elevated)',
      borderRight: '1px solid var(--border)',
      display: 'flex',
      flexDirection: 'column',
      height: '100vh',
      position: 'sticky',
      top: 0,
      overflowY: 'auto',
    }}>
      {/* Marka */}
      <div style={{
        padding: '18px 18px 16px',
        borderBottom: '1px solid var(--border)',
        display: 'flex',
        alignItems: 'center',
        gap: 10,
      }}>
        <NEXOR_LOGO size={22} />
        <div>
          <div style={{ fontWeight: 600, fontSize: 14, letterSpacing: '-0.02em' }}>NEXOR</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--text-muted)', letterSpacing: '0.06em', textTransform: 'uppercase', marginTop: 1 }}>Enerji OS</div>
        </div>
      </div>

      {/* Tesis bilgisi */}
      <div style={{
        margin: '12px 12px 4px',
        padding: '10px 12px',
        background: 'var(--surface)',
        border: '1px solid var(--border)',
        borderRadius: 'var(--r-md)',
      }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--text-muted)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 4 }}>Aktif Tesis</div>
        <div style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--text)', lineHeight: 1.3 }}>İzmir Ana Tesis</div>
        <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>Demo Endüstriyel Tesis</div>
      </div>

      {/* Ana navigasyon */}
      <nav style={{ flex: 1, padding: '8px 10px', display: 'flex', flexDirection: 'column', gap: 1 }}>
        {mainItems.map(item => {
          const active = activePage === item.id;
          return (
            <button
              key={item.id}
              onClick={() => setActivePage(item.id)}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 9,
                width: '100%',
                padding: '7px 10px',
                borderRadius: 'var(--r-md)',
                border: 0,
                background: active ? 'var(--accent-weak)' : 'transparent',
                color: active ? 'var(--accent)' : 'var(--text-secondary)',
                cursor: 'pointer',
                fontSize: 13,
                fontFamily: 'var(--font-sans)',
                fontWeight: active ? 500 : 400,
                letterSpacing: '-0.005em',
                transition: 'background 120ms, color 120ms',
                textAlign: 'left',
              }}
              onMouseEnter={e => { if (!active) { e.currentTarget.style.background = 'var(--surface)'; e.currentTarget.style.color = 'var(--text)'; }}}
              onMouseLeave={e => { if (!active) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text-secondary)'; }}}
            >
              <DashIcon name={item.icon} size={15} color="currentColor" />
              <span style={{ flex: 1 }}>{item.label}</span>
              {item.badge && (
                <span style={{
                  fontSize: 10,
                  fontFamily: 'var(--font-mono)',
                  padding: '1px 5px',
                  borderRadius: 'var(--r-pill)',
                  background: item.badgeAccent ? 'var(--accent)' : (item.id === 'alarms' ? 'var(--signal-err)' : 'var(--surface-2)'),
                  color: item.badgeAccent || item.id === 'alarms' ? '#fff' : 'var(--text-muted)',
                  fontWeight: 500,
                  lineHeight: '16px',
                  minWidth: 16,
                  textAlign: 'center',
                }}>
                  {item.badge}
                </span>
              )}
            </button>
          );
        })}
      </nav>

      {/* Alt menü */}
      <div style={{ padding: '8px 10px', borderTop: '1px solid var(--border)' }}>
        {bottomItems.map(item => {
          const active = activePage === item.id;
          return (
            <button
              key={item.id}
              onClick={() => setActivePage(item.id)}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 9,
                width: '100%',
                padding: '7px 10px',
                borderRadius: 'var(--r-md)',
                border: 0,
                background: active ? 'var(--accent-weak)' : 'transparent',
                color: active ? 'var(--accent)' : 'var(--text-muted)',
                cursor: 'pointer',
                fontSize: 13,
                fontFamily: 'var(--font-sans)',
                fontWeight: 400,
                transition: 'background 120ms, color 120ms',
                textAlign: 'left',
              }}
              onMouseEnter={e => { if (!active) { e.currentTarget.style.background = 'var(--surface)'; e.currentTarget.style.color = 'var(--text)'; }}}
              onMouseLeave={e => { if (!active) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text-muted)'; }}}
            >
              <DashIcon name={item.icon} size={15} color="currentColor" />
              <span>{item.label}</span>
            </button>
          );
        })}

        {/* Kullanıcı satırı */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: 9,
          padding: '10px 10px 4px',
          marginTop: 4,
          borderTop: '1px solid var(--border)',
        }}>
          <div style={{
            width: 26,
            height: 26,
            borderRadius: '50%',
            background: 'var(--accent)',
            color: 'var(--accent-fg)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: 11,
            fontWeight: 600,
            flexShrink: 0,
          }}>DE</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--text)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Kullanıcı Profili</div>
            <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>Enerji Yöneticisi</div>
          </div>
        </div>
      </div>
    </aside>
  );
};

const TopBar = ({ activePage, tweaks, onToggleTheme }) => {
  const PAGE_TITLES = {
    overview:      'Enerji Genel Görünüm',
    energy:        'Tüketim İzleme',
    cost:          'Maliyet Analizi',
    power:         'Güç Kalitesi',
    meters:        'Panolar ve Sayaçlar',
    machines:      'Makine Sarfiyatları',
    alarms:        'Alarmlar',
    notifications: 'Bildirimler',
    reports:       'Raporlar',
    ai:            'AI İçgörüleri',
    settings:      'Ayarlar',
  };

  const now = new Date();
  const timeStr = now.toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' });
  const dateStr = now.toLocaleDateString('tr-TR', { day: '2-digit', month: 'long', year: 'numeric' });
  const isDark = tweaks && tweaks.theme === 'dark';

  return (
    <header style={{
      height: 54,
      background: 'color-mix(in oklab, var(--bg-elevated) 92%, transparent)',
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--border)',
      display: 'flex',
      alignItems: 'center',
      padding: '0 24px',
      gap: 16,
      position: 'sticky',
      top: 0,
      zIndex: 20,
    }}>
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 12 }}>
        <h1 style={{ margin: 0, fontSize: 15, fontWeight: 600, letterSpacing: '-0.015em' }}>
          {PAGE_TITLES[activePage] || 'Enerji Genel Görünüm'}
        </h1>
        <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', padding: '2px 7px', borderRadius: 3, background: 'rgba(74,123,78,0.1)', color: 'var(--signal-ok)', border: '1px solid rgba(74,123,78,0.2)' }}>
          Sistem Aktif
        </span>
      </div>

      {/* Tarih Filtresi */}
      <div style={{ display: 'flex', background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-md)', overflow: 'hidden' }}>
        {['Bugün', 'Son 7 Gün', 'Bu Ay'].map((tf, i) => (
          <button key={tf} style={{
            padding: '5px 12px',
            fontSize: 12,
            fontFamily: 'var(--font-sans)',
            color: i === 0 ? 'var(--text)' : 'var(--text-muted)',
            background: i === 0 ? 'var(--bg-elevated)' : 'transparent',
            border: 'none',
            borderRight: i < 2 ? '1px solid var(--border)' : 'none',
            cursor: 'pointer',
            fontWeight: i === 0 ? 500 : 400,
            boxShadow: i === 0 ? '0 1px 2px rgba(0,0,0,0.05)' : 'none',
          }}>
            {tf}
          </button>
        ))}
      </div>

      {/* Arama */}
      <button style={{
        display: 'flex',
        alignItems: 'center',
        gap: 7,
        padding: '5px 10px',
        background: 'var(--surface)',
        border: '1px solid var(--border)',
        borderRadius: 'var(--r-md)',
        cursor: 'pointer',
        fontSize: 12,
        color: 'var(--text-muted)',
        fontFamily: 'var(--font-sans)',
      }}>
        <DashIcon name="search" size={13} />
        <span>Ara…</span>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, padding: '1px 4px', background: 'var(--border)', borderRadius: 2 }}>⌘K</span>
      </button>

      {/* Tema Değiştir (Kolay Erişim) */}
      <button
        onClick={onToggleTheme}
        title={isDark ? 'Açık Mod' : 'Koyu Mod'}
        style={{
          width: 34,
          height: 34,
          border: '1px solid var(--border)',
          borderRadius: 'var(--r-md)',
          background: 'var(--bg-elevated)',
          cursor: 'pointer',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'var(--text-muted)',
          transition: 'all 200ms',
        }}>
        {isDark ? (
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="5"/>
            <line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
            <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
          </svg>
        ) : (
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
          </svg>
        )}
      </button>

      {/* Alarm zili */}
      <button style={{
        position: 'relative',
        width: 34,
        height: 34,
        border: '1px solid var(--border)',
        borderRadius: 'var(--r-md)',
        background: 'var(--bg-elevated)',
        cursor: 'pointer',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'var(--text-muted)',
      }}>
        <DashIcon name="bell" size={15} />
        <span style={{
          position: 'absolute',
          top: 5,
          right: 5,
          width: 7,
          height: 7,
          borderRadius: '50%',
          background: 'var(--signal-err)',
          border: '1.5px solid var(--bg-elevated)',
        }} />
      </button>
    </header>
  );
};

Object.assign(window, { Sidebar, TopBar, NEXOR_LOGO });