import { assetUrl } from "@/lib/asset";
import { useEffect, useState } from "react";

/**
 * InstallPrompt — botão próprio de instalação do PWA.
 *
 * Captura o evento beforeinstallprompt (Chrome/Edge/Android) e mostra um
 * botão com a identidade visual do site, em vez de depender do banner
 * automático do navegador (que é genérico e alguns navegadores nem mostram
 * sozinhos).
 *
 * Safari iOS não dispara beforeinstallprompt — lá a instalação continua
 * sendo manual (Compartilhar → Adicionar à Tela de Início), não tem como
 * automatizar isso.
 */

type BeforeInstallPromptEvent = Event & {
  prompt: () => Promise<void>;
  userChoice: Promise<{ outcome: "accepted" | "dismissed" }>;
};

const DISMISS_KEY = "sof-instalar-dispensado";

export default function InstallPrompt() {
  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const jaDispensado = window.localStorage.getItem(DISMISS_KEY) === "1";
    if (jaDispensado) return;

    const handler = (e: Event) => {
      e.preventDefault();
      setDeferredPrompt(e as BeforeInstallPromptEvent);
      setVisible(true);
    };

    window.addEventListener("beforeinstallprompt", handler);
    return () => window.removeEventListener("beforeinstallprompt", handler);
  }, []);

  const handleInstall = async () => {
    if (!deferredPrompt) return;
    await deferredPrompt.prompt();
    await deferredPrompt.userChoice;
    setDeferredPrompt(null);
    setVisible(false);
  };

  const handleDismiss = () => {
    window.localStorage.setItem(DISMISS_KEY, "1");
    setVisible(false);
  };

  if (!visible) return null;

  return (
    <div
      className="
        fixed
        bottom-20
        lg:bottom-6
        left-1/2
        -translate-x-1/2
        z-50
        w-[calc(100%-2rem)]
        max-w-sm
        rounded-2xl
        border
        border-white/10
        bg-sof-borgonha-light
        px-5
        py-4
        shadow-2xl
        flex
        items-center
        gap-4
      "
      role="status"
    >
      <img src={assetUrl("/icons/icon-192.png")} alt="" className="w-10 h-10 rounded-xl flex-shrink-0" />
      <div className="flex-1 min-w-0">
        <p className="text-sm font-bold text-sof-text truncate">Instalar o SpotOnFide</p>
        <p className="text-xs text-sof-text-3">Acesso rápido, sem abrir o navegador</p>
      </div>
      <button
        onClick={handleDismiss}
        className="text-sof-text-3 hover:text-sof-text text-sm flex-shrink-0"
      >
        Agora não
      </button>
      <button
        onClick={handleInstall}
        className="rounded-full bg-sof-gold px-4 py-1.5 text-sm font-bold text-sof-borgonha hover:bg-sof-gold-light transition-colors flex-shrink-0"
      >
        Instalar
      </button>
    </div>
  );
}
