import { Icon } from "@iconify/react";
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material";
import { useEffect, useMemo, useState } from "react";
import {
  useAlertasEmpresaQuery,
  useMarcarAlertaLeidaMutation,
  useMarcarPopupMostradaMutation,
} from "../../tanstack/AlertasEmpresaStack";
import { AlertaEmpresaItem } from "./AlertaEmpresaItem";
import { CRITICIDAD_ALERTA } from "./enums";

const STORAGE_KEY = "alertas_popup_mostradas";

const leerMostradas = () => {
  try {
    return new Set(JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "[]"));
  } catch {
    return new Set();
  }
};

const guardarMostradas = (set) => {
  try {
    sessionStorage.setItem(STORAGE_KEY, JSON.stringify([...set]));
  } catch {
    // Sin storage (modo privado): el popup puede volver a aparecer, no es grave.
  }
};

/**
 * Popup de alertas de criticidad alta: se muestra una vez por sesión por alerta
 * hasta que el usuario las marca como leídas. Asegura que una inconsistencia
 * grave no quede escondida en la campana.
 */
export const AlertasCriticasPopup = () => {
  const { data: alertas = [] } = useAlertasEmpresaQuery();
  const marcarPopup = useMarcarPopupMostradaMutation();
  const marcarLeida = useMarcarAlertaLeidaMutation();
  const [visibles, setVisibles] = useState([]);
  // Estado (no ref): al cerrar el popup `pendientes` tiene que recalcularse sin
  // esas alertas; con un ref no cambiaba y el efecto lo volvía a abrir.
  const [mostradas, setMostradas] = useState(leerMostradas);

  const pendientes = useMemo(
    () =>
      alertas.filter((a) => a.criticidad === CRITICIDAD_ALERTA.ALTA.value && !a.leida && !mostradas.has(a.id)),
    [alertas, mostradas],
  );

  useEffect(() => {
    if (visibles.length > 0 || pendientes.length === 0) return;
    const nuevas = new Set([...mostradas, ...pendientes.map((a) => a.id)]);
    guardarMostradas(nuevas);
    setMostradas(nuevas);
    setVisibles(pendientes);
    marcarPopup.mutate(pendientes.map((a) => a.id));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pendientes, visibles.length]);

  if (visibles.length === 0) return null;

  const cerrar = () => setVisibles([]);
  const entendido = () => {
    visibles.forEach((a) => marcarLeida.mutate(a.id));
    cerrar();
  };

  return (
    <Dialog open onClose={cerrar} maxWidth="sm" fullWidth>
      <DialogTitle sx={{ display: "flex", alignItems: "center", gap: 1 }}>
        <Box component="span" sx={{ color: "error.main", display: "flex" }}>
          <Icon icon={CRITICIDAD_ALERTA.ALTA.icon} width={24} />
        </Box>
        {visibles.length === 1 ? "Hay una alerta que requiere atención" : `Hay ${visibles.length} alertas que requieren atención`}
      </DialogTitle>
      <DialogContent>
        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
          También las encontrás en la campana del menú.
        </Typography>
        <Box sx={{ display: "grid", gap: 1 }}>
          {visibles.map((a) => (
            <AlertaEmpresaItem key={a.id} alerta={a} onIr={cerrar} />
          ))}
        </Box>
      </DialogContent>
      <DialogActions>
        <Button onClick={cerrar}>Recordarme después</Button>
        <Button variant="contained" onClick={entendido}>Entendido</Button>
      </DialogActions>
    </Dialog>
  );
};