import { Icon } from "@iconify/react";
import { useQuery } from "@tanstack/react-query";
import styled from "styled-components";
import { suscripcionesQueries } from "../../../api/suscripciones.service";

const LIMITES_CONFIG = [
  {
    key: "usuarios",
    label: "Usuarios",
    icon: "lucide:users",
    color: "#3b82f6",
    formatMax: (v) => `${v} usuarios`,
    formatActual: (v) => v,
  },
  {
    key: "productos",
    label: "Productos",
    icon: "lucide:package",
    color: "#8b5cf6",
    formatMax: (v) => `${v} productos`,
    formatActual: (v) => v,
  },
  {
    key: "clientes",
    label: "Clientes",
    icon: "lucide:contact",
    color: "#10b981",
    formatMax: (v) => `${v} clientes`,
    formatActual: (v) => v,
  },
  {
    key: "documentos_mes",
    label: "Documentos del mes",
    icon: "lucide:file-text",
    color: "#f59e0b",
    formatMax: (v) => `${v} docs`,
    formatActual: (v) => v,
  },
  {
    key: "monto_facturacion",
    label: "Monto facturación",
    icon: "lucide:trending-up",
    color: "#f88533",
    formatMax: (v) => `${Number(v).toLocaleString("es-PY")} Gs.`,
    formatActual: (v) => `${Number(v).toLocaleString("es-PY")} Gs.`,
  },
  {
    key: "documentos_prueba",
    label: "Docs. de prueba (CDC test)",
    icon: "lucide:flask-conical",
    color: "#6366f1",
    formatMax: (v) => `${v} docs`,
    formatActual: (v) => v,
  },
  {
    key: "empresas",
    label: "Empresas subsidiarias",
    icon: "lucide:building-2",
    color: "#ec4899",
    formatMax: (v) => `${v} empresas`,
    formatActual: (v) => v,
  },
  {
    key: "sucursales",
    label: "Sucursales",
    icon: "lucide:map-pin",
    color: "#14b8a6",
    formatMax: (v) => `${v} sucursales`,
    formatActual: (v) => v,
  },
];

function getPorcentaje(actual, maximo) {
  if (!maximo || maximo === 0) return 0;
  return Math.min((actual / maximo) * 100, 100);
}

function getColorBarra(pct) {
  if (pct >= 90) return "#ef4444";
  if (pct >= 70) return "#f59e0b";
  return "#10b981";
}

function LimitRow({ config, actual, maximo }) {
  if (maximo === null || maximo === undefined) {
    return (
      <LimitItem>
        <LimitHeader>
          <LimitIconWrap $color={config.color}>
            <Icon icon={config.icon} />
          </LimitIconWrap>
          <LimitLabel>{config.label}</LimitLabel>
          <LimitValues>
            <span>{config.formatActual(actual)}</span>
            <UnlimitedBadge>Ilimitado</UnlimitedBadge>
          </LimitValues>
        </LimitHeader>
        <BarTrack>
          <BarFill style={{ width: "100%", background: "#10b98140" }} />
        </BarTrack>
      </LimitItem>
    );
  }

  const pct = getPorcentaje(actual, maximo);
  const color = getColorBarra(pct);

  return (
    <LimitItem>
      <LimitHeader>
        <LimitIconWrap $color={config.color}>
          <Icon icon={config.icon} />
        </LimitIconWrap>
        <LimitLabel>{config.label}</LimitLabel>
        <LimitValues>
          <span>
            {config.formatActual(actual)} / {config.formatMax(maximo)}
          </span>
          <PctBadge $color={color}>{Math.round(pct)}%</PctBadge>
        </LimitValues>
      </LimitHeader>
      <BarTrack>
        <BarFill style={{ width: `${pct}%`, background: color }} />
      </BarTrack>
      {pct >= 90 && (
        <LimitWarning $critical={pct >= 100}>
          <Icon icon={pct >= 100 ? "lucide:ban" : "lucide:alert-triangle"} />
          <span>
            {pct >= 100
              ? "Límite alcanzado — no se pueden crear más registros"
              : "Cerca del límite — considerá actualizar tu plan"}
          </span>
        </LimitWarning>
      )}
    </LimitItem>
  );
}

/**
 * PlanUsageCard
 * - Sin props: muestra el uso de la empresa propia (usa /plan-limits/usage)
 * - Con empresaId: muestra el uso de esa empresa (usa /plan-limits/usage/:id) — para holding
 */
export function PlanUsageCard({ empresaId = null, compact = false }) {
  const query = empresaId
    ? suscripcionesQueries.planUsageByEmpresa(empresaId)
    : suscripcionesQueries.planUsage();

  const { data, isLoading, error } = useQuery(query);

  if (isLoading) {
    return (
      <Card $compact={compact}>
        <LoadingRow>
          <Icon icon="lucide:loader-2" className="spin" />
          <span>Cargando límites del plan...</span>
        </LoadingRow>
      </Card>
    );
  }

  if (error || !data) {
    return (
      <Card $compact={compact}>
        <ErrorRow>
          <Icon icon="lucide:alert-circle" />
          <span>No se pudo obtener información del plan</span>
        </ErrorRow>
      </Card>
    );
  }

  const limites = data?.limites ?? {};
  const planNombre = data?.plan ?? "Sin plan activo";

  return (
    <Card $compact={compact}>
      <CardHeader>
        <Icon icon="lucide:gauge" />
        <CardTitle>Uso del Plan</CardTitle>
        <PlanBadge>{planNombre}</PlanBadge>
      </CardHeader>

      <LimitsList>
        {LIMITES_CONFIG.map((cfg) => {
          const item = limites[cfg.key];
          if (!item) return null;
          return (
            <LimitRow
              key={cfg.key}
              config={cfg}
              actual={item.actual ?? 0}
              maximo={item.maximo}
            />
          );
        })}
      </LimitsList>
    </Card>
  );
}

// ─── Styled Components ─────────────────────────────────────────────────────────

const Card = styled.div`
  background: ${({ theme }) => theme.bg3};
  border: 1px solid ${({ theme }) => theme.bg4};
  border-radius: 12px;
  padding: ${({ $compact }) => ($compact ? "1rem" : "1.25rem")};
  display: flex;
  flex-direction: column;
  gap: 1rem;
`;

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

  svg {
    width: 1.1rem;
    height: 1.1rem;
    color: #f88533;
    flex-shrink: 0;
  }
`;

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

const PlanBadge = styled.span`
  padding: 0.25rem 0.75rem;
  background: #f8853320;
  color: #f88533;
  border: 1px solid #f8853340;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
`;

const LimitsList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
`;

const LimitItem = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
`;

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

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

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

const LimitLabel = styled.span`
  font-size: 0.8rem;
  color: ${({ theme }) => theme.text}80;
  flex: 1;
`;

const LimitValues = styled.div`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: ${({ theme }) => theme.text};
  font-weight: 500;
`;

const PctBadge = styled.span`
  font-size: 0.7rem;
  font-weight: 700;
  color: ${({ $color }) => $color};
  background: ${({ $color }) => $color}20;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
`;

const UnlimitedBadge = styled.span`
  font-size: 0.7rem;
  font-weight: 600;
  color: #10b981;
  background: #10b98120;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
`;

const BarTrack = styled.div`
  height: 5px;
  background: ${({ theme }) => theme.bg4};
  border-radius: 3px;
  overflow: hidden;
`;

const BarFill = styled.div`
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
`;

const LimitWarning = styled.div`
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: ${({ $critical }) => ($critical ? "#ef4444" : "#f59e0b")};

  svg {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
  }
`;

const LoadingRow = styled.div`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  color: ${({ theme }) => theme.text}60;
  font-size: 0.85rem;

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

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
`;

const ErrorRow = styled.div`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  color: #ef4444;
  font-size: 0.85rem;

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