import { Icon } from "@iconify/react";
import {
  Alert,
  Box,
  Button,
  Chip,
  Collapse,
  IconButton,
  LinearProgress,
  Tooltip,
  Typography,
} from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import { useCallback, useState } from "react";
import { useNavigate } from "react-router-dom";
import { getPlanLimitsUsage } from "../../api/plan-limits.service";
import { useAuthStore } from "../../store/AuthStore";

// Claves de sessionStorage separadas para cada tipo de banner
const KEY_ESTADO = "plan_banner_estado_dismissed";
const KEY_LIMITES = "plan_banner_limites_dismissed";

// ─── Helpers ────────────────────────────────────────────────────────────────

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

function getBarColor(pct) {
  if (pct >= 100) return "error";
  if (pct >= 80) return "warning";
  return "success";
}

// ─── Sub-componente: fila de uso de un límite ────────────────────────────────

function LimitRow({ label, actual, maximo, icon }) {
  if (!maximo || maximo <= 0) return null;
  const pct = getUsoPorcentaje(actual, maximo);
  const color = getBarColor(pct);
  const superado = pct >= 100;

  return (
    <Box sx={{ mb: 0.5 }}>
      <Box
        display="flex"
        alignItems="center"
        justifyContent="space-between"
        mb={0.25}
      >
        <Box display="flex" alignItems="center" gap={0.5}>
          <Icon icon={icon} style={{ fontSize: 13, opacity: 0.75 }} />
          <Typography
            variant="caption"
            color="text.secondary"
            sx={{ fontSize: "0.72rem" }}
          >
            {label}
          </Typography>
        </Box>
        <Box display="flex" alignItems="center" gap={0.5}>
          <Typography
            variant="caption"
            fontWeight={600}
            color={superado ? "error.main" : "text.primary"}
            sx={{ fontSize: "0.72rem" }}
          >
            {actual?.toLocaleString?.("es-PY") ?? actual} /{" "}
            {maximo?.toLocaleString?.("es-PY") ?? maximo}
          </Typography>
          <Chip
            label={`${pct}%`}
            size="small"
            color={color}
            sx={{
              height: 16,
              fontSize: "0.65rem",
              ".MuiChip-label": { px: 0.75 },
            }}
          />
        </Box>
      </Box>
      <LinearProgress
        variant="determinate"
        value={pct}
        color={color}
        sx={{ height: 4, borderRadius: 2, mb: 0.25 }}
      />
    </Box>
  );
}

// ─── Helpers de fecha ───────────────────────────────────────────────────────

function getDiasRestantes(fechaFin) {
  if (!fechaFin) return null;
  const hoy = new Date();
  const fin = new Date(fechaFin);
  const diff = Math.ceil((fin - hoy) / (1000 * 60 * 60 * 24));
  return diff; // puede ser negativo si ya venció
}

// ─── Sub-componente: banner de estado de suscripción ────────────────────────
/**
 * Muestra cuando la suscripción está en período de gracia o no existe
 * (lo que indica que venció, está inactiva, o nunca se activó).
 *
 * Estados posibles en el store:
 *  - suscripcion === null          → sin suscripción activa → error
 *  - suscripcion.estado = EnGracia → warning con días restantes
 *  - suscripcion.estado = Activo   → no muestra nada (normal)
 */
function EstadoBanner({ suscripcion, onDismiss, dismissed }) {
  const navigate = useNavigate();
  if (dismissed) return null;

  // Sin suscripción activa (null = vencida, inactiva, o sin plan)
  if (!suscripcion) {
    return (
      <Alert
        severity="error"
        icon={<Icon icon="lucide:alert-circle" style={{ fontSize: 20 }} />}
        sx={{
          borderRadius: 0,
          borderBottom: "1px solid",
          borderColor: "error.dark",
          py: 1,
          px: { xs: 1.5, sm: 2 },
          "& .MuiAlert-message": {
            width: "100%",
            display: "flex",
            alignItems: "center",
            gap: 1.5,
            flexWrap: "wrap",
          },
          "& .MuiAlert-action": { pt: 0, alignItems: "center" },
        }}
        action={
          <Box display="flex" alignItems="center" gap={1} flexShrink={0}>
            <Tooltip title="Ir a configuración de suscripción">
              <Button
                size="small"
                variant="outlined"
                color="error"
                onClick={() =>
                  navigate("/configuracion", {
                    state: { section: "suscripcion" },
                  })
                }
                startIcon={
                  <Icon icon="lucide:credit-card" style={{ fontSize: 13 }} />
                }
                sx={{ whiteSpace: "nowrap", fontSize: "0.72rem" }}
              >
                Renovar plan
              </Button>
            </Tooltip>
            <Tooltip title="Cerrar (se mostrará al recargar la página)">
              <IconButton size="small" onClick={onDismiss} color="inherit">
                <Icon icon="lucide:x" style={{ fontSize: 16 }} />
              </IconButton>
            </Tooltip>
          </Box>
        }
      >
        <Typography
          variant="body2"
          fontWeight={700}
          sx={{ fontSize: "0.82rem" }}
        >
          Sin suscripción activa
        </Typography>
        <Typography
          variant="body2"
          color="text.secondary"
          sx={{ fontSize: "0.78rem" }}
        >
          Tu plan ha vencido o está inactivo. Las operaciones de escritura están
          bloqueadas. Regularizá tu pago o contactá con soporte.
        </Typography>
      </Alert>
    );
  }

  const estado = suscripcion?.estado;

  // Calcular días restantes desde fecha_fin (campo real del backend)
  const diasRestantes = getDiasRestantes(suscripcion?.fecha_fin);

  // Mapeo de estados a configuración de UI
  const config = {
    EnGracia: {
      severity: "warning",
      icon: "lucide:clock",
      titulo: "Período de gracia activo",
      mensaje: () => {
        const dias = diasRestantes !== null ? Math.abs(diasRestantes) : null;
        return `Tu suscripción venció pero aún podés operar durante el período de gracia.${
          dias != null
            ? ` Te quedan aproximadamente ${dias} día${dias !== 1 ? "s" : ""}.`
            : ""
        } Regularizá tu pago para evitar interrupciones.`;
      },
      btnLabel: "Regularizar pago",
      dismissible: true,
    },
  };

  const cfg = config[estado];
  if (!cfg) return null; // Estado Activo u otros → no mostrar nada aquí

  return (
    <Alert
      severity={cfg.severity}
      icon={<Icon icon={cfg.icon} style={{ fontSize: 20 }} />}
      sx={{
        borderRadius: 0,
        borderBottom: "1px solid",
        borderColor: cfg.severity === "error" ? "error.dark" : "warning.dark",
        py: 1,
        px: { xs: 1.5, sm: 2 },
        "& .MuiAlert-message": {
          width: "100%",
          display: "flex",
          alignItems: "center",
          gap: 1.5,
          flexWrap: "wrap",
        },
        "& .MuiAlert-action": { pt: 0, alignItems: "center" },
      }}
      action={
        <Box display="flex" alignItems="center" gap={1} flexShrink={0}>
          <Tooltip title="Ir a configuración de suscripción">
            <Button
              size="small"
              variant="outlined"
              color={cfg.severity}
              onClick={() =>
                navigate("/configuracion", {
                  state: { section: "suscripcion" },
                })
              }
              startIcon={
                <Icon icon="lucide:credit-card" style={{ fontSize: 13 }} />
              }
              sx={{ whiteSpace: "nowrap", fontSize: "0.72rem" }}
            >
              {cfg.btnLabel}
            </Button>
          </Tooltip>
          {cfg.dismissible && (
            <Tooltip title="Cerrar (se mostrará al recargar la página)">
              <IconButton size="small" onClick={onDismiss} color="inherit">
                <Icon icon="lucide:x" style={{ fontSize: 16 }} />
              </IconButton>
            </Tooltip>
          )}
        </Box>
      }
    >
      <Typography variant="body2" fontWeight={700} sx={{ fontSize: "0.82rem" }}>
        {cfg.titulo}
      </Typography>
      <Typography
        variant="body2"
        color="text.secondary"
        sx={{ fontSize: "0.78rem" }}
      >
        {cfg.mensaje(suscripcion)}
      </Typography>
      {suscripcion?.plan?.descripcion && (
        <Chip
          label={suscripcion.plan.descripcion}
          size="small"
          variant="outlined"
          color={cfg.severity}
          sx={{
            height: 18,
            fontSize: "0.65rem",
            ".MuiChip-label": { px: 0.75 },
          }}
        />
      )}
    </Alert>
  );
}

// ─── Sub-componente: banner de límites de uso ────────────────────────────────
/**
 * Muestra cuando algún límite del plan está al ≥80% o superado.
 * Solo aplica cuando la suscripción está Activa o EnGracia.
 */
function LimitesBanner({ usage, planDescripcion, onDismiss, dismissed }) {
  const navigate = useNavigate();
  if (dismissed || !usage) return null;

  // El API devuelve: { plan: string, limites: { usuarios: {actual,maximo}, ... } }
  const L = usage.limites ?? {};

  // Construir lista de ítems a monitorear (ignorar si maximo es null = ilimitado)
  const items = [];
  if (L.usuarios?.maximo > 0)
    items.push({
      label: "Usuarios",
      actual: L.usuarios.actual,
      maximo: L.usuarios.maximo,
      icon: "lucide:users",
    });
  if (L.productos?.maximo > 0)
    items.push({
      label: "Productos",
      actual: L.productos.actual,
      maximo: L.productos.maximo,
      icon: "lucide:package",
    });
  if (L.clientes?.maximo > 0)
    items.push({
      label: "Clientes",
      actual: L.clientes.actual,
      maximo: L.clientes.maximo,
      icon: "lucide:user",
    });
  if (L.documentos_mes?.maximo > 0)
    items.push({
      label: "Documentos del mes",
      actual: L.documentos_mes.actual,
      maximo: L.documentos_mes.maximo,
      icon: "lucide:file-text",
    });
  if (L.monto_facturacion?.maximo > 0)
    items.push({
      label: "Monto facturación",
      actual: L.monto_facturacion.actual,
      maximo: L.monto_facturacion.maximo,
      icon: "lucide:trending-up",
    });

  const itemsConPct = items.map((i) => ({
    ...i,
    pct: getUsoPorcentaje(i.actual, i.maximo),
  }));
  const superados = itemsConPct.filter((i) => i.pct >= 100);
  const advertencia = itemsConPct.filter((i) => i.pct >= 80 && i.pct < 100);

  if (superados.length === 0 && advertencia.length === 0) return null;

  const esCritico = superados.length > 0;
  const severity = esCritico ? "error" : "warning";
  const titulo = esCritico
    ? `¡Límite${superados.length > 1 ? "s" : ""} del plan alcanzado${superados.length > 1 ? "s" : ""}!`
    : `Límite${advertencia.length > 1 ? "s" : ""} del plan cerca del máximo`;
  const afectados = esCritico ? superados : advertencia;
  const mensaje = esCritico
    ? `${afectados.map((i) => i.label).join(", ")} ha${afectados.length > 1 ? "n" : ""} superado el límite. Algunas operaciones estarán bloqueadas.`
    : `${afectados.map((i) => i.label).join(", ")} está${afectados.length > 1 ? "n" : ""} cerca del límite de tu plan actual.`;

  return (
    <Alert
      severity={severity}
      sx={{
        borderRadius: 0,
        borderBottom: "1px solid",
        borderColor: esCritico ? "error.dark" : "warning.dark",
        py: 1,
        px: { xs: 1.5, sm: 2 },
        "& .MuiAlert-message": { width: "100%" },
        "& .MuiAlert-action": { pt: 0.5, alignItems: "flex-start" },
      }}
      action={
        <Box display="flex" alignItems="center" gap={1} flexShrink={0}>
          <Tooltip title="Ir a Suscripción para ver detalles y enviar comprobante de pago">
            <Button
              size="small"
              variant="outlined"
              color={severity}
              onClick={() =>
                navigate("/configuracion", {
                  state: { section: "suscripcion" },
                })
              }
              startIcon={
                <Icon icon="lucide:credit-card" style={{ fontSize: 13 }} />
              }
              sx={{ whiteSpace: "nowrap", fontSize: "0.72rem" }}
            >
              Ver plan
            </Button>
          </Tooltip>
          <Tooltip title="Cerrar (se mostrará al recargar la página)">
            <IconButton size="small" onClick={onDismiss} color="inherit">
              <Icon icon="lucide:x" style={{ fontSize: 16 }} />
            </IconButton>
          </Tooltip>
        </Box>
      }
    >
      {/* Cabecera del banner */}
      <Box display="flex" alignItems="center" gap={1} mb={0.5} flexWrap="wrap">
        <Typography
          variant="body2"
          fontWeight={700}
          sx={{ fontSize: "0.82rem" }}
        >
          {titulo}
        </Typography>
        <Typography
          variant="body2"
          color="text.secondary"
          sx={{ fontSize: "0.78rem" }}
        >
          {mensaje}
        </Typography>
        {planDescripcion && (
          <Chip
            label={planDescripcion}
            size="small"
            variant="outlined"
            color={severity}
            sx={{
              height: 18,
              fontSize: "0.65rem",
              ".MuiChip-label": { px: 0.75 },
            }}
          />
        )}
      </Box>

      {/* Barras de progreso para cada límite afectado */}
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: {
            xs: "1fr",
            sm: "repeat(2, 1fr)",
            md: "repeat(3, 1fr)",
          },
          gap: { xs: 0.5, sm: 1 },
          mt: 0.5,
        }}
      >
        {[...superados, ...advertencia].slice(0, 6).map((item) => (
          <LimitRow
            key={item.label}
            label={item.label}
            actual={item.actual}
            maximo={item.maximo}
            icon={item.icon}
          />
        ))}
      </Box>
    </Alert>
  );
}

// ─── Componente principal ────────────────────────────────────────────────────

/**
 * PlanLimitsBanner — Banner global montado en el Layout.
 *
 * Muestra dos tipos de alertas (cada una dismissible por separado):
 *
 * 1. **Estado de suscripción**: cuando el estado es EnGracia, Vencida o Inactiva.
 *    - EnGracia → warning con días restantes
 *    - Vencida/Inactiva → error con acción de renovar
 *
 * 2. **Límites de uso**: cuando algún recurso (usuarios, productos, documentos, etc.)
 *    está al ≥80% o ha superado el límite del plan.
 *    - ≥80% → warning
 *    - ≥100% → error
 *
 * Comportamiento:
 * - Dismissible: se cierra y se guarda en sessionStorage → se vuelve a mostrar al recargar
 * - No aplica para holdings/resellers (no tienen suscripción propia)
 * - Los datos de uso se refrescan cada 5 minutos
 */
export default function PlanLimitsBanner() {
  const { empresa, suscripcion } = useAuthStore();

  // Banners dismissibles independientes por sessionStorage
  const [dismissedEstado, setDismissedEstado] = useState(
    () => sessionStorage.getItem(KEY_ESTADO) === "1",
  );
  const [dismissedLimites, setDismissedLimites] = useState(
    () => sessionStorage.getItem(KEY_LIMITES) === "1",
  );

  const handleDismissEstado = useCallback(() => {
    sessionStorage.setItem(KEY_ESTADO, "1");
    setDismissedEstado(true);
  }, []);

  const handleDismissLimites = useCallback(() => {
    sessionStorage.setItem(KEY_LIMITES, "1");
    setDismissedLimites(true);
  }, []);

  // No aplica para holdings/resellers
  const isHoldingOrReseller =
    empresa?.type === "holding" || empresa?.type === "reseller";

  // Solo cargar datos de uso si la suscripción existe y no es holding/reseller
  const { data: usage } = useQuery({
    queryKey: ["plan-limits-usage"],
    queryFn: getPlanLimitsUsage,
    enabled: !isHoldingOrReseller && !!suscripcion,
    refetchInterval: 5 * 60 * 1000,
    refetchOnWindowFocus: true,
    retry: false,
    staleTime: 2 * 60 * 1000,
  });

  if (isHoldingOrReseller) return null;

  // Activo = estado normal, no mostrar banner de estado
  // null = sin suscripción activa (vencida/inactiva) → mostrar banner de error
  // EnGracia = mostrar banner de advertencia
  const estadoActivo = suscripcion?.estado === "Activo";
  const planDescripcion =
    usage?.plan ||
    suscripcion?.plan?.descripcion ||
    suscripcion?.planes?.descripcion;

  return (
    <Box>
      {/* Banner 1: Estado de suscripción (EnGracia, sin suscripción activa) */}
      <Collapse in={!dismissedEstado && !estadoActivo}>
        <EstadoBanner
          suscripcion={suscripcion}
          onDismiss={handleDismissEstado}
          dismissed={dismissedEstado}
        />
      </Collapse>

      {/* Banner 2: Límites de uso del plan */}
      <Collapse in={!dismissedLimites}>
        <LimitesBanner
          usage={usage}
          planDescripcion={planDescripcion}
          onDismiss={handleDismissLimites}
          dismissed={dismissedLimites}
        />
      </Collapse>
    </Box>
  );
}