"use client";

import Image from "next/image";
import { usePwaInstall } from "@/hooks/usePwaInstall";
import { btnPrimary, btnDefault } from "@/lib/ui/buttonStyles";
import { cn } from "@/lib/utils";
import { useAppLanguage } from "@/contexts/LanguageProvider";
import { getPwaLabels, toPwaLang } from "@/lib/pwaConfig";

export default function PwaInstallPrompt() {
  const { visible, installing, isIos, canNativeInstall, install, close } =
    usePwaInstall();
  const { language } = useAppLanguage();
  const labels = getPwaLabels(toPwaLang(language));

  if (!visible) return null;

  return (
    <>
      <div
        className="glass-modal-overlay fixed inset-0 z-[300]"
        aria-hidden
        onClick={() => close(true)}
      />
      <div
        role="dialog"
        aria-labelledby="pwa-install-title"
        aria-describedby="pwa-install-desc"
        className="glass-modal-panel glass-modal-panel--sheet fixed bottom-0 left-0 right-0 z-[301] mx-auto max-w-xl p-5 pb-[calc(1.25rem+env(safe-area-inset-bottom))] shadow-2xl"
        dir={labels.dir}
      >
        <div className="mb-4 flex items-start gap-3">
          <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-2xl bg-white shadow-md">
            <Image
              src="/images/icons/256x256.png"
              alt={labels.short_name}
              fill
              className="object-contain p-1"
              priority
            />
          </div>
          <div className="min-w-0 flex-1 pt-0.5">
            <h2
              id="pwa-install-title"
              className="text-base font-bold leading-snug"
            >
              {labels.installTitle}
            </h2>
            <p
              id="pwa-install-desc"
              className="mt-1 text-xs leading-relaxed text-neutral-600 dark:text-neutral-300"
            >
              {labels.installDescription}
            </p>
          </div>
          <button
            type="button"
            onClick={() => close(true)}
            className="shrink-0 rounded-full px-2 py-1 text-lg leading-none text-neutral-500 hover:bg-black/5 dark:hover:bg-white/10"
            aria-label={labels.close}
          >
            ×
          </button>
        </div>

        {isIos ? (
          <ol
            className={cn(
              "mb-4 list-decimal space-y-1.5 text-xs leading-relaxed text-neutral-700 dark:text-neutral-200",
              labels.dir === "rtl" ? "pr-5" : "pl-5"
            )}
          >
            {labels.iosSteps.map((step) => (
              <li key={step}>{step}</li>
            ))}
          </ol>
        ) : null}

        <div
          className={cn(
            "flex flex-col gap-2 sm:flex-row",
            labels.dir === "rtl" ? "sm:flex-row-reverse" : ""
          )}
        >
          {canNativeInstall ? (
            <button
              type="button"
              disabled={installing}
              onClick={() => void install()}
              className={cn(
                btnPrimary,
                "w-full px-4 py-3 text-sm font-bold disabled:opacity-60"
              )}
            >
              {installing ? labels.installing : labels.installButton}
            </button>
          ) : (
            <button
              type="button"
              onClick={() => close(false)}
              className={cn(btnPrimary, "w-full px-4 py-3 text-sm font-bold")}
            >
              {isIos ? labels.gotIt : labels.ok}
            </button>
          )}
          <button
            type="button"
            onClick={() => close(true)}
            className={cn(btnDefault, "w-full px-4 py-3 text-sm font-semibold")}
          >
            {labels.later}
          </button>
        </div>
      </div>
    </>
  );
}
