// Sidebar Navigation
const { useState } = React;

const NAV_STRUCTURE = [
  {
    section: 'nav_main',
    items: [
      { id: 'overview', icon: 'Home', key: 'overview' }
    ]
  },
  {
    section: 'nav_operations',
    items: [
      {
        id: 'ai-sales', icon: 'Sparkle', key: 'ai_sales', badge: 12, gold: true,
        children: [
          { id: 'ai-sales/inbox', key: 'enquiry_inbox' },
          { id: 'ai-sales/conversations', key: 'bot_conversations' },
          { id: 'ai-sales/pipeline', key: 'lead_pipeline' }
        ]
      },
      {
        id: 'bookings', icon: 'Calendar', key: 'bookings',
        children: [
          { id: 'bookings/tours', key: 'tour_packages' },
          { id: 'bookings/flights', key: 'flight_tickets' },
          { id: 'bookings/hotels', key: 'hotel_reservations' }
        ]
      },
      {
        id: 'fleet', icon: 'Bus', key: 'fleet',
        children: [
          { id: 'fleet/registry', key: 'vehicle_registry' },
          { id: 'fleet/drivers', key: 'driver_schedule' },
          { id: 'fleet/assignment', key: 'trip_assignment' }
        ]
      },
      {
        id: 'guide', icon: 'Compass', key: 'tour_guide',
        children: [
          { id: 'guide/roster', key: 'guide_roster' },
          { id: 'guide/daily', key: 'daily_assignment' },
          { id: 'guide/commission', key: 'commission' },
          { id: 'guide/expense', key: 'expense_claims' }
        ]
      }
    ]
  },
  {
    section: 'nav_finance',
    items: [
      {
        id: 'accounting', icon: 'Cash', key: 'accounting',
        children: [
          { id: 'accounting/revenue', key: 'revenue_dashboard' },
          { id: 'accounting/invoices', key: 'invoices' },
          { id: 'accounting/pnl', key: 'pnl_report' }
        ]
      },
      { id: 'crm', icon: 'Users', key: 'customer_crm' },
      { id: 'suppliers', icon: 'Building', key: 'supplier_management' },
      { id: 'reports', icon: 'Chart', key: 'reports' }
    ]
  },
  {
    section: 'nav_admin',
    items: [
      { id: 'hr', icon: 'Briefcase', key: 'staff_hr' },
      { id: 'settings', icon: 'Settings', key: 'settings' }
    ]
  }
];

function Sidebar({ active, onNavigate, t, collapsed, onToggleCollapse }) {
  // Track open parent (auto-open the one containing active route)
  const initialOpen = NAV_STRUCTURE.flatMap(s => s.items)
    .find(i => i.children?.some(c => c.id === active) || i.id === active.split('/')[0])?.id;
  const [openId, setOpenId] = useState(initialOpen || 'ai-sales');

  const handleParentClick = (item) => {
    if (item.children) {
      setOpenId(openId === item.id ? null : item.id);
      // Also navigate to first child
      onNavigate(item.children[0].id);
    } else {
      onNavigate(item.id);
    }
  };

  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <div className="sidebar-brand-mark">M</div>
        <div className="sidebar-brand-text">
          <span className="name">{t('brand_name')}</span>
          <span className="sub">{t('brand_sub')}</span>
        </div>
      </div>
      <nav className="sidebar-nav">
        {NAV_STRUCTURE.map(section => (
          <div key={section.section} className="nav-section">
            <div className="nav-section-label">{t(section.section)}</div>
            {section.items.map(item => {
              const isParentActive = item.children
                ? item.children.some(c => c.id === active)
                : item.id === active;
              const isOpen = openId === item.id;
              const IconComp = Icon[item.icon];
              return (
                <div key={item.id}>
                  <div
                    className={`nav-item ${isParentActive ? 'active' : ''}`}
                    onClick={() => handleParentClick(item)}
                    title={collapsed ? t(item.key) : ''}
                  >
                    <span className="nav-item-icon"><IconComp size={17} stroke={1.8} /></span>
                    <span className="nav-item-label">{t(item.key)}</span>
                    {item.badge && !collapsed && (
                      <span className="nav-badge" style={item.gold ? {} : { background: 'var(--teal)', color: '#fff' }}>{item.badge}</span>
                    )}
                    {item.children && !collapsed && (
                      <span className="nav-item-chev" style={{ opacity: .5, transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}>
                        <Icon.ChevronDown size={14} />
                      </span>
                    )}
                  </div>
                  {item.children && isOpen && !collapsed && (
                    <div className="nav-item-children">
                      {item.children.map(child => (
                        <div
                          key={child.id}
                          className={`nav-child ${child.id === active ? 'active' : ''}`}
                          onClick={() => onNavigate(child.id)}
                        >
                          <span className="nav-child-dot"></span>
                          <span>{t(child.key)}</span>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        ))}
      </nav>
      <button className="sidebar-collapse" onClick={onToggleCollapse} title={t('collapse')}>
        {collapsed ? <Icon.CollapseRight size={14} /> : <><Icon.CollapseLeft size={14} /> <span>{t('collapse')}</span></>}
      </button>
    </aside>
  );
}

window.Sidebar = Sidebar;
window.NAV_STRUCTURE = NAV_STRUCTURE;