import { useState, useEffect } from "react";
import Modal from "./Modal";

export default function IosPromptModal() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    // Detect if user is on iOS or iPadOS
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || 
                  (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
    
    // Check if app is in standalone mode (already installed)
    const isStandalone = window.matchMedia('(display-mode: standalone)').matches || 
                          window.navigator.standalone;

    // Check if user has already dismissed it this session
    const isDismissed = sessionStorage.getItem("ios-prompt-dismissed");

    if (isIOS && !isStandalone && !isDismissed) {
      setShow(true);
    }
  }, []);

  if (!show) return null;

  const handleClose = () => {
    sessionStorage.setItem("ios-prompt-dismissed", "true");
    setShow(false);
  };

  return (
    <Modal 
      onClose={handleClose} 
      zIndex="z-[200]" 
      className="relative shadow-[0_-8px_30px_rgba(44,24,16,0.15)] dark:shadow-none" 
      padding="px-6 pb-8 pt-4"
    >
      {(close) => (
        <>
          {/* Close Button */}
          <button 
            onClick={() => close()} 
            className="absolute right-5 top-5 w-8 h-8 flex items-center justify-center rounded-full bg-white dark:bg-[#22120B] border border-[#E8DFD3] dark:border-[#3B2217] text-[#9C8B7A] dark:text-[#C8B9A6] hover:text-[#2C1810] dark:hover:text-[#FAF6F1] transition-colors cursor-pointer text-lg font-semibold"
            aria-label="Close"
          >
            &times;
          </button>

          {/* Content */}
          <div className="flex flex-col items-center text-center">
            {/* Brew Logo */}
            <div className="w-16 h-16 bg-white dark:bg-[#22120B] border border-[#E8DFD3] dark:border-[#3B2217] rounded-[22%] flex items-center justify-center overflow-hidden shadow-sm mb-3">
              <img src="/icon-192.png" alt="Brew Logo" className="w-full h-full object-cover" />
            </div>

            {/* Brew Text */}
            <div className="font-serif text-2xl font-bold text-[#2C1810] dark:text-[#FAF6F1] mb-3">Brew</div>

            {/* Description */}
            <p className="text-sm text-[#6B5744] dark:text-[#C8B9A6] leading-relaxed mb-6 px-4">
              Open this page on safari and then install this app to your homescreen for a better experience.
            </p>

            {/* Instruction */}
            <div className="w-full bg-white dark:bg-[#22120B] border border-[#E8DFD3] dark:border-[#3B2217] rounded-2xl p-4 flex items-center justify-center gap-3">
              <span className="text-sm text-[#2C1810] dark:text-[#FAF6F1] font-medium flex items-center justify-center flex-wrap">
                Tap 
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#D4A325" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="inline-block mx-1.5 align-middle">
                  <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
                  <polyline points="16 6 12 2 8 6" />
                  <line x1="12" y1="2" x2="12" y2="15" />
                </svg>
                then <span className="font-bold text-[#8B6914] dark:text-[#D4A325] ml-1">"Add to Home Screen"</span>
              </span>
            </div>
          </div>
        </>
      )}
    </Modal>
  );
}
