/* ============================================================
   AI4Colegios UI Kit — LeftNav.jsx
   Collapsible left navigation (220 ⇄ 58px) + "Pagos de hoy" feed.
   Config pinned to the foot. Toggle = «/» at the rail edge.
   ============================================================ */
(function () {
  const { Ledger, Register, WhatsApp, Settings, Grid } = window.Icons;
  const { t, moneyShort } = window.RZH;

  function NavItem({ icon, label, active, future, sub }) {
    return (
      <a href="#" className={'nav-item' + (active ? ' is-active' : '') + (future ? ' nav-future' : '')}
         aria-current={active ? 'page' : undefined} title={label}>
        <span className="nav-ico" aria-hidden="true">{icon}</span>
        <span className="lbl">{label}{sub && <span className="nav-sub">{sub}</span>}</span>
        {active && <span className="nav-dot" aria-hidden="true" />}
      </a>
    );
  }

  function TodayPayment({ p, lang, collapsed }) {
    const ml = { cash: t(lang, 'Efectivo', 'Cash'), transfer: t(lang, 'Transf.', 'Transfer'), card: t(lang, 'Tarjeta', 'Card') };
    if (collapsed) {
      return (
        <div className="today-mini" title={p.who}>
          <span className="amt">${moneyShort(p.amount)}</span>
          <span className="who">{p.who.split(',')[0].slice(0, 4)}</span>
        </div>
      );
    }
    return (
      <button type="button" className="today-payment">
        <span className="who">{p.who}</span>
        <span className="amt">$ {moneyShort(p.amount)}</span>
        <span className="meta">
          <span className="time">{p.time}</span>
          <span className={'method-pill ' + p.method}>{ml[p.method]}</span>
        </span>
      </button>
    );
  }

  function LeftNav({ lang, collapsed, onToggle, today }) {
    return (
      <nav className="leftnav" aria-label={t(lang, 'Navegación', 'Navigation')}>
        <button type="button" className="nav-toggle" onClick={onToggle}
          aria-label={t(lang, 'Contraer panel', 'Collapse panel')}>{collapsed ? '»' : '«'}</button>

        <div className="nav-main">
          <a href="#" className="nav-item menu-link">
            <span className="nav-ico" aria-hidden="true"><Grid /></span>
            <span className="menu-arrow" aria-hidden="true">←</span>
            <span className="lbl">{t(lang, 'Guía', 'Guide')}</span>
          </a>

          <div className="nav-section-label">{t(lang, 'En uso · Fase 1', 'In use · Milestone 1')}</div>
          <NavItem icon={<Ledger />} label={t(lang, 'Libro de Pago', 'Payment Ledger')} active />
          <NavItem icon={<Register />} label={t(lang, 'Registrar pago', 'Register payment')} />
          <NavItem icon={<WhatsApp />} label={t(lang, 'Centro de Mensajes', 'Message Center')} />

          <div className="nav-section-label nav-today-label">{t(lang, 'Pagos de hoy', "Today's payments")}</div>
          <div className="nav-today">
            {today.map((p, i) => <TodayPayment key={i} p={p} lang={lang} collapsed={collapsed} />)}
          </div>
        </div>

        <div className="nav-foot">
          <NavItem icon={<Settings />} label={t(lang, 'Configuración', 'Settings')} />
        </div>
      </nav>
    );
  }

  window.LeftNav = LeftNav;
})();