/* ============================================================
   AI4Colegios UI Kit — LeftNav.jsx
   Collapsible left navigation (220 ⇄ 58px) + "Pagos de hoy" feed.
   Config pinned to the foot. Toggle = «/» at the rail edge.

   AI4N INTEGRATION HOOK (re-apply when Claude Design ships a new LeftNav):
     props.active      = current page key ('ledger'|'mensajes'|'config'|…)
     props.onNavigate  = (key) => void   ← called on item click
   ============================================================ */
(function () {
  const { Ledger, Register, WhatsApp, Settings, Grid } = window.Icons;
  const { t, moneyShort } = window.RZH;

  function NavItem({ icon, label, active, future, sub, onClick }) {
    return (
      <a href="#" className={'nav-item' + (active ? ' is-active' : '') + (future ? ' nav-future' : '')}
         aria-current={active ? 'page' : undefined} title={label}
         onClick={(e) => { e.preventDefault(); onClick && onClick(); }}>
        <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, active, onNavigate }) {
    const nav = (k) => () => { onNavigate && onNavigate(k); };
    const ledgerActive = active === 'ledger' || active === 'ficha' || active === 'family';
    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">
          <NavItem icon={<Grid />} label={t(lang, 'POE', 'SOP')} sub={t(lang, 'Procedimiento Operativo Estándar', 'Standard Operating Procedure')} active={active === 'poe'} onClick={nav('poe')} />
          <NavItem icon={<Ledger />} label={t(lang, 'Libro de Pago', 'Payment Ledger')} active={ledgerActive} onClick={nav('ledger')} />
          <NavItem icon={<WhatsApp />} label={t(lang, 'Centro de Mensajes', 'Message Center')} active={active === 'mensajes'} onClick={nav('mensajes')} />

          <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')} active={active === 'config'} onClick={nav('config')} />
        </div>
      </nav>
    );
  }

  window.LeftNav = LeftNav;
})();