import { Icon } from "@iconify/react";
import {
  Alert,
  Autocomplete,
  Box,
  Button,
  Chip,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  IconButton,
  InputAdornment,
  Pagination,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  ToggleButton,
  ToggleButtonGroup,
  Tooltip,
  Typography,
} from "@mui/material";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useCallback, useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import styled from "styled-components";
import {
  fetchDocumentoComprobanteHolding,
  getSuscripcionesSubsidiarios,
  rechazarComprobante,
  registrarPagoManual,
  suscripcionesQueries,
  validarComprobante,
} from "../../../api/suscripciones.service";
import { UserAuth } from "../../../context/AuthContent";

const estadoPagoColor = {
  Pendiente: "warning",
  Aprobado: "success",
  Rechazado: "error",
};

export function ValidarComprobantes() {
  const { user } = UserAuth();
  const empresaId = user?.empresa?.id;
  const queryClient = useQueryClient();

  // --- Filtros y paginación ---
  const [filtroEstado, setFiltroEstado] = useState("Pendiente");
  const [busqueda, setBusqueda] = useState("");
  const [busquedaDebounced, setBusquedaDebounced] = useState("");
  const [page, setPage] = useState(1);
  const pageSize = 15;

  // Debounce busqueda
  useEffect(() => {
    const t = setTimeout(() => {
      setBusquedaDebounced(busqueda);
      setPage(1);
    }, 400);
    return () => clearTimeout(t);
  }, [busqueda]);

  // Reset page on filter change
  useEffect(() => setPage(1), [filtroEstado]);

  const queryParams = useMemo(
    () => ({
      estado: filtroEstado,
      busqueda: busquedaDebounced || undefined,
      page,
      limit: pageSize,
    }),
    [filtroEstado, busquedaDebounced, page],
  );

  const {
    data: comprobantesResp,
    isLoading,
    error,
  } = useQuery(suscripcionesQueries.comprobantesPendientesHolding(queryParams));

  const comprobantes = comprobantesResp?.data || comprobantesResp || [];
  const totalPages = comprobantesResp?.totalPages || 1;
  const totalCount = comprobantesResp?.total || 0;

  // --- Dialogs ---
  const [rechazoDialog, setRechazoDialog] = useState(null);
  const [motivoRechazo, setMotivoRechazo] = useState("");
  const [confirmarAprobar, setConfirmarAprobar] = useState(null);
  const [pagoManualDialog, setPagoManualDialog] = useState(false);

  // --- Pago manual state ---
  const [subsBusqueda, setSubsBusqueda] = useState("");
  const [subsOptions, setSubsOptions] = useState([]);
  const [subsLoading, setSubsLoading] = useState(false);
  const [selectedSub, setSelectedSub] = useState(null);
  const [pagoMonto, setPagoMonto] = useState("");
  const [pagoObservacion, setPagoObservacion] = useState("");

  // Fetch subsidiarios for autocomplete (solo cuando hay texto de búsqueda)
  useEffect(() => {
    if (!pagoManualDialog || !empresaId) return;
    if (!subsBusqueda || subsBusqueda.trim().length < 2) {
      setSubsOptions([]);
      return;
    }
    const fetchSubs = async () => {
      setSubsLoading(true);
      try {
        const resp = await getSuscripcionesSubsidiarios(empresaId, {
          busqueda: subsBusqueda.trim(),
          limit: 20,
        });
        const items = (
          resp?.data?.subsidiarios ||
          resp?.subsidiarios ||
          []
        ).flatMap((sub) => {
          const sus = sub.suscripcion_activa;
          if (!sus) return [];
          return [
            {
              id: sus.id,
              label: `${sub.razon_social} (${sub.ruc})`,
              empresa: sub.razon_social,
              ruc: sub.ruc,
              plan: sus.planes?.descripcion || "Sin plan",
              estado: sus.estado,
              monto: sus.costo_mensual || sus.planes?.precio || 0,
            },
          ];
        });
        setSubsOptions(items);
      } catch {
        setSubsOptions([]);
      } finally {
        setSubsLoading(false);
      }
    };
    const t = setTimeout(fetchSubs, 300);
    return () => clearTimeout(t);
  }, [subsBusqueda, pagoManualDialog, empresaId]);

  // Auto-fill monto when selecting a subscription
  useEffect(() => {
    if (selectedSub?.monto) {
      setPagoMonto(String(selectedSub.monto));
    }
  }, [selectedSub]);

  // --- Mutations ---
  const invalidate = () =>
    queryClient.invalidateQueries({
      queryKey: ["comprobantes-pendientes-holding"],
    });

  const aprobarMutation = useMutation({
    mutationFn: (id) => validarComprobante(id),
    onSuccess: () => {
      toast.success("Comprobante aprobado y suscripción renovada");
      invalidate();
    },
    onError: (err) =>
      toast.error(
        err.response?.data?.message || "Error al aprobar comprobante",
      ),
  });

  const rechazarMutation = useMutation({
    mutationFn: ({ id, motivo }) => rechazarComprobante(id, motivo),
    onSuccess: () => {
      toast.success("Comprobante rechazado");
      setRechazoDialog(null);
      setMotivoRechazo("");
      invalidate();
    },
    onError: (err) =>
      toast.error(
        err.response?.data?.message || "Error al rechazar comprobante",
      ),
  });

  const pagoManualMutation = useMutation({
    mutationFn: (data) =>
      registrarPagoManual(
        data.suscripcion_id,
        data.monto ? Number(data.monto) : undefined,
        data.observacion || undefined,
      ),
    onSuccess: () => {
      toast.success("Pago manual registrado y suscripción renovada");
      closePagoManual();
      invalidate();
    },
    onError: (err) =>
      toast.error(
        err.response?.data?.message || "Error al registrar pago manual",
      ),
  });

  // --- Preview modal ---
  const [previewDoc, setPreviewDoc] = useState(null); // { url, mimeType }
  const [previewLoading, setPreviewLoading] = useState(false);

  // --- Handlers ---
  const handleVerDocumento = useCallback(async (comprobanteId) => {
    setPreviewLoading(true);
    try {
      const doc = await fetchDocumentoComprobanteHolding(comprobanteId);
      setPreviewDoc(doc);
    } catch {
      toast.error("Error al cargar el documento");
    } finally {
      setPreviewLoading(false);
    }
  }, []);

  const closePreview = useCallback(() => {
    if (previewDoc?.url) URL.revokeObjectURL(previewDoc.url);
    setPreviewDoc(null);
  }, [previewDoc]);

  const handleAprobar = useCallback((id) => setConfirmarAprobar(id), []);

  const confirmarAprobacion = () => {
    if (confirmarAprobar) {
      aprobarMutation.mutate(confirmarAprobar);
      setConfirmarAprobar(null);
    }
  };

  const handleRechazar = () => {
    if (!motivoRechazo.trim()) {
      toast.error("Ingrese un motivo de rechazo");
      return;
    }
    rechazarMutation.mutate({
      id: rechazoDialog,
      motivo: motivoRechazo.trim(),
    });
  };

  const closePagoManual = () => {
    setPagoManualDialog(false);
    setSelectedSub(null);
    setPagoMonto("");
    setPagoObservacion("");
    setSubsBusqueda("");
  };

  const handlePagoManual = () => {
    if (!selectedSub) {
      toast.error("Seleccione una suscripción");
      return;
    }
    pagoManualMutation.mutate({
      suscripcion_id: selectedSub.id,
      monto: pagoMonto,
      observacion: pagoObservacion,
    });
  };

  return (
    <Container>
      {/* Header */}
      <Box
        display="flex"
        justifyContent="space-between"
        alignItems="center"
        mb={2}
        flexWrap="wrap"
        gap={1}
      >
        <Typography variant="h6" fontWeight={600}>
          <Icon
            icon="lucide:file-check"
            style={{ verticalAlign: "middle", marginRight: 8 }}
          />
          Comprobantes de Pago
        </Typography>
        <Button
          variant="contained"
          size="small"
          startIcon={<Icon icon="lucide:plus" />}
          onClick={() => setPagoManualDialog(true)}
        >
          Pago Manual
        </Button>
      </Box>

      {/* Filtros + Buscador */}
      <Box
        display="flex"
        gap={1.5}
        mb={2}
        flexWrap="wrap"
        alignItems="center"
        sx={{ "& > *": { flexShrink: 0 } }}
      >
        <ToggleButtonGroup
          value={filtroEstado}
          exclusive
          onChange={(_, v) => v && setFiltroEstado(v)}
          size="small"
          sx={{
            flexWrap: "wrap",
            "& .MuiToggleButton-root": {
              fontSize: { xs: "0.7rem", sm: "0.8125rem" },
              px: { xs: 1, sm: 1.5 },
            },
          }}
        >
          <ToggleButton value="Pendiente">
            <Icon
              icon="lucide:clock"
              style={{ marginRight: 4, fontSize: 16 }}
            />
            Pendientes
          </ToggleButton>
          <ToggleButton value="Aprobado">
            <Icon
              icon="lucide:check-circle"
              style={{ marginRight: 4, fontSize: 16 }}
            />
            Aprobados
          </ToggleButton>
          <ToggleButton value="Rechazado">
            <Icon
              icon="lucide:x-circle"
              style={{ marginRight: 4, fontSize: 16 }}
            />
            Rechazados
          </ToggleButton>
        </ToggleButtonGroup>

        <TextField
          size="small"
          placeholder="Buscar por empresa o RUC..."
          value={busqueda}
          onChange={(e) => setBusqueda(e.target.value)}
          sx={{ minWidth: { xs: 0, sm: 240 }, flex: "1 1 200px" }}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <Icon icon="lucide:search" />
              </InputAdornment>
            ),
            endAdornment: busqueda ? (
              <InputAdornment position="end">
                <IconButton size="small" onClick={() => setBusqueda("")}>
                  <Icon icon="lucide:x" />
                </IconButton>
              </InputAdornment>
            ) : null,
          }}
        />

        {!isLoading && (
          <Typography
            variant="caption"
            color="text.secondary"
            sx={{ ml: "auto" }}
          >
            {totalCount} resultado{totalCount !== 1 ? "s" : ""}
          </Typography>
        )}
      </Box>

      {/* Loading / Error */}
      {isLoading && (
        <Box display="flex" justifyContent="center" py={4}>
          <CircularProgress size={32} />
        </Box>
      )}
      {error && (
        <Alert severity="error" sx={{ mb: 2 }}>
          Error al cargar comprobantes
        </Alert>
      )}

      {/* Tabla */}
      {!isLoading && !error && (
        <Paper
          elevation={0}
          sx={{
            border: 1,
            borderColor: "divider",
            overflow: "hidden",
            maxWidth: "100%",
          }}
        >
          {!comprobantes?.length ? (
            <Box py={6} textAlign="center">
              <Icon
                icon="lucide:inbox"
                style={{ fontSize: 48, opacity: 0.3, marginBottom: 8 }}
              />
              <Typography color="text.secondary" display="block">
                No hay comprobantes {filtroEstado.toLowerCase()}s
              </Typography>
              {busquedaDebounced && (
                <Typography variant="caption" color="text.secondary">
                  Intenta con otra búsqueda
                </Typography>
              )}
            </Box>
          ) : (
            <>
              <TableContainer>
                <Table size="small">
                  <TableHead>
                    <TableRow>
                      <TableCell>Empresa</TableCell>
                      <TableCell>Plan</TableCell>
                      <TableCell>Estado</TableCell>
                      <TableCell>Monto</TableCell>
                      <TableCell>Observación</TableCell>
                      <TableCell>Fecha</TableCell>
                      <TableCell align="center">Acciones</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {comprobantes.map((c) => (
                      <TableRow key={c.id} hover>
                        <TableCell>
                          <Typography variant="body2" fontWeight={500}>
                            {c.empresas?.razon_social || "-"}
                          </Typography>
                          <Typography variant="caption" color="text.secondary">
                            {c.empresas?.ruc || ""}
                          </Typography>
                        </TableCell>
                        <TableCell>
                          <Typography variant="caption">
                            {c.suscripciones?.planes?.descripcion || "-"}
                          </Typography>
                          {c.suscripciones?.fecha_fin && (
                            <Typography
                              variant="caption"
                              display="block"
                              color="text.secondary"
                            >
                              Vence: {c.suscripciones.fecha_fin}
                            </Typography>
                          )}
                        </TableCell>
                        <TableCell>
                          <Chip
                            label={c.estado}
                            color={estadoPagoColor[c.estado] || "default"}
                            size="small"
                          />
                        </TableCell>
                        <TableCell>
                          {c.monto
                            ? `${Number(c.monto).toLocaleString("es-PY")} Gs.`
                            : "-"}
                        </TableCell>
                        <TableCell>
                          <Tooltip title={c.observacion || ""} arrow>
                            <Typography
                              variant="caption"
                              sx={{
                                maxWidth: 150,
                                display: "block",
                                overflow: "hidden",
                                textOverflow: "ellipsis",
                                whiteSpace: "nowrap",
                              }}
                            >
                              {c.observacion || "-"}
                            </Typography>
                          </Tooltip>
                          {c.motivo_rechazo && (
                            <Tooltip title={c.motivo_rechazo} arrow>
                              <Typography
                                variant="caption"
                                color="error"
                                display="block"
                                sx={{
                                  maxWidth: 150,
                                  overflow: "hidden",
                                  textOverflow: "ellipsis",
                                  whiteSpace: "nowrap",
                                }}
                              >
                                Rechazo: {c.motivo_rechazo}
                              </Typography>
                            </Tooltip>
                          )}
                        </TableCell>
                        <TableCell>
                          <Typography variant="caption">
                            {c.created_at}
                          </Typography>
                          {c.fecha_revision && (
                            <Typography
                              variant="caption"
                              display="block"
                              color="text.secondary"
                            >
                              Rev: {c.fecha_revision}
                            </Typography>
                          )}
                        </TableCell>
                        <TableCell align="center">
                          <Box display="flex" gap={0.5} justifyContent="center">
                            {c.mime_type && (
                              <Tooltip title="Ver documento adjunto">
                                <IconButton
                                  size="small"
                                  onClick={() => handleVerDocumento(c.id)}
                                >
                                  <Icon icon="lucide:file-search" />
                                </IconButton>
                              </Tooltip>
                            )}
                            {c.estado === "Pendiente" && (
                              <>
                                <Tooltip title="Aprobar comprobante">
                                  <IconButton
                                    size="small"
                                    color="success"
                                    onClick={() => handleAprobar(c.id)}
                                    disabled={aprobarMutation.isPending}
                                  >
                                    <Icon icon="lucide:check" />
                                  </IconButton>
                                </Tooltip>
                                <Tooltip title="Rechazar comprobante">
                                  <IconButton
                                    size="small"
                                    color="error"
                                    onClick={() => setRechazoDialog(c.id)}
                                    disabled={rechazarMutation.isPending}
                                  >
                                    <Icon icon="lucide:x" />
                                  </IconButton>
                                </Tooltip>
                              </>
                            )}
                          </Box>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </TableContainer>
              {totalPages > 1 && (
                <Box display="flex" justifyContent="center" py={1.5}>
                  <Pagination
                    count={totalPages}
                    page={page}
                    onChange={(_, p) => setPage(p)}
                    size="small"
                    color="primary"
                  />
                </Box>
              )}
            </>
          )}
        </Paper>
      )}

      {/* Dialog Confirmar Aprobación */}
      <Dialog
        open={!!confirmarAprobar}
        onClose={() => setConfirmarAprobar(null)}
        maxWidth="xs"
        fullWidth
      >
        <DialogTitle>
          <Icon
            icon="lucide:check-circle"
            style={{
              verticalAlign: "middle",
              marginRight: 8,
              color: "#10b981",
            }}
          />
          Confirmar aprobación
        </DialogTitle>
        <DialogContent>
          <Typography variant="body2" color="text.secondary">
            ¿Aprobar este comprobante? Esto renovará la suscripción del
            subsidiario automáticamente por un ciclo.
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setConfirmarAprobar(null)}>Cancelar</Button>
          <Button
            variant="contained"
            color="success"
            onClick={confirmarAprobacion}
            disabled={aprobarMutation.isPending}
            startIcon={
              aprobarMutation.isPending ? (
                <CircularProgress size={16} />
              ) : (
                <Icon icon="lucide:check" />
              )
            }
          >
            {aprobarMutation.isPending ? "Aprobando..." : "Aprobar"}
          </Button>
        </DialogActions>
      </Dialog>

      {/* Dialog Rechazo */}
      <Dialog
        open={!!rechazoDialog}
        onClose={() => setRechazoDialog(null)}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>
          <Icon
            icon="lucide:x-circle"
            style={{
              verticalAlign: "middle",
              marginRight: 8,
              color: "#ef4444",
            }}
          />
          Rechazar comprobante
        </DialogTitle>
        <DialogContent>
          <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
            El subsidiario será notificado del rechazo. Proporcione un motivo
            claro para que pueda corregir y reenviar.
          </Typography>
          <TextField
            autoFocus
            fullWidth
            label="Motivo del rechazo"
            placeholder="Ej: Comprobante ilegible, monto no coincide..."
            multiline
            rows={3}
            value={motivoRechazo}
            onChange={(e) => setMotivoRechazo(e.target.value)}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setRechazoDialog(null)}>Cancelar</Button>
          <Button
            variant="contained"
            color="error"
            onClick={handleRechazar}
            disabled={rechazarMutation.isPending}
          >
            {rechazarMutation.isPending ? "Rechazando..." : "Rechazar"}
          </Button>
        </DialogActions>
      </Dialog>

      {/* Dialog Pago Manual */}
      <Dialog
        open={pagoManualDialog}
        onClose={closePagoManual}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>
          <Icon
            icon="lucide:wallet"
            style={{ verticalAlign: "middle", marginRight: 8 }}
          />
          Registrar Pago Manual
        </DialogTitle>
        <DialogContent>
          <Alert
            severity="info"
            sx={{ mb: 2, mt: 0.5 }}
            icon={<Icon icon="lucide:info" />}
          >
            Registre un pago para un subsidiario cuando haya confirmado el cobro
            por otro medio (transferencia, efectivo, etc.). Esto renovará
            automáticamente su suscripción por un ciclo.
          </Alert>

          {/* Selector de suscripción */}
          <Autocomplete
            options={subsOptions}
            loading={subsLoading}
            getOptionLabel={(opt) => opt.label || ""}
            isOptionEqualToValue={(opt, val) => opt.id === val.id}
            value={selectedSub}
            onChange={(_, val) => setSelectedSub(val)}
            onInputChange={(_, val) => setSubsBusqueda(val)}
            noOptionsText={
              subsBusqueda
                ? "No se encontraron subsidiarios"
                : "Escriba para buscar..."
            }
            renderOption={(props, opt) => (
              <li {...props} key={opt.id}>
                <Box>
                  <Typography variant="body2" fontWeight={500}>
                    {opt.empresa}
                    <Typography
                      component="span"
                      variant="caption"
                      color="text.secondary"
                      sx={{ ml: 1 }}
                    >
                      {opt.ruc}
                    </Typography>
                  </Typography>
                  <Typography variant="caption" color="text.secondary">
                    Plan: {opt.plan} · Estado: {opt.estado}
                    {opt.monto
                      ? ` · ${Number(opt.monto).toLocaleString("es-PY")} Gs.`
                      : ""}
                  </Typography>
                </Box>
              </li>
            )}
            renderInput={(params) => (
              <TextField
                {...params}
                label="Buscar empresa subsidiaria"
                placeholder="Nombre o RUC del subsidiario..."
                helperText="Seleccione la suscripción del subsidiario al que desea registrar el pago"
                InputProps={{
                  ...params.InputProps,
                  startAdornment: (
                    <>
                      <InputAdornment position="start">
                        <Icon icon="lucide:search" />
                      </InputAdornment>
                      {params.InputProps.startAdornment}
                    </>
                  ),
                }}
              />
            )}
            sx={{ mb: 2 }}
          />

          {/* Info de la suscripción seleccionada */}
          {selectedSub && (
            <Paper
              variant="outlined"
              sx={{ p: 1.5, mb: 2, bgcolor: "action.hover" }}
            >
              <Box
                display="flex"
                justifyContent="space-between"
                alignItems="center"
              >
                <Box>
                  <Typography variant="body2" fontWeight={600}>
                    {selectedSub.empresa}
                  </Typography>
                  <Typography variant="caption" color="text.secondary">
                    Plan: {selectedSub.plan} · Estado:{" "}
                    <Chip
                      label={selectedSub.estado}
                      size="small"
                      color={
                        selectedSub.estado === "Activo"
                          ? "success"
                          : selectedSub.estado === "Expirado"
                            ? "error"
                            : "default"
                      }
                      sx={{ height: 20, fontSize: "0.7rem" }}
                    />
                  </Typography>
                </Box>
                {selectedSub.monto > 0 && (
                  <Typography variant="body2" fontWeight={600} color="primary">
                    {Number(selectedSub.monto).toLocaleString("es-PY")} Gs.
                  </Typography>
                )}
              </Box>
            </Paper>
          )}

          <TextField
            fullWidth
            label="Monto del pago"
            type="number"
            value={pagoMonto}
            onChange={(e) => setPagoMonto(e.target.value)}
            sx={{ mb: 2 }}
            helperText="Se autocompleta con el costo de la suscripción. Puede modificarlo."
            InputProps={{
              endAdornment: <InputAdornment position="end">Gs.</InputAdornment>,
            }}
          />

          <TextField
            fullWidth
            label="Observación (opcional)"
            placeholder="Ej: Pago en efectivo recibido en oficina, Transferencia #12345..."
            multiline
            rows={2}
            value={pagoObservacion}
            onChange={(e) => setPagoObservacion(e.target.value)}
            helperText="Referencia del pago para el registro interno"
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={closePagoManual}>Cancelar</Button>
          <Button
            variant="contained"
            onClick={handlePagoManual}
            disabled={pagoManualMutation.isPending || !selectedSub}
            startIcon={
              pagoManualMutation.isPending ? (
                <CircularProgress size={16} />
              ) : (
                <Icon icon="lucide:check" />
              )
            }
          >
            {pagoManualMutation.isPending ? "Registrando..." : "Registrar Pago"}
          </Button>
        </DialogActions>
      </Dialog>

      {/* Modal Preview Documento */}
      <Dialog
        open={!!previewDoc}
        onClose={closePreview}
        maxWidth="md"
        fullWidth
      >
        <DialogTitle
          sx={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <Box display="flex" alignItems="center" gap={1}>
            <Icon icon="lucide:file-search" />
            Vista previa del documento
          </Box>
          <IconButton size="small" onClick={closePreview}>
            <Icon icon="lucide:x" />
          </IconButton>
        </DialogTitle>
        <DialogContent sx={{ p: 0, minHeight: 400 }}>
          {previewLoading ? (
            <Box
              display="flex"
              justifyContent="center"
              alignItems="center"
              py={8}
            >
              <CircularProgress />
            </Box>
          ) : previewDoc?.mimeType?.startsWith("image/") ? (
            <Box display="flex" justifyContent="center" p={2}>
              <img
                src={previewDoc.url}
                alt="Comprobante"
                style={{
                  maxWidth: "100%",
                  maxHeight: "70vh",
                  objectFit: "contain",
                }}
              />
            </Box>
          ) : previewDoc?.mimeType === "application/pdf" ? (
            <iframe
              src={previewDoc.url}
              title="Comprobante PDF"
              style={{ width: "100%", height: "70vh", border: "none" }}
            />
          ) : (
            <Box textAlign="center" py={4}>
              <Typography color="text.secondary">
                No se puede previsualizar este tipo de archivo
              </Typography>
              <Button
                sx={{ mt: 1 }}
                variant="outlined"
                onClick={() => window.open(previewDoc?.url, "_blank")}
              >
                Descargar archivo
              </Button>
            </Box>
          )}
        </DialogContent>
      </Dialog>
    </Container>
  );
}

const Container = styled.div`
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
`;