// Compatible con Babel standalone — NO usar imports
function EsperiencyTenantLab({ onComplete, onClose }) {
  const { useState, useEffect } = React;
  const LabShell = window.EsperiencyLabShell;
  const [form, setForm] = useState({
    name: '',
    apartment: '',
    rent: '',
  });
  const [saved, setSaved] = useState(false);

  const checklist = [
    { id: 'name', label: 'Escribe el nombre del inquilino' },
    { id: 'apartment', label: 'Elige un departamento' },
    { id: 'rent', label: 'Indica la renta mensual' },
    { id: 'save', label: 'Guarda el registro de práctica' },
  ];

  const checklistState = {
    name: form.name.trim().length >= 3,
    apartment: !!form.apartment,
    rent: Number(form.rent) > 0,
    save: saved,
  };

  const canSave = checklistState.name && checklistState.apartment && checklistState.rent;

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

  const setField = (key) => (e) => {
    const value = e.target.value;
    setForm((prev) => Object.assign({}, prev, { [key]: value }));
    if (saved) setSaved(false);
  };

  return (
    <LabShell
      title="Lab: Alta de inquilino"
      description="Completa el formulario. Nada se envía a tu organización real."
      checklist={checklist}
      checklistState={checklistState}
      onClose={onClose}
      success={saved}
    >
      <div className="tutorial-field">
        <label htmlFor="lab-tenant-name">Nombre completo</label>
        <input
          id="lab-tenant-name"
          value={form.name}
          onChange={setField('name')}
          placeholder="Ej. Ana Pérez"
          autoComplete="off"
        />
      </div>
      <div className="tutorial-field">
        <label htmlFor="lab-tenant-apt">Departamento</label>
        <select id="lab-tenant-apt" value={form.apartment} onChange={setField('apartment')}>
          <option value="">Selecciona…</option>
          <option value="A-101">A-101 · Torre Norte</option>
          <option value="B-204">B-204 · Torre Sur</option>
          <option value="C-310">C-310 · Jardines</option>
        </select>
      </div>
      <div className="tutorial-field">
        <label htmlFor="lab-tenant-rent">Renta mensual</label>
        <input
          id="lab-tenant-rent"
          type="number"
          min="1"
          value={form.rent}
          onChange={setField('rent')}
          placeholder="8500"
        />
      </div>
      <button
        type="button"
        className="tutorial-btn tutorial-btn-primary"
        disabled={!canSave || saved}
        onClick={() => setSaved(true)}
      >
        {saved ? 'Guardado en sandbox' : 'Guardar inquilino (práctica)'}
      </button>
      {saved && (
        <p style={{ marginTop: 12, color: 'var(--tutorial-muted)', fontSize: '0.88rem' }}>
          {form.name} → {form.apartment} · ${Number(form.rent).toLocaleString()} / mes
        </p>
      )}
    </LabShell>
  );
}

window.EsperiencyTenantLab = EsperiencyTenantLab;