/* ============================================================
   v3 shared kit — icons, crest, header, left nav, status pill
   Exposed on window for all screen files.
   ============================================================ */

/* ---------- ICONS (Lucide-ish stroke set) ---------- */
const ICON_PATHS = {
  ledger: '<path d="M4 5h16M4 12h16M4 19h10"/>',
  messages: '<path d="M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.4 8.4 0 0 1-4-1L3 21l1.9-4.5A8.38 8.38 0 0 1 3.5 11 8.5 8.5 0 0 1 12 3a8.38 8.38 0 0 1 9 8.5z"/>',
  automations: '<path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z"/>',
  sop: '<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/>',
  config: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>',
  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>',
  moon: '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>',
  search: '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>',
  plus: '<path d="M12 5v14M5 12h14"/>',
  whatsapp: '<path d="M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.4 8.4 0 0 1-4-1L3 21l1.9-4.5A8.38 8.38 0 0 1 3.5 11 8.5 8.5 0 0 1 12 3a8.38 8.38 0 0 1 9 8.5z"/>',
  send: '<path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z"/>',
  check: '<path d="M20 6 9 17l-5-5"/>',
  download: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>',
  cash: '<rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="2.5"/>',
  transfer: '<path d="M17 1l4 4-4 4M3 11V9a4 4 0 0 1 4-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 0 1-4 4H3"/>',
  card: '<rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/>',
  print: '<path d="M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v8H6z"/>',
  filter: '<path d="M22 3H2l8 9.5V19l4 2v-8.5L22 3z"/>',
  columns: '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18M15 3v18"/>',
  clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
  bolt: '<path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z"/>',
  mail: '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 6 10 7L22 6"/>',
  branch: '<circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="12" r="2.5"/><path d="M8.5 6H13a2 2 0 0 1 2 2v1.5M8.5 18H13a2 2 0 0 0 2-2v-1.5"/>',
  flag: '<path d="M4 22V4M4 4h13l-2 4 2 4H4"/>',
  play: '<path d="M5 3l14 9-14 9V3z"/>',
  chevDown: '<path d="m6 9 6 6 6-6"/>',
  chevRight: '<path d="m9 6 6 6-6 6"/>',
  x: '<path d="M18 6 6 18M6 6l12 12"/>',
  user: '<circle cx="12" cy="8" r="4"/><path d="M4 21v-1a7 7 0 0 1 14 0v1"/>',
  users: '<circle cx="9" cy="8" r="3.5"/><path d="M2 21v-1a6 6 0 0 1 12 0v1M16 5a3.5 3.5 0 0 1 0 7M21 21v-1a6 6 0 0 0-4-5.6"/>',
  link: '<path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1.5 1.5M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1.5-1.5"/>',
  image: '<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/>',
  alert: '<path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/>',
  arrowRight: '<path d="M5 12h14M13 6l6 6-6 6"/>',
  trend: '<path d="M22 7 13.5 15.5 8.5 10.5 2 17M16 7h6v6"/>',
  cross: '<path d="M12 2v20M5 9h14"/>',
  calendar: '<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 9h18M8 2v4M16 2v4"/>'
};
function Ic({ name, size = 18, sw = 2, style }) {
  return React.createElement('svg', {
    width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor',
    strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round', style: style,
    dangerouslySetInnerHTML: { __html: ICON_PATHS[name] || '' }
  });
}

/* ---------- CREST ---------- */
function Crest({ size = 34 }) {
  return (
    <div className="crest" style={{ width: size, height: size }}>
      <div className="shield"></div>
      <div className="r">R</div>
    </div>
  );
}

/* ---------- HEADER ---------- */
function AppHeader({ lang = 'es', theme = 'light' }) {
  const t = (es, en) => (lang === 'en' ? en : es);
  return (
    <header className="hdr">
      <div className="hdr-brand">
        <Crest />
        <div>
          <div className="nm">Colegio Nuestra Señora del Rosario <small>· {t('Administración', 'Administration')}</small></div>
          <div className="motto">{t('“Verdad, Virtud y Ciencia”', '“Truth, Virtue and Science”')}</div>
        </div>
      </div>
      <div className="hdr-right">
        <div className="hdr-saved"><span className="ck"><Ic name="check" size={10} sw={3} /></span>{t('Cambios guardados', 'Changes saved')}</div>
        <div className="hdr-seg">
          <span className="sl">{t('IDIOMA', 'LANG')}</span>
          <button aria-pressed={lang === 'es'}>ES</button>
          <button aria-pressed={lang === 'en'}>EN</button>
        </div>
        <div className="hdr-seg">
          <span className="sl">{t('TEMA', 'THEME')}</span>
          <button aria-pressed={theme === 'light'}><Ic name="sun" size={15} /></button>
          <button aria-pressed={theme === 'dark'}><Ic name="moon" size={15} /></button>
        </div>
        <div className="hdr-avatar">SR</div>
      </div>
    </header>
  );
}

/* ---------- LEFT NAV ---------- */
function LeftNav({ active = 'ledger', lang = 'es', collapsed = false, showToday = true }) {
  const t = (es, en) => (lang === 'en' ? en : es);
  const D = window.RZDATA;
  const items = [
    { key: 'ledger', ico: 'ledger', es: 'Libro de Pago', en: 'Payment Ledger' },
    { key: 'mensajes', ico: 'messages', es: 'Centro de Mensajes', en: 'Message Center' },
    { key: 'auto', ico: 'automations', es: 'Automatizaciones', en: 'Automations' },
    { key: 'poe', ico: 'sop', es: 'Procedimiento Operativo', en: 'Standard Operating Proc.' }
  ];
  return (
    <nav className={'nav' + (collapsed ? ' collapsed' : '')}>
      <button className="nav-toggle"><Ic name={collapsed ? 'chevRight' : 'chevDown'} size={12} style={{ transform: collapsed ? 'none' : 'rotate(90deg)' }} /></button>
      <div className="nav-main">
        {items.map(it => (
          <button key={it.key} className={'nav-item' + (active === it.key ? ' active' : '')}>
            <span className="ico"><Ic name={it.ico} size={19} /></span>
            <span className="lbl">{t(it.es, it.en)}{active === it.key && <span className="dot"></span>}</span>
          </button>
        ))}
        {showToday && (
          <>
            <div className="nav-sec today-lbl">{t('Pagos de hoy', "Today's payments")}</div>
            <div className="nav-today">
              {D.todayPayments.slice(0, 5).map((p, i) => (
                <button key={i} className="tp">
                  <div className="who">{p.who}</div>
                  <div className="tp-line">
                    <span className="amt">$ {window.RZH.moneyShort(p.amount)}</span>
                    <span className={'mp ' + p.method}>{p.method === 'cash' ? t('EFECT.', 'CASH') : p.method === 'transfer' ? t('TRANSF.', 'TRANSF') : t('TARJ.', 'CARD')}</span>
                  </div>
                  <div className="tm">{p.time}</div>
                </button>
              ))}
            </div>
          </>
        )}
      </div>
      <div className="nav-foot">
        <button className={'nav-item' + (active === 'config' ? ' active' : '')}>
          <span className="ico"><Ic name="config" size={19} /></span>
          <span className="lbl">{t('Configuración', 'Settings')}</span>
        </button>
      </div>
    </nav>
  );
}

/* ---------- STATUS PILL ---------- */
const STATUS_LABEL = {
  good: { es: 'Al día', en: 'Current' },
  mora1: { es: 'Mora 1 mes', en: '1 month late' },
  mora2: { es: 'Mora 2+ meses', en: '2+ months late' },
  pagado: { es: 'Año pagado', en: 'Year paid' },
  sinmat: { es: 'Sin matrícula', en: 'No enrollment' }
};
function Pill({ status, lang = 'es', sm = false }) {
  const l = STATUS_LABEL[status] || STATUS_LABEL.good;
  return (
    <span className={'pill ' + status + (sm ? ' pill-sm' : '')}>
      <span className="pd"></span>{lang === 'en' ? l.en : l.es}
    </span>
  );
}

Object.assign(window, { Ic, Crest, AppHeader, LeftNav, Pill, STATUS_LABEL });