const { useState } = React;
const T = window.ArbiterTokens;

const sidebarStyles = {
  sidebar: {
    width: '220px',
    minWidth: '220px',
    height: '100vh',
    background: T.color.bg.sidebar,
    display: 'flex',
    flexDirection: 'column',
    padding: '0',
    position: 'relative',
    zIndex: 10,
  },
  sidebarCollapsed: {
    width: '56px',
    minWidth: '56px',
  },
  logo: {
    padding: '20px 20px 24px',
    display: 'flex',
    alignItems: 'center',
    gap: '10px',
  },
  logoMark: {
    width: '28px',
    height: '28px',
    background: T.color.ivory100,
    borderRadius: '6px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '14px',
    fontWeight: 700,
    color: T.color.navy900,
    flexShrink: 0,
  },
  logoText: {
    fontSize: T.font.size.lg,
    fontWeight: T.font.weight.semibold,
    color: T.color.ivory100,
    letterSpacing: T.font.tracking.tight,
  },
  nav: {
    flex: 1,
    padding: '0 8px',
    display: 'flex',
    flexDirection: 'column',
    gap: '1px',
  },
  sectionLabel: {
    fontSize: T.font.size.xs,
    fontWeight: T.font.weight.medium,
    color: T.color.navy300,
    textTransform: 'uppercase',
    letterSpacing: T.font.tracking.caps,
    padding: '16px 12px 6px',
  },
  navItem: {
    display: 'flex',
    alignItems: 'center',
    gap: '10px',
    padding: '7px 12px',
    borderRadius: T.radius.md,
    cursor: 'pointer',
    fontSize: T.font.size.base,
    fontWeight: T.font.weight.normal,
    color: T.color.navy200,
    transition: 'all 0.15s ease',
    border: 'none',
    background: 'none',
    width: '100%',
    textAlign: 'left',
  },
  navItemActive: {
    background: 'rgba(250,248,245,0.08)',
    color: T.color.ivory100,
    fontWeight: T.font.weight.medium,
  },
  navItemHover: {
    background: 'rgba(250,248,245,0.05)',
    color: T.color.ivory200,
  },
  navIcon: {
    width: '18px',
    height: '18px',
    opacity: 0.7,
    flexShrink: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '14px',
  },
  badge: {
    marginLeft: 'auto',
    fontSize: T.font.size.xs,
    fontWeight: T.font.weight.medium,
    background: 'rgba(250,248,245,0.1)',
    color: T.color.navy200,
    padding: '1px 6px',
    borderRadius: '10px',
    minWidth: '20px',
    textAlign: 'center',
  },
  badgeAlert: {
    background: 'rgba(194,48,48,0.2)',
    color: '#F08080',
  },
  userSection: {
    padding: '12px',
    borderTop: '1px solid rgba(250,248,245,0.06)',
    display: 'flex',
    alignItems: 'center',
    gap: '10px',
  },
  avatar: {
    width: '32px',
    height: '32px',
    borderRadius: '50%',
    background: T.color.navy600,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: T.font.size.sm,
    fontWeight: T.font.weight.semibold,
    color: T.color.ivory200,
    flexShrink: 0,
  },
  userName: {
    fontSize: T.font.size.sm,
    fontWeight: T.font.weight.medium,
    color: T.color.ivory200,
  },
  userRole: {
    fontSize: T.font.size.xs,
    color: T.color.navy300,
  },
};

// Icons reference window.Icons keys — resolved at render time to SVG components
const navSections = [
  {
    label: 'Overview',
    items: [
      { id: 'dashboard', icon: 'Dashboard', label: 'Dashboard', badge: null },
      { id: 'matters',   icon: 'Matters',   label: 'Matters',   badge: '52' },
      { id: 'calendar',  icon: 'Calendar',  label: 'Calendar',  badge: '3', alert: true },
    ]
  },
  {
    label: 'Work',
    items: [
      { id: 'documents', icon: 'Documents',  label: 'Documents',  badge: null },
      { id: 'discovery', icon: 'Discovery',  label: 'Discovery',  badge: '4', alert: true },
      { id: 'nexus',     icon: 'Nexus',      label: 'Nexus',      badge: null },
      { id: 'persona',   icon: 'Persona',    label: 'Persona',    badge: '12', alert: false },
      { id: 'criminal',  icon: 'Criminal',   label: 'Criminal',   badge: '2', alert: true },
      { id: 'motions',   icon: 'Motions',    label: 'Motions',    badge: '7', alert: true },
      { id: 'studio',    icon: 'Studio',     label: 'Studio',     badge: '3' },
      { id: 'esign',     icon: 'signdesk-svg', label: 'SignDesk', badge: '2', alert: true },
      { id: 'auto',      icon: 'Automation', label: 'Automation', badge: '34' },
      { id: 'research',  icon: 'Research',   label: 'Research',   badge: null },
      { id: 'tasks',     icon: 'Tasks',      label: 'Tasks',      badge: '12' },
      { id: 'rulebook',  icon: 'Rulebook',   label: 'Rulebook',   badge: null },
      { id: 'jurisdictions', icon: 'Rulebook', label: 'Jurisdictions', badge: '3', alert: true },
      { id: 'risk',      icon: 'Risk',       label: 'Risk',       badge: '2', alert: true },
      { id: 'comms',     icon: 'Comms',      label: 'Communications', badge: '', alert: false },
      { id: 'billing',   icon: 'Billing',    label: 'Billing',    badge: null },
    ]
  },
  {
    label: 'Admin',
    items: [
      { id: 'team',     icon: 'Team',     label: 'Team',     badge: null },
      { id: 'clients',  icon: 'Clients',  label: 'Clients',  badge: null },
      { id: 'settings', icon: 'Settings', label: 'Settings', badge: null },
    ]
  },
];

function Sidebar({ activeView, onNavigate, collapsed }) {
  const [hoveredItem, setHoveredItem] = useState(null);

  return (
    <div style={{
      ...sidebarStyles.sidebar,
      ...(collapsed ? sidebarStyles.sidebarCollapsed : {}),
    }}>
      <div style={sidebarStyles.logo}>
        <div style={sidebarStyles.logoMark}>A</div>
        {!collapsed && <span style={sidebarStyles.logoText}>Arbiter</span>}
      </div>

      <div style={sidebarStyles.nav}>
        {navSections.map((section) => (
          <React.Fragment key={section.label}>
            {!collapsed && (
              <div style={sidebarStyles.sectionLabel}>{section.label}</div>
            )}
            {section.items.map((item) => {
              const isActive = activeView === item.id;
              const isHovered = hoveredItem === item.id && !isActive;
              return (
                <button
                  key={item.id}
                  onClick={() => onNavigate(item.id)}
                  onMouseEnter={() => setHoveredItem(item.id)}
                  onMouseLeave={() => setHoveredItem(null)}
                  style={{
                    ...sidebarStyles.navItem,
                    ...(isActive ? sidebarStyles.navItemActive : {}),
                    ...(isHovered ? sidebarStyles.navItemHover : {}),
                  }}
                >
                  <span style={sidebarStyles.navIcon}>
                    {(() => {
                      if (item.icon === 'signdesk-svg' && window.EsIcons) {
                        return <window.EsIcons.Signature size={14} color="currentColor" strokeWidth={1.75} />;
                      }
                      const IconCmp = window.Icons && window.Icons[item.icon];
                      return IconCmp
                        ? <IconCmp size={15} color="currentColor" strokeWidth={1.5} />
                        : item.icon;
                    })()}
                  </span>
                  {!collapsed && (
                    <>
                      <span>{item.label}</span>
                      {item.badge && (
                        <span style={{
                          ...sidebarStyles.badge,
                          ...(item.alert ? sidebarStyles.badgeAlert : {}),
                        }}>{item.badge}</span>
                      )}
                    </>
                  )}
                </button>
              );
            })}
          </React.Fragment>
        ))}
      </div>

      <div style={sidebarStyles.userSection}>
        <div style={sidebarStyles.avatar}>MK</div>
        {!collapsed && (
          <div>
            <div style={sidebarStyles.userName}>M. Kirkland</div>
            <div style={sidebarStyles.userRole}>Senior Partner</div>
          </div>
        )}
      </div>
    </div>
  );
}

window.Sidebar = Sidebar;