import { Icon } from "@iconify/react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import React, { useEffect, useState } from "react";
import { toast } from "sonner";
import styled from "styled-components";
import {
  cambiarEstadoSuscripcionEmpresa,
  getMetricasHolding,
  suscripcionesQueries,
} from "../../../api/suscripciones.service";
import { UserAuth } from "../../../context/AuthContent";
import { CambiarPlanDialog } from "./CambiarPlanDialog";
import { GestionModulosDialog } from "./GestionModulosDialog";
import { LimiteOverrideDialog } from "./LimiteOverrideDialog";
import { PlanUsageCard } from "./PlanUsageCard";

// Calcula días restantes a partir de fecha_fin (string ISO)
function calcDiasRestantes(fechaFin) {
  if (!fechaFin) return null;
  const diff = Math.ceil(
    (new Date(fechaFin) - new Date()) / (1000 * 60 * 60 * 24),
  );
  return diff;
}

export function RedEmpresarial() {
  const { user } = UserAuth();
  const [viewMode, setViewMode] = useState("jerarquia"); // jerarquia | metricas
  const [searchTerm, setSearchTerm] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage] = useState(10);

  // Filtros avanzados
  const [filtroEstado, setFiltroEstado] = useState(null); // null | 'Activo' | 'EnGracia' | 'sinSusc' | 'proximaVencer'
  const [filtroTipo, setFiltroTipo] = useState(null); // null | 'holding' | 'reseller' | 'subsidiario'
  const [filtrosBannerDismissed, setFiltrosBannerDismissed] = useState(false);

  // Estado para dialog de gestión de módulos
  const [modulosDialogOpen, setModulosDialogOpen] = useState(false);
  const [selectedEmpresa, setSelectedEmpresa] = useState(null);

  // Estado para dialog de límites del plan
  const [limitesDialogOpen, setLimitesDialogOpen] = useState(false);
  const [limitesEmpresa, setLimitesEmpresa] = useState(null);

  // Estado para dialog de gestión de estado de suscripción
  const [estadoDialogOpen, setEstadoDialogOpen] = useState(false);
  const [estadoEmpresa, setEstadoEmpresa] = useState(null);

  // Estado para dialog de cambio de plan
  const [cambiarPlanOpen, setCambiarPlanOpen] = useState(false);
  const [cambiarPlanEmpresa, setCambiarPlanEmpresaState] = useState(null);

  // Estado para dialog de override de límites
  const [overrideOpen, setOverrideOpen] = useState(false);
  const [overrideEmpresa, setOverrideEmpresa] = useState(null);

  const queryClient = useQueryClient();

  const handleOpenModulos = (empresa) => {
    setSelectedEmpresa(empresa);
    setModulosDialogOpen(true);
  };

  const handleOpenLimites = (empresa) => {
    setLimitesEmpresa(empresa);
    setLimitesDialogOpen(true);
  };

  const handleOpenEstado = (empresa) => {
    setEstadoEmpresa(empresa);
    setEstadoDialogOpen(true);
  };

  const handleOpenCambiarPlan = (empresa) => {
    setCambiarPlanEmpresaState(empresa);
    setCambiarPlanOpen(true);
  };

  const handleOpenOverride = (empresa) => {
    setOverrideEmpresa(empresa);
    setOverrideOpen(true);
  };

  const cambiarEstadoMutation = useMutation({
    mutationFn: ({ empresaId, estado, observacion }) =>
      cambiarEstadoSuscripcionEmpresa(empresaId, estado, observacion),
    onSuccess: (_, variables) => {
      toast.success(`Estado actualizado a ${variables.estado}`);
      queryClient.invalidateQueries({ queryKey: ["jerarquia"] });
      setEstadoDialogOpen(false);
    },
    onError: (err) => {
      toast.error(err?.response?.data?.message || "Error al cambiar estado");
    },
  });

  // Query para obtener la jerarquía completa
  const {
    data: jerarquiaResponse,
    isLoading,
    error,
  } = useQuery(suscripcionesQueries.jerarquia(user?.empresa?.id));

  // Extraer los datos de la respuesta del backend
  const jerarquiaData = jerarquiaResponse?.data;

  // Protección contra referencias circulares: filtrar hijos que sean la misma empresa
  const limpiarReferenciasCirculares = (empresa) => {
    if (!empresa || !empresa.children) return empresa;

    return {
      ...empresa,
      children: empresa.children
        .filter((hijo) => hijo.id !== empresa.id) // Filtrar referencias circulares
        .map((hijo) => limpiarReferenciasCirculares(hijo)), // Aplicar recursivamente
    };
  };

  const jerarquiaLimpia = jerarquiaData
    ? limpiarReferenciasCirculares(jerarquiaData)
    : null;
  const jerarquia = jerarquiaLimpia ? [jerarquiaLimpia] : [];

  // Función para aplanar la jerarquía para búsqueda y paginación
  const aplanarJerarquia = (empresa, nivel = 0) => {
    if (!empresa) return [];

    const resultado = [{ ...empresa, nivel }];

    if (empresa.children && empresa.children.length > 0) {
      empresa.children.forEach((hijo) => {
        resultado.push(...aplanarJerarquia(hijo, nivel + 1));
      });
    }

    return resultado;
  };

  // Obtener lista plana de todas las empresas (memoizado para evitar re-renders en useMemo dependientes)
  const empresasPlanas = React.useMemo(
    () => (jerarquia.length > 0 ? aplanarJerarquia(jerarquia[0]) : []),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [jerarquiaLimpia],
  );

  // ─── Métricas rápidas calculadas localmente ───────────────────────────────
  const metricas_rapidas = React.useMemo(() => {
    const activas = empresasPlanas.filter(
      (e) => e.suscripcion?.estado === "Activo",
    ).length;
    const enGracia = empresasPlanas.filter(
      (e) => e.suscripcion?.estado === "EnGracia",
    ).length;
    const sinSusc = empresasPlanas.filter((e) => !e.suscripcion).length;
    const proximasVencer = empresasPlanas.filter((e) => {
      const dias =
        e.suscripcion?.dias_restantes ??
        calcDiasRestantes(e.suscripcion?.fecha_fin);
      return (
        dias != null &&
        dias >= 0 &&
        dias <= 15 &&
        e.suscripcion?.estado === "Activo"
      );
    }).length;
    const bloqueadas = empresasPlanas.filter(
      (e) => e.suscripcion?.bloqueada,
    ).length;
    return {
      activas,
      enGracia,
      sinSusc,
      proximasVencer,
      bloqueadas,
      total: empresasPlanas.length,
    };
  }, [empresasPlanas]);

  // ─── Filtros combinados ────────────────────────────────────────────────────
  const empresasFiltradas = React.useMemo(() => {
    return empresasPlanas.filter((empresa) => {
      // Filtro de búsqueda de texto
      const matchSearch =
        !searchTerm ||
        empresa.razon_social.toLowerCase().includes(searchTerm.toLowerCase()) ||
        empresa.ruc.includes(searchTerm) ||
        empresa.type.toLowerCase().includes(searchTerm.toLowerCase());

      // Filtro de tipo de empresa
      const matchTipo = !filtroTipo || empresa.type === filtroTipo;

      // Filtro de estado de suscripción
      let matchEstado = true;
      if (filtroEstado === "Activo")
        matchEstado =
          empresa.suscripcion?.estado === "Activo" &&
          !empresa.suscripcion?.bloqueada;
      else if (filtroEstado === "EnGracia")
        matchEstado = empresa.suscripcion?.estado === "EnGracia";
      else if (filtroEstado === "sinSusc") matchEstado = !empresa.suscripcion;
      else if (filtroEstado === "proximaVencer") {
        const dias =
          empresa.suscripcion?.dias_restantes ??
          calcDiasRestantes(empresa.suscripcion?.fecha_fin);
        matchEstado =
          dias != null &&
          dias >= 0 &&
          dias <= 15 &&
          empresa.suscripcion?.estado === "Activo";
      } else if (filtroEstado === "bloqueada")
        matchEstado = !!empresa.suscripcion?.bloqueada;
      else if (filtroEstado === "conOverride")
        matchEstado = !!empresa.suscripcion?.limite_override;

      return matchSearch && matchTipo && matchEstado;
    });
  }, [empresasPlanas, searchTerm, filtroEstado, filtroTipo]);

  // Calcular paginación
  const totalItems = empresasFiltradas.length;
  const totalPages = Math.ceil(totalItems / itemsPerPage);
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const empresasPaginadas = empresasFiltradas.slice(startIndex, endIndex);

  // Reset página cuando cambia el filtro
  useEffect(() => {
    setCurrentPage(1);
  }, [searchTerm]);

  // Query para métricas del holding
  const { data: metricas } = useQuery({
    queryKey: ["metricas-holding", user?.empresa?.id],
    queryFn: () => getMetricasHolding(user?.empresa?.id),
    enabled: !!user?.empresa?.id && user?.empresa?.type === "holding",
  });

  if (isLoading) {
    return (
      <Container>
        <LoadingState>
          <Icon icon="lucide:loader-2" className="animate-spin" />
          <span>Cargando red empresarial...</span>
        </LoadingState>
      </Container>
    );
  }

  if (error) {
    return (
      <Container>
        <ErrorState>
          <Icon icon="lucide:alert-circle" />
          <span>Error al cargar la red empresarial</span>
        </ErrorState>
      </Container>
    );
  }

  return (
    <Container>
      {/* Header con información clave */}
      <HeaderSection>
        <TitleSection>
          <MainTitle>Red Empresarial</MainTitle>
          <Subtitle>
            Visualiza tu ecosistema comercial y flujo de comisiones
          </Subtitle>
        </TitleSection>

        <ViewToggle>
          <ToggleButton
            $active={viewMode === "jerarquia"}
            onClick={() => setViewMode("jerarquia")}
          >
            <Icon icon="lucide:network" />
            <span>Jerarquía</span>
          </ToggleButton>
          <ToggleButton
            $active={viewMode === "metricas"}
            onClick={() => setViewMode("metricas")}
          >
            <Icon icon="lucide:bar-chart-3" />
            <span>Métricas</span>
          </ToggleButton>
        </ViewToggle>
      </HeaderSection>

      {/* Cards de métricas rápidas */}
      <MetricasRapidasGrid>
        <MetricaRapidaCard
          $color="#22c55e"
          $active={filtroEstado === "Activo"}
          onClick={() =>
            setFiltroEstado(filtroEstado === "Activo" ? null : "Activo")
          }
          title="Clic para filtrar empresas activas"
        >
          <MetricaRapidaIcon $color="#22c55e">
            <Icon icon="lucide:check-circle" />
          </MetricaRapidaIcon>
          <MetricaRapidaInfo>
            <MetricaRapidaValor>{metricas_rapidas.activas}</MetricaRapidaValor>
            <MetricaRapidaLabel>Activas</MetricaRapidaLabel>
          </MetricaRapidaInfo>
        </MetricaRapidaCard>

        <MetricaRapidaCard
          $color="#f59e0b"
          $active={filtroEstado === "EnGracia"}
          onClick={() =>
            setFiltroEstado(filtroEstado === "EnGracia" ? null : "EnGracia")
          }
          title="Clic para filtrar empresas en período de gracia"
        >
          <MetricaRapidaIcon $color="#f59e0b">
            <Icon icon="lucide:clock" />
          </MetricaRapidaIcon>
          <MetricaRapidaInfo>
            <MetricaRapidaValor>{metricas_rapidas.enGracia}</MetricaRapidaValor>
            <MetricaRapidaLabel>En Gracia</MetricaRapidaLabel>
          </MetricaRapidaInfo>
        </MetricaRapidaCard>

        <MetricaRapidaCard
          $color="#ef4444"
          $active={filtroEstado === "sinSusc"}
          onClick={() =>
            setFiltroEstado(filtroEstado === "sinSusc" ? null : "sinSusc")
          }
          title="Clic para filtrar empresas sin suscripción activa"
        >
          <MetricaRapidaIcon $color="#ef4444">
            <Icon icon="lucide:x-circle" />
          </MetricaRapidaIcon>
          <MetricaRapidaInfo>
            <MetricaRapidaValor>{metricas_rapidas.sinSusc}</MetricaRapidaValor>
            <MetricaRapidaLabel>Sin Suscripción</MetricaRapidaLabel>
          </MetricaRapidaInfo>
        </MetricaRapidaCard>

        <MetricaRapidaCard
          $color="#f88533"
          $active={filtroEstado === "proximaVencer"}
          onClick={() =>
            setFiltroEstado(
              filtroEstado === "proximaVencer" ? null : "proximaVencer",
            )
          }
          title="Clic para filtrar empresas con suscripción por vencer (≤15 días)"
        >
          <MetricaRapidaIcon $color="#f88533">
            <Icon icon="lucide:calendar-clock" />
          </MetricaRapidaIcon>
          <MetricaRapidaInfo>
            <MetricaRapidaValor>
              {metricas_rapidas.proximasVencer}
            </MetricaRapidaValor>
            <MetricaRapidaLabel>Próx. a vencer</MetricaRapidaLabel>
          </MetricaRapidaInfo>
        </MetricaRapidaCard>

        <MetricaRapidaCard
          $color="#6b7280"
          $active={false}
          style={{ cursor: "default" }}
          title="Total de empresas en tu red"
        >
          <MetricaRapidaIcon $color="#6b7280">
            <Icon icon="lucide:building-2" />
          </MetricaRapidaIcon>
          <MetricaRapidaInfo>
            <MetricaRapidaValor>{metricas_rapidas.total}</MetricaRapidaValor>
            <MetricaRapidaLabel>Total Red</MetricaRapidaLabel>
          </MetricaRapidaInfo>
        </MetricaRapidaCard>
      </MetricasRapidasGrid>

      {/* Diferenciador clave vs Configuración (colapsable) */}
      {!filtrosBannerDismissed && (
        <InfoBanner>
          <Icon icon="lucide:info" />
          <BannerContent>
            <BannerTitle>Red Comercial vs Gestión Administrativa</BannerTitle>
            <BannerText>
              Esta vista muestra las{" "}
              <strong>relaciones comerciales y comisiones</strong> de tu red.
              Para gestión administrativa de empresas, ve a{" "}
              <strong>Configuración &gt; Empresas Asociadas</strong>.
            </BannerText>
          </BannerContent>
          <button
            onClick={() => setFiltrosBannerDismissed(true)}
            style={{
              background: "none",
              border: "none",
              cursor: "pointer",
              color: "inherit",
              opacity: 0.5,
              flexShrink: 0,
            }}
            title="Cerrar"
          >
            <Icon icon="lucide:x" style={{ fontSize: 14 }} />
          </button>
        </InfoBanner>
      )}

      {viewMode === "jerarquia" ? (
        <>
          {/* Panel de búsqueda y filtros avanzados */}
          <SearchSection>
            <SearchRow>
              <SearchInput>
                <Icon icon="lucide:search" />
                <input
                  type="text"
                  placeholder="Buscar por empresa, RUC o tipo..."
                  value={searchTerm}
                  onChange={(e) => {
                    setSearchTerm(e.target.value);
                    setCurrentPage(1);
                  }}
                />
                {searchTerm && (
                  <ClearBtn
                    onClick={() => setSearchTerm("")}
                    title="Limpiar búsqueda"
                  >
                    <Icon icon="lucide:x" />
                  </ClearBtn>
                )}
              </SearchInput>

              {/* Selector de tipo de empresa */}
              <TipoSelect
                value={filtroTipo ?? ""}
                onChange={(e) => {
                  setFiltroTipo(e.target.value || null);
                  setCurrentPage(1);
                }}
                title="Filtrar por tipo de empresa"
              >
                <option value="">Todos los tipos</option>
                <option value="holding">Holding</option>
                <option value="reseller">Reseller</option>
                <option value="subsidiario">Subsidiario</option>
              </TipoSelect>
            </SearchRow>

            {/* Quick-filter chips de estado */}
            <ChipsRow>
              <ChipLabel>
                <Icon icon="lucide:filter" /> Filtrar:
              </ChipLabel>
              {[
                {
                  id: "Activo",
                  label: "Activas",
                  icon: "lucide:check-circle",
                  color: "#22c55e",
                },
                {
                  id: "EnGracia",
                  label: "En gracia",
                  icon: "lucide:clock",
                  color: "#f59e0b",
                },
                {
                  id: "sinSusc",
                  label: "Sin suscripción",
                  icon: "lucide:x-circle",
                  color: "#ef4444",
                },
                {
                  id: "proximaVencer",
                  label: "Próx. a vencer",
                  icon: "lucide:calendar-clock",
                  color: "#f88533",
                },
                {
                  id: "bloqueada",
                  label: "Bloqueadas",
                  icon: "lucide:shield-off",
                  color: "#7c3aed",
                },
                {
                  id: "conOverride",
                  label: "Límites ampliados",
                  icon: "lucide:sliders-horizontal",
                  color: "#f59e0b",
                },
              ].map((chip) => (
                <FilterChip
                  key={chip.id}
                  $active={filtroEstado === chip.id}
                  $color={chip.color}
                  onClick={() => {
                    setFiltroEstado(filtroEstado === chip.id ? null : chip.id);
                    setCurrentPage(1);
                  }}
                  title={`Mostrar empresas: ${chip.label}`}
                >
                  <Icon icon={chip.icon} />
                  {chip.label}
                </FilterChip>
              ))}
              {(filtroEstado || filtroTipo || searchTerm) && (
                <ClearAllBtn
                  onClick={() => {
                    setFiltroEstado(null);
                    setFiltroTipo(null);
                    setSearchTerm("");
                    setCurrentPage(1);
                  }}
                  title="Limpiar todos los filtros"
                >
                  <Icon icon="lucide:x" /> Limpiar filtros
                </ClearAllBtn>
              )}
              <SearchStats style={{ marginLeft: "auto" }}>
                {empresasFiltradas.length} de {empresasPlanas.length} empresa
                {empresasPlanas.length !== 1 ? "s" : ""}
              </SearchStats>
            </ChipsRow>
          </SearchSection>

          <JerarquiaViewPaginada
            empresas={empresasPaginadas}
            totalItems={totalItems}
            currentPage={currentPage}
            totalPages={totalPages}
            itemsPerPage={itemsPerPage}
            onPageChange={setCurrentPage}
            onOpenModulos={handleOpenModulos}
            onOpenLimites={handleOpenLimites}
            onOpenEstado={handleOpenEstado}
            onOpenCambiarPlan={handleOpenCambiarPlan}
            onOpenOverride={handleOpenOverride}
          />
        </>
      ) : (
        <MetricasView
          metricas={metricas}
          empresasCount={empresasPlanas.length}
        />
      )}

      {/* Dialog de gestión de módulos */}
      <GestionModulosDialog
        open={modulosDialogOpen}
        onClose={() => setModulosDialogOpen(false)}
        empresaId={user?.empresa?.id}
        subsidiario={selectedEmpresa}
      />

      {/* Dialog de límites del plan */}
      {limitesDialogOpen && limitesEmpresa && (
        <LimitesOverlay onClick={() => setLimitesDialogOpen(false)}>
          <LimitesDialog onClick={(e) => e.stopPropagation()}>
            <LimitesDialogHeader>
              <CompanyIcon
                $type={limitesEmpresa.type}
                style={{ width: "2rem", height: "2rem", borderRadius: "6px" }}
              >
                <Icon
                  icon={
                    limitesEmpresa.type === "holding"
                      ? "lucide:building"
                      : limitesEmpresa.type === "reseller"
                        ? "lucide:handshake"
                        : "lucide:building-2"
                  }
                />
              </CompanyIcon>
              <div style={{ flex: 1 }}>
                <LimitesDialogTitle>
                  {limitesEmpresa.razon_social}
                </LimitesDialogTitle>
                <LimitesDialogSub>
                  Límites y uso del plan activo
                </LimitesDialogSub>
              </div>
              <CloseBtn onClick={() => setLimitesDialogOpen(false)}>
                <Icon icon="lucide:x" />
              </CloseBtn>
            </LimitesDialogHeader>
            <LimitesDialogBody>
              <PlanUsageCard empresaId={limitesEmpresa.id} />
            </LimitesDialogBody>
          </LimitesDialog>
        </LimitesOverlay>
      )}

      {/* Dialog de gestión de estado de suscripción */}
      {estadoDialogOpen && estadoEmpresa && (
        <EstadoDialogOverlay onClick={() => setEstadoDialogOpen(false)}>
          <EstadoDialogBox onClick={(e) => e.stopPropagation()}>
            <EstadoDialogHeader>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: "0.75rem",
                }}
              >
                <Icon
                  icon="lucide:shield-alert"
                  style={{ fontSize: "1.25rem", color: "#f59e0b" }}
                />
                <div>
                  <EstadoDialogTitle>
                    {estadoEmpresa.razon_social}
                  </EstadoDialogTitle>
                  <EstadoDialogSub>RUC: {estadoEmpresa.ruc}</EstadoDialogSub>
                </div>
              </div>
              <CloseBtn onClick={() => setEstadoDialogOpen(false)}>
                <Icon icon="lucide:x" />
              </CloseBtn>
            </EstadoDialogHeader>

            <EstadoDialogBody>
              {/* Estado actual */}
              <EstadoActualCard
                $bloqueada={estadoEmpresa.suscripcion?.bloqueada}
              >
                <div
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: "0.5rem",
                    marginBottom: "0.5rem",
                  }}
                >
                  <Icon
                    icon={
                      !estadoEmpresa.suscripcion
                        ? "lucide:alert-circle"
                        : estadoEmpresa.suscripcion.estado === "Activo"
                          ? "lucide:check-circle"
                          : estadoEmpresa.suscripcion.estado === "EnGracia"
                            ? "lucide:clock"
                            : "lucide:x-circle"
                    }
                    style={{ fontSize: "1.1rem" }}
                  />
                  <strong>Estado actual:</strong>
                  <EstadoBadge $estado={estadoEmpresa.suscripcion?.estado}>
                    {estadoEmpresa.suscripcion?.estado ?? "Sin suscripción"}
                  </EstadoBadge>
                </div>
                {estadoEmpresa.suscripcion?.plan_nombre && (
                  <p style={{ margin: 0, fontSize: "0.85rem", opacity: 0.8 }}>
                    Plan:{" "}
                    <strong>{estadoEmpresa.suscripcion.plan_nombre}</strong>
                    {estadoEmpresa.suscripcion?.costo_mensual != null && (
                      <span style={{ marginLeft: "0.4rem", opacity: 0.75 }}>
                        · {Number(estadoEmpresa.suscripcion.costo_mensual).toLocaleString("es-PY")} Gs/mes
                      </span>
                    )}
                  </p>
                )}
                {estadoEmpresa.suscripcion?.fecha_fin && (
                  <p
                    style={{
                      margin: "0.25rem 0 0",
                      fontSize: "0.85rem",
                      opacity: 0.8,
                    }}
                  >
                    Vence:{" "}
                    <strong>{estadoEmpresa.suscripcion.fecha_fin}</strong>
                    {estadoEmpresa.suscripcion.dias_restantes != null && (
                      <span style={{ marginLeft: "0.5rem" }}>
                        (
                        {estadoEmpresa.suscripcion.dias_restantes > 0
                          ? `${estadoEmpresa.suscripcion.dias_restantes} días restantes`
                          : "vencida"}
                        )
                      </span>
                    )}
                  </p>
                )}
              </EstadoActualCard>

              {/* Acciones */}
              {estadoEmpresa.suscripcion && (
                <EstadoAcciones>
                  <p
                    style={{
                      margin: "0 0 0.75rem",
                      fontWeight: 600,
                      fontSize: "0.9rem",
                    }}
                  >
                    Cambiar estado:
                  </p>
                  <EstadoBotonGroup>
                    {["Activo", "Pausado", "Cancelado", "Expirado"].map(
                      (est) => (
                        <EstadoBoton
                          key={est}
                          $estado={est}
                          $activo={estadoEmpresa.suscripcion?.estado === est}
                          disabled={
                            cambiarEstadoMutation.isPending ||
                            estadoEmpresa.suscripcion?.estado === est
                          }
                          onClick={() =>
                            cambiarEstadoMutation.mutate({
                              empresaId: estadoEmpresa.id,
                              estado: est,
                            })
                          }
                        >
                          <Icon
                            icon={
                              est === "Activo"
                                ? "lucide:check-circle"
                                : est === "Pausado"
                                  ? "lucide:pause-circle"
                                  : est === "Cancelado"
                                    ? "lucide:x-circle"
                                    : "lucide:clock"
                            }
                          />
                          {est}
                        </EstadoBoton>
                      ),
                    )}
                  </EstadoBotonGroup>
                  {cambiarEstadoMutation.isPending && (
                    <p
                      style={{
                        fontSize: "0.8rem",
                        opacity: 0.7,
                        marginTop: "0.5rem",
                      }}
                    >
                      Actualizando estado...
                    </p>
                  )}
                </EstadoAcciones>
              )}
            </EstadoDialogBody>
          </EstadoDialogBox>
        </EstadoDialogOverlay>
      )}
      {/* Dialog de cambio de plan */}
      <CambiarPlanDialog
        open={cambiarPlanOpen}
        onClose={() => setCambiarPlanOpen(false)}
        empresa={cambiarPlanEmpresa}
      />

      {/* Dialog de override temporal de límites */}
      <LimiteOverrideDialog
        open={overrideOpen}
        onClose={() => setOverrideOpen(false)}
        empresa={overrideEmpresa}
      />
    </Container>
  );
}

// Componente para vista de jerarquía
function JerarquiaView({ jerarquia }) {
  if (!jerarquia || jerarquia.length === 0) {
    return (
      <EmptyState>
        <Icon icon="lucide:building-2" size={48} />
        <h3>Sin Red Empresarial</h3>
        <p>Aún no tienes empresas en tu red comercial</p>
      </EmptyState>
    );
  }

  return (
    <JerarquiaContainer>
      <JerarquiaHeader>
        <Icon icon="lucide:network" />
        <span>Estructura Comercial</span>
        <Badge>{jerarquia.length} empresas</Badge>
      </JerarquiaHeader>

      <TreeContainer>
        {jerarquia.map((empresa) => (
          <EmpresaNode key={empresa.id} empresa={empresa} level={0} />
        ))}
      </TreeContainer>
    </JerarquiaContainer>
  );
}

// Componente para nodo de empresa en el árbol
function EmpresaNode({ empresa, level }) {
  const [expanded, setExpanded] = useState(level < 2); // Auto-expandir primeros 2 niveles

  const hasChildren = empresa.children && empresa.children.length > 0;
  const indent = level * 2;

  return (
    <NodeContainer $level={level}>
      <NodeHeader
        $indent={indent}
        onClick={() => hasChildren && setExpanded(!expanded)}
      >
        <NodeExpander $hasChildren={hasChildren} $expanded={expanded}>
          {hasChildren && (
            <Icon
              icon={expanded ? "lucide:chevron-down" : "lucide:chevron-right"}
            />
          )}
        </NodeExpander>

        <CompanyIcon $type={empresa.type}>
          <Icon icon={getCompanyIcon(empresa.type)} />
        </CompanyIcon>

        <CompanyInfo>
          <CompanyName>{empresa.razon_social}</CompanyName>
          <CompanyDetails>
            <TypeBadge $type={empresa.type}>
              {getCompanyTypeLabel(empresa.type)}
            </TypeBadge>
            <span>•</span>
            <span>{empresa.ruc}</span>
            {empresa.comision_porcentaje && (
              <>
                <span>•</span>
                <CommissionBadge>
                  {empresa.comision_porcentaje}% comisión
                </CommissionBadge>
              </>
            )}
          </CompanyDetails>
        </CompanyInfo>

        <NodeActions>
          <ActionButton title="Ver métricas">
            <Icon icon="lucide:bar-chart" />
          </ActionButton>
          <ActionButton title="Ver comisiones">
            <Icon icon="lucide:dollar-sign" />
          </ActionButton>
        </NodeActions>
      </NodeHeader>

      {hasChildren && expanded && (
        <ChildrenContainer>
          {empresa.children.map((child) => (
            <EmpresaNode key={child.id} empresa={child} level={level + 1} />
          ))}
        </ChildrenContainer>
      )}
    </NodeContainer>
  );
}

// Componente para vista de métricas
function MetricasView({ metricas, empresasCount = 0 }) {
  // Mapear datos del backend a la estructura esperada por el frontend
  const metricasCalculadas = metricas?.data?.metricas
    ? {
        totalEmpresas: metricas.data.metricas.empresas_totales || empresasCount,
        totalResellers: metricas.data.metricas.resellers || 0,
        ingresosMensuales: metricas.data.metricas.ingresos_mensuales || 0,
        comisionesPagadas: metricas.data.metricas.comisiones_pagadas || 0,
      }
    : {
        totalEmpresas: empresasCount,
        totalResellers: 0,
        ingresosMensuales: 0,
        comisionesPagadas: 0,
      };

  // Si no hay métricas ni empresas locales, mostrar estado vacío
  if (!metricas && empresasCount === 0) {
    return (
      <EmptyState>
        <Icon icon="lucide:bar-chart-3" size={48} />
        <h3>Métricas no disponibles</h3>
        <p>Las métricas se generarán cuando tengas actividad comercial</p>
      </EmptyState>
    );
  }

  return (
    <MetricasContainer>
      <MetricasGrid>
        <MetricCard>
          <MetricIcon>
            <Icon icon="lucide:building-2" />
          </MetricIcon>
          <MetricContent>
            <MetricValue>{metricasCalculadas.totalEmpresas || 0}</MetricValue>
            <MetricLabel>Empresas en Red</MetricLabel>
          </MetricContent>
        </MetricCard>

        <MetricCard>
          <MetricIcon>
            <Icon icon="lucide:users" />
          </MetricIcon>
          <MetricContent>
            <MetricValue>{metricasCalculadas.totalResellers || 0}</MetricValue>
            <MetricLabel>Resellers Activos</MetricLabel>
          </MetricContent>
        </MetricCard>

        <MetricCard>
          <MetricIcon>
            <Icon icon="lucide:dollar-sign" />
          </MetricIcon>
          <MetricContent>
            <MetricValue>
              {metricasCalculadas.ingresosMensuales
                ? `${metricasCalculadas.ingresosMensuales.toLocaleString()} Gs.`
                : "0 Gs."}
            </MetricValue>
            <MetricLabel>Ingresos Mensuales</MetricLabel>
          </MetricContent>
        </MetricCard>

        <MetricCard>
          <MetricIcon>
            <Icon icon="lucide:trending-up" />
          </MetricIcon>
          <MetricContent>
            <MetricValue>
              {metricasCalculadas.comisionesPagadas
                ? `${metricasCalculadas.comisionesPagadas.toLocaleString()} Gs.`
                : "0 Gs."}
            </MetricValue>
            <MetricLabel>Comisiones Pagadas</MetricLabel>
          </MetricContent>
        </MetricCard>
      </MetricasGrid>
    </MetricasContainer>
  );
}

// Funciones auxiliares
const getCompanyIcon = (type) => {
  switch (type) {
    case "holding":
      return "lucide:building";
    case "reseller":
      return "lucide:handshake";
    default:
      return "lucide:building-2";
  }
};

const getCompanyTypeLabel = (type) => {
  switch (type) {
    case "holding":
      return "Holding";
    case "reseller":
      return "Reseller";
    default:
      return "Subsidiario";
  }
};

// Styled Components
const Container = styled.div`
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  max-width: 100%;
`;

const LoadingState = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem 2rem;
  color: ${({ theme }) => theme.text}80;

  svg {
    width: 2rem;
    height: 2rem;
    animation: spin 1s linear infinite;
  }
`;

const ErrorState = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem 2rem;
  color: #ef4444;

  svg {
    width: 2rem;
    height: 2rem;
  }
`;

const HeaderSection = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 1rem;
  }
`;

const TitleSection = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
`;

const MainTitle = styled.h1`
  font-size: 2rem;
  font-weight: 700;
  color: ${({ theme }) => theme.text};
  margin: 0;

  @media (max-width: 768px) {
    font-size: 1.5rem;
  }
`;

const Subtitle = styled.p`
  font-size: 1rem;
  color: ${({ theme }) => theme.text}80;
  margin: 0;
`;

const ViewToggle = styled.div`
  display: flex;
  background: ${({ theme }) => theme.bg4};
  border-radius: 8px;
  padding: 4px;
`;

const ToggleButton = styled.button`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 6px;
  background: ${({ $active, theme }) => ($active ? theme.bg3 : "transparent")};
  color: ${({ $active, theme }) => ($active ? theme.text : theme.text + "80")};
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;

  svg {
    width: 1rem;
    height: 1rem;
  }

  &:hover {
    background: ${({ theme }) => theme.bg3};
    color: ${({ theme }) => theme.text};
  }
`;

const InfoBanner = styled.div`
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #3b82f615, #8b5cf615);
  border: 1px solid #3b82f630;
  border-radius: 12px;

  svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #3b82f6;
    flex-shrink: 0;
    margin-top: 0.125rem;
  }
`;

const BannerContent = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
`;

const BannerTitle = styled.h3`
  font-size: 0.875rem;
  font-weight: 600;
  color: #3b82f6;
  margin: 0;
`;

const BannerText = styled.p`
  font-size: 0.875rem;
  color: ${({ theme }) => theme.text}90;
  margin: 0;
  line-height: 1.4;

  strong {
    color: ${({ theme }) => theme.text};
  }
`;

const JerarquiaContainer = styled.div`
  background: ${({ theme }) => theme.bg3};
  border: 1px solid ${({ theme }) => theme.bg4};
  border-radius: 12px;
  overflow: hidden;
`;

const JerarquiaHeader = styled.div`
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  background: ${({ theme }) => theme.bg4};
  border-bottom: 1px solid ${({ theme }) => theme.bg5};
  font-weight: 600;
  color: ${({ theme }) => theme.text};

  svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #f88533;
  }
`;

const Badge = styled.span`
  padding: 0.25rem 0.75rem;
  background: #f8853320;
  color: #f88533;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: auto;
`;

const TreeContainer = styled.div`
  padding: 1rem;
`;

const NodeContainer = styled.div`
  margin-bottom: 0.5rem;
`;

const NodeHeader = styled.div`
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  margin-left: ${({ $indent }) => $indent}rem;
  background: ${({ theme }) => theme.bg2};
  border: 1px solid ${({ theme }) => theme.bg4};
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;

  &:hover {
    border-color: #f88533;
    background: ${({ theme }) => theme.bg3};
  }

  @media (max-width: 640px) {
    margin-left: ${({ $indent }) => Math.min($indent, 1)}rem;
    padding: 0.75rem;
    gap: 0.5rem;
  }
`;

const NodeExpander = styled.div`
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: ${({ theme }) => theme.text}60;
  cursor: ${({ $hasChildren }) => ($hasChildren ? "pointer" : "default")};

  svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
  }
`;

const CompanyIcon = styled.div`
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: ${({ $type }) => {
    switch ($type) {
      case "holding":
        return "#3b82f620";
      case "reseller":
        return "#10b98120";
      default:
        return "#f8853320";
    }
  }};

  svg {
    width: 1.25rem;
    height: 1.25rem;
    color: ${({ $type }) => {
      switch ($type) {
        case "holding":
          return "#3b82f6";
        case "reseller":
          return "#10b981";
        default:
          return "#f88533";
      }
    }};
  }
`;

const CompanyInfo = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
`;

const CompanyName = styled.h3`
  font-size: 1rem;
  font-weight: 600;
  color: ${({ theme }) => theme.text};
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`;

const CompanyDetails = styled.div`
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: ${({ theme }) => theme.text}70;
  flex-wrap: wrap;
  row-gap: 0.2rem;
`;

const TypeBadge = styled.span`
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
  background: ${({ $type }) => {
    switch ($type) {
      case "holding":
        return "#3b82f620";
      case "reseller":
        return "#10b98120";
      default:
        return "#6b728020";
    }
  }};
  color: ${({ $type }) => {
    switch ($type) {
      case "holding":
        return "#3b82f6";
      case "reseller":
        return "#10b981";
      default:
        return "#6b7280";
    }
  }};
`;

const CommissionBadge = styled.span`
  padding: 0.125rem 0.5rem;
  background: #f8853320;
  color: #f88533;
  border-radius: 4px;
  font-weight: 500;
`;

const NodeActions = styled.div`
  display: flex;
  gap: 0.5rem;
`;

const ActionButton = styled.button`
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 6px;
  background: ${({ theme }) => theme.bg4};
  color: ${({ theme }) => theme.text}70;
  cursor: pointer;
  transition: all 0.2s ease;

  svg {
    width: 1rem;
    height: 1rem;
  }

  &:hover {
    background: #f8853320;
    color: #f88533;
  }
`;

const ChildrenContainer = styled.div`
  margin-top: 0.5rem;
`;

const MetricasContainer = styled.div`
  display: flex;
  flex-direction: column;
  gap: 2rem;
`;

const MetricasGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  @media (max-width: 640px) {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
`;

const MetricCard = styled.div`
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: ${({ theme }) => theme.bg3};
  border: 1px solid ${({ theme }) => theme.bg4};
  border-radius: 12px;
  transition: all 0.2s ease;
  overflow: hidden;

  &:hover {
    border-color: #f88533;
    transform: translateY(-2px);
  }
`;

const MetricIcon = styled.div`
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  background: #f8853320;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #f88533;
  }
`;

const MetricContent = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
`;

const MetricValue = styled.span`
  font-size: 1.25rem;
  font-weight: 700;
  color: ${({ theme }) => theme.text};
  word-break: break-word;
`;

const MetricLabel = styled.span`
  font-size: 0.875rem;
  color: ${({ theme }) => theme.text}70;
`;

// Estilos para búsqueda y paginación
const SearchSection = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  background: ${({ theme }) => theme.bg3};
  border: 1px solid ${({ theme }) => theme.bg4};
  border-radius: 12px;
`;

const SearchInput = styled.div`
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  padding: 0.75rem 1rem;
  background: ${({ theme }) => theme.bg2};
  border: 1px solid ${({ theme }) => theme.bg4};
  border-radius: 8px;
  transition: all 0.2s ease;

  &:focus-within {
    border-color: #f88533;
    box-shadow: 0 0 0 3px #f8853320;
  }

  svg {
    width: 1.25rem;
    height: 1.25rem;
    color: ${({ theme }) => theme.text}50;
  }

  input {
    flex: 1;
    border: none;
    background: transparent;
    color: ${({ theme }) => theme.text};
    font-size: 0.875rem;
    outline: none;

    &::placeholder {
      color: ${({ theme }) => theme.text}50;
    }
  }
`;

const SearchStats = styled.div`
  font-size: 0.875rem;
  color: ${({ theme }) => theme.text}70;
  white-space: nowrap;
`;

const PaginationContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem;
  background: ${({ theme }) => theme.bg3};
  border: 1px solid ${({ theme }) => theme.bg4};
  border-radius: 12px;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 0.75rem;
  }
`;

const PaginationInfo = styled.div`
  font-size: 0.875rem;
  color: ${({ theme }) => theme.text}70;
`;

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

const PaginationButton = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid ${({ theme }) => theme.bg4};
  border-radius: 6px;
  background: ${({ theme, $active }) => ($active ? "#f88533" : theme.bg2)};
  color: ${({ theme, $active }) => ($active ? "white" : theme.text)};
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-weight: 500;

  &:hover:not(:disabled) {
    border-color: #f88533;
    background: ${({ $active }) => ($active ? "#e67429" : "#f8853320")};
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  svg {
    width: 1rem;
    height: 1rem;
  }
`;

const EmptyState = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem 2rem;
  text-align: center;
  color: ${({ theme }) => theme.text}70;

  svg {
    color: ${({ theme }) => theme.text}40;
  }

  h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: ${({ theme }) => theme.text};
    margin: 0;
  }

  p {
    margin: 0;
    max-width: 300px;
  }
`;

// Componente para vista de jerarquía paginada
function JerarquiaViewPaginada({
  empresas,
  totalItems,
  currentPage,
  totalPages,
  itemsPerPage,
  onPageChange,
  onOpenModulos,
  onOpenLimites,
  onOpenEstado,
  onOpenCambiarPlan,
  onOpenOverride,
}) {
  if (!empresas || empresas.length === 0) {
    return (
      <EmptyState>
        <Icon icon="lucide:building-2" size={48} />
        <h3>Sin resultados</h3>
        <p>No se encontraron empresas que coincidan con tu búsqueda</p>
      </EmptyState>
    );
  }

  const startItem = (currentPage - 1) * itemsPerPage + 1;
  const endItem = Math.min(currentPage * itemsPerPage, totalItems);

  return (
    <>
      <JerarquiaContainer>
        <JerarquiaHeader>
          <Icon icon="lucide:network" />
          <span>Estructura Comercial</span>
          <Badge>{totalItems} empresas</Badge>
        </JerarquiaHeader>

        <TreeContainer>
          {empresas.map((empresa) => (
            <EmpresaNodeFlat
              key={empresa.id}
              empresa={empresa}
              onOpenModulos={onOpenModulos}
              onOpenLimites={onOpenLimites}
              onOpenEstado={onOpenEstado}
              onOpenCambiarPlan={onOpenCambiarPlan}
              onOpenOverride={onOpenOverride}
            />
          ))}
        </TreeContainer>
      </JerarquiaContainer>

      {totalPages > 1 && (
        <PaginationContainer>
          <PaginationInfo>
            Mostrando {startItem}-{endItem} de {totalItems} empresas
          </PaginationInfo>

          <PaginationControls>
            <PaginationButton
              onClick={() => onPageChange(currentPage - 1)}
              disabled={currentPage === 1}
            >
              <Icon icon="lucide:chevron-left" />
            </PaginationButton>

            {Array.from({ length: totalPages }, (_, i) => i + 1)
              .filter((page) => {
                // Mostrar solo páginas cercanas a la actual
                return (
                  Math.abs(page - currentPage) <= 2 ||
                  page === 1 ||
                  page === totalPages
                );
              })
              .map((page, index, array) => (
                <React.Fragment key={page}>
                  {index > 0 && array[index - 1] !== page - 1 && (
                    <span style={{ padding: "0 0.5rem", color: "#666" }}>
                      ...
                    </span>
                  )}
                  <PaginationButton
                    $active={page === currentPage}
                    onClick={() => onPageChange(page)}
                  >
                    {page}
                  </PaginationButton>
                </React.Fragment>
              ))}

            <PaginationButton
              onClick={() => onPageChange(currentPage + 1)}
              disabled={currentPage === totalPages}
            >
              <Icon icon="lucide:chevron-right" />
            </PaginationButton>
          </PaginationControls>
        </PaginationContainer>
      )}
    </>
  );
}

// Componente para empresa en vista plana (sin jerarquía anidada)
function EmpresaNodeFlat({
  empresa,
  onOpenModulos,
  onOpenLimites,
  onOpenEstado,
  onOpenCambiarPlan,
  onOpenOverride,
}) {
  const [menuOpen, setMenuOpen] = useState(false);
  const [menuPos, setMenuPos] = useState({});
  const menuRef = React.useRef(null);
  const buttonRef = React.useRef(null);
  const indent = empresa.nivel * 1.5;
  const susc = empresa.suscripcion;

  useEffect(() => {
    if (!menuOpen) return;
    const handler = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target)) {
        setMenuOpen(false);
      }
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [menuOpen]);

  return (
    <NodeContainer $level={empresa.nivel}>
      <NodeHeader $indent={indent}>
        <NodeExpander style={{ width: "1.5rem" }}>
          {empresa.nivel > 0 && (
            <div
              style={{
                width: "1px",
                height: "100%",
                background: "#333",
                marginLeft: `${indent}rem`,
              }}
            />
          )}
        </NodeExpander>

        <CompanyIcon $type={empresa.type}>
          <Icon icon={getCompanyIcon(empresa.type)} />
        </CompanyIcon>

        <CompanyInfo>
          <CompanyName>{empresa.razon_social}</CompanyName>
          <CompanyDetails>
            <TypeBadge $type={empresa.type}>
              {getCompanyTypeLabel(empresa.type)}
            </TypeBadge>
            <span>•</span>
            <span>{empresa.ruc}</span>
            {empresa.comision_porcentaje && (
              <>
                <span>•</span>
                <CommissionBadge>
                  {empresa.comision_porcentaje}% comisión
                </CommissionBadge>
              </>
            )}
            {/* Estado de suscripción */}
            {susc ? (
              <>
                <span>•</span>
                <SuscripcionStatusBadge
                  $estado={susc.estado}
                  $bloqueada={susc.bloqueada}
                >
                  <Icon
                    icon={
                      susc.bloqueada
                        ? "lucide:shield-off"
                        : susc.estado === "Activo"
                          ? "lucide:check-circle"
                          : susc.estado === "EnGracia"
                            ? "lucide:clock"
                            : "lucide:x-circle"
                    }
                  />
                  {susc.bloqueada ? "Bloqueada" : susc.estado}
                  {(() => {
                    const dias =
                      susc.dias_restantes ?? calcDiasRestantes(susc.fecha_fin);
                    if (dias == null) return null;
                    if (dias <= 0)
                      return (
                        <span style={{ marginLeft: "0.25rem" }}>(vencida)</span>
                      );
                    if (dias <= 30)
                      return (
                        <span style={{ marginLeft: "0.25rem" }}>({dias}d)</span>
                      );
                    return null;
                  })()}
                </SuscripcionStatusBadge>
                {/* Plan nombre */}
                {(susc.plan_nombre || susc.planes?.descripcion) && (
                  <PlanNameBadge>
                    <Icon icon="lucide:package" />
                    {susc.plan_nombre || susc.planes?.descripcion}
                    {susc.costo_mensual != null && (
                      <span style={{ marginLeft: "0.35rem", opacity: 0.75 }}>
                        · {Number(susc.costo_mensual).toLocaleString("es-PY")} Gs
                      </span>
                    )}
                  </PlanNameBadge>
                )}
                {/* Override activo */}
                {susc.limite_override && (
                  <OverrideBadge title="Este plan tiene límites ampliados temporalmente">
                    <Icon icon="lucide:sliders-horizontal" />
                    Override
                  </OverrideBadge>
                )}
              </>
            ) : (
              <>
                <span>•</span>
                <SuscripcionStatusBadge $estado={null} $bloqueada={false}>
                  <Icon icon="lucide:alert-circle" />
                  Sin suscripción
                </SuscripcionStatusBadge>
              </>
            )}
          </CompanyDetails>
        </CompanyInfo>

        <NodeActions ref={menuRef}>
          <ActionButton
            ref={buttonRef}
            title="Acciones"
            $alert={susc?.bloqueada}
            onClick={(e) => {
              e.stopPropagation();
              if (!menuOpen && buttonRef.current) {
                const rect = buttonRef.current.getBoundingClientRect();
                const MENU_H = 220;
                const spaceBelow = window.innerHeight - rect.bottom;
                if (spaceBelow < MENU_H) {
                  setMenuPos({ bottom: window.innerHeight - rect.top + 4, right: window.innerWidth - rect.right });
                } else {
                  setMenuPos({ top: rect.bottom + 4, right: window.innerWidth - rect.right });
                }
              }
              setMenuOpen((v) => !v);
            }}
            style={{
              fontWeight: 700,
              fontSize: "1.1rem",
              letterSpacing: "0.05em",
            }}
          >
            ⋯
          </ActionButton>
          {menuOpen && (
            <ContextMenu
              style={menuPos}
              onClick={(e) => e.stopPropagation()}
            >
              <ContextMenuItem
                onClick={() => {
                  setMenuOpen(false);
                  onOpenLimites?.(empresa);
                }}
              >
                <Icon icon="lucide:gauge" />
                Ver límites del plan
              </ContextMenuItem>
              <ContextMenuItem
                onClick={() => {
                  setMenuOpen(false);
                  onOpenCambiarPlan?.(empresa);
                }}
              >
                <Icon icon="lucide:repeat" />
                Cambiar plan
              </ContextMenuItem>
              <ContextMenuItem
                onClick={() => {
                  setMenuOpen(false);
                  onOpenOverride?.(empresa);
                }}
              >
                <Icon icon="lucide:sliders-horizontal" />
                Ampliar límites
              </ContextMenuItem>
              {empresa.type !== "holding" && (
                <ContextMenuItem
                  onClick={() => {
                    setMenuOpen(false);
                    onOpenModulos?.(empresa);
                  }}
                >
                  <Icon icon="lucide:puzzle" />
                  Gestionar módulos
                </ContextMenuItem>
              )}
              <ContextMenuDivider />
              <ContextMenuItem
                $alert={susc?.bloqueada}
                onClick={() => {
                  setMenuOpen(false);
                  onOpenEstado?.(empresa);
                }}
              >
                <Icon icon="lucide:shield-alert" />
                {susc?.bloqueada
                  ? "Desbloquear suscripción"
                  : "Estado de suscripción"}
              </ContextMenuItem>
            </ContextMenu>
          )}
        </NodeActions>
      </NodeHeader>
    </NodeContainer>
  );
}

// ─── Styled components para menú contextual ──────────────────────────────────

const ContextMenu = styled.div`
  position: fixed;
  background: #1e1e32;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  min-width: 190px;
  z-index: 1300;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 0.3rem 0;
`;

const ContextMenuItem = styled.button`
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  color: ${(p) => (p.$alert ? "#ef4444" : "rgba(255,255,255,0.8)")};
  font-size: 0.82rem;
  text-align: left;
  transition:
    background 0.12s,
    color 0.12s;
  svg {
    flex-shrink: 0;
    font-size: 0.9rem;
  }
  &:hover {
    background: rgba(248, 133, 51, 0.1);
    color: ${(p) => (p.$alert ? "#ef4444" : "#fff")};
  }
`;

const ContextMenuDivider = styled.div`
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.25rem 0;
`;

// ─── Styled components para dialog de límites ────────────────────────────────

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

const LimitesDialog = styled.div`
  background: ${({ theme }) => theme.bg2};
  border: 1px solid ${({ theme }) => theme.bg4};
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
`;

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

const LimitesDialogTitle = styled.h3`
  font-size: 1rem;
  font-weight: 700;
  color: ${({ theme }) => theme.text};
  margin: 0;
`;

const LimitesDialogSub = styled.p`
  font-size: 0.75rem;
  color: ${({ theme }) => theme.text}60;
  margin: 0;
`;

const LimitesDialogBody = styled.div`
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1;
`;

const CloseBtn = styled.button`
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 6px;
  background: ${({ theme }) => theme.bg4};
  color: ${({ theme }) => theme.text}70;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;

  svg {
    width: 1rem;
    height: 1rem;
  }

  &:hover {
    background: #ef444420;
    color: #ef4444;
  }
`;

// ─── Badge de estado de suscripción inline ────────────────────────────────────

const SuscripcionStatusBadge = styled.span`
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: ${({ $estado, $bloqueada }) => {
    if ($bloqueada) return "#ef444420";
    if ($estado === "Activo") return "#22c55e20";
    if ($estado === "EnGracia") return "#f59e0b20";
    return "#ef444420";
  }};
  color: ${({ $estado, $bloqueada }) => {
    if ($bloqueada) return "#ef4444";
    if ($estado === "Activo") return "#22c55e";
    if ($estado === "EnGracia") return "#f59e0b";
    return "#ef4444";
  }};

  svg {
    width: 0.75rem;
    height: 0.75rem;
  }
`;

// ─── Styled components para dialog de estado ─────────────────────────────────

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

const EstadoDialogBox = styled.div`
  background: ${({ theme }) => theme.bg2};
  border: 1px solid ${({ theme }) => theme.bg4};
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
`;

const EstadoDialogHeader = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid ${({ theme }) => theme.bg4};
`;

const EstadoDialogTitle = styled.h3`
  font-size: 1rem;
  font-weight: 700;
  color: ${({ theme }) => theme.text};
  margin: 0;
`;

const EstadoDialogSub = styled.p`
  font-size: 0.75rem;
  color: ${({ theme }) => theme.text}60;
  margin: 0.15rem 0 0;
`;

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

const EstadoActualCard = styled.div`
  background: ${({ $bloqueada }) => ($bloqueada ? "#ef444410" : "#22c55e10")};
  border: 1px solid
    ${({ $bloqueada }) => ($bloqueada ? "#ef444430" : "#22c55e30")};
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: ${({ theme }) => theme.text};
`;

const EstadoBadge = styled.span`
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: ${({ $estado }) => {
    if ($estado === "Activo") return "#22c55e20";
    if ($estado === "EnGracia") return "#f59e0b20";
    if ($estado === "Pausado") return "#3b82f620";
    return "#ef444420";
  }};
  color: ${({ $estado }) => {
    if ($estado === "Activo") return "#22c55e";
    if ($estado === "EnGracia") return "#f59e0b";
    if ($estado === "Pausado") return "#3b82f6";
    return "#ef4444";
  }};
`;

const EstadoAcciones = styled.div`
  background: ${({ theme }) => theme.bg3};
  border: 1px solid ${({ theme }) => theme.bg4};
  border-radius: 10px;
  padding: 0.85rem 1rem;
`;

const EstadoBotonGroup = styled.div`
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
`;

const EstadoBoton = styled.button`
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;

  background: ${({ $estado, $activo }) => {
    if ($activo) {
      if ($estado === "Activo") return "#22c55e";
      if ($estado === "Pausado") return "#3b82f6";
      if ($estado === "Cancelado") return "#ef4444";
      return "#6b7280";
    }
    return "transparent";
  }};
  color: ${({ $estado, $activo }) => {
    if ($activo) return "#fff";
    if ($estado === "Activo") return "#22c55e";
    if ($estado === "Pausado") return "#3b82f6";
    if ($estado === "Cancelado") return "#ef4444";
    return "#6b7280";
  }};
  border-color: ${({ $estado }) => {
    if ($estado === "Activo") return "#22c55e40";
    if ($estado === "Pausado") return "#3b82f640";
    if ($estado === "Cancelado") return "#ef444440";
    return "#6b728040";
  }};

  svg {
    width: 0.85rem;
    height: 0.85rem;
  }

  &:hover:not(:disabled) {
    opacity: 0.85;
    transform: translateY(-1px);
  }

  &:disabled {
    cursor: default;
    opacity: ${({ $activo }) => ($activo ? 1 : 0.4)};
  }
`;

// ─── Styled components: métricas rápidas ────────────────────────────────────────────

const MetricasRapidasGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;

  @media (max-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
  }
  @media (max-width: 640px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  @media (max-width: 380px) {
    grid-template-columns: 1fr;
  }
`;

const MetricaRapidaCard = styled.button`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  background: ${({ theme, $active, $color }) =>
    $active ? `${$color}18` : theme.bg3};
  border: 1px solid
    ${({ $active, $color, theme }) => ($active ? $color : theme.bg4)};
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;

  &:hover {
    border-color: ${({ $color }) => $color};
    background: ${({ $color }) => $color}12;
    transform: translateY(-1px);
  }
`;

const MetricaRapidaIcon = styled.div`
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: ${({ $color }) => $color}20;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  svg {
    width: 1rem;
    height: 1rem;
    color: ${({ $color }) => $color};
  }
`;

const MetricaRapidaInfo = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
`;

const MetricaRapidaValor = styled.span`
  font-size: 1.2rem;
  font-weight: 700;
  color: ${({ theme }) => theme.text};
  line-height: 1;
`;

const MetricaRapidaLabel = styled.span`
  font-size: 0.72rem;
  color: ${({ theme }) => theme.text}70;
  white-space: nowrap;
`;

// ─── Styled components: filtros avanzados ────────────────────────────────────────────

const SearchRow = styled.div`
  display: flex;
  gap: 0.75rem;
  align-items: stretch;

  @media (max-width: 600px) {
    flex-direction: column;
  }
`;

const ClearBtn = styled.button`
  border: none;
  background: none;
  cursor: pointer;
  color: ${({ theme }) => theme.text}50;
  display: flex;
  align-items: center;
  padding: 0 0.25rem;
  flex-shrink: 0;
  transition: color 0.15s;

  svg {
    width: 0.85rem;
    height: 0.85rem;
  }
  &:hover {
    color: #ef4444;
  }
`;

const TipoSelect = styled.select`
  padding: 0.65rem 0.85rem;
  background: ${({ theme }) => theme.bg2};
  border: 1px solid ${({ theme }) => theme.bg4};
  border-radius: 8px;
  color: ${({ theme }) => theme.text};
  font-size: 0.85rem;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
  transition: border-color 0.2s;

  &:focus {
    border-color: #f88533;
  }
  option {
    background: ${({ theme }) => theme.bg2};
  }
`;

const ChipsRow = styled.div`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid ${({ theme }) => theme.bg4};
`;

const ChipLabel = styled.span`
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: ${({ theme }) => theme.text}60;
  font-weight: 500;
  flex-shrink: 0;

  svg {
    width: 0.85rem;
    height: 0.85rem;
  }
`;

const FilterChip = styled.button`
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid
    ${({ $active, $color, theme }) => ($active ? $color : theme.bg4)};
  background: ${({ $active, $color, theme }) =>
    $active ? `${$color}20` : theme.bg2};
  color: ${({ $active, $color, theme }) =>
    $active ? $color : `${theme.text}80`};

  svg {
    width: 0.8rem;
    height: 0.8rem;
  }

  &:hover {
    border-color: ${({ $color }) => $color};
    color: ${({ $color }) => $color};
    background: ${({ $color }) => $color}12;
  }
`;

const ClearAllBtn = styled.button`
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #ef444440;
  background: #ef444410;
  color: #ef4444;
  transition: all 0.15s ease;

  svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  &:hover {
    background: #ef444420;
  }
`;

const PlanNameBadge = styled.span`
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 500;
  background: ${({ theme }) => theme.bg4};
  color: ${({ theme }) => theme.text}70;
`;

const OverrideBadge = styled.span`
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
  svg {
    width: 0.7rem;
    height: 0.7rem;
  }

  svg {
    width: 0.65rem;
    height: 0.65rem;
    opacity: 0.7;
  }
`;