"use client";

import { useEffect, useState } from "react";
import api from "@/lib/api";
import { Download } from "lucide-react";

export default function PwaInstallPrompt() {
  const [deferredPrompt, setDeferredPrompt] = useState<any>(null);
  const [settings, setSettings] = useState<any>(null);
  const [show, setShow] = useState(false);

  const isStandalone = () => {
    return (
      window.matchMedia("(display-mode: standalone)").matches ||
      (window.navigator as any).standalone === true
    );
  };

  useEffect(() => {
    if (isStandalone()) {
      localStorage.setItem("pwa_installed", "true");
      setShow(false);
      return;
    }

    fetchSettings();

    const beforeInstallHandler = (event: any) => {
      event.preventDefault();
      setDeferredPrompt(event);

      if (
        !localStorage.getItem("pwa_install_dismissed") &&
        !localStorage.getItem("pwa_installed")
      ) {
        setShow(true);
      }
    };

    const installedHandler = () => {
      localStorage.setItem("pwa_installed", "true");
      localStorage.removeItem("pwa_install_dismissed");
      setShow(false);
      setDeferredPrompt(null);
    };

    window.addEventListener("beforeinstallprompt", beforeInstallHandler);
    window.addEventListener("appinstalled", installedHandler);

    return () => {
      window.removeEventListener("beforeinstallprompt", beforeInstallHandler);
      window.removeEventListener("appinstalled", installedHandler);
    };
  }, []);

  const fetchSettings = async () => {
    try {
      if (
        localStorage.getItem("pwa_installed") ||
        localStorage.getItem("pwa_install_dismissed")
      ) {
        return;
      }

      const res = await api.get("/pwa-settings");

      if (res.data.success && res.data.data?.status) {
        setSettings(res.data.data);

        if (!isStandalone()) {
          setShow(true);
        }
      }
    } catch (error) {
      console.error(error);
    }
  };

  const installApp = async () => {
    if (!deferredPrompt) {
      return;
    }

    deferredPrompt.prompt();

    const result = await deferredPrompt.userChoice;

    if (result.outcome === "accepted") {
      localStorage.setItem("pwa_installed", "true");
      setShow(false);
      setDeferredPrompt(null);
    }
  };

  const dismiss = () => {
    localStorage.setItem("pwa_install_dismissed", "true");
    setShow(false);
  };

  if (!show || !settings) return null;

  return (
    <div className="fixed right-5 bottom-5 z-[9999] w-[390px] max-w-[calc(100vw-2rem)]">
      <div className="relative overflow-hidden rounded-2xl bg-white border border-slate-200 shadow-2xl p-5">
        <div className="absolute -top-16 -right-12 w-32 h-32 rounded-full bg-green-50" />

        <div className="relative flex items-center gap-4">
          <div className="w-16 h-16 rounded-2xl bg-green-50 text-green-500 flex items-center justify-center shrink-0">
            {settings.app_icon ? (
              <img
                src={settings.app_icon}
                alt={settings.app_name}
                className="w-10 h-10 object-contain"
              />
            ) : (
              <Download size={28} />
            )}
          </div>

          <div className="flex-1 min-w-0">
            <h3 className="font-black text-slate-900 text-lg leading-tight">
              Install {settings.short_name || settings.app_name}
            </h3>

            <p className="text-slate-500 text-sm leading-5 mt-1">
              Get the best shopping experience on your home screen.
            </p>
          </div>

          <div className="flex flex-col items-end gap-3 shrink-0">
            <button
              onClick={installApp}
              className="bg-green-500 hover:bg-green-600 text-white px-5 py-2.5 rounded-xl font-black text-sm shadow-lg shadow-green-100 transition"
            >
              Install
            </button>

            <button
              onClick={dismiss}
              className="text-xs font-bold text-slate-400 hover:text-slate-600"
            >
              Dismiss
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}