"use client";

import { useEffect, useState } from "react";

import { ShareIcon } from "@/components/icons";

const DISMISS_KEY = "freezmo.installHintDismissed";

/**
 * iOS has no `beforeinstallprompt`, so the only way to explain installing the
 * PWA is to point at the Share sheet. Shown once, only in iOS Safari, only
 * outside standalone mode.
 */
export function InstallHint() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    try {
      if (window.localStorage.getItem(DISMISS_KEY) === "1") return;
      const ua = window.navigator.userAgent;
      const isIos = /iPad|iPhone|iPod/.test(ua) || (ua.includes("Macintosh") && "ontouchend" in document);
      const isSafari = /Safari/.test(ua) && !/CriOS|FxiOS|EdgiOS|OPiOS/.test(ua);
      const standalone =
        window.matchMedia("(display-mode: standalone)").matches ||
        (window.navigator as unknown as { standalone?: boolean }).standalone === true;
      if (isIos && isSafari && !standalone) setVisible(true);
    } catch {
      /* private mode */
    }
  }, []);

  if (!visible) return null;

  const dismiss = () => {
    setVisible(false);
    try {
      window.localStorage.setItem(DISMISS_KEY, "1");
    } catch {
      /* ignore */
    }
  };

  return (
    <div className="glass-panel animate-rise flex items-start gap-3 rounded-[1.35rem] p-3.5 text-sm">
      <ShareIcon className="mt-0.5 size-5 shrink-0 text-accent-600 dark:text-accent-300" />
      <div className="flex-1">
        <p className="font-semibold text-frost-950 dark:text-frost-50">Install Freezmo</p>
        <p className="text-frost-600 dark:text-frost-300">
          Tap <span className="font-medium">Share</span> then{" "}
          <span className="font-medium">Add to Home Screen</span> for a full-screen, app-like
          experience that works without the browser chrome.
        </p>
      </div>
      <button
        type="button"
        onClick={dismiss}
        aria-label="Dismiss install hint"
        className="rounded-lg px-2 py-1 text-frost-400 transition-colors hover:bg-[var(--surface-sunken)]"
      >
        ✕
      </button>
    </div>
  );
}