// Compatible con Babel standalone — NO usar imports
function EsperiencyTaskLab({ onComplete, onClose }) {
  const { useState, useEffect } = React;
  const LabShell = window.EsperiencyLabShell;
  const [title, setTitle] = useState('');
  const [priority, setPriority] = useState('');
  const [tasks, setTasks] = useState([]);

  const hasCreated = tasks.length > 0;
  const hasCompleted = tasks.some((t) => t.done);

  const checklist = [
    { id: 'title', label: 'Escribe el título de la tarea' },
    { id: 'priority', label: 'Elige una prioridad' },
    { id: 'create', label: 'Crea la tarea en la bandeja' },
    { id: 'done', label: 'Márcala como completada' },
  ];

  const checklistState = {
    title: title.trim().length >= 3,
    priority: !!priority,
    create: hasCreated,
    done: hasCompleted,
  };

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

  const createTask = () => {
    if (title.trim().length < 3 || !priority) return;
    setTasks((prev) => [
      { id: Date.now(), title: title.trim(), priority, done: false },
      ...prev,
    ]);
    setTitle('');
  };

  return (
    <LabShell
      title="Lab: Crear una tarea"
      description="Simula la bandeja de Tareas. Crea un pendiente y ciérralo."
      checklist={checklist}
      checklistState={checklistState}
      onClose={onClose}
      success={hasCompleted}
    >
      <div className="tutorial-field">
        <label htmlFor="lab-task-title">Título</label>
        <input
          id="lab-task-title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Ej. Llamar por renovación"
          autoComplete="off"
        />
      </div>
      <div className="tutorial-field">
        <label htmlFor="lab-task-priority">Prioridad</label>
        <select id="lab-task-priority" value={priority} onChange={(e) => setPriority(e.target.value)}>
          <option value="">Selecciona…</option>
          <option value="alta">Alta</option>
          <option value="media">Media</option>
          <option value="baja">Baja</option>
        </select>
      </div>
      <button
        type="button"
        className="tutorial-btn tutorial-btn-primary"
        disabled={title.trim().length < 3 || !priority}
        onClick={createTask}
      >
        Crear tarea
      </button>

      <div style={{ marginTop: 16 }}>
        {tasks.length === 0 && (
          <p style={{ color: 'var(--tutorial-muted)', fontSize: '0.88rem' }}>Aún no hay tareas en el sandbox.</p>
        )}
        {tasks.map((task) => (
          <div key={task.id} className={`tutorial-task-item ${task.done ? 'done' : ''}`}>
            <input
              type="checkbox"
              checked={!!task.done}
              onChange={() => {
                setTasks((prev) =>
                  prev.map((t) => (t.id === task.id ? Object.assign({}, t, { done: !t.done }) : t))
                );
              }}
              aria-label={`Completar ${task.title}`}
            />
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600 }}>{task.title}</div>
              <div style={{ fontSize: '0.75rem', color: 'var(--tutorial-muted)', textTransform: 'capitalize' }}>
                Prioridad {task.priority}
              </div>
            </div>
          </div>
        ))}
      </div>
    </LabShell>
  );
}

window.EsperiencyTaskLab = EsperiencyTaskLab;