famapp/src/components/install-prompt.tsx

"use client";

import { useEffect, useState } from "react";
import { X, Share, Plus } from "lucide-react";

const DISMISSED_KEY = "pwa-install-dismissed";

type Prompt = "android" | "ios";

function isIos() {
  return (
    /iphone|ipad|ipod/i.test(navigator.userAgent) ||
    // iPad on iOS 13+ reports as Mac
    (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)
  );
}

function isInStandaloneMode() {
  return (
    "standalone" in window.navigator &&
    (window.navigator as { standalone?: boolean }).standalone === true
  );
}

export function InstallPrompt() {
  const [prompt, setPrompt] = useState<Prompt | null>(null);
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const [deferredEvent, setDeferredEvent] = useState<any>(null);

  useEffect(() => {
    if (localStorage.getItem(DISMISSED_KEY)) return;

    // Android / Chrome desktop — beforeinstallprompt fires
    const handler = (e: Event) => {
      e.preventDefault();
      setDeferredEvent(e);
      setPrompt("android");
    };
    window.addEventListener("beforeinstallprompt", handler);

    // iOS — no beforeinstallprompt; defer setState out of the synchronous
    // effect body to satisfy react-hooks/set-state-in-effect.
    let iosTimer: ReturnType<typeof setTimeout> | undefined;
    if (isIos() && !isInStandaloneMode()) {
      iosTimer = setTimeout(() => setPrompt("ios"), 0);
    }

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

  function dismiss() {
    localStorage.setItem(DISMISSED_KEY, "1");
    setPrompt(null);
  }

  async function install() {
    if (!deferredEvent) return;
    deferredEvent.prompt();
    const { outcome } = await deferredEvent.userChoice;
    if (outcome === "accepted" || outcome === "dismissed") {
      dismiss();
    }
  }

  if (!prompt) return null;

  return (
    <div
      role="banner"
      className="fixed bottom-0 left-0 right-0 z-50 flex items-start gap-3 border-t bg-background px-4 py-3 shadow-lg sm:bottom-4 sm:left-1/2 sm:right-auto sm:-translate-x-1/2 sm:rounded-xl sm:border sm:px-5 sm:py-4 sm:shadow-xl"
    >
      {/* App icon */}
      <div className="mt-0.5 h-10 w-10 shrink-0 overflow-hidden rounded-xl bg-[#4F46E5]">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src="/icon-192.png" alt="" className="h-full w-full object-cover" />
      </div>

      <div className="flex-1 text-sm">
        <p className="font-semibold leading-snug">Add famapp to your home screen</p>

        {prompt === "android" && (
          <>
            <p className="mt-0.5 text-muted-foreground">
              Install for a faster, app-like experience.
            </p>
            <button
              onClick={install}
              className="mt-2 rounded-md bg-[#4F46E5] px-3 py-1.5 text-xs font-semibold text-white"
            >
              Install
            </button>
          </>
        )}

        {prompt === "ios" && (
          <p className="mt-0.5 text-muted-foreground">
            Tap{" "}
            <Share
              className="inline-block h-4 w-4 align-text-bottom"
              aria-label="Share"
            />{" "}
            then{" "}
            <strong className="font-medium">
              <Plus className="inline-block h-3.5 w-3.5 align-text-bottom" />
              &nbsp;Add to Home Screen
            </strong>
            .
          </p>
        )}
      </div>

      <button
        onClick={dismiss}
        aria-label="Dismiss"
        className="mt-0.5 shrink-0 rounded p-1 text-muted-foreground hover:bg-muted"
      >
        <X className="h-4 w-4" />
      </button>
    </div>
  );
}