"use client";

import { DashboardEmptyState, DashboardPageIntro, DashboardSection } from "@/components/dashboard-page";
import { useAuth } from "@/components/providers";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Skeleton, SkeletonDetailHeader } from "@/components/ui/skeleton";
import { useToast } from "@/hooks/use-toast";
import { ColumnDeviation, TogglesOperativos, tenantsAdminApi } from "@/lib/api";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  AlertTriangle,
  CheckCircle2,
  Hammer,
  KeyRound,
  Loader2,
  Network,
  Rocket,
  ShieldAlert,
  XCircle,
} from "lucide-react";
import { useParams, useRouter } from "next/navigation";
import { useMemo, useState } from "react";

const ESTADO_LABEL: Record<string, string> = {
  onboarding: "En preparación",
  activo: "Activo",
  suspendido: "Suspendido",
};

const SEVERIDAD_VARIANT: Record<string, "destructive" | "warning" | "neutral"> = {
  grave: "destructive",
  advertencia: "warning",
  informativo: "neutral",
};

function DeviationRow({
  deviation,
  onOmit,
  omitting,
}: {
  deviation: ColumnDeviation;
  onOmit: (d: ColumnDeviation) => void;
  omitting: boolean;
}) {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <div>
          <p className="text-sm font-bold text-foreground">
            {deviation.tabla}.{deviation.columna}
          </p>
          <p className="mt-0.5 text-xs text-muted-foreground">
            Esperado <span className="font-mono">{deviation.tipoEsperado}</span> · Real{" "}
            <span className="font-mono">{deviation.tipoReal}</span>
          </p>
        </div>
        <Badge variant={SEVERIDAD_VARIANT[deviation.severidad] || "neutral"} className="uppercase">
          {deviation.severidad}
        </Badge>
      </div>

      <div className="mt-3 overflow-x-auto rounded-xl bg-foreground p-3">
        <code className="whitespace-pre text-xs text-background">{deviation.alterSugerido}</code>
      </div>
      <p className="mt-1.5 text-[11px] text-subtle-foreground">
        Referencia solamente — esto nunca se ejecuta automáticamente.
      </p>

      {deviation.severidad === "grave" ? (
        <Button
          type="button"
          variant="outline"
          size="sm"
          className="mt-3"
          disabled={omitting}
          onClick={() => onOmit(deviation)}
        >
          {omitting ? <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" /> : null}
          Omitir esta desviación (con nota)
        </Button>
      ) : null}
    </div>
  );
}

export default function TenantDetallePage() {
  const params = useParams();
  const tenantId = Number(params?.id);
  const router = useRouter();
  const { isPlatformAdmin } = useAuth();
  const { toast } = useToast();
  const queryClient = useQueryClient();

  const [confirmActivar, setConfirmActivar] = useState("");
  const [confirmReconciliar, setConfirmReconciliar] = useState("");
  const [reconciliarResult, setReconciliarResult] = useState<{
    estado: "completo" | "incompleto";
    aplicadas: string[];
    falloEnMigracion: string | null;
    errorMensaje: string | null;
  } | null>(null);
  const [mostrarDesviaciones, setMostrarDesviaciones] = useState(false);
  const [confirmForzado, setConfirmForzado] = useState("");
  const [reconciliarForzadoResult, setReconciliarForzadoResult] = useState<{
    estado: "completo" | "incompleto";
    aplicadas: string[];
    falloEnMigracion: string | null;
    errorMensaje: string | null;
  } | null>(null);

  const queryKey = ["admin-tenant", tenantId];

  const { data: estado, isLoading } = useQuery({
    queryKey,
    queryFn: () => tenantsAdminApi.getEstado(tenantId),
    enabled: isPlatformAdmin && Number.isFinite(tenantId),
    refetchInterval: 15000,
  });

  // Checklist "le falta algo para operar de verdad" -- solo tiene sentido
  // una vez que hay conexion (sin eso, contar filas en su base fallaria
  // igual que cualquier otra consulta contra un tenant inalcanzable).
  const { data: resumenOperativo, isLoading: isLoadingResumen } = useQuery({
    queryKey: ["admin-tenant-resumen", tenantId],
    queryFn: () => tenantsAdminApi.getResumenOperativo(tenantId),
    enabled: isPlatformAdmin && Number.isFinite(tenantId) && Boolean(estado?.acceso.ok),
    refetchInterval: 15000,
  });

  const progresoQueryKey = ["admin-tenant-progreso", tenantId];

  const omitMutation = useMutation({
    mutationFn: (deviation: ColumnDeviation) => tenantsAdminApi.omitirDesviacion(tenantId, deviation),
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey });
      toast({ variant: "success", title: "Desviación omitida", description: "Ya no va a bloquear la activación." });
    },
    onError: (error: any) =>
      toast({ variant: "destructive", title: "No se pudo omitir", description: error?.message }),
  });

  const reconciliarMutation = useMutation({
    mutationFn: () => tenantsAdminApi.reconciliar(tenantId),
    onSuccess: (res) => {
      void queryClient.invalidateQueries({ queryKey: progresoQueryKey });
      void queryClient.invalidateQueries({ queryKey });
      void queryClient.invalidateQueries({ queryKey: ["admin-tenants"] });
      setConfirmReconciliar("");
      setReconciliarResult(res);
      if (res.estado === "completo") {
        toast({
          variant: "success",
          title: "Esquema completado",
          description: `${res.aplicadas.length} pieza(s) de esquema aplicada(s). Si no quedaba nada más pendiente, el cliente ya quedó activo.`,
        });
      } else {
        toast({
          variant: "destructive",
          title: "Quedó incompleto",
          description: `Se cortó en "${res.falloEnMigracion}" — revisá el detalle abajo.`,
        });
      }
    },
    onError: (error: any) =>
      toast({ variant: "destructive", title: "No se pudo reconciliar", description: error?.message }),
  });

  // Para cuando este panel dice "sin pendientes" pero algo real (login,
  // switch-tenant, etc.) sigue fallando por una columna/tabla faltante --
  // pasa cuando la tabla `migrations` del cliente quedó desincronizada del
  // esquema real (ej. se armó copiando esa tabla de otro tenant). Re-corre
  // el up() de cada migración sin mirar esa tabla para nada.
  const reconciliarForzadoMutation = useMutation({
    mutationFn: () => tenantsAdminApi.reconciliarForzado(tenantId),
    onSuccess: (res) => {
      void queryClient.invalidateQueries({ queryKey: progresoQueryKey });
      void queryClient.invalidateQueries({ queryKey });
      void queryClient.invalidateQueries({ queryKey: ["admin-tenants"] });
      setConfirmForzado("");
      setReconciliarForzadoResult(res);
      toast({
        variant: res.estado === "completo" ? "success" : "destructive",
        title: res.estado === "completo" ? "Esquema verificado" : "Terminó con errores",
        description:
          res.estado === "completo"
            ? `${res.aplicadas.length} pieza(s) verificada(s), todo en orden.`
            : `${res.aplicadas.length} pieza(s) OK, revisá el detalle de las que fallaron abajo.`,
      });
    },
    onError: (error: any) =>
      toast({ variant: "destructive", title: "No se pudo forzar la verificación", description: error?.message }),
  });

  // Mientras el POST de arriba sigue esperando respuesta (puede tardar
  // según cuántas piezas falten), esto consulta cada segundo cuántas ya
  // quedaron confirmadas en la base real del cliente — cada migración hace
  // su propio commit apenas termina, así que el conteo avanza de verdad en
  // vivo, no es una barra de progreso inventada.
  const { data: progreso } = useQuery({
    queryKey: progresoQueryKey,
    queryFn: () => tenantsAdminApi.progresoReconciliacion(tenantId),
    enabled: reconciliarMutation.isPending,
    refetchInterval: 1000,
  });

  const activarMutation = useMutation({
    mutationFn: () => tenantsAdminApi.activar(tenantId),
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey });
      void queryClient.invalidateQueries({ queryKey: ["admin-tenants"] });
      setConfirmActivar("");
      toast({ variant: "success", title: "Cliente activado", description: "Ya puede operar normalmente." });
    },
    onError: (error: any) =>
      toast({ variant: "destructive", title: "No se pudo activar", description: error?.message }),
  });

  const togglesMutation = useMutation({
    mutationFn: (data: Partial<TogglesOperativos>) => tenantsAdminApi.actualizarTogglesOperativos(tenantId, data),
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: ["admin-tenant-resumen", tenantId] });
    },
    onError: (error: any) =>
      toast({ variant: "destructive", title: "No se pudo guardar", description: error?.message }),
  });

  const gravesRestantes = useMemo(
    () => (estado?.desviaciones || []).filter((d) => d.severidad === "grave"),
    [estado],
  );

  // Mismo criterio que exige activarTenant() en el backend (nunca un
  // segundo lugar de verdad distinto) -- cada pieza solo cuenta si su
  // toggle esta prendido. Mientras el resumen todavia no cargo, se trata
  // como "no listo" (nunca "listo por defecto") para no habilitar el botón
  // un instante antes de saber si de verdad se puede.
  const operativoOk =
    !!resumenOperativo &&
    (!resumenOperativo.toggles.permiteTiendas || (resumenOperativo.tiendas ?? 0) > 0) &&
    (!resumenOperativo.toggles.facturaHabilitada || (resumenOperativo.tiendasConFacturacionPos ?? 0) > 0) &&
    (!resumenOperativo.toggles.permiteProductosPropios || (resumenOperativo.productos ?? 0) > 0);

  const puedeActivar =
    !!estado?.acceso.ok &&
    (estado?.migracionesPendientes.length || 0) === 0 &&
    gravesRestantes.length === 0 &&
    estado?.tenant.estado !== "activo" &&
    operativoOk;

  const esProduccion = estado?.tenant.entorno === "produccion";
  const confirmTextOk = confirmActivar.trim() === estado?.tenant.codigo;

  if (!isPlatformAdmin) {
    return (
      <main className="mx-auto max-w-4xl p-6">
        <DashboardEmptyState
          title="Sin acceso"
          description="Solo identidades con acceso de plataforma pueden administrar clientes."
          icon={Network}
        />
      </main>
    );
  }

  if (isLoading || !estado) {
    return (
      <div className="min-h-full pb-16 md:pb-10">
        <main className="mx-auto flex max-w-5xl flex-col gap-6 p-4 md:p-6">
          <SkeletonDetailHeader />
          <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
            {Array.from({ length: 4 }).map((_, index) => (
              <div key={index} className="rounded-xl border border-border bg-card p-4">
                <Skeleton className="h-3 w-20" />
                <Skeleton className="mt-3 h-7 w-16" />
              </div>
            ))}
          </div>
          <div className="space-y-3 rounded-xl border border-border bg-card p-4 md:p-5">
            <Skeleton className="h-4 w-1/3" />
            <Skeleton className="h-24 w-full" />
          </div>
        </main>
      </div>
    );
  }

  const { tenant } = estado;

  return (
    <div className="min-h-full pb-16 md:pb-10">
      <main className="mx-auto flex max-w-5xl flex-col gap-6 p-4 md:p-6">
        <DashboardPageIntro
          title={tenant.nombre}
          description={`${tenant.codigo} · ${tenant.dbHost}:${tenant.dbPort}/${tenant.dbName}`}
          icon={Network}
          tone={esProduccion ? "amber" : "slate"}
          badge={`${ESTADO_LABEL[tenant.estado]} · ${esProduccion ? "PRODUCCIÓN" : "Demo"}`}
          onBack={() => router.push("/dashboard/administracion/clientes")}
          stats={[
            {
              label: "Conexión",
              value: estado.acceso.ok ? "OK" : "Falla",
              icon: estado.acceso.ok ? CheckCircle2 : XCircle,
              hint: estado.acceso.ok ? undefined : (estado.acceso as any).error,
            },
            {
              label: "Esquema pendiente",
              value: estado.migracionesPendientes.length,
              icon: AlertTriangle,
              hint: estado.migracionesPendientes.length > 0 ? "Contactar a ingeniería" : "Completo",
            },
            { label: "Desviaciones graves", value: gravesRestantes.length, icon: ShieldAlert },
            { label: "Estado", value: ESTADO_LABEL[tenant.estado], icon: Rocket },
          ]}
        />

        {esProduccion ? (
          <div className="flex items-start gap-3 rounded-xl border border-warning/30 bg-warning-soft p-4">
            <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-warning" />
            <p className="text-sm text-warning">
              Este cliente es de <strong>PRODUCCIÓN</strong> — su base tiene datos reales
              (<span className="font-mono">{tenant.dbHost}:{tenant.dbPort}/{tenant.dbName}</span>).
              Cualquier acción acá abajo se aplica sobre esos datos.
            </p>
          </div>
        ) : null}

        {!estado.acceso.ok ? (
          <div className="flex items-start gap-3 rounded-xl border border-destructive/30 bg-destructive-soft p-4">
            <XCircle className="mt-0.5 h-5 w-5 shrink-0 text-destructive" />
            <div>
              <p className="text-sm font-bold text-destructive">La conexión falla</p>
              <p className="text-sm text-destructive">{(estado.acceso as any).error}</p>
            </div>
          </div>
        ) : null}

        {estado.acceso.ok ? (
          <DashboardSection
            title="Checklist operativo"
            description="Cada pieza tiene un toggle 'Requerido'/'No aplica' — mientras esté en Requerido, hace falta tenerla para poder Activar al cliente. Apagalo si este cliente en particular no la necesita."
          >
            {isLoadingResumen ? (
              <div className="flex justify-center py-6">
                <Loader2 className="h-6 w-6 animate-spin text-subtle-foreground" />
              </div>
            ) : (
              <div className="grid gap-3 sm:grid-cols-3">
                {(
                  [
                    {
                      key: "permiteTiendas" as const,
                      label: "Tiendas creadas",
                      value: resumenOperativo?.tiendas ?? null,
                      hint: "Sin al menos una, nadie puede quedar asignado a una tienda ni recibir vehículos.",
                    },
                    {
                      key: "facturaHabilitada" as const,
                      label: "Tiendas con facturación POS",
                      value: resumenOperativo?.tiendasConFacturacionPos ?? null,
                      hint: "Si es 0, ninguna OT terminada se va a facturar automáticamente en POSTouch.",
                    },
                    {
                      key: "permiteProductosPropios" as const,
                      label: "Productos propios",
                      value: resumenOperativo?.productos ?? null,
                      hint: "Repuestos/servicios creados desde el taller para cotizar (catálogo Productos).",
                    },
                  ]
                ).map((item) => {
                  const requerido = resumenOperativo?.toggles[item.key] ?? true;
                  const sinDatos = item.value === null;
                  const enCero = item.value === 0;
                  const faltaAlgo = requerido && enCero;
                  return (
                    <div
                      key={item.label}
                      className={`rounded-xl border p-4 ${
                        !requerido
                          ? "border-border bg-muted"
                          : sinDatos
                            ? "border-border bg-muted"
                            : faltaAlgo
                              ? "border-warning/30 bg-warning-soft"
                              : "border-success/30 bg-success-soft"
                      }`}
                    >
                      <div className="flex items-center gap-2">
                        {!requerido ? (
                          <ShieldAlert className="h-4 w-4 text-subtle-foreground" />
                        ) : sinDatos ? (
                          <AlertTriangle className="h-4 w-4 text-subtle-foreground" />
                        ) : faltaAlgo ? (
                          <AlertTriangle className="h-4 w-4 text-warning" />
                        ) : (
                          <CheckCircle2 className="h-4 w-4 text-success" />
                        )}
                        <span className="text-2xl font-bold text-foreground">{sinDatos ? "—" : item.value}</span>
                      </div>
                      <p className="mt-1 text-sm font-bold text-foreground">{item.label}</p>
                      <p className="mt-1 text-xs text-muted-foreground">
                        {!requerido
                          ? "No aplica para este cliente — no bloquea la activación."
                          : sinDatos
                            ? "No se pudo calcular todavía (puede faltar aplicar esquema)."
                            : item.hint}
                      </p>
                      <button
                        type="button"
                        disabled={togglesMutation.isPending}
                        onClick={() => void togglesMutation.mutate({ [item.key]: !requerido })}
                        className={`mt-3 rounded-full border px-2.5 py-1 text-[11px] font-bold transition-colors disabled:opacity-50 ${
                          requerido
                            ? "border-border-strong bg-surface text-foreground hover:bg-muted"
                            : "border-border-strong bg-border text-muted-foreground hover:bg-border-strong"
                        }`}
                      >
                        {requerido ? "Requerido — marcar 'no aplica'" : "No aplica — marcar requerido"}
                      </button>
                    </div>
                  );
                })}
              </div>
            )}
          </DashboardSection>
        ) : null}

        {estado.migracionesPendientes.length > 0 ? (
          <DashboardSection
            title="Esquema pendiente de completar"
            description="Estas piezas de esquema todavía no están aplicadas en la base de este cliente — hay que completarlas antes de activar. Nunca toca datos existentes, solo agrega lo que falta."
          >
            <ul className="space-y-1.5">
              {estado.migracionesPendientes.map((nombre) => (
                <li
                  key={nombre}
                  className="rounded-xl border border-border bg-muted px-3 py-2 font-mono text-xs text-foreground"
                >
                  {nombre}
                </li>
              ))}
            </ul>

            {reconciliarResult?.estado === "incompleto" ? (
              <div className="mt-4 rounded-xl border border-destructive/30 bg-destructive-soft p-4">
                <p className="text-sm font-bold text-destructive">
                  Se cortó en &quot;{reconciliarResult.falloEnMigracion}&quot;
                </p>
                <p className="mt-1 text-sm text-destructive">{reconciliarResult.errorMensaje}</p>
                <p className="mt-2 text-xs text-destructive">
                  Lo que ya se aplicó ({reconciliarResult.aplicadas.length}) queda hecho — al
                  reintentar, sigue desde acá, no desde el principio.
                </p>
              </div>
            ) : null}

            <div className="mt-4 space-y-3">
              {esProduccion ? (
                <div className="space-y-2 rounded-xl border border-warning/30 bg-warning-soft p-4">
                  <Label htmlFor="confirm-reconciliar" className="flex items-center gap-2 text-warning">
                    <KeyRound className="h-4 w-4" />
                    Escribí <span className="font-mono font-bold">{tenant.codigo}</span> para
                    confirmar que vas a completar el esquema en PRODUCCIÓN
                  </Label>
                  <Input
                    id="confirm-reconciliar"
                    value={confirmReconciliar}
                    onChange={(e) => setConfirmReconciliar(e.target.value)}
                    placeholder={tenant.codigo}
                  />
                </div>
              ) : null}

              <Button
                type="button"
                className="h-12"
                disabled={
                  reconciliarMutation.isPending ||
                  !estado.acceso.ok ||
                  (esProduccion && confirmReconciliar.trim() !== tenant.codigo)
                }
                onClick={() => void reconciliarMutation.mutate()}
              >
                {reconciliarMutation.isPending ? (
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                ) : (
                  <Hammer className="mr-2 h-4 w-4" />
                )}
                {reconciliarMutation.isPending && progreso
                  ? `Aplicando... ${progreso.aplicadas}/${progreso.total}`
                  : `Completar esquema (${estado.migracionesPendientes.length})`}
              </Button>

              {reconciliarMutation.isPending && progreso ? (
                <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
                  <div
                    className="h-full rounded-full bg-foreground transition-[width] duration-500 ease-out"
                    style={{ width: `${Math.min(100, (progreso.aplicadas / Math.max(progreso.total, 1)) * 100)}%` }}
                  />
                </div>
              ) : null}
            </div>
          </DashboardSection>
        ) : null}

        <DashboardSection
          title="Verificación forzada de esquema"
          description="Para cuando este cliente aparece sin nada pendiente pero algo real (login, cambiar de cliente, etc.) sigue fallando por una columna faltante — pasa cuando el registro de migraciones de este cliente quedó desincronizado del esquema real. Re-verifica cada pieza de esquema una por una, sin confiar en ese registro."
        >
          {reconciliarForzadoResult ? (
            <div
              className={`mb-4 rounded-xl border p-4 ${
                reconciliarForzadoResult.estado === "completo"
                  ? "border-success/30 bg-success-soft"
                  : "border-destructive/30 bg-destructive-soft"
              }`}
            >
              <p
                className={`text-sm font-bold ${
                  reconciliarForzadoResult.estado === "completo" ? "text-success" : "text-destructive"
                }`}
              >
                {reconciliarForzadoResult.aplicadas.length} pieza(s) verificada(s) sin error
              </p>
              {reconciliarForzadoResult.errorMensaje ? (
                <p className="mt-1 text-sm text-destructive">{reconciliarForzadoResult.errorMensaje}</p>
              ) : null}
            </div>
          ) : null}

          <div className="space-y-3">
            {esProduccion ? (
              <div className="space-y-2 rounded-xl border border-warning/30 bg-warning-soft p-4">
                <Label htmlFor="confirm-forzado" className="flex items-center gap-2 text-warning">
                  <KeyRound className="h-4 w-4" />
                  Escribí <span className="font-mono font-bold">{tenant.codigo}</span> para confirmar
                  que vas a forzar la verificación en PRODUCCIÓN
                </Label>
                <Input
                  id="confirm-forzado"
                  value={confirmForzado}
                  onChange={(e) => setConfirmForzado(e.target.value)}
                  placeholder={tenant.codigo}
                />
              </div>
            ) : null}

            <Button
              type="button"
              variant="outline"
              className="h-12"
              disabled={
                reconciliarForzadoMutation.isPending ||
                !estado.acceso.ok ||
                (esProduccion && confirmForzado.trim() !== tenant.codigo)
              }
              onClick={() => void reconciliarForzadoMutation.mutate()}
            >
              {reconciliarForzadoMutation.isPending ? (
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              ) : (
                <ShieldAlert className="mr-2 h-4 w-4" />
              )}
              Forzar verificación completa
            </Button>
          </div>
        </DashboardSection>

        {estado.desviaciones.length > 0 ? (
          <DashboardSection
            title="Desviaciones de columnas"
            description="Diferencias entre lo que el sistema espera y lo que ya existe en columnas reales del cliente."
            action={
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={() => setMostrarDesviaciones((v) => !v)}
              >
                {mostrarDesviaciones ? "Ocultar" : `Ver (${estado.desviaciones.length})`}
              </Button>
            }
          >
            {mostrarDesviaciones ? (
              <div className="space-y-3">
                {estado.desviaciones.map((deviation) => (
                  <DeviationRow
                    key={`${deviation.tabla}.${deviation.columna}`}
                    deviation={deviation}
                    onOmit={(d) => void omitMutation.mutate(d)}
                    omitting={omitMutation.isPending}
                  />
                ))}
              </div>
            ) : (
              <p className="text-sm text-muted-foreground">
                {estado.desviaciones.length} desviación(es) informativa(s), ocultas por defecto — no
                bloquean nada. Click en &quot;Ver&quot; para revisarlas.
              </p>
            )}
          </DashboardSection>
        ) : null}

        <DashboardSection
          title="Activar"
          description="Habilita el uso normal del cliente. Exige conexión ok, 0 esquema pendiente, 0 desviaciones graves sin omitir, y el checklist operativo resuelto para cada pieza marcada 'Requerido'."
        >
          {tenant.estado === "activo" ? (
            <div className="flex items-center gap-2 rounded-xl bg-success-soft px-4 py-3 text-sm font-bold text-success">
              <CheckCircle2 className="h-4 w-4" />
              Este cliente ya está activo.
            </div>
          ) : (
            <>
              {!puedeActivar ? (
                <p className="mb-3 text-sm text-muted-foreground">
                  Todavía no se puede activar — resolvé lo de arriba primero (conexión, esquema
                  pendiente, desviaciones graves, o alguna pieza del checklist operativo marcada
                  &quot;Requerido&quot; que sigue en 0).
                </p>
              ) : null}

              {esProduccion && puedeActivar ? (
                <div className="mb-3 space-y-2 rounded-xl border border-warning/30 bg-warning-soft p-4">
                  <Label htmlFor="confirm-activar" className="flex items-center gap-2 text-warning">
                    <KeyRound className="h-4 w-4" />
                    Escribí <span className="font-mono font-bold">{tenant.codigo}</span> para
                    confirmar que vas a activar PRODUCCIÓN
                  </Label>
                  <Input
                    id="confirm-activar"
                    value={confirmActivar}
                    onChange={(e) => setConfirmActivar(e.target.value)}
                    placeholder={tenant.codigo}
                  />
                </div>
              ) : null}

              <Button
                type="button"
                className="h-12"
                disabled={
                  !puedeActivar ||
                  activarMutation.isPending ||
                  (esProduccion && !confirmTextOk)
                }
                onClick={() => void activarMutation.mutate()}
              >
                {activarMutation.isPending ? (
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                ) : (
                  <Rocket className="mr-2 h-4 w-4" />
                )}
                Activar cliente
              </Button>
            </>
          )}
        </DashboardSection>
      </main>
    </div>
  );
}