function UnidadesVehiculares() {
  const toast = useToast();
  const [rows, setRows] = 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);
    try { setRows((await Api.get('/unidades-vehiculares')).data); } catch (err) { toast.error(err.message); } finally { setLoading(false); }
  }, []);

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

  const guardar = async (form) => {
    try {
      if (form.id) await Api.put(`/unidades-vehiculares/${form.id}`, form);
      else await Api.post('/unidades-vehiculares', form);
      toast.success('Unidad vehicular guardada');
      setEditando(null);
      cargar();
    } catch (err) { toast.error(err.message); }
  };

  const eliminar = async () => {
    try {
      await Api.del(`/unidades-vehiculares/${eliminando.id}`);
      toast.success('Unidad vehicular eliminada');
      setEliminando(null);
      cargar();
    } catch (err) { toast.error(err.message); }
  };

  return (
    <div>
      <div className="panel">
        <div className="panel__header">
          <div className="panel__title">Unidades vehiculares</div>
          <button className="btn btn-primary btn-sm" onClick={() => setEditando({})}><IconPlus size={14} /> Nueva unidad</button>
        </div>
        {loading ? <p className="text-muted">Cargando…</p> : (
          <DataTable
            columns={[
              { key: 'placa', header: 'Placa', mono: true },
              { key: 'descripcion', header: 'Descripción' },
              { 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 unidades vehiculares registradas"
            emptyHint="Créalas para poder asignarles responsables y recibir baterías/luces."
          />
        )}
      </div>

      {editando && <UnidadVehicularModal unidad={editando} onClose={() => setEditando(null)} onSave={guardar} />}

      <ConfirmDialog
        open={!!eliminando}
        title="Eliminar unidad vehicular"
        message={`¿Eliminar "${eliminando?.placa}"? Si tiene movimientos registrados, no podrá eliminarse.`}
        danger
        confirmLabel="Eliminar"
        onCancel={() => setEliminando(null)}
        onConfirm={eliminar}
      />
    </div>
  );
}

function UnidadVehicularModal({ unidad, onClose, onSave }) {
  const [form, setForm] = React.useState({ id: unidad.id, placa: unidad.placa || '', descripcion: unidad.descripcion || '', estado: unidad.estado || 'ACTIVO' });
  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">{unidad.id ? 'Editar unidad vehicular' : 'Nueva unidad vehicular'}</div>
          <button className="icon-btn" onClick={onClose}><IconX size={16} /></button>
        </div>
        <div className="modal-card__body stack-y">
          <div className="field">
            <label>Placa</label>
            <input value={form.placa} onChange={(e) => setForm({ ...form, placa: e.target.value.toUpperCase() })} placeholder="Ej. ABC-123" autoFocus />
          </div>
          <div className="field">
            <label>Descripción</label>
            <input value={form.descripcion} onChange={(e) => setForm({ ...form, descripcion: e.target.value })} placeholder="Ej. Camioneta reparto zona norte" />
          </div>
          {unidad.id && (
            <div className="field">
              <label>Estado</label>
              <select value={form.estado} onChange={(e) => setForm({ ...form, estado: e.target.value })}>
                <option value="ACTIVO">Activa</option>
                <option value="INACTIVO">Inactiva</option>
              </select>
            </div>
          )}
        </div>
        <div className="modal-card__footer">
          <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary" onClick={() => onSave(form)} disabled={!form.placa.trim()}>Guardar</button>
        </div>
      </div>
    </div>
  );
}