import { Icon } from "@iconify/react";
import {
  Alert,
  Autocomplete,
  Box,
  Button,
  Checkbox,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControlLabel,
  Grid,
  MenuItem,
  Paper,
  TextField,
  Typography,
} from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import { useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { getEmpleados } from "../../../api/rrhh.service";
import { getEmpresaMonedas } from "../../../api/monedas.service";
import { getMediosPagoActivos } from "../../../api/pagos.service";
import { getTesBancos, getTesCuentas } from "../../../api/tes.service";
import { MonedaInput } from "../../common/MonedaInput";
import { useCrearRendicionMutation } from "../../../tanstack/RendicionViaticosStack";
import { useCotizacionVigente } from "../../../hooks/useCotizacionVigente";
import { useConfirmDialog } from "../../../hooks/useConfirmDialog";
import { useDebouncedValue } from "../../../hooks/useDebouncedValue";
import { fmtMoneda } from "../../_standards/enums/monedas";
import { BancoSelect } from "../../_standards";
import { CotizacionHint } from "../../_standards";
import { hoyISO } from "../../../utils/fecha";

const TODAY = () => hoyISO();
const IN_DAYS = (n) => {
  const d = new Date();
  d.setDate(d.getDate() + n);
  return d.toISOString().substring(0, 10);
};

/**
 * Diálogo de alta de rendición de viáticos.
 * FASE 1 — cabecera + primer adelanto opcional.
 * Ver docs/plan-rendicion-viaticos.md.
 */
export function NuevaRendicionDialog({ open, onClose }) {
  const navigate = useNavigate();
  const crearMut = useCrearRendicionMutation();
  const { confirm, dialogs: confirmDialogs } = useConfirmDialog();

  const [empleado, setEmpleado] = useState(null);
  const [concepto, setConcepto] = useState("");
  const [fechaInicio, setFechaInicio] = useState(TODAY());
  const [fechaFin, setFechaFin] = useState(IN_DAYS(3));
  const [sinAdelanto, setSinAdelanto] = useState(false);
  const [monedaId, setMonedaId] = useState("");
  const [cotizacion, setCotizacion] = useState(1);
  const [cotizacionTocada, setCotizacionTocada] = useState(false);
  const [observaciones, setObservaciones] = useState("");

  // Primer adelanto
  const [monto, setMonto] = useState(0);
  const [fechaAdelanto, setFechaAdelanto] = useState(TODAY());
  const [medioPagoId, setMedioPagoId] = useState("");
  const [tesCuentaId, setTesCuentaId] = useState("");
  const [numeroOperacion, setNumeroOperacion] = useState("");
  const [bancoId, setBancoId] = useState("");
  // Datos de cheque
  const [numeroCheque, setNumeroCheque] = useState("");
  const [bancoEmisor, setBancoEmisor] = useState("");
  const [titularCheque, setTitularCheque] = useState("");
  const [fechaEmisionCheque, setFechaEmisionCheque] = useState(TODAY());
  const [fechaVencCheque, setFechaVencCheque] = useState(TODAY());

  const [errors, setErrors] = useState([]);

  // Catálogos
  const [empleadoInput, setEmpleadoInput] = useState("");
  const empleadoSearch = useDebouncedValue(empleadoInput, 400);
  const { data: empleadosResp, isFetching: empleadosLoading } = useQuery({
    queryKey: ["rrhh-empleados-viaticos", empleadoSearch],
    queryFn: () => getEmpleados({ search: empleadoSearch || undefined, limit: 10 }),
    enabled: open,
    keepPreviousData: true,
  });
  const empleados = empleadosResp?.data ?? empleadosResp?.items ?? [];

  const { data: monedas = [] } = useQuery({
    queryKey: ["empresa-monedas-viaticos"],
    queryFn: getEmpresaMonedas,
    enabled: open,
    staleTime: 5 * 60 * 1000,
  });

  const { data: mediosPago = [] } = useQuery({
    queryKey: ["medios-pago-activos-viaticos"],
    queryFn: getMediosPagoActivos,
    enabled: open && !sinAdelanto,
    staleTime: 5 * 60 * 1000,
  });

  const { data: tesCuentasResp } = useQuery({
    queryKey: ["tes-cuentas-viaticos"],
    queryFn: () => getTesCuentas({ activo: true }),
    enabled: open && !sinAdelanto,
    staleTime: 5 * 60 * 1000,
  });
  const tesCuentas = tesCuentasResp?.items ?? tesCuentasResp ?? [];

  const { data: bancosResp } = useQuery({
    queryKey: ["bancos-viaticos"],
    queryFn: getTesBancos,
    enabled: open && !sinAdelanto,
    staleTime: 5 * 60 * 1000,
  });
  const bancos = Array.isArray(bancosResp) ? bancosResp : bancosResp?.items ?? bancosResp?.data ?? [];

  // Moneda default: la principal.
  useEffect(() => {
    if (!monedaId && monedas.length > 0) {
      const principal = monedas.find((m) => m.es_principal) ?? monedas[0];
      const id = principal?.moneda_id ?? principal?.moneda?.id ?? principal?.id;
      if (id) setMonedaId(id);
    }
  }, [monedas, monedaId]);

  const monedaSel = useMemo(() => {
    const m = monedas.find(
      (x) => x.moneda_id === monedaId || x.moneda?.id === monedaId || x.id === monedaId,
    );
    return m?.moneda ?? m;
  }, [monedas, monedaId]);
  const monedaCodigo = monedaSel?.codigo || "PYG";

  // Cotización vigente
  const { data: cotizacionVigente } = useCotizacionVigente(monedaCodigo, fechaAdelanto);
  useEffect(() => {
    if (cotizacionTocada || !cotizacionVigente?.tasa) return;
    if (Math.abs(Number(cotizacion) - cotizacionVigente.tasa) < 1e-6) return;
    setCotizacion(cotizacionVigente.tasa);
  }, [cotizacionVigente?.tasa, cotizacionTocada, cotizacion]);
  useEffect(() => {
    setCotizacionTocada(false);
  }, [monedaId]);

  const reset = () => {
    setEmpleado(null);
    setConcepto("");
    setFechaInicio(TODAY());
    setFechaFin(IN_DAYS(3));
    setSinAdelanto(false);
    setMonedaId("");
    setCotizacion(1);
    setCotizacionTocada(false);
    setObservaciones("");
    setMonto(0);
    setFechaAdelanto(TODAY());
    setMedioPagoId("");
    setTesCuentaId("");
    setNumeroOperacion("");
    setBancoId("");
    setNumeroCheque("");
    setBancoEmisor("");
    setTitularCheque("");
    setFechaEmisionCheque(TODAY());
    setFechaVencCheque(TODAY());
    setErrors([]);
  };

  const medioPagoSel = mediosPago.find((m) => m.id === medioPagoId);
  const esCheque = (() => {
    if (!medioPagoSel) return false;
    const codigo = Number(medioPagoSel.codigo ?? 0);
    const desc = (medioPagoSel.descripcion ?? "").toLowerCase();
    return codigo === 2 || desc.includes("cheque");
  })();
  const esEfectivo = (() => {
    if (!medioPagoSel) return false;
    const codigo = Number(medioPagoSel.codigo ?? 0);
    const desc = (medioPagoSel.descripcion ?? "").toLowerCase();
    return codigo === 1 || desc.includes("efectivo") || desc.includes("contado");
  })();
  const tesCuentasFiltradas = esEfectivo
    ? tesCuentas.filter((c) => ["CAJA_CHICA", "FONDO_FIJO", "BILLETERA"].includes(c.tipo))
    : tesCuentas;

  const handleClose = () => {
    if (crearMut.isPending) return;
    reset();
    onClose?.();
  };

  const validate = () => {
    const errs = [];
    if (!empleado?.id) errs.push("Elegí un empleado.");
    if (!concepto.trim()) errs.push("Cargá el concepto del viaje.");
    if (!fechaInicio || !fechaFin) errs.push("Cargá fecha de inicio y fin.");
    if (fechaFin < fechaInicio) errs.push("Fecha fin no puede ser anterior a fecha inicio.");
    if (!sinAdelanto) {
      if (!monto || Number(monto) <= 0) errs.push("El monto del adelanto debe ser mayor a 0.");
      if (!medioPagoId) errs.push("Elegí el medio de pago del adelanto.");
      if (!tesCuentaId) errs.push("Elegí la cuenta de tesorería de origen.");
      if (esCheque) {
        if (!numeroCheque.trim()) errs.push("Nº de cheque requerido.");
        if (!bancoEmisor.trim()) errs.push("Banco emisor requerido.");
        if (!titularCheque.trim()) errs.push("Titular del cheque requerido.");
        if (!fechaEmisionCheque) errs.push("Fecha de emisión del cheque requerida.");
        if (!fechaVencCheque) errs.push("Fecha de cobro / vencimiento requerida.");
      }
    }
    setErrors(errs);
    return errs.length === 0;
  };

  const buildResumen = () => {
    const empleadoNombre = empleado ? `${empleado.nombres} ${empleado.apellidos}` : "—";
    const medioNombre = mediosPago.find((m) => m.id === medioPagoId)?.descripcion || "—";
    const cuentaNombre = tesCuentas.find((c) => c.id === tesCuentaId)?.nombre || "—";
    const bancoDestNombre = bancos.find((b) => b.id === bancoId)?.descripcion;

    const filas = [
      ["Empleado", empleadoNombre],
      ["Concepto", concepto.trim() || "—"],
      ["Período", `${fechaInicio} → ${fechaFin}`],
    ];
    if (!sinAdelanto) {
      filas.push(
        ["Monto adelanto", fmtMoneda(Number(monto || 0), monedaCodigo)],
        ["Medio de pago", medioNombre],
        ["Cuenta origen", cuentaNombre],
      );
      if (numeroOperacion) filas.push(["Nº operación", numeroOperacion]);
      if (!esCheque && bancoDestNombre) filas.push(["Banco destino", bancoDestNombre]);
      if (esCheque) {
        filas.push(
          ["Nº cheque", numeroCheque],
          ["Banco emisor", bancoEmisor],
          ["Titular", titularCheque],
          ["Emisión", fechaEmisionCheque],
          ["Cobro / venc.", fechaVencCheque],
        );
      }
    } else {
      filas.push(["Adelanto", "Sin adelanto (empresa reembolsa al final)"]);
    }

    return (
      <Box>
        <Typography variant="body2" sx={{ mb: 1.5 }}>
          Se va a crear la rendición y {sinAdelanto
            ? "quedará abierta para cargar gastos."
            : "se ejecutará el asiento contable + movimiento de tesorería del adelanto."}
        </Typography>
        <Box sx={{ display: "grid", gridTemplateColumns: "auto 1fr", columnGap: 2, rowGap: 0.5 }}>
          {filas.map(([k, v]) => (
            <Box key={k} sx={{ display: "contents" }}>
              <Typography variant="caption" color="text.secondary">
                {k}
              </Typography>
              <Typography variant="body2" fontWeight={600}>
                {v}
              </Typography>
            </Box>
          ))}
        </Box>
        <Typography variant="caption" color="text.secondary" sx={{ display: "block", mt: 1.5 }}>
          Revisá que todo esté correcto. Una vez creada, para corregir un dato hay que anular y volver a crear.
        </Typography>
      </Box>
    );
  };

  const handleSubmit = async () => {
    if (!validate()) return;

    const ok = await confirm({
      title: "Confirmar creación de rendición",
      message: buildResumen(),
      confirmText: "Crear rendición",
      cancelText: "Revisar",
      confirmColor: "primary",
      maxWidth: "sm",
    });
    if (!ok) return;

    const payload = {
      empleado_id: empleado.id,
      concepto: concepto.trim(),
      fecha_inicio: fechaInicio,
      fecha_fin: fechaFin,
      sin_adelanto: sinAdelanto,
      moneda_id: monedaId || undefined,
      cotizacion: Number(cotizacion) || 1,
      observaciones: observaciones || undefined,
    };
    if (!sinAdelanto) {
      payload.primer_adelanto = {
        monto: Number(monto),
        fecha: fechaAdelanto,
        medio_pago_id: medioPagoId,
        tes_cuenta_id: tesCuentaId,
        numero_operacion: esEfectivo ? undefined : numeroOperacion || undefined,
        banco_id: esEfectivo || esCheque ? undefined : bancoId || undefined,
        ...(esCheque
          ? {
              numero_cheque: numeroCheque.trim(),
              banco_emisor: bancoEmisor.trim(),
              titular_cheque: titularCheque.trim(),
              fecha_emision_cheque: fechaEmisionCheque,
              fecha_vencimiento_cheque: fechaVencCheque,
            }
          : {}),
      };
    }

    try {
      const result = await crearMut.mutateAsync(payload);
      reset();
      onClose?.();
      if (result?.id) {
        navigate(`/rendicion-viaticos/${result.id}`);
      }
    } catch {
      /* mutación ya mostró el toast */
    }
  };

  return (
    <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
      <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
        <DialogTitle sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <Icon icon="mdi:briefcase-plus" />
          Nueva rendición de viáticos
        </DialogTitle>
        <DialogContent dividers>
          {errors.length > 0 && (
            <Alert severity="error" sx={{ mb: 2 }}>
              <Typography variant="body2" fontWeight={600} sx={{ mb: 0.5 }}>
                Corregí lo siguiente para continuar:
              </Typography>
              <ul style={{ margin: 0, paddingLeft: 20 }}>
                {errors.map((e, i) => (
                  <li key={i}>{e}</li>
                ))}
              </ul>
            </Alert>
          )}

          {/* Sección 1: Datos del viaje */}
          <Paper variant="outlined" sx={{ p: 2, bgcolor: "action.hover", borderRadius: 1.5, mb: 2 }}>
            <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1.5 }}>
              <Icon icon="mdi:map-marker-outline" width={18} />
              <Typography variant="caption" fontWeight={700} sx={{ letterSpacing: 0.5, color: "text.secondary" }}>
                DATOS DEL VIAJE
              </Typography>
            </Box>
            <Grid container spacing={2}>
              <Grid size={{ xs: 12, md: 6 }}>
                <Autocomplete
                  size="small"
                  options={empleados}
                  value={empleado}
                  onChange={(_, v) => setEmpleado(v)}
                  inputValue={empleadoInput}
                  onInputChange={(_, v) => setEmpleadoInput(v)}
                  filterOptions={(x) => x}
                  loading={empleadosLoading}
                  loadingText="Buscando…"
                  noOptionsText={empleadoSearch ? "Sin coincidencias" : "Escribí para buscar"}
                  getOptionLabel={(o) => (o ? `${o.nombres} ${o.apellidos}` : "")}
                  isOptionEqualToValue={(o, v) => o?.id === v?.id}
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      label="Empleado *"
                      placeholder="Buscar por nombre, CI o Nº…"
                    />
                  )}
                  renderOption={(props, o) => (
                    <Box component="li" {...props} key={o.id}>
                      <Box>
                        <Typography variant="body2" fontWeight={600}>
                          {o.nombres} {o.apellidos}
                        </Typography>
                        <Typography variant="caption" color="text.secondary">
                          CI {o.cedula_identidad} · #{o.numero_empleado}
                        </Typography>
                      </Box>
                    </Box>
                  )}
                />
              </Grid>
              <Grid size={{ xs: 12, md: 6 }}>
                <TextField
                  size="small"
                  fullWidth
                  label="Concepto *"
                  placeholder="Ej: Viaje a Ciudad del Este 10-12/07"
                  value={concepto}
                  onChange={(e) => setConcepto(e.target.value)}
                />
              </Grid>
              <Grid size={{ xs: 6, md: 3 }}>
                <TextField
                  size="small"
                  fullWidth
                  type="date"
                  label="Fecha inicio *"
                  InputLabelProps={{ shrink: true }}
                  value={fechaInicio}
                  onChange={(e) => setFechaInicio(e.target.value)}
                />
              </Grid>
              <Grid size={{ xs: 6, md: 3 }}>
                <TextField
                  size="small"
                  fullWidth
                  type="date"
                  label="Fecha fin *"
                  InputLabelProps={{ shrink: true }}
                  value={fechaFin}
                  onChange={(e) => setFechaFin(e.target.value)}
                />
              </Grid>
              <Grid size={{ xs: 6, md: 3 }}>
                <TextField
                  select
                  size="small"
                  fullWidth
                  label="Moneda"
                  value={monedaId}
                  onChange={(e) => setMonedaId(e.target.value)}
                >
                  {monedas.map((m) => {
                    const id = m.moneda_id ?? m.moneda?.id ?? m.id;
                    const codigo = m.moneda?.codigo ?? m.codigo;
                    const desc = m.moneda?.descripcion ?? m.descripcion;
                    return (
                      <MenuItem key={id} value={id}>
                        {codigo} — {desc}
                        {m.es_principal ? " ★" : ""}
                      </MenuItem>
                    );
                  })}
                </TextField>
              </Grid>
              {monedaCodigo !== "PYG" && (
                <Grid size={{ xs: 6, md: 3 }}>
                  <TextField
                    size="small"
                    fullWidth
                    type="number"
                    label="Cotización"
                    value={cotizacion}
                    onChange={(e) => {
                      setCotizacionTocada(true);
                      setCotizacion(e.target.value);
                    }}
                    inputProps={{ min: 0, step: "0.000001" }}
                  />
                  <CotizacionHint cotizacion={cotizacionVigente} tocado={cotizacionTocada} />
                </Grid>
              )}
              <Grid size={12}>
                <TextField
                  size="small"
                  fullWidth
                  multiline
                  minRows={2}
                  label="Observaciones (opcional)"
                  value={observaciones}
                  onChange={(e) => setObservaciones(e.target.value)}
                />
              </Grid>
            </Grid>
          </Paper>

          {/* Sección 2: Primer adelanto */}
          <Paper variant="outlined" sx={{ p: 2, bgcolor: "action.hover", borderRadius: 1.5 }}>
            <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1.5, flexWrap: "wrap" }}>
              <Icon icon="mdi:hand-coin" width={18} />
              <Typography variant="caption" fontWeight={700} sx={{ letterSpacing: 0.5, color: "text.secondary" }}>
                PRIMER ADELANTO
              </Typography>
              <FormControlLabel
                sx={{ ml: "auto" }}
                control={
                  <Checkbox
                    checked={sinAdelanto}
                    onChange={(e) => setSinAdelanto(e.target.checked)}
                  />
                }
                label={
                  <Typography variant="caption">
                    Sin adelanto previo (empresa reembolsa al final)
                  </Typography>
                }
              />
            </Box>

            {sinAdelanto ? (
              <Alert severity="info" icon={<Icon icon="mdi:information-outline" />}>
                No se registrará adelanto ahora. El empleado paga de su bolsillo y al cerrar la
                rendición se reintegra el total gastado.
              </Alert>
            ) : (
              <Grid container spacing={2}>
                <Grid size={{ xs: 12, sm: 4 }}>
                  <MonedaInput
                    label="Monto *"
                    value={monto}
                    onChange={setMonto}
                    moneda={monedaCodigo}
                    fullWidth
                    size="small"
                  />
                </Grid>
                <Grid size={{ xs: 6, sm: 4 }}>
                  <TextField
                    size="small"
                    fullWidth
                    type="date"
                    label="Fecha del adelanto *"
                    InputLabelProps={{ shrink: true }}
                    value={fechaAdelanto}
                    onChange={(e) => setFechaAdelanto(e.target.value)}
                  />
                </Grid>
                <Grid size={{ xs: 6, sm: 4 }}>
                  <TextField
                    select
                    size="small"
                    fullWidth
                    label="Medio de pago *"
                    value={medioPagoId}
                    onChange={(e) => setMedioPagoId(e.target.value)}
                  >
                    {mediosPago.map((m) => (
                      <MenuItem key={m.id} value={m.id}>
                        {m.descripcion}
                      </MenuItem>
                    ))}
                  </TextField>
                </Grid>
                <Grid size={{ xs: 12, sm: 6 }}>
                  <Autocomplete
                    size="small"
                    options={tesCuentasFiltradas}
                    value={tesCuentasFiltradas.find((c) => c.id === tesCuentaId) || null}
                    onChange={(_, v) => setTesCuentaId(v?.id ?? "")}
                    getOptionLabel={(o) => (o ? `${o.nombre} (${o.moneda})` : "")}
                    isOptionEqualToValue={(o, v) => o?.id === v?.id}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        label={esEfectivo ? "Caja *" : "Cuenta de tesorería origen *"}
                      />
                    )}
                  />
                </Grid>
                {!esEfectivo && (
                  <Grid size={{ xs: 6, sm: 3 }}>
                    <TextField
                      size="small"
                      fullWidth
                      label="N° operación"
                      placeholder="Ej: TRF-987654"
                      value={numeroOperacion}
                      onChange={(e) => setNumeroOperacion(e.target.value)}
                    />
                  </Grid>
                )}
                {!esCheque && !esEfectivo && (
                  <Grid size={{ xs: 6, sm: 3 }}>
                    <Autocomplete
                      size="small"
                      options={bancos}
                      value={bancos.find((b) => b.id === bancoId) || null}
                      onChange={(_, v) => setBancoId(v?.id ?? "")}
                      getOptionLabel={(o) => o?.descripcion || ""}
                      isOptionEqualToValue={(o, v) => o?.id === v?.id}
                      renderInput={(params) => (
                        <TextField
                          {...params}
                          label="Banco destino (opcional)"
                          placeholder="Banco del empleado…"
                          helperText="Banco donde recibe el empleado (transferencias)"
                        />
                      )}
                    />
                  </Grid>
                )}
                {esCheque && (
                  <>
                    <Grid size={12}>
                      <Box
                        sx={{
                          display: "flex",
                          alignItems: "center",
                          gap: 1,
                          mt: 1,
                          pb: 0.5,
                          borderBottom: (t) => `1px dashed ${t.palette.divider}`,
                        }}
                      >
                        <Icon icon="mdi:checkbook" />
                        <Typography variant="caption" fontWeight={700} sx={{ letterSpacing: 0.5, color: "text.secondary" }}>
                          DATOS DEL CHEQUE
                        </Typography>
                      </Box>
                    </Grid>
                    <Grid size={{ xs: 12, sm: 6 }}>
                      <TextField
                        size="small"
                        fullWidth
                        label="Nº cheque *"
                        placeholder="Ej: 0012345"
                        value={numeroCheque}
                        onChange={(e) => setNumeroCheque(e.target.value)}
                      />
                    </Grid>
                    <Grid size={{ xs: 12, sm: 6 }}>
                      <BancoSelect
                        label="Banco emisor *"
                        value={bancoEmisor}
                        onChange={setBancoEmisor}
                      />
                    </Grid>
                    <Grid size={{ xs: 12, sm: 6 }}>
                      <TextField
                        size="small"
                        fullWidth
                        label="Titular *"
                        placeholder="Nombre del firmante"
                        value={titularCheque}
                        onChange={(e) => setTitularCheque(e.target.value)}
                      />
                    </Grid>
                    <Grid size={{ xs: 6, sm: 3 }}>
                      <TextField
                        size="small"
                        fullWidth
                        type="date"
                        label="Fecha emisión *"
                        InputLabelProps={{ shrink: true }}
                        value={fechaEmisionCheque}
                        onChange={(e) => setFechaEmisionCheque(e.target.value)}
                      />
                    </Grid>
                    <Grid size={{ xs: 6, sm: 3 }}>
                      <TextField
                        size="small"
                        fullWidth
                        type="date"
                        label="Fecha cobro / venc. *"
                        InputLabelProps={{ shrink: true }}
                        value={fechaVencCheque}
                        onChange={(e) => setFechaVencCheque(e.target.value)}
                        helperText={
                          fechaVencCheque && new Date(fechaVencCheque) > new Date()
                            ? "Diferido"
                            : "En cartera"
                        }
                      />
                    </Grid>
                  </>
                )}
              </Grid>
            )}
          </Paper>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} disabled={crearMut.isPending}>
            Cancelar
          </Button>
          <Button
            type="submit"
            variant="contained"
            disabled={crearMut.isPending}
            startIcon={<Icon icon="mdi:content-save-outline" />}
          >
            {crearMut.isPending ? "Guardando..." : "Crear rendición"}
          </Button>
        </DialogActions>
      </form>
      {confirmDialogs}
    </Dialog>
  );
}

export default NuevaRendicionDialog;