import React, { useState, useEffect } from 'react';
import { Download, X, Smartphone, Sparkles } from 'lucide-react';
import { useStore } from '../context/StoreContext';
import { usePWAInstall } from '../utils/usePWAInstall';

export const InstallPromptBanner: React.FC = () => {
  const { setInstallModalOpen } = useStore();
  const { isStandalone, isMobileOrTablet } = usePWAInstall();
  const [dismissed, setDismissed] = useState(false);

  useEffect(() => {
    const isDismissed = sessionStorage.getItem('toko_makmur_pwa_dismissed') === 'true';
    if (isDismissed) {
      setDismissed(true);
    }
  }, []);

  if (isStandalone || dismissed) {
    return null;
  }

  const handleDismiss = () => {
    setDismissed(true);
    sessionStorage.setItem('toko_makmur_pwa_dismissed', 'true');
  };

  return (
    <div className="bg-gradient-to-r from-emerald-700 to-teal-800 text-white px-3 sm:px-4 py-2 sm:py-2.5 flex items-center justify-between shadow-xs z-20 sticky top-0 text-xs animate-in slide-in-from-top-2 duration-300">
      <div className="flex items-center gap-2 sm:gap-3 min-w-0">
        <div className="p-1.5 bg-white/10 rounded-lg shrink-0">
          <Smartphone className="w-4 h-4 text-emerald-300" />
        </div>
        <div className="truncate">
          <span className="font-bold text-white block sm:inline mr-1.5">
            Install Aplikasi Toko di HP / Tablet!
          </span>
          <span className="text-emerald-200 text-[11px] hidden md:inline">
            Jadikan aplikasi kasir mandiri layar penuh tanpa membuka browser berulang kali.
          </span>
        </div>
      </div>

      <div className="flex items-center gap-2 shrink-0">
        <button
          type="button"
          onClick={() => setInstallModalOpen(true)}
          className="px-3 py-1 bg-white text-emerald-800 hover:bg-emerald-50 active:bg-emerald-100 font-extrabold rounded-lg text-[11px] shadow-xs flex items-center gap-1.5 transition"
        >
          <Download className="w-3.5 h-3.5 text-emerald-700" />
          <span>Install App</span>
        </button>
        <button
          type="button"
          onClick={handleDismiss}
          className="p-1 text-emerald-200 hover:text-white rounded-md hover:bg-white/10 transition"
          title="Tutup banner"
        >
          <X className="w-4 h-4" />
        </button>
      </div>
    </div>
  );
};