import { categoriaAplicaA } from "../_standards";
import { Add, AccountBalance, Warning, Settings } from "@mui/icons-material";
import {
  Autocomplete,
  Button,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControl,
  InputLabel,
  MenuItem,
  Select,
  TextField,
  Typography,
} from "@mui/material";
import { MonedaInput } from "../common/MonedaInput";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import styled from "styled-components";
import { getImportaciones } from "../../api/importaciones.service";
import { useAuthStore } from "../../store/AuthStore";
import { hoyISO } from "../../utils/fecha";
import {
  useCreateTesCuentaMutation,
  useCreateTesMovimientoMutation,
  useConfirmarTesMovimientoMutation,
  useTesBancosQuery,
  useTesCategoriaQuery,
  useTesCuentasQuery,
} from "../../tanstack/TesoreriaStack";

const TIPOS_CUENTA = [
  { value: "BANCO_CC", label: "Cta. Corriente" },
  { value: "BANCO_CA", label: "Cta. Ahorro" },
  { value: "CAJA_CHICA", label: "Caja Chica" },
  { value: "FONDO_FIJO", label: "Fondo Fijo" },
  { value: "BILLETERA", label: "Billetera" },
  { value: "MONEDA_EXT", label: "Moneda Ext." },
];

const MONEDAS = ["PYG", "USD", "BRL", "EUR", "ARS"];

const tipoLabel = (tipo) => TIPOS_CUENTA.find(t => t.value === tipo)?.label || tipo;

const fmtMonto = (n, moneda = "PYG") => {
  const val = Number(n || 0);
  if (moneda === "PYG") return `Gs. ${val.toLocaleString("es-PY", { maximumFractionDigits: 0 })}`;
  return `${moneda} ${val.toLocaleString("es-PY", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
};

const todayStr = () => hoyISO();

const Container = styled.div`
  padding: 16px;
  height: 100%;
  overflow-y: auto;
`;

const Header = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
`;

const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
`;

const Card = styled.div`
  background: ${({ theme }) => theme.bg2};
  border: 1.5px solid ${({ $alerta, theme }) => $alerta ? "#ef4444" : theme.color2};
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
`;

const CardHeader = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
`;

const CuentaNombre = styled.div`
  font-size: 15px;
  font-weight: 600;
  color: ${({ theme }) => theme.text1};
`;

const TipoBadge = styled.span`
  background: ${({ theme }) => theme.color2};
  color: ${({ theme }) => theme.text2};
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
`;

const Saldo = styled.div`
  font-size: 22px;
  font-weight: 700;
  color: ${({ $negativo }) => $negativo ? "#ef4444" : "#22c55e"};
`;

const AlertaBadge = styled.div`
  display: flex;
  align-items: center;
  gap: 4px;
  color: #ef4444;
  font-size: 12px;
`;

const CardActions = styled.div`
  display: flex;
  gap: 8px;
  margin-top: 4px;
`;

const TotalesBar = styled.div`
  background: ${({ theme }) => theme.bg2};
  border: 1px solid ${({ theme }) => theme.color2};
  border-radius: 10px;
  padding: 14px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 12px;
`;

const TotalItem = styled.div`
  display: flex;
  flex-direction: column;
  gap: 2px;
`;

const TotalLabel = styled.span`
  font-size: 11px;
  color: ${({ theme }) => theme.text2};
  text-transform: uppercase;
  letter-spacing: 0.5px;
`;

const TotalValor = styled.span`
  font-size: 16px;
  font-weight: 600;
  color: ${({ theme }) => theme.text1};
`;

const FormRow = styled.div`
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
`;

const CategoriasContainer = styled.div`
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
`;

const CategoriaRow = styled.div`
  display: flex;
  gap: 8px;
  align-items: center;
`;

const EmptyState = styled.div`
  text-align: center;
  padding: 48px;
  color: ${({ theme }) => theme.text2};
`;

const OnboardingWrap = styled.div`
  max-width: 560px;
  margin: 32px auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
`;

const OnboardingHeader = styled.div`
  text-align: center;
  margin-bottom: 8px;
`;

const StepCard = styled.div`
  background: ${({ theme }) => theme.bg2};
  border: 1px solid ${({ theme }) => theme.color2};
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
`;

const StepNum = styled.div`
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  background: ${({ theme }) => theme.primary || "#3b82f6"};
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
`;

const StepBody = styled.div`
  display: flex;
  flex-direction: column;
  gap: 3px;
`;

const StepTitle = styled.div`
  font-size: 14px;
  font-weight: 600;
  color: ${({ theme }) => theme.text1};
`;

const StepDesc = styled.div`
  font-size: 12px;
  color: ${({ theme }) => theme.text2};
  opacity: 0.75;
  line-height: 1.5;
`;

const InfoBanner = styled.div`
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: ${({ theme }) => theme.text2};
  display: flex;
  align-items: center;
  gap: 10px;
`;

export const TesBancosTab = () => {
  const { hasPermission } = useAuthStore();
  const canConfig = hasPermission("TESORERIA", "TES_CTA_CUENTA_BANCARIA_EDITAR");

  const { data: cuentasData, isLoading } = useTesCuentasQuery();
  const { data: bancos = [] } = useTesBancosQuery();
  const { data: categorias = [] } = useTesCategoriaQuery();

  const createCuenta = useCreateTesCuentaMutation();
  const createMovimiento = useCreateTesMovimientoMutation();
  const confirmarMovimiento = useConfirmarTesMovimientoMutation();

  const [modalCuenta, setModalCuenta] = useState(false);
  const [modalMovimiento, setModalMovimiento] = useState(null);

  const [formCuenta, setFormCuenta] = useState({
    nombre: "", tipo: "BANCO_CC", moneda: "PYG",
    saldo_inicial: "", banco_id: "", numero_cuenta: "",
    titular: "", saldo_minimo_alerta: "",
  });

  const [formMov, setFormMov] = useState({
    fecha: todayStr(), monto: "", descripcion: "",
    tipo: "INGRESO", categorias: [{ categoria_id: "", monto: "" }],
    // Imputación a una importación: sólo aplica a egresos. Ver
    // docs/plan-importaciones-fase2-contable.md en el backend.
    embarque_id: "", tipo_pago_importacion: "",
  });
  // Embarques a los que se puede imputar un pago. Los CERRADO/SELLADO ya no
  // aceptan costos, así que no se ofrecen. Si el módulo no está activo la
  // consulta falla y el bloque simplemente no se muestra.
  const [embarquesImputables, setEmbarquesImputables] = useState([]);

  const cuentas = Array.isArray(cuentasData) ? cuentasData : (cuentasData?.data || []);
  const cuentasActivas = cuentas.filter(c => c.activo !== false);

  const totalesPorMoneda = cuentasActivas.reduce((acc, c) => {
    const mon = c.moneda || "PYG";
    acc[mon] = (acc[mon] || 0) + Number(c.saldo_actual || 0);
    return acc;
  }, {});

  const esBanco = (tipo) => tipo === "BANCO_CC" || tipo === "BANCO_CA";

  const handleOpenMovimiento = (cuenta, tipo) => {
    setFormMov({
      cuenta_id: cuenta.id,
      fecha: todayStr(),
      monto: "",
      descripcion: "",
      tipo,
      categorias: [{ categoria_id: "", monto: "" }],
      embarque_id: "",
      tipo_pago_importacion: "",
    });
    setModalMovimiento({ cuenta, tipo });
  };

  // Sólo se piden al abrir un egreso: es una lista chica y no hace falta traerla
  // mientras se mira el listado de cuentas. Si el módulo de importaciones no
  // está activo la consulta falla y el bloque simplemente no se muestra.
  useEffect(() => {
    if (!modalMovimiento || modalMovimiento.tipo !== "EGRESO") return;
    let cancelado = false;
    (async () => {
      try {
        const data = await getImportaciones({ limit: 100 });
        const lista = data?.data ?? data ?? [];
        if (cancelado) return;
        setEmbarquesImputables(
          (Array.isArray(lista) ? lista : []).filter(
            (e) => !["CERRADO", "SELLADO"].includes(String(e?.estado)),
          ),
        );
      } catch {
        if (!cancelado) setEmbarquesImputables([]);
      }
    })();
    return () => {
      cancelado = true;
    };
  }, [modalMovimiento]);

  const handleGuardarCuenta = async () => {
    if (!formCuenta.nombre || !formCuenta.tipo || !formCuenta.moneda) {
      toast.error("Nombre, tipo y moneda son obligatorios");
      return;
    }
    const payload = {
      nombre: formCuenta.nombre,
      tipo: formCuenta.tipo,
      moneda: formCuenta.moneda,
      saldo_inicial: formCuenta.saldo_inicial ? Number(formCuenta.saldo_inicial) : 0,
      ...(formCuenta.banco_id && { banco_id: formCuenta.banco_id }),
      ...(formCuenta.numero_cuenta && { numero_cuenta: formCuenta.numero_cuenta }),
      ...(formCuenta.titular && { titular: formCuenta.titular }),
      ...(formCuenta.saldo_minimo_alerta !== "" && { saldo_minimo_alerta: Number(formCuenta.saldo_minimo_alerta) }),
    };
    await createCuenta.mutateAsync(payload);
    setModalCuenta(false);
    setFormCuenta({ nombre: "", tipo: "BANCO_CC", moneda: "PYG", saldo_inicial: "", banco_id: "", numero_cuenta: "", titular: "", saldo_minimo_alerta: "" });
  };

  const handleGuardarMovimiento = async (confirmar = false) => {
    if (!formMov.monto || !formMov.descripcion) {
      toast.error("Monto y descripción son obligatorios");
      return;
    }
    const catValidas = formMov.categorias.filter(c => c.categoria_id && c.monto);
    if (catValidas.length === 0) {
      toast.error("Debe agregar al menos una categoría con monto");
      return;
    }
    if (formMov.embarque_id && !formMov.tipo_pago_importacion) {
      toast.error("Elegí qué cubre el pago de la importación: proveedor o despacho");
      return;
    }
    const payload = {
      cuenta_id: formMov.cuenta_id,
      fecha: formMov.fecha,
      monto: Number(formMov.monto),
      tipo: formMov.tipo,
      descripcion: formMov.descripcion,
      categorias: catValidas.map(c => ({ categoria_id: c.categoria_id, monto: Number(c.monto) })),
      ...(formMov.embarque_id
        ? {
            embarque_id: formMov.embarque_id,
            tipo_pago_importacion: formMov.tipo_pago_importacion,
          }
        : {}),
    };
    const result = await createMovimiento.mutateAsync(payload);
    if (confirmar && result?.id) {
      await confirmarMovimiento.mutateAsync(result.id);
    }
    setModalMovimiento(null);
  };

  const addCatRow = () => setFormMov(f => ({ ...f, categorias: [...f.categorias, { categoria_id: "", monto: "" }] }));

  const updateCatRow = (idx, field, value) => {
    setFormMov(f => {
      const cats = [...f.categorias];
      cats[idx] = { ...cats[idx], [field]: value };
      return { ...f, categorias: cats };
    });
  };

  const removeCatRow = (idx) => {
    setFormMov(f => ({ ...f, categorias: f.categorias.filter((_, i) => i !== idx) }));
  };

  const categoriasFiltradas = categorias.filter((c) => categoriaAplicaA(c, formMov.tipo));

  if (isLoading) return <EmptyState><CircularProgress /></EmptyState>;

  return (
    <Container>
      <Header>
        <Typography variant="h6" fontWeight={700}>Cuentas de Tesorería</Typography>
        {canConfig && (
          <Button variant="contained" startIcon={<Add />} onClick={() => setModalCuenta(true)} size="small">
            Nueva Cuenta
          </Button>
        )}
      </Header>

      {Object.keys(totalesPorMoneda).length > 0 && (
        <TotalesBar>
          {Object.entries(totalesPorMoneda).map(([mon, total]) => (
            <TotalItem key={mon}>
              <TotalLabel>Total {mon}</TotalLabel>
              <TotalValor>{fmtMonto(total, mon)}</TotalValor>
            </TotalItem>
          ))}
        </TotalesBar>
      )}

      {cuentasActivas.length === 0 ? (
        <OnboardingWrap>
          <OnboardingHeader>
            <AccountBalance sx={{ fontSize: 52, opacity: 0.25, mb: 1, display: "block", mx: "auto" }} />
            <Typography variant="h6" fontWeight={700} gutterBottom>Configurá tu Tesorería</Typography>
            <Typography variant="body2" sx={{ opacity: 0.6, maxWidth: 400, mx: "auto" }}>
              Este módulo te permite controlar el saldo de tus cuentas bancarias, cajas y billeteras en tiempo real.
              Seguí estos pasos para comenzar.
            </Typography>
          </OnboardingHeader>

          <StepCard>
            <StepNum>1</StepNum>
            <StepBody>
              <StepTitle>Configurá tus cuentas de tesorería</StepTitle>
              <StepDesc>
                Andá a <strong>Configuración → Tesorería y Bancos → Cuentas de Tesorería</strong> y creá al menos una cuenta
                (banco, caja chica, billetera, etc.) con su saldo inicial.
              </StepDesc>
            </StepBody>
          </StepCard>

          <StepCard>
            <StepNum>2</StepNum>
            <StepBody>
              <StepTitle>Registrá movimientos de ingreso y egreso</StepTitle>
              <StepDesc>
                Desde esta pantalla, usá los botones <strong>+ Ingreso</strong> y <strong>+ Egreso</strong> en cada tarjeta
                de cuenta para registrar movimientos. Podés guardarlos como borrador o confirmarlos de inmediato.
              </StepDesc>
            </StepBody>
          </StepCard>

          <StepCard>
            <StepNum>3</StepNum>
            <StepBody>
              <StepTitle>Revisá la posición de caja en el tab Movimientos</StepTitle>
              <StepDesc>
                El tab <strong>Movimientos</strong> muestra todos los ingresos y egresos con sus estados
                (Borrador → Confirmado). Los movimientos confirmados afectan el saldo de la cuenta.
              </StepDesc>
            </StepBody>
          </StepCard>

          <InfoBanner>
            <Settings sx={{ fontSize: 18, opacity: 0.6, flexShrink: 0 }} />
            <span>
              Para configurar parámetros como el umbral de aprobación por monto o los días de alerta para cheques,
              andá a <strong>Configuración → Tesorería y Bancos → Parámetros</strong>.
            </span>
          </InfoBanner>
        </OnboardingWrap>
      ) : (
        <Grid>
          {cuentasActivas.map(cuenta => {
            const alerta = cuenta.saldo_minimo_alerta != null && cuenta.saldo_actual < cuenta.saldo_minimo_alerta;
            return (
              <Card key={cuenta.id} $alerta={alerta}>
                <CardHeader>
                  <CuentaNombre>{cuenta.nombre}</CuentaNombre>
                  <TipoBadge>{tipoLabel(cuenta.tipo)}</TipoBadge>
                </CardHeader>
                {cuenta.numero_cuenta && (
                  <Typography variant="caption" sx={{ opacity: 0.6 }}>N° {cuenta.numero_cuenta}</Typography>
                )}
                <Saldo $negativo={cuenta.saldo_actual < 0}>
                  {fmtMonto(cuenta.saldo_actual, cuenta.moneda)}
                </Saldo>
                {alerta && (
                  <AlertaBadge>
                    <Warning fontSize="small" />
                    Saldo bajo el mínimo ({fmtMonto(cuenta.saldo_minimo_alerta, cuenta.moneda)})
                  </AlertaBadge>
                )}
                <CardActions>
                  <Button size="small" variant="outlined" color="success" onClick={() => handleOpenMovimiento(cuenta, "INGRESO")}>
                    + Ingreso
                  </Button>
                  <Button size="small" variant="outlined" color="error" onClick={() => handleOpenMovimiento(cuenta, "EGRESO")}>
                    + Egreso
                  </Button>
                </CardActions>
              </Card>
            );
          })}
        </Grid>
      )}

      <Dialog open={modalCuenta} onClose={() => setModalCuenta(false)} maxWidth="sm" fullWidth>
        <DialogTitle>Nueva Cuenta</DialogTitle>
        <DialogContent>
          <FormRow style={{ marginTop: 8 }}>
            <TextField
              label="Nombre"
              fullWidth
              required
              value={formCuenta.nombre}
              onChange={e => setFormCuenta(f => ({ ...f, nombre: e.target.value }))}
            />
          </FormRow>
          <FormRow>
            <FormControl fullWidth required>
              <InputLabel>Tipo</InputLabel>
              <Select value={formCuenta.tipo} label="Tipo" onChange={e => setFormCuenta(f => ({ ...f, tipo: e.target.value }))}>
                {TIPOS_CUENTA.map(t => <MenuItem key={t.value} value={t.value}>{t.label}</MenuItem>)}
              </Select>
            </FormControl>
            <FormControl fullWidth required>
              <InputLabel>Moneda</InputLabel>
              <Select value={formCuenta.moneda} label="Moneda" onChange={e => setFormCuenta(f => ({ ...f, moneda: e.target.value }))}>
                {MONEDAS.map(m => <MenuItem key={m} value={m}>{m}</MenuItem>)}
              </Select>
            </FormControl>
          </FormRow>
          <FormRow>
            <TextField
              label="Saldo inicial"
              type="number"
              fullWidth
              value={formCuenta.saldo_inicial}
              onChange={e => setFormCuenta(f => ({ ...f, saldo_inicial: e.target.value }))}
            />
            <TextField
              label="Saldo mínimo de alerta"
              type="number"
              fullWidth
              value={formCuenta.saldo_minimo_alerta}
              onChange={e => setFormCuenta(f => ({ ...f, saldo_minimo_alerta: e.target.value }))}
            />
          </FormRow>
          {esBanco(formCuenta.tipo) && (
            <>
              <FormRow>
                <Autocomplete
                  fullWidth
                  options={bancos}
                  getOptionLabel={(b) => b.descripcion || b.nombre || ""}
                  value={bancos.find(b => b.id === formCuenta.banco_id) || null}
                  onChange={(_, val) => setFormCuenta(f => ({ ...f, banco_id: val?.id || "" }))}
                  renderInput={(params) => <TextField {...params} label="Banco" size="small" />}
                  isOptionEqualToValue={(opt, val) => opt.id === val?.id}
                  noOptionsText="Sin resultados"
                  clearText="Limpiar"
                />
              </FormRow>
              <FormRow>
                <TextField
                  label="Número de cuenta"
                  fullWidth
                  value={formCuenta.numero_cuenta}
                  onChange={e => setFormCuenta(f => ({ ...f, numero_cuenta: e.target.value }))}
                />
                <TextField
                  label="Titular"
                  fullWidth
                  value={formCuenta.titular}
                  onChange={e => setFormCuenta(f => ({ ...f, titular: e.target.value }))}
                />
              </FormRow>
            </>
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setModalCuenta(false)}>Cancelar</Button>
          <Button variant="contained" onClick={handleGuardarCuenta} disabled={createCuenta.isPending}>
            {createCuenta.isPending ? <CircularProgress size={18} /> : "Guardar"}
          </Button>
        </DialogActions>
      </Dialog>

      <Dialog open={!!modalMovimiento} onClose={() => setModalMovimiento(null)} maxWidth="sm" fullWidth>
        <DialogTitle>
          {modalMovimiento?.tipo === "INGRESO" ? "Registrar Ingreso" : "Registrar Egreso"} — {modalMovimiento?.cuenta?.nombre}
        </DialogTitle>
        <DialogContent>
          <FormRow style={{ marginTop: 8 }}>
            <TextField
              label="Fecha"
              type="date"
              fullWidth
              value={formMov.fecha}
              onChange={e => setFormMov(f => ({ ...f, fecha: e.target.value }))}
              InputLabelProps={{ shrink: true }}
            />
            <MonedaInput
              label="Monto *"
              fullWidth
              moneda={modalMovimiento?.cuenta?.moneda || "PYG"}
              value={Number(formMov.monto) || 0}
              onChange={(v) => setFormMov(f => ({ ...f, monto: v }))}
            />
          </FormRow>
          <FormRow>
            <TextField
              label="Descripción"
              fullWidth
              required
              value={formMov.descripcion}
              onChange={e => setFormMov(f => ({ ...f, descripcion: e.target.value }))}
            />
          </FormRow>

          {modalMovimiento?.tipo === "EGRESO" && embarquesImputables.length > 0 && (
            <>
              <Typography variant="subtitle2" sx={{ mb: 1, mt: 1 }}>
                Imputar a una importación (opcional)
              </Typography>
              <FormRow>
                <FormControl fullWidth size="small">
                  <InputLabel>Importación</InputLabel>
                  <Select
                    value={formMov.embarque_id}
                    label="Importación"
                    onChange={e =>
                      setFormMov(f => ({
                        ...f,
                        embarque_id: e.target.value,
                        tipo_pago_importacion: e.target.value ? f.tipo_pago_importacion : "",
                      }))
                    }
                  >
                    <MenuItem value=""><em>Sin imputar</em></MenuItem>
                    {embarquesImputables.map(e => (
                      <MenuItem key={e.id} value={e.id}>
                        {`${e.numero || "Sin número"} — ${e.estado}`}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>
                <FormControl fullWidth size="small" disabled={!formMov.embarque_id}>
                  <InputLabel>¿Qué cubre?</InputLabel>
                  <Select
                    value={formMov.tipo_pago_importacion}
                    label="¿Qué cubre?"
                    onChange={e => setFormMov(f => ({ ...f, tipo_pago_importacion: e.target.value }))}
                  >
                    <MenuItem value="PROVEEDOR">Pago al proveedor del exterior</MenuItem>
                    <MenuItem value="DESPACHO">Anticipo de despacho</MenuItem>
                  </Select>
                </FormControl>
              </FormRow>
              {formMov.embarque_id && (
                <Typography variant="caption" color="text.secondary" sx={{ display: "block", mb: 1 }}>
                  {formMov.tipo_pago_importacion === "DESPACHO"
                    ? "Va a la cuenta de anticipos de despacho y se aplica al confirmar el despacho; lo que sobre queda como saldo."
                    : "Va directo a la cuenta de importaciones en curso, que se descarga al cerrar la importación."}
                  {" "}Sólo se admite un pago de cada tipo por importación.
                </Typography>
              )}
            </>
          )}

          <Typography variant="subtitle2" sx={{ mb: 1, mt: 1 }}>Categorías</Typography>
          <CategoriasContainer>
            {formMov.categorias.map((row, idx) => (
              <CategoriaRow key={idx}>
                <FormControl sx={{ flex: 2 }}>
                  <InputLabel>Categoría</InputLabel>
                  <Select
                    value={row.categoria_id}
                    label="Categoría"
                    onChange={e => updateCatRow(idx, "categoria_id", e.target.value)}
                    size="small"
                  >
                    {categoriasFiltradas.map(c => <MenuItem key={c.id} value={c.id}>{c.nombre}</MenuItem>)}
                  </Select>
                </FormControl>
                <MonedaInput
                  label="Monto"
                  moneda={modalMovimiento?.cuenta?.moneda || "PYG"}
                  value={Number(row.monto) || 0}
                  onChange={(v) => updateCatRow(idx, "monto", v)}
                  sx={{ flex: 1 }}
                  size="small"
                />
                {formMov.categorias.length > 1 && (
                  <Button size="small" color="error" onClick={() => removeCatRow(idx)}>✕</Button>
                )}
              </CategoriaRow>
            ))}
            <Button size="small" onClick={addCatRow} sx={{ alignSelf: "flex-start" }}>+ Agregar categoría</Button>
          </CategoriasContainer>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setModalMovimiento(null)}>Cancelar</Button>
          <Button variant="outlined" onClick={() => handleGuardarMovimiento(false)} disabled={createMovimiento.isPending}>
            Guardar como borrador
          </Button>
          <Button variant="contained" onClick={() => handleGuardarMovimiento(true)} disabled={createMovimiento.isPending || confirmarMovimiento.isPending}>
            {(createMovimiento.isPending || confirmarMovimiento.isPending) ? <CircularProgress size={18} /> : "Guardar y Confirmar"}
          </Button>
        </DialogActions>
      </Dialog>
    </Container>
  );
};