// Compatible con Babel standalone — NO usar imports
function EsperiencyDashboardLab({ onComplete, onClose }) {
  const { useState, useEffect } = React;
  const LabShell = window.EsperiencyLabShell;
  const [selectedAlert, setSelectedAlert] = useState(null);
  const [selectedEvent, setSelectedEvent] = useState(null);

  const alerts = [
    { id: 'a1', title: 'Pago atrasado: Casa 12', sub: 'Luis Gómez · $4,200', tone: 'danger' },
    { id: 'a2', title: 'Contrato vence en 8 días', sub: 'María López · B-204', tone: 'warn' },
  ];
  const events = [
    { id: 'e1', title: 'Renovación programada', sub: 'Viernes · Torre Norte' },
    { id: 'e2', title: 'Inspección de salida', sub: 'Lunes · C-310' },
  ];

  const checklist = [
    { id: 'alert', label: 'Selecciona una alerta importante' },
    { id: 'event', label: 'Selecciona un evento del calendario' },
    { id: 'confirm', label: 'Confirma que entendiste el panel' },
  ];

  const [confirmed, setConfirmed] = useState(false);

  const checklistState = {
    alert: !!selectedAlert,
    event: !!selectedEvent,
    confirm: confirmed,
  };

  const canConfirm = checklistState.alert && checklistState.event;

  useEffect(() => {
    if (confirmed && typeof onComplete === 'function') {
      onComplete('lab-dashboard');
    }
  }, [confirmed, onComplete]);

  return (
    <LabShell
      title="Lab: Leer el dashboard"
      description="Identifica una alerta y un evento. Es un panel de práctica."
      checklist={checklist}
      checklistState={checklistState}
      onClose={onClose}
      success={confirmed}
    >
      <div style={{ marginBottom: 14 }}>
        <div className="tutorial-section-title">Alertas</div>
        {alerts.map((a) => (
          <button
            key={a.id}
            type="button"
            className={`tutorial-mock-alert ${selectedAlert === a.id ? 'selected' : ''}`}
            onClick={() => setSelectedAlert(a.id)}
          >
            <i
              className={`fas ${a.tone === 'danger' ? 'fa-circle-exclamation' : 'fa-triangle-exclamation'}`}
              style={{ color: a.tone === 'danger' ? '#f87171' : '#fbbf24', marginTop: 2 }}
              aria-hidden="true"
            ></i>
            <div>
              <div style={{ fontWeight: 600 }}>{a.title}</div>
              <div style={{ fontSize: '0.8rem', color: 'var(--tutorial-muted)' }}>{a.sub}</div>
            </div>
          </button>
        ))}
      </div>

      <div style={{ marginBottom: 14 }}>
        <div className="tutorial-section-title">Calendario</div>
        {events.map((e) => (
          <button
            key={e.id}
            type="button"
            className={`tutorial-mock-event ${selectedEvent === e.id ? 'selected' : ''}`}
            onClick={() => setSelectedEvent(e.id)}
          >
            <i className="fas fa-calendar-day" style={{ color: 'var(--tutorial-accent)', marginTop: 2 }} aria-hidden="true"></i>
            <div>
              <div style={{ fontWeight: 600 }}>{e.title}</div>
              <div style={{ fontSize: '0.8rem', color: 'var(--tutorial-muted)' }}>{e.sub}</div>
            </div>
          </button>
        ))}
      </div>

      <button
        type="button"
        className="tutorial-btn tutorial-btn-primary"
        disabled={!canConfirm || confirmed}
        onClick={() => setConfirmed(true)}
      >
        {confirmed ? 'Panel comprendido' : 'Confirmar lectura del panel'}
      </button>
    </LabShell>
  );
}

window.EsperiencyDashboardLab = EsperiencyDashboardLab;