import React, { useState, useEffect } from "react";
import { Icon } from "@iconify/react";

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

export const InstallPrompt: React.FC = () => {
  const [deferredPrompt, setDeferredPrompt] =
    useState<BeforeInstallPromptEvent | null>(null);
  const [showPrompt, setShowPrompt] = useState(false);

  useEffect(() => {
    const handler = (e: Event) => {
      e.preventDefault();
      
      // Проверяем, не установлено ли приложение уже
      if (window.matchMedia("(display-mode: standalone)").matches) {
        return;
      }

      // Проверяем, не закрывал ли пользователь промпт недавно
      const dismissedDate = localStorage.getItem("pwa-install-dismissed");
      if (dismissedDate) {
        const dismissalTime = new Date(dismissedDate).getTime();
        const currentTime = new Date().getTime();
        const weekInMs = 7 * 24 * 60 * 60 * 1000; // 7 дней в миллисекундах
        
        // Если прошло менее недели, не показываем промпт
        if (currentTime - dismissalTime < weekInMs) {
          return;
        }
      }

      // Сохраняем событие и показываем промпт
      setDeferredPrompt(e as BeforeInstallPromptEvent);
      setTimeout(() => setShowPrompt(true), 2000);
    };

    window.addEventListener("beforeinstallprompt", handler);

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

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

    deferredPrompt.prompt();
    const { outcome } = await deferredPrompt.userChoice;

    if (outcome === "accepted") {
      console.log("Пользователь принял предложение об установке");
      // При установке тоже скрываем на неделю
      const dismissalDate = new Date().toISOString();
      localStorage.setItem("pwa-install-dismissed", dismissalDate);
    } else {
      console.log("Пользователь отклонил предложение об установке");
    }

    setDeferredPrompt(null);
    setShowPrompt(false);
  };

  const handleDismiss = () => {
    setShowPrompt(false);
    // Сохраняем в localStorage дату закрытия промпта
    const dismissalDate = new Date().toISOString();
    localStorage.setItem("pwa-install-dismissed", dismissalDate);
  };

  if (!showPrompt || !deferredPrompt) {
    return null;
  }

  return (
    <div
      style={{
        position: "fixed",
        bottom: "20px",
        left: "50%",
        transform: "translateX(-50%)",
        backgroundColor: "var(--bg-primary)",
        border: "1px solid var(--border-primary)",
        borderRadius: "12px",
        padding: "16px 20px",
        boxShadow: "0 4px 20px var(--shadow-light)",
        zIndex: 1000,
        maxWidth: "90%",
        width: "400px",
        display: "flex",
        alignItems: "center",
        gap: "12px",
      }}
    >
      <div
        style={{
          flex: 1,
          display: "flex",
          flexDirection: "column",
          gap: "4px",
        }}
      >
        <div
          style={{
            fontWeight: 600,
            fontSize: "14px",
            color: "var(--text-primary)",
          }}
        >
          Установить NoteJS?
        </div>
        <div
          style={{
            fontSize: "12px",
            color: "var(--text-primary)",
            opacity: 0.7,
          }}
        >
          Установите приложение для быстрого доступа
        </div>
      </div>
      <div style={{ display: "flex", gap: "8px" }}>
        <button
          onClick={handleInstallClick}
          style={{
            padding: "8px 16px",
            backgroundColor: "var(--accent-color)",
            color: "white",
            border: "none",
            borderRadius: "8px",
            cursor: "pointer",
            fontSize: "14px",
            fontWeight: 500,
            display: "flex",
            alignItems: "center",
            gap: "6px",
          }}
        >
          <Icon icon="mdi:download" width="18" height="18" />
          Установить
        </button>
        <button
          onClick={handleDismiss}
          style={{
            padding: "8px",
            backgroundColor: "transparent",
            color: "var(--text-primary)",
            border: "none",
            borderRadius: "8px",
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            opacity: 0.6,
          }}
          aria-label="Закрыть"
        >
          <Icon icon="mdi:close" width="20" height="20" />
        </button>
      </div>
    </div>
  );
};

