// EmptyState — canonical empty pattern for any module
// Variant tones: green (positive null), navy (neutral), amber (waiting), blue (action)

const EmptyState = ({ tone = 'navy', icon = 'IconBook', title, description, primary, secondary, meta }) => {
  const Ico = window[icon] || IconBook;
  return (
    <div className="es">
      <div className={`es-art ${tone}`}>
        <Ico size={36} />
      </div>
      <h3 className="es-title">{title}</h3>
      {description && <p className="es-sub">{description}</p>}
      {meta && (
        <div className="es-meta">
          {meta.map((m, i) => <span key={i}>{m}</span>)}
        </div>
      )}
      {(primary || secondary) && (
        <div className="es-actions">
          {secondary && (
            <button className="btn" onClick={secondary.onClick}>
              {secondary.icon ? React.createElement(window[secondary.icon] || IconExternal, { size: 14 }) : null}
              {secondary.label}
            </button>
          )}
          {primary && (
            <button className="btn primary" onClick={primary.onClick}>
              {primary.icon ? React.createElement(window[primary.icon] || IconPlus, { size: 14 }) : null}
              {primary.label}
            </button>
          )}
        </div>
      )}
    </div>
  );
};

// ─── Three preset empty states matching the spec ─────────

const ESCoursesEmpty = ({ onAssign }) => (
  <EmptyState
    tone="navy"
    icon="IconBook"
    title="No hay capacitaciones asignadas aún"
    description="Cuando asignes cursos a este colaborador desde su matriz de cargo o manualmente, aparecerán aquí con su estado y fecha de vencimiento."
    primary={{ label: 'Asignar capacitación', icon: 'IconPlus', onClick: onAssign }}
    secondary={{ label: 'Ver matriz del cargo', icon: 'IconExternal' }}
    meta={['Plan formativo Atica', '47 cursos en catálogo']}
  />
);

const ESDocsEmpty = ({ onClose }) => (
  <EmptyState
    tone="green"
    icon="IconCheck"
    title="No tienes documentos pendientes"
    description="Excelente — toda tu documentación está al día. Los nuevos documentos que requieran tu firma aparecerán aquí y recibirás una notificación."
    secondary={{ label: 'Ver mis documentos firmados', icon: 'IconDoc', onClick: onClose }}
    meta={['Última firma: 02/05/2026', '5 documentos en tu ficha']}
  />
);

const ESRequestsEmpty = ({ onCreate }) => (
  <EmptyState
    tone="blue"
    icon="IconCalendar"
    title="No hay solicitudes pendientes de aprobación"
    description="Cuando los colaboradores envíen solicitudes de vacaciones, permisos, novedades o licencias, aparecerán aquí ordenadas por urgencia."
    primary={{ label: 'Ir a calendario del equipo', icon: 'IconCalendar', onClick: onCreate }}
    secondary={{ label: 'Ver historial', icon: 'IconExternal' }}
    meta={['SLA promedio: 24 h', '0 vencidas en este momento']}
  />
);

window.EmptyState        = EmptyState;
window.ESCoursesEmpty    = ESCoursesEmpty;
window.ESDocsEmpty       = ESDocsEmpty;
window.ESRequestsEmpty   = ESRequestsEmpty;