import { Icon } from "@iconify/react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { toast } from "sonner";
import styled from "styled-components";
import {
  cambiarPlanEmpresa,
  suscripcionesQueries,
} from "../../../api/suscripciones.service";

const Overlay = styled.div`
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
`;

const Dialog = styled.div`
  background: ${(p) => p.theme.bg2};
  border: 1px solid ${(p) => p.theme.borderColor};
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: ${(p) => p.theme.boxshadow};
`;

const Header = styled.div`
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid ${(p) => p.theme.borderColor};
  flex-shrink: 0;
`;

const HeaderIcon = styled.div`
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  background: ${(p) => p.theme.bg6};
  display: flex;
  align-items: center;
  justify-content: center;
  color: ${(p) => p.theme.primary};
  font-size: 1.1rem;
  flex-shrink: 0;
`;

const HeaderText = styled.div`
  flex: 1;
  h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: ${(p) => p.theme.text};
  }
  p {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: ${(p) => p.theme.textSecondary};
  }
`;

const CloseBtn = styled.button`
  background: none;
  border: none;
  cursor: pointer;
  color: ${(p) => p.theme.textSecondary};
  font-size: 1.1rem;
  padding: 0.3rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition:
    background 0.15s,
    color 0.15s;
  &:hover {
    background: ${(p) => p.theme.bgAlpha};
    color: ${(p) => p.theme.text};
  }
`;

const Body = styled.div`
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
`;

const SectionLabel = styled.p`
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: ${(p) => p.theme.textSecondary};
  text-transform: uppercase;
  letter-spacing: 0.07em;
`;

/* ── Info plan actual ── */
const CurrentPlanCard = styled.div`
  background: ${(p) => p.theme.bg3};
  border: 1px solid ${(p) => p.theme.borderColor};
  border-radius: 10px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
`;

const CurrentPlanRow = styled.div`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
`;

const CurrentPlanName = styled.span`
  font-size: 0.9rem;
  font-weight: 700;
  color: ${(p) => p.theme.text};
  flex: 1;
`;

const StatusPill = styled.span`
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  background: ${(p) =>
    p.$estado === "Activo"
      ? "rgba(34,197,94,0.12)"
      : p.$estado === "EnGracia"
        ? "rgba(245,158,11,0.12)"
        : "rgba(239,68,68,0.12)"};
  color: ${(p) =>
    p.$estado === "Activo"
      ? "#22c55e"
      : p.$estado === "EnGracia"
        ? "#f59e0b"
        : "#ef4444"};
  border: 1px solid
    ${(p) =>
      p.$estado === "Activo"
        ? "rgba(34,197,94,0.25)"
        : p.$estado === "EnGracia"
          ? "rgba(245,158,11,0.25)"
          : "rgba(239,68,68,0.25)"};
`;

const MetaRow = styled.div`
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
`;

const MetaItem = styled.div`
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: ${(p) => p.theme.textSecondary};
  svg {
    font-size: 0.85rem;
    flex-shrink: 0;
  }
  strong {
    color: ${(p) => p.theme.text};
    font-weight: 600;
  }
`;

/* ── Override warning ── */
const OverrideWarning = styled.div`
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: ${(p) => p.theme.text};
  line-height: 1.5;
  svg {
    color: #f59e0b;
    flex-shrink: 0;
    margin-top: 2px;
  }
  strong {
    color: #f59e0b;
  }
`;

const PlanGrid = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
`;

const PlanCard = styled.div`
  border: 1.5px solid
    ${(p) => (p.$selected ? p.theme.primary : p.theme.borderColor)};
  border-radius: 10px;
  padding: 0.85rem 1rem;
  cursor: ${(p) => (p.$disabled ? "default" : "pointer")};
  background: ${(p) =>
    p.$selected ? p.theme.bg6 : p.$disabled ? p.theme.bgAlpha : p.theme.bg3};
  opacity: ${(p) => (p.$disabled ? 0.55 : 1)};
  transition:
    border-color 0.15s,
    background 0.15s;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  &:not([data-disabled="true"]):hover {
    border-color: ${(p) =>
      p.$selected ? p.theme.primary : p.theme.primary + "60"};
    background: ${(p) => (p.$selected ? p.theme.bg6 : p.theme.bgAlpha)};
  }
`;

const PlanRadio = styled.div`
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid
    ${(p) => (p.$selected ? p.theme.primary : p.theme.textSecondary)};
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  &::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: ${(p) => p.theme.primary};
    opacity: ${(p) => (p.$selected ? 1 : 0)};
    transition: opacity 0.15s;
  }
`;

const PlanInfo = styled.div`
  flex: 1;
  min-width: 0;
  h4 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: ${(p) => p.theme.text};
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  p {
    margin: 0.2rem 0 0;
    font-size: 0.73rem;
    color: ${(p) => p.theme.textSecondary};
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
`;

const PlanPrice = styled.div`
  font-size: 0.875rem;
  font-weight: 700;
  color: ${(p) => (p.$selected ? p.theme.primary : p.theme.textSecondary)};
  white-space: nowrap;
  flex-shrink: 0;
`;

const CurrentBadge = styled.span`
  font-size: 0.63rem;
  font-weight: 600;
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
`;

/* ── Comparativa módulos ── */
const ModulesCompare = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  @media (max-width: 440px) {
    grid-template-columns: 1fr;
  }
`;

const ModuleColumn = styled.div`
  background: ${(p) => p.theme.bg3};
  border: 1px solid ${(p) => p.$color + "30"};
  border-radius: 10px;
  padding: 0.75rem;
`;

const ModuleColTitle = styled.div`
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: ${(p) => p.$color};
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  svg {
    font-size: 0.85rem;
  }
`;

const ModuleTag = styled.span`
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  padding: 0.18rem 0.5rem;
  border-radius: 5px;
  background: ${(p) => p.$color + "15"};
  color: ${(p) => p.$color};
  margin: 0.2rem 0.2rem 0 0;
  svg {
    font-size: 0.75rem;
  }
`;

const EmptyModules = styled.p`
  font-size: 0.75rem;
  color: ${(p) => p.theme.textSecondary};
  margin: 0;
  font-style: italic;
`;

/* ── Info cobro ── */
const CobrosInfo = styled.div`
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: ${(p) => p.theme.bg6};
  border: 1px solid ${(p) => p.theme.primary}25;
  border-radius: 10px;
  padding: 0.8rem 1rem;
  font-size: 0.8rem;
  color: ${(p) => p.theme.textSecondary};
  line-height: 1.55;
  strong {
    color: ${(p) => p.theme.text};
  }
  svg {
    color: ${(p) => p.theme.primary};
    flex-shrink: 0;
    margin-top: 1px;
  }
`;

const FormField = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  label {
    font-size: 0.78rem;
    font-weight: 600;
    color: ${(p) => p.theme.textSecondary};
  }
  input {
    background: ${(p) => p.theme.inputBg};
    border: 1px solid ${(p) => p.theme.inputBorder};
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    color: ${(p) => p.theme.text};
    font-size: 0.875rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition:
      border-color 0.15s,
      box-shadow 0.15s;
    &:focus {
      border-color: ${(p) => p.theme.primary};
      box-shadow: 0 0 0 3px ${(p) => p.theme.primary}20;
    }
    &::placeholder {
      color: ${(p) => p.theme.textSecondary}60;
    }
  }
`;

const Footer = styled.div`
  padding: 1rem 1.5rem;
  border-top: 1px solid ${(p) => p.theme.borderColor};
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  flex-shrink: 0;
  @media (max-width: 400px) {
    flex-direction: column-reverse;
    button {
      width: 100%;
      justify-content: center;
    }
  }
`;

const SecondaryBtn = styled.button`
  padding: 0.55rem 1.25rem;
  border-radius: 8px;
  border: 1px solid ${(p) => p.theme.borderColor};
  background: transparent;
  color: ${(p) => p.theme.textSecondary};
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s;
  &:hover {
    background: ${(p) => p.theme.bgAlpha};
    color: ${(p) => p.theme.text};
  }
`;

const PrimaryBtn = styled.button`
  padding: 0.55rem 1.4rem;
  border-radius: 8px;
  border: none;
  background: ${(p) => p.theme.primary};
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: opacity 0.15s;
  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  &:not(:disabled):hover {
    opacity: 0.88;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  .spin {
    animation: spin 1s linear infinite;
  }
`;

const LoadingRow = styled.div`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: ${(p) => p.theme.textSecondary};
  font-size: 0.85rem;
  padding: 0.75rem 0;
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  .spin {
    animation: spin 1s linear infinite;
  }
`;

const formatPrecio = (precio) => {
  if (!precio || Number(precio) === 0) return "Gratis";
  return `Gs. ${Number(precio).toLocaleString("es-PY")} /mes`;
};

const formatFecha = (fecha) => {
  if (!fecha) return null;
  return new Date(fecha).toLocaleDateString("es-PY", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  });
};

const getPlanMeta = (plan) => {
  const parts = [];
  if (plan.max_documentos)
    parts.push(`${Number(plan.max_documentos)} docs/mes`);
  if (plan.max_user) parts.push(`${Number(plan.max_user)} usuarios`);
  if (plan.max_empresas) parts.push(`${plan.max_empresas} empresas`);
  if (plan.periodo_prueba) parts.push(`${Number(plan.periodo_prueba)} días`);
  return parts.join(" · ") || "Sin restricciones";
};

export function CambiarPlanDialog({ open, onClose, empresa }) {
  const qc = useQueryClient();
  const [planSeleccionado, setPlanSeleccionado] = useState(null);
  const [motivo, setMotivo] = useState("");
  const [fechaInicio, setFechaInicio] = useState("");
  const [fechaFin, setFechaFin] = useState("");
  const [costoMensual, setCostoMensual] = useState("");
  const [diaCobro, setDiaCobro] = useState("");

  const { data: planesRes, isLoading } = useQuery({
    ...suscripcionesQueries.planesAdmin(false),
    enabled: open,
  });

  const planes = planesRes?.data || [];
  const susc = empresa?.suscripcion;
  const planActualId = susc?.plan_id;
  const hasOverride = !!susc?.limite_override;

  const planSeleccionadoObj = planes.find((p) => p.id === planSeleccionado);
  const planActualObj = planes.find((p) => p.id === planActualId);

  // Se compara por id de módulo, pero sólo se muestra su descripción.
  const modulosDe = (plan) =>
    new Map(
      (plan?.plan_modulos ?? []).map((m) => [
        m.modulo_id,
        m.modulos?.descripcion || m.modulos?.codigo || "Módulo sin nombre",
      ]),
    );
  const modulosActuales = modulosDe(planActualObj);
  const modulosNuevos = modulosDe(planSeleccionadoObj);
  const modulosGanados = [...modulosNuevos]
    .filter(([id]) => !modulosActuales.has(id))
    .map(([id, nombre]) => ({ id, nombre }));
  const modulosPerdidos = [...modulosActuales]
    .filter(([id]) => !modulosNuevos.has(id))
    .map(([id, nombre]) => ({ id, nombre }));

  const mutation = useMutation({
    mutationFn: () =>
      cambiarPlanEmpresa(
        empresa.id,
        planSeleccionado,
        fechaInicio || undefined,
        motivo || undefined,
        fechaFin || undefined,
        costoMensual === "" ? undefined : Number(costoMensual),
        diaCobro === "" ? undefined : Number(diaCobro),
      ),
    onSuccess: () => {
      toast.success(
        `Plan actualizado correctamente para ${empresa?.razon_social}`,
      );
      qc.invalidateQueries({ queryKey: ["jerarquia"] });
      onClose();
      setPlanSeleccionado(null);
      setMotivo("");
      setFechaInicio("");
      setFechaFin("");
      setCostoMensual("");
      setDiaCobro("");
    },
    onError: (err) => {
      toast.error(err?.response?.data?.message || "Error al cambiar plan");
    },
  });

  if (!open) return null;

  return (
    <Overlay onClick={onClose}>
      <Dialog onClick={(e) => e.stopPropagation()}>
        <Header>
          <HeaderIcon>
            <Icon icon="lucide:repeat" />
          </HeaderIcon>
          <HeaderText>
            <h3>Cambiar Plan</h3>
            <p>
              {empresa?.razon_social} · RUC {empresa?.ruc}
            </p>
          </HeaderText>
          <CloseBtn onClick={onClose}>
            <Icon icon="lucide:x" />
          </CloseBtn>
        </Header>

        <Body>
          {/* ── Plan actual ── */}
          <div>
            <SectionLabel>Plan actual</SectionLabel>
            <CurrentPlanCard>
              {susc ? (
                <>
                  <CurrentPlanRow>
                    <CurrentPlanName>
                      {susc.plan_nombre ||
                        planActualObj?.descripcion ||
                        "Plan activo"}
                    </CurrentPlanName>
                    {susc.estado && (
                      <StatusPill $estado={susc.estado}>
                        {susc.estado}
                      </StatusPill>
                    )}
                    {susc.bloqueada && (
                      <StatusPill $estado="Bloqueada">Bloqueada</StatusPill>
                    )}
                  </CurrentPlanRow>
                  <MetaRow>
                    {susc.fecha_fin && (
                      <MetaItem>
                        <Icon icon="lucide:calendar" />
                        Vence: <strong>{formatFecha(susc.fecha_fin)}</strong>
                        {susc.dias_restantes != null && (
                          <span style={{ opacity: 0.7 }}>
                            (
                            {susc.dias_restantes > 0
                              ? `${susc.dias_restantes} días`
                              : "vencido"}
                            )
                          </span>
                        )}
                      </MetaItem>
                    )}
                    {susc.costo_mensual != null && (
                      <MetaItem>
                        <Icon icon="lucide:dollar-sign" />
                        Costo:{" "}
                        <strong>
                          Gs.{" "}
                          {Number(susc.costo_mensual).toLocaleString("es-PY")}
                          /mes
                        </strong>
                      </MetaItem>
                    )}
                    {hasOverride && (
                      <MetaItem>
                        <Icon
                          icon="lucide:sliders-horizontal"
                          style={{ color: "#f59e0b" }}
                        />
                        <span style={{ color: "#f59e0b" }}>
                          Override activo (se perderá)
                        </span>
                      </MetaItem>
                    )}
                  </MetaRow>
                </>
              ) : (
                <CurrentPlanRow>
                  <Icon
                    icon="lucide:alert-circle"
                    style={{ color: "#ef4444" }}
                  />
                  <CurrentPlanName style={{ color: "#ef4444" }}>
                    Sin suscripción activa
                  </CurrentPlanName>
                </CurrentPlanRow>
              )}
            </CurrentPlanCard>
          </div>

          {/* ── Override warning ── */}
          {hasOverride && (
            <OverrideWarning>
              <Icon icon="lucide:alert-triangle" />
              <span>
                Esta empresa tiene{" "}
                <strong>límites ampliados temporalmente</strong>. Al cambiar de
                plan, el override activo se eliminará y se aplicarán los límites
                del nuevo plan.
              </span>
            </OverrideWarning>
          )}

          {/* ── Lista de planes ── */}
          <div>
            <SectionLabel>Seleccioná el nuevo plan</SectionLabel>
            {isLoading ? (
              <LoadingRow>
                <Icon icon="lucide:loader-2" className="spin" />
                Cargando planes...
              </LoadingRow>
            ) : (
              <PlanGrid>
                {planes.map((plan) => {
                  const esCurrent = plan.id === planActualId;
                  const selected = plan.id === planSeleccionado;
                  return (
                    <PlanCard
                      key={plan.id}
                      $selected={selected}
                      $disabled={esCurrent}
                      data-disabled={esCurrent ? "true" : "false"}
                      onClick={() => !esCurrent && setPlanSeleccionado(plan.id)}
                    >
                      <PlanRadio $selected={selected} />
                      <PlanInfo>
                        <h4>
                          {plan.descripcion}
                          {esCurrent && (
                            <CurrentBadge>Plan actual</CurrentBadge>
                          )}
                        </h4>
                        <p>{getPlanMeta(plan)}</p>
                      </PlanInfo>
                      <PlanPrice $selected={selected}>
                        {formatPrecio(plan.precio)}
                      </PlanPrice>
                    </PlanCard>
                  );
                })}
              </PlanGrid>
            )}
          </div>

          {/* ── Comparativa de módulos ── */}
          {planSeleccionadoObj &&
            (modulosGanados.length > 0 || modulosPerdidos.length > 0) && (
              <div>
                <SectionLabel>Cambios en módulos</SectionLabel>
                <ModulesCompare>
                  <ModuleColumn $color="#22c55e">
                    <ModuleColTitle $color="#22c55e">
                      <Icon icon="lucide:plus-circle" />
                      Se agregan
                    </ModuleColTitle>
                    {modulosGanados.length > 0 ? (
                      modulosGanados.map((m) => (
                        <ModuleTag key={m.id} $color="#22c55e">
                          <Icon icon="lucide:check" />
                          {m.nombre}
                        </ModuleTag>
                      ))
                    ) : (
                      <EmptyModules>Sin cambios</EmptyModules>
                    )}
                  </ModuleColumn>
                  <ModuleColumn $color="#ef4444">
                    <ModuleColTitle $color="#ef4444">
                      <Icon icon="lucide:minus-circle" />
                      Se pierden
                    </ModuleColTitle>
                    {modulosPerdidos.length > 0 ? (
                      modulosPerdidos.map((m) => (
                        <ModuleTag key={m.id} $color="#ef4444">
                          <Icon icon="lucide:x" />
                          {m.nombre}
                        </ModuleTag>
                      ))
                    ) : (
                      <EmptyModules>Sin cambios</EmptyModules>
                    )}
                  </ModuleColumn>
                </ModulesCompare>
              </div>
            )}

          {/* ── Info proceso de cobro ── */}
          {planSeleccionadoObj && (
            <CobrosInfo>
              <Icon icon="lucide:info" />
              <span>
                Al confirmar, la suscripción actual se cancela inmediatamente y
                se crea una nueva.
                {planSeleccionadoObj.periodo_prueba &&
                Number(planSeleccionadoObj.periodo_prueba) > 0 ? (
                  <>
                    {" "}
                    El nuevo plan tiene{" "}
                    <strong>
                      {Number(planSeleccionadoObj.periodo_prueba)} días
                    </strong>{" "}
                    de vigencia desde hoy.
                  </>
                ) : null}{" "}
                Los módulos adicionales previos{" "}
                <strong>no se transfieren</strong> — solo quedan los incluidos
                en el nuevo plan.
              </span>
            </CobrosInfo>
          )}

          {/* ── Condiciones comerciales editables ── */}
          {planSeleccionadoObj && (
            <div>
              <SectionLabel>Condiciones de la nueva suscripción (opcional)</SectionLabel>
              <div
                style={{
                  display: "grid",
                  gridTemplateColumns: "1fr 1fr",
                  gap: "0.75rem",
                }}
              >
                <FormField>
                  <label>Fecha de inicio</label>
                  <input
                    type="date"
                    value={fechaInicio}
                    onChange={(e) => setFechaInicio(e.target.value)}
                  />
                </FormField>
                <FormField>
                  <label>Fecha de vencimiento</label>
                  <input
                    type="date"
                    value={fechaFin}
                    onChange={(e) => setFechaFin(e.target.value)}
                  />
                </FormField>
                <FormField>
                  <label>Costo mensual (Gs.)</label>
                  <input
                    type="number"
                    min="0"
                    placeholder={`Default: ${Number(planSeleccionadoObj.precio ?? 0).toLocaleString("es-PY")}`}
                    value={costoMensual}
                    onChange={(e) => setCostoMensual(e.target.value)}
                  />
                </FormField>
                <FormField>
                  <label>Día de cobro (1-31)</label>
                  <input
                    type="number"
                    min="1"
                    max="31"
                    placeholder="Ej: 5"
                    value={diaCobro}
                    onChange={(e) => setDiaCobro(e.target.value)}
                  />
                </FormField>
              </div>
            </div>
          )}

          {/* ── Motivo ── */}
          <FormField>
            <label>Motivo del cambio (opcional)</label>
            <input
              type="text"
              placeholder="Ej: Upgrade por demanda del cliente"
              value={motivo}
              onChange={(e) => setMotivo(e.target.value)}
              maxLength={60}
            />
          </FormField>
        </Body>

        <Footer>
          <SecondaryBtn onClick={onClose}>Cancelar</SecondaryBtn>
          <PrimaryBtn
            disabled={!planSeleccionado || mutation.isPending}
            onClick={() => mutation.mutate()}
          >
            {mutation.isPending ? (
              <>
                <Icon icon="lucide:loader-2" className="spin" />
                Cambiando...
              </>
            ) : (
              <>
                <Icon icon="lucide:check" />
                Confirmar cambio
              </>
            )}
          </PrimaryBtn>
        </Footer>
      </Dialog>
    </Overlay>
  );
}