// Sidebar.jsx — KOOLD Dashboard Navigation
// Usage: <Sidebar activeRoute={routeId} onNav={fn} />

const sidebarStyles = {
  sidebar: {
    width: 220, minWidth: 220, height: '100%',
    background: '#111111',
    borderRight: '1px solid rgba(74,122,144,0.2)',
    display: 'flex', flexDirection: 'column',
    fontFamily: "'DM Sans', sans-serif",
  },
  logoArea: {
    padding: '28px 24px 24px',
    borderBottom: '1px solid rgba(74,122,144,0.15)',
  },
  logoImg: { height: 18, objectFit: 'contain' },
  tagline: {
    fontFamily: "'Outfit', sans-serif", fontSize: 9, fontWeight: 300,
    letterSpacing: '0.08em', color: 'rgba(240,238,233,0.35)',
    marginTop: 6, textTransform: 'uppercase',
  },
  navSection: { padding: '16px 0' },
  navLabel: {
    fontSize: 9, fontWeight: 600, letterSpacing: '0.12em',
    textTransform: 'uppercase', color: 'rgba(240,238,233,0.25)',
    padding: '0 20px', marginBottom: 4,
  },
  navItem: {
    display: 'flex', alignItems: 'center', gap: 10,
    padding: '9px 20px', cursor: 'pointer', fontSize: 13, fontWeight: 400,
    color: 'rgba(240,238,233,0.6)', transition: 'all 0.15s ease',
    borderLeft: '2px solid transparent',
    userSelect: 'none',
  },
  navItemActive: {
    color: '#F0EEE9', borderLeft: '2px solid #FEEC7E',
    background: 'rgba(254,236,126,0.06)',
  },
  navDot: { width: 6, height: 6, borderRadius: '50%', flexShrink: 0 },
  routeItem: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '7px 20px', cursor: 'pointer', fontSize: 12,
    color: 'rgba(240,238,233,0.5)', transition: 'all 0.15s ease',
    userSelect: 'none',
  },
  routeStatus: {
    fontSize: 9, fontWeight: 600, letterSpacing: '0.06em',
    padding: '2px 6px', borderRadius: 2,
  },
  footer: {
    marginTop: 'auto', padding: '16px 20px',
    borderTop: '1px solid rgba(74,122,144,0.15)',
    fontSize: 11, color: 'rgba(240,238,233,0.3)',
  },
};

const NAV_ITEMS = [
  { id: 'dashboard', label: 'Dashboard', dot: '#FEEC7E' },
  { id: 'routes',    label: 'Routes', dot: '#B2DE7B' },
  { id: 'alerts',    label: 'Alert Center', dot: '#FEEC7E' },
  { id: 'compliance',label: 'Compliance', dot: '#589E84' },
  { id: 'sensors',   label: 'Sensors', dot: '#4A7A90' },
  { id: 'reports',   label: 'Reports', dot: '#4A7A90' },
];

const ROUTES = [
  { id: 'r1', name: 'MUC → AMS', status: 'ok' },
  { id: 'r2', name: 'FRA → LHR', status: 'ok' },
  { id: 'r3', name: 'ZRH → CDG', status: 'warn' },
  { id: 'r4', name: 'VIE → BRU', status: 'ok' },
];

function Sidebar({ activeNav = 'dashboard', onNav }) {
  return (
    <div style={sidebarStyles.sidebar}>
      <div style={sidebarStyles.logoArea}>
        <img src="../../assets/logo_wordmark_web.png" style={sidebarStyles.logoImg} alt="KOOLD" />
        <div style={sidebarStyles.tagline}>Cold Chain Intelligence</div>
      </div>

      <div style={sidebarStyles.navSection}>
        <div style={sidebarStyles.navLabel}>Monitor</div>
        {NAV_ITEMS.map(item => (
          <div
            key={item.id}
            style={{
              ...sidebarStyles.navItem,
              ...(activeNav === item.id ? sidebarStyles.navItemActive : {}),
            }}
            onClick={() => onNav && onNav(item.id)}
          >
            <div style={{ ...sidebarStyles.navDot, background: activeNav === item.id ? item.dot : 'rgba(255,255,255,0.15)' }} />
            {item.label}
          </div>
        ))}
      </div>

      <div style={{ padding: '0 0 8px' }}>
        <div style={{ ...sidebarStyles.navLabel, padding: '0 20px', marginBottom: 8 }}>Active Routes</div>
        {ROUTES.map(r => (
          <div key={r.id} style={sidebarStyles.routeItem}>
            <span>{r.name}</span>
            <span style={{
              ...sidebarStyles.routeStatus,
              background: r.status === 'ok' ? 'rgba(178,222,123,0.15)' : 'rgba(254,236,126,0.2)',
              color: r.status === 'ok' ? '#B2DE7B' : '#FEEC7E',
            }}>
              {r.status === 'ok' ? 'OK' : 'WARN'}
            </span>
          </div>
        ))}
      </div>

      <div style={sidebarStyles.footer}>
        KOOLD.COM · v2.1.4
      </div>
    </div>
  );
}

Object.assign(window, { Sidebar });
