/* global React */

function MobileStatusBar() {
  const I = window.Icons;
  return (
    <div className="mobile-statusbar">
      <span>9:41</span>
      <span className="mobile-statusbar__icons">
        <I.Signal size={14} />
        <I.Wifi size={14} />
        <I.Battery size={20} />
      </span>
    </div>
  );
}

function MobileHome({ user, roleId, onNavigate }) {
  const I = window.Icons;
  const greeting = window.getGreeting();
  const first = user.name.split(' ')[0];
  const modules = window.homeModulesForRole(roleId);
  const kpis = window.getKPIs(roleId);

  let chips;
  if (roleId === 'institucion') {
    chips = [
      { icon: 'AlertCircle', num: 1, label: 'Reporte devuelto', tone: 'warn' },
      { icon: 'Clock', num: 3, label: 'Plazos esta semana', tone: 'danger' },
    ];
  } else if (roleId === 'cancilleria') {
    chips = [
      { icon: 'FileText', num: 3, label: 'Reportes aprobados' },
      { icon: 'MessageSquare', num: 1, label: 'Mensajes nuevos' },
    ];
  } else {
    chips = [
      { icon: 'Inbox', num: 7, label: 'Reportes para revisión', tone: 'warn' },
      { icon: 'Clock', num: 5, label: 'Plazos esta semana', tone: 'danger' },
    ];
  }

  return (
    <div className="mobile-stage" data-screen-label="02 Home · Mobile">
      <div className="mobile-frame">
        <MobileStatusBar />

        <div className="mobile-topbar">
          <div className="mobile-topbar__logo">
            <img src="assets/cgr-logo.png" alt="CGR" />
          </div>
          <div className="mobile-topbar__text">
            <small>CGR Paraguay</small>
            <strong>Compromisos</strong>
          </div>
          <div className="mobile-topbar__actions">
            <button type="button" className="mobile-topbar__btn">
              <I.Search size={18} />
            </button>
            <button type="button" className="mobile-topbar__btn">
              <I.Bell size={18} />
              <span className="dot"></span>
            </button>
          </div>
        </div>

        <div className="mobile-content">
          <div className="mobile-welcome">
            <h1>{greeting}, {first}.</h1>
            <p>{user.role}</p>
          </div>

          <div className="mobile-chips">
            {chips.map((c, i) => (
              <div key={i} className={`mobile-chip${c.tone ? ' is-' + c.tone : ''}`}>
                <div className="mobile-chip__icon">{React.createElement(I[c.icon], { size: 16 })}</div>
                <div>
                  <div className="mobile-chip__num">{c.num}</div>
                  <div className="mobile-chip__label">{c.label}</div>
                </div>
              </div>
            ))}
          </div>

          <div className="mobile-section-head">Módulos</div>
          <div className="mobile-modules">
            {modules.map(m => (
              <button
                type="button"
                key={m.id}
                className="mobile-module"
                onClick={() => onNavigate(m.id)}
              >
                <div className="mobile-module__icon">{React.createElement(I[m.icon], { size: 18 })}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="mobile-module__title">{m.title}</div>
                  <div className="mobile-module__desc">{m.desc}</div>
                </div>
                {m.badge && (
                  <span className={`mobile-module__badge${m.badge.tone === 'info' ? ' is-info' : ''}`}>
                    {m.badge.count}
                  </span>
                )}
                <I.ChevronRight size={16} style={{ color: 'var(--cgr-text-muted)', marginLeft: 4 }} />
              </button>
            ))}
          </div>
        </div>

        <div className="mobile-tabbar">
          <button type="button" className="mobile-tab is-active">
            <I.Home size={18} /><span>Inicio</span>
          </button>
          <button type="button" className="mobile-tab">
            <I.ListChecks size={18} /><span>Compromisos</span>
          </button>
          <button type="button" className="mobile-tab">
            <I.MessageSquare size={18} /><span>Mensajes</span>
          </button>
          <button type="button" className="mobile-tab">
            <I.Bell size={18} /><span>Alertas</span>
          </button>
          <button type="button" className="mobile-tab">
            <I.Users size={18} /><span>Perfil</span>
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MobileHome });