freezmo/components/InstallSheet.tsx

"use client";

import { AnimatePresence, motion, useDragControls, useReducedMotion } from "framer-motion";
import { useCallback, useEffect, useState } from "react";

import {
  AddToHomeIcon,
  ChevronDownIcon,
  ChromeIcon,
  CompassIcon,
  DownloadIcon,
  EllipsisIcon,
  PlusIcon,
  ShareIcon,
  XIcon,
} from "@/components/icons";
import { Spinner } from "@/components/ui";
import {
  detectBrowser,
  detectPlatform,
  dismissInstallPrompt,
  INSTALL_PROMPT_EVENT,
  INSTALLED_EVENT,
  installSheetTheme,
  isDismissed,
  isInstalled,
  isStandalone,
  markInstalled,
  OPEN_INSTALL_EVENT,
  type BeforeInstallPromptEvent,
  type InstallBrowser,
  type InstallPlatform,
} from "@/lib/install";
import { cn } from "@/lib/utils";

type SheetInfo = {
  platform: InstallPlatform;
  browser: InstallBrowser;
  theme: "dark" | "light";
};

/**
 * "Install the app" bottom sheet. Mounted once in the root layout so it can
 * appear over any screen (including the API-key gate) about a second after
 * load. Phones/tablets only, never when already installed, and at most once
 * per 7 days after a dismissal. Closing it leaves the site exactly as it was.
 */
export function InstallSheet() {
  const [info, setInfo] = useState<SheetInfo | null>(null);
  const [open, setOpen] = useState(false);
  const [promptEvent, setPromptEvent] = useState<BeforeInstallPromptEvent | null>(null);
  const [installing, setInstalling] = useState(false);
  const dragControls = useDragControls();
  const reduceMotion = useReducedMotion();
  const domain = typeof window === "undefined" ? "" : window.location.hostname;

  /** Everything needed to render the sheet, or null if it shouldn't appear. */
  const prepare = useCallback((): SheetInfo | null => {
    const platform = detectPlatform();
    if (platform === "other" || isInstalled()) return null;
    return { platform, browser: detectBrowser(platform), theme: installSheetTheme() };
  }, []);

  // Automatic prompt: about a second after load, unless dismissed recently.
  useEffect(() => {
    if (isStandalone()) {
      markInstalled();
      return;
    }
    const next = prepare();
    if (!next || isDismissed()) return;
    const timer = window.setTimeout(() => {
      setInfo(next);
      setOpen(true);
    }, 1000);
    return () => window.clearTimeout(timer);
  }, [prepare]);

  // Manual open from the Settings row (ignores the 7-day window).
  useEffect(() => {
    const onOpen = () => {
      const next = prepare();
      if (!next) return;
      setInfo(next);
      setOpen(true);
    };
    window.addEventListener(OPEN_INSTALL_EVENT, onOpen);
    return () => window.removeEventListener(OPEN_INSTALL_EVENT, onOpen);
  }, [prepare]);

  // Chrome's deferred install prompt + the "installed" signal.
  useEffect(() => {
    const sync = () => setPromptEvent(window.__freezmoInstallPrompt ?? null);
    const onInstalled = () => {
      markInstalled();
      setPromptEvent(null);
      setInstalling(false);
      setOpen(false);
    };
    window.addEventListener(INSTALL_PROMPT_EVENT, sync);
    window.addEventListener(INSTALLED_EVENT, onInstalled);
    window.addEventListener("appinstalled", onInstalled);
    sync();
    return () => {
      window.removeEventListener(INSTALL_PROMPT_EVENT, sync);
      window.removeEventListener(INSTALLED_EVENT, onInstalled);
      window.removeEventListener("appinstalled", onInstalled);
    };
  }, []);

  const close = useCallback(() => {
    dismissInstallPrompt();
    setOpen(false);
    setInstalling(false);
  }, []);

  // Escape closes, like every other sheet in the app.
  useEffect(() => {
    if (!open) return;
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") close();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, close]);

  const runPrompt = async () => {
    if (!promptEvent || installing) return;
    setInstalling(true);
    try {
      await promptEvent.prompt();
      const choice = await promptEvent.userChoice;
      if (choice.outcome === "accepted") {
        markInstalled();
        setOpen(false);
        setInstalling(false);
        return;
      }
    } catch {
      /* the native prompt can fail; the steps below still work */
    }
    setInstalling(false);
  };

  // The exact iOS flow: Safari users skip the "open in Safari" step entirely.
  const steps: React.ReactNode[] = [];
  if (info?.platform === "ios") {
    if (info.browser !== "safari") {
      steps.push(
        <>
          Open this page in <Chip icon={<CompassIcon className="size-4" />}>Safari</Chip>
        </>,
      );
    }
    steps.push(
      <>
        Tap <IconChip icon={<EllipsisIcon className="size-4" />} label="More options" /> in the
        browser bar
      </>,
    );
    steps.push(
      <>
        Tap <Chip icon={<ShareIcon className="size-4" />}>Share</Chip>, then{" "}
        <Chip icon={<ChevronDownIcon className="size-4" />}>More</Chip>
      </>,
    );
    steps.push(
      <>
        Choose <Chip icon={<AddToHomeIcon className="size-4" />}>Add to Home Screen</Chip>
      </>,
    );
    steps.push(
      <>
        Tap <AccentPill icon={<PlusIcon className="size-4" />}>Add</AccentPill> to confirm
      </>,
    );
  } else if (info?.platform === "android") {
    if (info.browser !== "chrome") {
      steps.push(
        <>
          Open this page in <Chip icon={<ChromeIcon className="size-4" />}>Chrome</Chip>
        </>,
      );
    }
    steps.push(
      <>
        Tap <IconChip icon={<EllipsisIcon className="size-4" />} label="More options" /> in the top
        right of the browser
      </>,
    );
    steps.push(
      <>
        Choose <Chip icon={<DownloadIcon className="size-4" />}>Install app</Chip> or{" "}
        <Chip icon={<AddToHomeIcon className="size-4" />}>Add to Home screen</Chip>
      </>,
    );
    steps.push(
      <>
        Tap <AccentPill icon={<DownloadIcon className="size-4" />}>Install</AccentPill> to confirm
      </>,
    );
  }

  const showNativePrompt = info?.platform === "android" && Boolean(promptEvent);

  return (
    // The sheet is dark by default; only an explicit light choice in the app
    // switches the palette (the wrapper scopes the app's .dark tokens).
    <div className={info?.theme === "light" ? undefined : "dark"}>
      <AnimatePresence>
        {open && info ? (
          <div className="fixed inset-x-0 top-0 z-[60] h-dvh">
            <motion.div
              aria-hidden
              onClick={close}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.25 }}
              className="absolute inset-0 bg-black/50 backdrop-blur-[4px]"
            />
            <motion.div
              role="dialog"
              aria-modal="true"
              aria-labelledby="install-sheet-title"
              drag="y"
              dragControls={dragControls}
              dragListener={false}
              dragMomentum={false}
              dragConstraints={{ top: 0, bottom: 0 }}
              dragElastic={{ top: 0, bottom: 0.55 }}
              onDragEnd={(_, gesture) => {
                if (gesture.offset.y > 90 || gesture.delta.y > 140 || gesture.velocity.y > 700) close();
              }}
              initial={reduceMotion ? { opacity: 0 } : { y: "100%" }}
              animate={reduceMotion ? { opacity: 1 } : { y: 0 }}
              exit={reduceMotion ? { opacity: 0 } : { y: "100%" }}
              transition={{ duration: 0.34, ease: [0.22, 1, 0.36, 1] }}
              className="absolute inset-x-0 bottom-0 mx-auto w-full rounded-t-[28px] border border-b-0 border-[var(--install-border)] bg-[var(--install-sheet)] shadow-[0_-20px_60px_-28px_rgb(0_0_0/0.5)] sm:max-w-xl"
            >
              <div className="thin-scroll max-h-[90dvh] overflow-y-auto px-5 pt-2 pb-[calc(24px+env(safe-area-inset-bottom))]">
                <div
                  aria-hidden
                  onPointerDown={(event) => dragControls.start(event)}
                  className="mx-auto flex h-6 w-full cursor-grab touch-none items-center justify-center active:cursor-grabbing"
                >
                  <span className="h-1 w-9 rounded-full bg-[var(--text-subtle)] opacity-40" />
                </div>

                <div className="flex items-center justify-between gap-4">
                  <h2
                    id="install-sheet-title"
                    className="text-[17px] font-semibold tracking-[-0.01em] text-[var(--text)]"
                  >
                    {info.platform === "ios"
                      ? "Install Freezmo on iPhone"
                      : "Install Freezmo on Android"}
                  </h2>
                  <button
                    type="button"
                    onClick={close}
                    aria-label="Close"
                    className="grid size-10 shrink-0 place-items-center rounded-full text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
                  >
                    <XIcon className="size-[18px]" />
                  </button>
                </div>

                {/* app card */}
                <div className="mt-1 flex items-center gap-3 rounded-2xl border border-[var(--install-border)] bg-[var(--install-card)] p-3">
                  {/* eslint-disable-next-line @next/next/no-img-element -- static app icon, no optimisation needed */}
                  <img
                    src="/icons/icon-192.png"
                    alt=""
                    aria-hidden
                    className="size-11 shrink-0 rounded-[11px]"
                  />
                  <span className="min-w-0">
                    <span className="block text-[15px] font-semibold leading-tight text-[var(--text)]">
                      Freezmo
                    </span>
                    <span className="block truncate text-[13px] text-[var(--text-subtle)]">
                      {domain}
                    </span>
                  </span>
                </div>

                {showNativePrompt ? (
                  <button
                    type="button"
                    onClick={() => void runPrompt()}
                    disabled={installing}
                    className="btn-primary mt-4 h-12 w-full rounded-[14px] text-[15px] font-medium disabled:cursor-not-allowed disabled:opacity-60"
                  >
                    {installing ? (
                      <>
                        <Spinner className="size-4" /> Installing…
                      </>
                    ) : (
                      <>
                        <DownloadIcon className="size-4" /> Install
                      </>
                    )}
                  </button>
                ) : null}

                {showNativePrompt ? (
                  <p className="mt-4 text-center text-[12px] text-[var(--text-subtle)]">
                    Or install manually:
                  </p>
                ) : null}

                <ol className={cn("space-y-4", showNativePrompt ? "mt-3" : "mt-5")}>
                  {steps.map((step, index) => (
                    <li key={index} className="grid grid-cols-[24px_1fr] items-start gap-3">
                      <span
                        aria-hidden
                        className="grid size-6 place-items-center rounded-full border border-[var(--install-border)] text-[11.5px] font-medium tabular-nums text-[var(--text-subtle)]"
                      >
                        {index + 1}
                      </span>
                      <span className="text-[16px] leading-6 text-[var(--text-muted)]">{step}</span>
                    </li>
                  ))}
                </ol>

                <button
                  type="button"
                  onClick={close}
                  className="mt-6 w-full rounded-[14px] py-3 text-center text-[15px] font-medium text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
                >
                  Maybe later
                </button>
              </div>
            </motion.div>
          </div>
        ) : null}
      </AnimatePresence>
    </div>
  );
}

/** Small pill for a UI element the user has to tap. */
function Chip({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
  return (
    <span className="mx-0.5 inline-flex items-center gap-1.5 rounded-full border border-[var(--install-border)] bg-[var(--install-chip)] px-2.5 py-1 align-middle text-[16px] font-medium leading-none text-[var(--text)]">
      <span aria-hidden>{icon}</span>
      {children}
    </span>
  );
}

/** Icon-only pill, for buttons that are just a glyph (the ⋯ menu). */
function IconChip({ icon, label }: { icon: React.ReactNode; label: string }) {
  return (
    <span
      role="img"
      aria-label={label}
      className="mx-0.5 inline-flex items-center rounded-full border border-[var(--install-border)] bg-[var(--install-chip)] px-2.5 py-1 align-middle text-[var(--text)]"
    >
      <span aria-hidden>{icon}</span>
    </span>
  );
}

/** The one coloured element: the final confirmation button (iOS blue). */
function AccentPill({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
  return (
    <span className="mx-0.5 inline-flex items-center gap-1.5 rounded-full bg-[#007AFF] px-3 py-1 align-middle text-[16px] font-medium leading-none text-white dark:bg-[#0A84FF]">
      <span aria-hidden>{icon}</span>
      {children}
    </span>
  );
}