function Empleados() {
  const toast = useToast();
  const [rows, setRows] = React.useState([]);
  const [areas, setAreas] = React.useState([]);
  const [tiendas, setTiendas] = React.useState([]);
  const [unidades, setUnidades] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [editando, setEditando] = React.useState(null);
  const [eliminando, setEliminando] = React.useState(null);

  const cargar = React.useCallback(async () => {
    setLoading(true);

    // Cada catálogo se carga de forma independiente. Así, si tiendas o unidades
    // tienen un problema temporal, no se pierde la lista de Áreas del formulario.
    const resultados = await Promise.allSettled([
      Api.get('/empleados'),
      Api.get('/areas', { activas: 'true' }),
      Api.get('/tiendas'),
      Api.get('/unidades-vehiculares'),
    ]);

    const [r1, r2, r3, r4] = resultados;

    if (r1.status === 'fulfilled') setRows(r1.value.data);
    else toast.error(`No se pudieron cargar los empleados: ${r1.reason?.message || 'error inesperado'}`);

    if (r2.status === 'fulfilled') setAreas(r2.value.data);
    else toast.error(`No se pudieron cargar las áreas: ${r2.reason?.message || 'error inesperado'}`);

    if (r3.status === 'fulfilled') setTiendas(r3.value.data);
    else toast.error(`No se pudieron cargar las tiendas: ${r3.reason?.message || 'error inesperado'}`);

    if (r4.status === 'fulfilled') setUnidades(r4.value.data);
    else toast.error(`No se pudieron cargar las unidades vehiculares: ${r4.reason?.message || 'error inesperado'}`);

    setLoading(false);
  }, []);

  React.useEffect(() => { cargar(); }, [cargar]);

  const guardar = async (form) => {
    try {
      if (form.id) await Api.put(`/empleados/${form.id}`, form);
      else await Api.post('/empleados', form);
      toast.success('Empleado guardado');
      setEditando(null);
      cargar();
    } catch (err) { toast.error(err.message); }
  };

  const eliminar = async () => {
    try {
      await Api.del(`/empleados/${eliminando.id}`);
      toast.success('Empleado eliminado');
      setEliminando(null);
      cargar();
    } catch (err) { toast.error(err.message); }
  };

  return (
    <div>
      <div className="panel">
        <div className="panel__header">
          <div className="panel__title">Empleados</div>
          <button className="btn btn-primary btn-sm" onClick={() => setEditando({})}><IconPlus size={14} /> Nuevo empleado</button>
        </div>
        {loading ? <p className="text-muted">Cargando…</p> : (
          <DataTable
            columns={[
              { key: 'nombre', header: 'Nombre' },
              { key: 'area_nombre', header: 'Área' },
              { key: 'cargo', header: 'Cargo' },
              { key: 'responsable_de', header: 'Responsable de', render: (r) => r.tienda_nombre || r.unidad_vehicular_placa || <span className="text-muted">—</span> },
              { key: 'estado', header: 'Estado', render: (r) => <span className="tag-chip">{r.estado}</span> },
              { key: 'acciones', header: '', render: (r) => (
                <div style={{ display: 'flex', gap: 6 }}>
                  <button className="icon-btn" onClick={() => setEditando(r)}><IconEdit size={14} /></button>
                  <button className="icon-btn" onClick={() => setEliminando(r)}><IconTrash size={14} /></button>
                </div>
              ) },
            ]}
            rows={rows}
            emptyTitle="Sin empleados"
            emptyHint="Crea el primer empleado para poder asignarlo a movimientos."
          />
        )}
      </div>

      {editando && <EmpleadoModal empleado={editando} areas={areas} tiendas={tiendas} unidades={unidades} onClose={() => setEditando(null)} onSave={guardar} />}

      <ConfirmDialog
        open={!!eliminando}
        title="Eliminar empleado"
        message={`¿Eliminar a "${eliminando?.nombre}"? Si tiene movimientos registrados, no podrá eliminarse (desactívalo en su lugar).`}
        danger
        confirmLabel="Eliminar"
        onCancel={() => setEliminando(null)}
        onConfirm={eliminar}
      />
    </div>
  );
}

function EmpleadoModal({ empleado, areas, tiendas, unidades, onClose, onSave }) {
  const [form, setForm] = React.useState({
    id: empleado.id, nombre: empleado.nombre || '', area_id: empleado.area_id || (areas[0]?.id ?? ''),
    cargo: empleado.cargo || '', estado: empleado.estado || 'ACTIVO',
    responsableTipo: empleado.tienda_id ? 'TIENDA' : empleado.unidad_vehicular_id ? 'UNIDAD_VEHICULAR' : '',
    tienda_id: empleado.tienda_id || '', unidad_vehicular_id: empleado.unidad_vehicular_id || '',
  });

  // Si el modal se abrió antes de que terminara de cargar el catálogo,
  // selecciona automáticamente la primera área activa cuando ya esté disponible.
  React.useEffect(() => {
    if (!form.area_id && areas.length > 0) {
      setForm((prev) => ({ ...prev, area_id: areas[0].id }));
    }
  }, [areas, form.area_id]);

  const guardar = () => {
    const payload = {
      id: form.id, nombre: form.nombre, area_id: form.area_id, cargo: form.cargo, estado: form.estado,
      tienda_id: form.responsableTipo === 'TIENDA' ? (form.tienda_id || null) : null,
      unidad_vehicular_id: form.responsableTipo === 'UNIDAD_VEHICULAR' ? (form.unidad_vehicular_id || null) : null,
    };
    onSave(payload);
  };

  return (
    <div className="modal-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal-card">
        <div className="modal-card__header">
          <div className="modal-card__title">{empleado.id ? 'Editar empleado' : 'Nuevo empleado'}</div>
          <button className="icon-btn" onClick={onClose}><IconX size={16} /></button>
        </div>
        <div className="modal-card__body stack-y">
          <div className="field">
            <label>Nombre completo</label>
            <input value={form.nombre} onChange={(e) => setForm({ ...form, nombre: e.target.value })} autoFocus />
          </div>
          <div className="field">
            <label>Área</label>
            <select
              value={form.area_id}
              onChange={(e) => setForm({ ...form, area_id: Number(e.target.value) })}
              disabled={!areas.length}
            >
              {!areas.length && <option value="">Cargando áreas…</option>}
              {areas.map((a) => <option key={a.id} value={a.id}>{a.nombre}</option>)}
            </select>
          </div>
          <div className="field">
            <label>Cargo</label>
            <input value={form.cargo} onChange={(e) => setForm({ ...form, cargo: e.target.value })} />
          </div>

          <div className="field">
            <label>¿Es responsable de una tienda o unidad vehicular?</label>
            <select value={form.responsableTipo} onChange={(e) => setForm({ ...form, responsableTipo: e.target.value, tienda_id: '', unidad_vehicular_id: '' })}>
              <option value="">No</option>
              <option value="TIENDA">Responsable de una tienda</option>
              <option value="UNIDAD_VEHICULAR">Responsable de una unidad vehicular</option>
            </select>
          </div>
          {form.responsableTipo === 'TIENDA' && (
            <div className="field">
              <label>Tienda</label>
              <select value={form.tienda_id} onChange={(e) => setForm({ ...form, tienda_id: Number(e.target.value) })}>
                <option value="">Selecciona…</option>
                {tiendas.map((t) => <option key={t.id} value={t.id}>{t.nombre}</option>)}
              </select>
            </div>
          )}
          {form.responsableTipo === 'UNIDAD_VEHICULAR' && (
            <div className="field">
              <label>Unidad vehicular</label>
              <select value={form.unidad_vehicular_id} onChange={(e) => setForm({ ...form, unidad_vehicular_id: Number(e.target.value) })}>
                <option value="">Selecciona…</option>
                {unidades.map((u) => <option key={u.id} value={u.id}>{u.placa}</option>)}
              </select>
            </div>
          )}

          {empleado.id && (
            <div className="field">
              <label>Estado</label>
              <select value={form.estado} onChange={(e) => setForm({ ...form, estado: e.target.value })}>
                <option value="ACTIVO">Activo</option>
                <option value="INACTIVO">Inactivo</option>
              </select>
            </div>
          )}
        </div>
        <div className="modal-card__footer">
          <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary" onClick={guardar} disabled={!form.nombre.trim()}>Guardar</button>
        </div>
      </div>
    </div>
  );
}