// Sidebar.jsx — AegisComply

const SidebarIcons = {
  dashboard:    () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>,
  equipment:    () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>,
  calibration:  () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>,
  ppe:          () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>,
  documents:    () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>,
  reports:      () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>,
  alerts:       () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>,
  roi:          () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/><line x1="2" y1="20" x2="22" y2="20"/></svg>,
  subscription: () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>,
  settings:     () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>,
};

const sidebarStyles = {
  sidebar: { width: 240, minWidth: 240, height: '100vh', background: '#0B1F3A', display: 'flex', flexDirection: 'column', position: 'fixed', left: 0, top: 0, zIndex: 100 },
  logoArea: { padding: '16px 20px', borderBottom: '1px solid rgba(255,255,255,0.07)' },
  logoWrap: { display: 'flex', alignItems: 'center', gap: 10 },
  logoText: { fontFamily: "'Helvetica', Arial, sans-serif", fontSize: 17, fontWeight: 700, color: 'white', letterSpacing: '-0.3px' },
  logoAccent: { color: '#14B8A6', fontWeight: 400 },
  companyBadge: { margin: '10px 0 0', padding: '5px 10px', background: 'rgba(13,148,136,0.15)', borderRadius: 6, fontSize: 11, color: '#5EEAD4', fontWeight: 500 },
  nav: { flex: 1, overflowY: 'auto', padding: '8px 0' },
  section: { fontSize: 9, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.28)', padding: '14px 20px 5px' },
  item: { display: 'flex', alignItems: 'center', gap: 10, padding: '8px 20px', fontSize: 13, color: 'rgba(255,255,255,0.6)', cursor: 'pointer', transition: 'all 150ms', userSelect: 'none', position: 'relative' },
  itemHover: { background: 'rgba(255,255,255,0.06)', color: 'rgba(255,255,255,0.9)' },
  itemActive: { background: 'rgba(13,148,136,0.18)', color: 'white', borderLeft: '3px solid #0D9488', paddingLeft: 17 },
  badge: { marginLeft: 'auto', fontSize: 10, fontWeight: 700, padding: '1px 6px', borderRadius: 10 },
  badgeRed: { background: '#DC2626', color: 'white' },
  badgeAmber: { background: '#D97706', color: 'white' },
  badgeTeal: { background: '#0D9488', color: 'white' },
  userArea: { padding: '12px 20px', borderTop: '1px solid rgba(255,255,255,0.07)', display: 'flex', alignItems: 'center', gap: 10 },
  avatar: { width: 30, height: 30, borderRadius: '50%', background: '#0D9488', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 600, color: 'white', flexShrink: 0 },
  userName: { fontSize: 12, fontWeight: 600, color: 'rgba(255,255,255,0.85)', lineHeight: 1.2 },
  userRole: { fontSize: 10, color: 'rgba(255,255,255,0.35)' },
};

function Sidebar({ active, onNav, badges = {}, onLogout, user = {} }) {
  const [hovered, setHovered] = React.useState(null);

  const navItems = [
    { id: 'dashboard',    label: 'Dashboard',        icon: 'dashboard',    section: 'Main' },
    { id: 'equipment',    label: 'Equipment',         icon: 'equipment',    badge: badges.equipment,    badgeType: 'red' },
    { id: 'calibration',  label: 'Calibration',       icon: 'calibration',  badge: badges.calibration,  badgeType: 'amber' },
    { id: 'ppe',          label: 'PPE Inventory',     icon: 'ppe' },
    { id: 'documents',    label: 'Documents',         icon: 'documents',    section: 'Compliance' },
    { id: 'reports',      label: 'Audit Reports',     icon: 'reports' },
    { id: 'alerts',       label: 'Alerts',            icon: 'alerts',       badge: badges.alerts,       badgeType: 'red' },
    { id: 'roi',          label: 'ROI Report',        icon: 'roi',          section: 'Insights',        badge: 'NEW',       badgeType: 'teal' },
    { id: 'subscription', label: 'Subscription',      icon: 'subscription', section: 'Account' },
    { id: 'settings',     label: 'Settings',          icon: 'settings' },
  ];

  let lastSection = null;

  return (
    <div style={sidebarStyles.sidebar}>
      {/* Logo */}
      <div style={sidebarStyles.logoArea}>
        <div style={sidebarStyles.logoWrap}>
          <img
            src="../../assets/logo-aegisfeld.png"
            style={{ width: 34, height: 34, objectFit: 'contain', flexShrink: 0 }}
            alt="AegisComply"
            onError={e => { e.target.style.display = 'none'; }}
          />
          <span style={sidebarStyles.logoText}>Aegis<span style={sidebarStyles.logoAccent}>Comply</span></span>
        </div>
        <div style={sidebarStyles.companyBadge}>Petronas Chemicals Bhd</div>
      </div>

      {/* Nav */}
      <nav style={sidebarStyles.nav}>
        {navItems.map(item => {
          const Icon = SidebarIcons[item.icon];
          const isActive  = active === item.id;
          const isHovered = hovered === item.id;
          const showSection = item.section && item.section !== lastSection;
          if (item.section) lastSection = item.section;
          const badgeStyle = item.badgeType === 'red' ? sidebarStyles.badgeRed : item.badgeType === 'amber' ? sidebarStyles.badgeAmber : sidebarStyles.badgeTeal;

          return (
            <React.Fragment key={item.id}>
              {showSection && <div style={sidebarStyles.section}>{item.section}</div>}
              <div
                style={{ ...sidebarStyles.item, ...(isActive ? sidebarStyles.itemActive : isHovered ? sidebarStyles.itemHover : {}) }}
                onMouseEnter={() => setHovered(item.id)}
                onMouseLeave={() => setHovered(null)}
                onClick={() => onNav(item.id)}
              >
                <Icon />
                {item.label}
                {item.badge && (
                  <span style={{ ...sidebarStyles.badge, ...badgeStyle }}>{item.badge}</span>
                )}
              </div>
            </React.Fragment>
          );
        })}
      </nav>

      {/* User */}
      <div style={sidebarStyles.userArea}>
        <div style={{ ...sidebarStyles.avatar, cursor: 'pointer' }} onClick={() => onNav('settings')}>
          {(user.name || 'U').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase()}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={sidebarStyles.userName}>{user.name || 'User'}</div>
          <div style={sidebarStyles.userRole}>{user.role || 'Safety Officer'}</div>
        </div>
        <div
          style={{ color: 'rgba(255,255,255,0.3)', cursor: 'pointer', padding: 4, borderRadius: 4, transition: 'color 150ms', flexShrink: 0 }}
          title="Sign out"
          onClick={onLogout}
          onMouseEnter={e => e.currentTarget.style.color = 'rgba(255,255,255,0.8)'}
          onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.3)'}
        >
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Sidebar });