// T2 Falcon Admin — Sidebar

const Sidebar = ({ collapsed, setCollapsed, activePage, setActivePage, lang, t }) => {
  const mainItems = [
    { id: 'dashboard',      icon: IcDashboard,    label: t.dashboard },
    { id: 'contactGroups',  icon: IcContactGroup, label: t.contactGroups },
    { id: 'templates',      icon: IcTemplate,     label: t.templates },
    { id: 'templateMgmt',   icon: IcCheckSq,      label: t.templateMgmt },
  ];
  const accountItems = [
    { id: 'orgHierarchy',   icon: IcBuilding,    label: t.orgHierarchy },
    { id: 'permissions',    icon: IcLock,        label: t.permissions },
    { id: 'walletBalance',  icon: IcWallet,      label: t.walletBalance },
    { id: 'commChannels',   icon: IcComm,        label: t.commChannels, children: [
      { id: 'commChannels:whatsapp', label: t.smWhatsapp },
      { id: 'commChannels:voice',    label: t.smVoice },
      { id: 'commChannels:ai',       label: t.smAi },
    ] },
    { id: 'marketplace',    icon: IcMarket,      label: t.marketplace, children: [
      { id: 'marketplace:basic',  label: t.bsaBasicApp || 'Basic Application' },
      { id: 'marketplace:survey', label: t.bsaSurveyPro || 'Survey Pro' },
    ] },
    { id: 'contractsCost',  icon: IcContracts,   label: t.contractsCost },
  ];
  const footerItems = [
    { id: 'systemSettings', icon: IcSettings, label: t.systemSettings },
    { id: 'auditLog',       icon: IcAudit,    label: t.auditLog },
  ];

  const renderItem = (it) => {
    const Icon = it.icon;
    const hasKids = !!(it.children && it.children.length);
    const selfActive = activePage === it.id;                                          // this row itself is the selected page
    const childActive = hasKids && !!activePage && activePage.startsWith(it.id + ':'); // a submenu child is selected
    const expanded = (selfActive || childActive) && hasKids && !collapsed;
    return (
      <React.Fragment key={it.id}>
        <button
          className={`nav-item ${selfActive ? 'active' : ''} ${childActive ? 'has-active-child' : ''}`}
          onClick={() => setActivePage(it.id)}
          title={it.label}
        >
          <Icon size={18} stroke={1.8} />
          <span className="label">{it.label}</span>
        </button>
        {expanded && (
          <div className="nav-sub">
            {it.children.map(c => (
              <button
                key={c.id}
                className={`nav-sub-item ${activePage === c.id ? 'active' : ''}`}
                onClick={() => setActivePage(c.id)}
              >
                <span className="nav-sub-chev">›</span>
                <span>{c.label}</span>
              </button>
            ))}
          </div>
        )}
      </React.Fragment>
    );
  };

  return (
    <aside className="sidebar">
      <div className="sidebar-head">
        <div className="sidebar-logo">
          <T2Mark size={28} color="white" />
          {!collapsed && <span>FALCON</span>}
        </div>
        <button className="sidebar-collapse" onClick={() => setCollapsed(!collapsed)} aria-label="Collapse">
          <IcChevronLeft size={14} stroke={2.5} />
        </button>
      </div>

      <div className="sidebar-nav">
        <div className="nav-section-label">{t.mainItems}</div>
        {mainItems.map(renderItem)}

        <div className="nav-section-label">{t.accountAdmin}</div>
        {accountItems.map(renderItem)}
      </div>

      <div className="sidebar-foot">
        {footerItems.map(renderItem)}
      </div>
    </aside>
  );
};

window.Sidebar = Sidebar;