"use client";
import * as React from "react";
import { Download, Share, SquarePlus, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useLocalStorage, useMounted, useStandalone } from "@/lib/client/hooks";
import { cn } from "@/lib/utils";

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

function isIOS() {
  if (typeof navigator === "undefined") return false;
  const ua = navigator.userAgent;
  return /iPhone|iPad|iPod/.test(ua) || (ua.includes("Mac") && "ontouchend" in document);
}

/**
 * "Install PolyLLM" hint. Uses `beforeinstallprompt` where the browser supports it (Chromium,
 * Android) and shows the Share → Add to Home Screen tip on iOS Safari. Hidden when already
 * installed (standalone) or after the visitor dismisses it. Marketing only — Settings → Appearance
 * has its own hint.
 */
export function InstallHint({ className, compact }: { className?: string; compact?: boolean }) {
  const mounted = useMounted();
  const standalone = useStandalone();
  const [dismissed, setDismissed] = useLocalStorage<boolean>("polyllm:install-hint-dismissed", false);
  const [deferred, setDeferred] = React.useState<BeforeInstallPromptEvent | null>(null);
  const [installed, setInstalled] = React.useState(false);
  const [ios, setIos] = React.useState(false);

  React.useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setIos(isIOS());
    const onPrompt = (e: Event) => {
      e.preventDefault();
      setDeferred(e as BeforeInstallPromptEvent);
    };
    const onInstalled = () => setInstalled(true);
    window.addEventListener("beforeinstallprompt", onPrompt);
    window.addEventListener("appinstalled", onInstalled);
    return () => {
      window.removeEventListener("beforeinstallprompt", onPrompt);
      window.removeEventListener("appinstalled", onInstalled);
    };
  }, []);

  if (!mounted || standalone || dismissed || installed) return null;
  if (!deferred && !ios) return null;

  const install = async () => {
    if (!deferred) return;
    await deferred.prompt();
    const { outcome } = await deferred.userChoice;
    if (outcome === "accepted") setInstalled(true);
    setDeferred(null);
  };

  return (
    <div role="note" className={cn("relative flex items-start gap-3 rounded-2xl bg-bg-elevated p-4 shadow-xs ring-1 ring-border", compact && "p-3", className)}>
      <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent-soft text-accent">{deferred ? <Download className="size-4.5" /> : <SquarePlus className="size-4.5" />}</span>
      <div className="min-w-0 flex-1">
        <p className="text-[14px] font-semibold tracking-tight">Install PolyLLM</p>
        {deferred ? (
          <p className="mt-0.5 text-[13px] leading-5 text-fg-muted">Add it to your home screen or dock: it opens full-screen, remembers your session and feels like a native app.</p>
        ) : (
          <p className="mt-0.5 text-[13px] leading-5 text-fg-muted">
            In Safari, tap <Share className="mx-0.5 inline size-3.5 -translate-y-px" aria-label="Share" /> <span className="font-medium text-fg">Share</span>, then <span className="font-medium text-fg">Add to Home Screen</span>. PolyLLM opens full-screen with its own icon.
          </p>
        )}
        {deferred ? (
          <Button size="sm" className="mt-2.5 h-9 sm:h-8" onClick={install}>
            <Download /> Install
          </Button>
        ) : null}
      </div>
      <button type="button" onClick={() => setDismissed(true)} className="tap -mr-1 -mt-1 rounded-md p-1.5 text-fg-subtle transition-colors hover:bg-bg-muted hover:text-fg" aria-label="Dismiss install hint">
        <X className="size-4" />
      </button>
    </div>
  );
}