import { useState } from "react";
import { BellRing, Loader2, X } from "lucide-react";
import {
  ocultarBannerPush,
  suscribirTokenPush,
  useNotificacionesPush,
} from "@/lib/notificacionesService";
import { notificar } from "@/lib/notificaciones";

/** Banner discreto que invita al socio a activar las notificaciones push. */
export function BannerPush() {
  const { token, bannerOculto, permiso } = useNotificacionesPush();
  const [activando, setActivando] = useState(false);

  if (token || bannerOculto) return null;

  return (
    <section className="mb-5 grid gap-3 rounded-3xl border border-border bg-card p-4 shadow-soft sm:grid-cols-[auto_minmax(0,1fr)_auto] sm:items-center">
      <span className="grid size-11 shrink-0 place-items-center rounded-2xl bg-accent/60 text-primary">
        <BellRing className="size-5" />
      </span>
      <div className="min-w-0">
        <p className="break-words text-sm font-bold leading-tight">Activa las notificaciones de vuelos</p>
        <p className="break-words text-xs text-muted-foreground">
          Recibe avisos de reservas confirmadas, cambios por clima y promociones exclusivas.
        </p>
      </div>
      <div className="flex shrink-0 items-center gap-2">
        <button
          type="button"
          disabled={activando || permiso === "unsupported"}
          onClick={async () => {
            setActivando(true);
            const res = await suscribirTokenPush();
            setActivando(false);
            notificar(
              res.ok ? "Notificaciones activadas" : "No pudimos activarlas",
              res.ok
                ? "Registramos tu dispositivo para recibir avisos de vuelos."
                : res.motivo === "unsupported"
                  ? "Tu navegador no admite notificaciones."
                  : "Debes permitir las notificaciones en tu navegador.",
            );
          }}
          className="flex flex-1 items-center justify-center gap-2 rounded-2xl bg-primary px-4 py-3 text-sm font-bold text-primary-foreground transition-all hover:-translate-y-0.5 hover:shadow-lift active:scale-[0.99] disabled:opacity-60 sm:flex-none"
        >
          {activando && <Loader2 className="size-4 animate-spin" />}
          {activando ? "Activando…" : "Activar"}
        </button>
        <button
          type="button"
          onClick={ocultarBannerPush}
          aria-label="Descartar aviso"
          className="grid size-11 shrink-0 place-items-center rounded-2xl border border-border transition-colors hover:bg-muted"
        >
          <X className="size-4" />
        </button>
      </div>
    </section>
  );
}