// ============================================================
// notifications.jsx — Campana de notificaciones  (v2.5)
// ============================================================
// Antes la campana solo marcaba todo como leído, sin enseñar nada: el
// usuario que seguía una sección nunca veía los avisos de subidas, y se
// perdían los de "Nuevo acceso detectado" y las alertas de descargas
// masivas para los administradores. Además el contador solo se calculaba
// al entrar.
//
// La usan el Acervo (dashboard.jsx) y Administración (admin.jsx):
//   <NotificationsBell/>
// ============================================================

const NOTIF_POLL_MS      = 120000;          // contador: cada 2 min
const NOTIF_ACTIVIDAD_MS = 10 * 60 * 1000;  // …solo si hubo actividad en los últimos 10 min

function fechaNotificacion(valor) {
  if (!valor) return "";
  const d = new Date(String(valor).replace(" ", "T"));
  if (isNaN(d.getTime())) return "";
  return d.toLocaleString("es-MX", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" });
}

function NotificationsBell() {
  const [abierto, setAbierto]   = React.useState(false);
  const [noLeidas, setNoLeidas] = React.useState(0);
  const [lista, setLista]       = React.useState(null);   // null = sin cargar
  const [cargando, setCargando] = React.useState(false);
  const [error, setError]       = React.useState(null);
  const caja = React.useRef(null);

  const contar = React.useCallback(function () {
    return API.Notifications.list(true)
      .then(function (r) { setNoLeidas((r && r.unread_count) || 0); })
      .catch(function () {});
  }, []);

  // Contador: al montar, al volver a la pestaña y cada 2 minutos. Sin
  // actividad reciente no se consulta: cada consulta mantiene viva la sesión
  // en el servidor y no debe impedir el cierre por inactividad.
  React.useEffect(() => {
    contar();
    const id = setInterval(function () {
      if (document.visibilityState !== "visible") return;
      let ultima = 0;
      try { ultima = parseInt(localStorage.getItem("bib_last_activity") || "0", 10) || 0; } catch (e) {}
      if (Date.now() - ultima > NOTIF_ACTIVIDAD_MS) return;
      contar();
    }, NOTIF_POLL_MS);
    const alVolver = function () { if (document.visibilityState === "visible") contar(); };
    document.addEventListener("visibilitychange", alVolver);
    return function () {
      clearInterval(id);
      document.removeEventListener("visibilitychange", alVolver);
    };
  }, [contar]);

  const cargar = function () {
    setCargando(true);
    setError(null);
    API.Notifications.list(false)
      .then(function (r) {
        setLista((r && r.data) || []);
        setNoLeidas((r && r.unread_count) || 0);
      })
      .catch(function (e) { setError((e && e.message) || "No se pudieron cargar las notificaciones."); })
      .finally(function () { setCargando(false); });
  };

  const alternar = function () {
    const nuevo = !abierto;
    setAbierto(nuevo);
    if (nuevo) cargar();
  };

  // Cerrar con un clic fuera o con Escape
  React.useEffect(() => {
    if (!abierto) return;
    const fuera = function (e) { if (caja.current && !caja.current.contains(e.target)) setAbierto(false); };
    const esc   = function (e) { if (e.key === "Escape") setAbierto(false); };
    document.addEventListener("mousedown", fuera);
    document.addEventListener("keydown", esc);
    return function () {
      document.removeEventListener("mousedown", fuera);
      document.removeEventListener("keydown", esc);
    };
  }, [abierto]);

  const marcarLeida = function (n) {
    if (n.read) return;
    setLista(function (prev) {
      return (prev || []).map(function (x) { return x.id === n.id ? Object.assign({}, x, { read: true }) : x; });
    });
    setNoLeidas(function (c) { return Math.max(0, c - 1); });
    API.Notifications.read(n.id).catch(function () { cargar(); });
  };

  const marcarTodas = function () {
    setLista(function (prev) {
      return (prev || []).map(function (x) { return Object.assign({}, x, { read: true }); });
    });
    setNoLeidas(0);
    API.Notifications.readAll().catch(function () { cargar(); });
  };

  const titulo = noLeidas > 0
    ? noLeidas + (noLeidas === 1 ? " notificación sin leer" : " notificaciones sin leer")
    : "Notificaciones";

  return (
    <div ref={caja} style={{position: "relative", display: "inline-flex"}}>
      <button type="button" className="icon-btn" title={titulo} aria-label={titulo}
        aria-expanded={abierto} onClick={alternar} style={{position: "relative"}}>
        <Icon name="bell" size={17}/>
        {noLeidas > 0 && (
          <span style={{position: "absolute", top: 1, right: 1, minWidth: 15, height: 15, padding: "0 4px",
            borderRadius: 8, background: "#EF4444", color: "#fff", fontSize: 9.5, fontWeight: 700,
            lineHeight: "15px", textAlign: "center", border: "1.5px solid var(--paper)", boxSizing: "content-box"}}>
            {noLeidas > 99 ? "99+" : noLeidas}
          </span>
        )}
      </button>

      {abierto && (
        <div role="dialog" aria-label="Notificaciones" style={{
          position: "absolute", top: "calc(100% + 8px)", right: 0, zIndex: 900,
          width: 360, maxWidth: "calc(100vw - 32px)", background: "var(--paper)",
          border: "1px solid var(--line, #E5E7EB)", borderRadius: 10,
          boxShadow: "0 12px 40px rgba(0,0,0,0.18)", overflow: "hidden",
        }}>
          <div style={{display: "flex", alignItems: "center", justifyContent: "space-between",
            padding: "12px 14px", borderBottom: "1px solid var(--line, #E5E7EB)"}}>
            <strong style={{fontSize: 13.5}}>Notificaciones</strong>
            {noLeidas > 0 && (
              <button type="button" className="btn ghost" onClick={marcarTodas}
                style={{fontSize: 12, padding: "4px 8px"}}>
                Marcar todas como leídas
              </button>
            )}
          </div>

          <div style={{maxHeight: 380, overflowY: "auto"}}>
            {cargando && lista === null && (
              <div style={{padding: 18, fontSize: 13, color: "var(--muted)"}}>Cargando…</div>
            )}

            {error && (
              <div style={{padding: 16, fontSize: 13, color: "#B91C1C", display: "flex",
                alignItems: "center", gap: 10, justifyContent: "space-between"}}>
                <span>{error}</span>
                <button type="button" className="btn ghost" onClick={cargar} style={{fontSize: 12, padding: "4px 8px"}}>
                  Reintentar
                </button>
              </div>
            )}

            {!error && lista && lista.length === 0 && (
              <div style={{padding: "26px 18px", fontSize: 13, color: "var(--muted)", textAlign: "center"}}>
                No tienes notificaciones.
              </div>
            )}

            {!error && lista && lista.map(function (n) {
              return (
                <button key={n.id} type="button" onClick={() => marcarLeida(n)}
                  title={n.read ? "" : "Marcar como leída"}
                  style={{display: "flex", gap: 10, width: "100%", textAlign: "left",
                    padding: "11px 14px", border: 0, borderBottom: "1px solid var(--line, #F3F4F6)",
                    background: n.read ? "transparent" : "var(--green-tint, #ECFDF5)",
                    cursor: n.read ? "default" : "pointer", font: "inherit", color: "inherit"}}>
                  <span style={{width: 7, height: 7, borderRadius: "50%", flexShrink: 0, marginTop: 6,
                    background: n.read ? "transparent" : (n.type === "warning" || n.type === "security" ? "#D97706" : "var(--green)")}}/>
                  <span style={{minWidth: 0, flex: 1}}>
                    <span style={{display: "block", fontSize: 13, fontWeight: n.read ? 500 : 650,
                      color: "var(--ink)", marginBottom: 2}}>{n.title}</span>
                    {n.body && (
                      <span style={{display: "block", fontSize: 12.5, color: "var(--muted)", lineHeight: 1.45,
                        whiteSpace: "pre-line", wordBreak: "break-word"}}>{n.body}</span>
                    )}
                    <span style={{display: "block", fontSize: 11, color: "var(--muted)", marginTop: 4}}>
                      {fechaNotificacion(n.created_at)}
                    </span>
                  </span>
                </button>
              );
            })}
          </div>

          {lista && lista.length >= 50 && (
            <div style={{padding: "8px 14px", fontSize: 11.5, color: "var(--muted)",
              borderTop: "1px solid var(--line, #E5E7EB)"}}>
              Se muestran las 50 más recientes.
            </div>
          )}
        </div>
      )}
    </div>
  );
}

window.NotificationsBell = NotificationsBell;