/* global React */
// Home (hub principal). Rediseño: saludo breve, "Requiere tu atención" con
// 3 tarjetas accionables y accesos rápidos compactos.

// ---------------- Pendientes por rol ----------------
function getFocusItems(roleId) {
  if (roleId === 'institucion') {
    return [
      { icon: 'AlertCircle',   num: '1', label: 'Reporte devuelto para ajuste', tone: 'warn',   go: 'mis_compromisos' },
      { icon: 'Clock',         num: '3', label: 'Plazos vencen esta semana',    tone: 'danger', go: 'alertas' },
      { icon: 'MessageSquare', num: '2', label: 'Mensajes sin leer',            tone: 'info',   go: 'mensajeria' },
    ];
  }
  if (roleId === 'cancilleria') {
    return [
      { icon: 'FileText',      num: '3', label: 'Reportes aprobados nuevos', tone: 'ok',   go: 'reportes_aprobados' },
      { icon: 'Calendar',      num: 'V', label: 'Ronda MESICIC en curso',    tone: 'info', go: 'reportes_aprobados' },
      { icon: 'MessageSquare', num: '1', label: 'Mensaje sin leer',          tone: 'info', go: 'mensajeria' },
    ];
  }
  return [
    { icon: 'Inbox',         num: '7', label: 'Reportes por revisar',      tone: 'warn',   go: 'compromisos' },
    { icon: 'Clock',         num: '5', label: 'Plazos vencen esta semana', tone: 'danger', go: 'alertas' },
    { icon: 'MessageSquare', num: '3', label: 'Mensajes sin leer',         tone: 'info',   go: 'mensajeria' },
  ];
}

// Orden de los accesos rápidos (por frecuencia de uso)
const HOME_ORDER = {
  admin:       ['compromisos', 'alertas', 'mensajeria', 'reportes', 'instituciones', 'usuarios'],
  superadmin:  ['compromisos', 'alertas', 'mensajeria', 'reportes', 'instituciones', 'usuarios', 'catalogos'],
  institucion: ['mis_compromisos', 'cargar_avance', 'alertas', 'mensajeria'],
  cancilleria: ['reportes_aprobados', 'mensajeria'],
};

function formatToday() {
  try {
    const s = new Date().toLocaleDateString('es-PY', { weekday: 'long', day: 'numeric', month: 'long' });
    return s.charAt(0).toUpperCase() + s.slice(1);
  } catch (e) { return ''; }
}

// "D-3" -> 3 días restantes · "D" -> 0 · "D+2" -> -2 (vencido)
function daysFromCode(code) {
  if (code === 'D') return 0;
  const m = /^D([+-])(\d+)$/.exec(code || '');
  if (!m) return 99;
  return m[1] === '-' ? Number(m[2]) : -Number(m[2]);
}
function deadlineLabel(d) {
  if (d < 0) return `Vencido · ${-d} ${-d === 1 ? 'día' : 'días'}`;
  if (d === 0) return 'Hoy';
  if (d === 1) return 'Mañana';
  return `En ${d} días`;
}
function deadlineTone(d) {
  if (d < 0) return 'overdue';
  if (d <= 1) return 'now';
  if (d <= 3) return 'soon';
  return 'normal';
}

// ---------------- Hero ----------------
function HomeHero({ user, roleId, onNavigate }) {
  const I = window.Icons;
  const first = user.name.split(' ')[0];
  return (
    <section className="hm-hero">
      <div>
        <div className="welcome__eyebrow">
          <span>{user.org}</span>
          <span className="role-pill">{user.role}</span>
        </div>
        <h1>{window.getGreeting()}, {first}.</h1>
        <p className="hm-hero__date"><I.Calendar size={14} /> {formatToday()}</p>
      </div>
      {roleId === 'institucion' && (
        <button type="button" className="btn btn--primary hm-hero__cta" onClick={() => onNavigate('cargar_avance')}>
          <I.Upload size={15} /> Cargar avance
        </button>
      )}
    </section>
  );
}

// ---------------- Requiere tu atención ----------------
function FocusCard({ item, onClick }) {
  const I = window.Icons;
  return (
    <button type="button" className={`hm-focus is-${item.tone}`} onClick={onClick} aria-label={`${item.num} ${item.label}`}>
      <span className="hm-focus__icon">{React.createElement(I[item.icon], { size: 20 })}</span>
      <span className="hm-focus__text">
        <span className="hm-focus__num">{item.num}</span>
        <span className="hm-focus__label">{item.label}</span>
      </span>
      <span className="hm-focus__go"><I.ChevronRight size={16} /></span>
    </button>
  );
}

// ---------------- Acceso rápido ----------------
function ModuleTile({ m, onClick }) {
  const I = window.Icons;
  const alert = m.badge && m.badge.tone === 'danger';
  return (
    <button type="button" className="hm-tile" onClick={onClick}>
      <span className="hm-tile__icon">{React.createElement(I[m.icon], { size: 18 })}</span>
      <span className="hm-tile__text">
        <span className="hm-tile__head">
          <span className="hm-tile__title">{m.nav || m.title}</span>
          {m.badge && <span className={`hm-tile__badge${alert ? ' is-alert' : ''}`}>{m.badge.count}</span>}
        </span>
        <span className="hm-tile__desc">{m.short || m.desc}</span>
      </span>
      <span className="hm-tile__arrow"><I.ArrowRight size={14} /></span>
    </button>
  );
}

// ---------------- Próximos vencimientos ----------------
function DeadlineRows({ items, onOpen }) {
  const I = window.Icons;
  const rows = items
    .map(d => ({ ...d, days: daysFromCode(d.code) }))
    .sort((a, b) => a.days - b.days);
  return (
    <div className="hm-list">
      {rows.map((d, i) => (
        <button type="button" key={i} className="hm-row" onClick={onOpen}>
          <span className={`hm-due is-${deadlineTone(d.days)}`}>{deadlineLabel(d.days)}</span>
          <span className="hm-row__body">
            <span className="hm-row__title">{d.title}</span>
            <span className="hm-row__meta">{d.inst} · <span className="mono">{d.id}</span> · {d.date}</span>
          </span>
          <span className="hm-row__go"><I.ChevronRight size={14} /></span>
        </button>
      ))}
    </div>
  );
}

// ---------------- Actividad reciente ----------------
function ActivityRows({ items }) {
  const I = window.Icons;
  const iconFor = t => {
    if (t === 'submitted') return <I.Upload size={14} />;
    if (t === 'returned')  return <I.AlertCircle size={14} />;
    if (t === 'approved')  return <I.CheckCircle2 size={14} />;
    if (t === 'alert')     return <I.Bell size={14} />;
    if (t === 'message')   return <I.MessageSquare size={14} />;
    return <I.FileText size={14} />;
  };
  return (
    <div className="hm-list">
      {items.map((it, i) => (
        <div className="hm-act" key={i}>
          <span className={`hm-act__icon is-${it.avatarTone}`}>{iconFor(it.type)}</span>
          <span className="hm-act__body">
            <span className="hm-act__line"><strong>{it.actor}</strong> {it.body} {it.ref && <span className="hm-act__ref mono">{it.ref}</span>}</span>
            {it.title && <span className="hm-act__sub">{it.title.replace(/"/g, '').replace(/\.$/, '')}</span>}
          </span>
          <span className="hm-act__time">{it.time}</span>
        </div>
      ))}
    </div>
  );
}

// ---------------- Home Screen ----------------
function HomeScreen({ user, roleId, onNavigate }) {
  const focus = getFocusItems(roleId);
  const available = window.homeModulesForRole(roleId);
  const byId = Object.fromEntries(available.map(m => [m.id, m]));
  const order = HOME_ORDER[roleId] || available.map(m => m.id);
  const tiles = order.map(id => byId[id]).filter(Boolean);

  return (
    <div className="hm" data-screen-label="01 Home Dashboard">
      <HomeHero user={user} roleId={roleId} onNavigate={onNavigate} />

      <section className="hm-section">
        <div className="hm-section__head">
          <h2>Requiere tu atención</h2>
        </div>
        <div className="hm-focus-grid">
          {focus.map((f, i) => (
            <FocusCard key={i} item={f} onClick={() => onNavigate(f.go)} />
          ))}
        </div>
      </section>

      <section className="hm-section">
        <div className="hm-section__head">
          <h2>Accesos rápidos</h2>
        </div>
        <div className="hm-tiles">
          {tiles.map(m => (
            <ModuleTile key={m.id} m={m} onClick={() => onNavigate(m.id)} />
          ))}
        </div>
      </section>

    </div>
  );
}

// ---------------- Stub Screen ----------------
function StubScreen({ moduleDef, onBack }) {
  const I = window.Icons;
  return (
    <div data-screen-label={`Stub · ${moduleDef.title}`}>
      <div className="stub">
        <div className="stub__icon">{React.createElement(I[moduleDef.icon], { size: 28 })}</div>
        <h2>{moduleDef.title}</h2>
        <p>
          Este módulo está fuera del alcance de esta primera entrega.
          El foco de este prototipo es la <strong>pantalla Home</strong> (hub principal).
          La navegación queda preparada para conectarse con las pantallas detalladas en próximas iteraciones.
        </p>
        <button type="button" className="btn btn--primary" onClick={onBack}>
          <I.Home size={14} /> Volver al inicio
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { HomeScreen, StubScreen });