'use client';

import React, { useState, useEffect } from 'react';
import { Download, X } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

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

export default function PwaInstallPrompt() {
  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
  const [showPrompt, setShowPrompt] = useState(false);
  const [dismissed, setDismissed] = useState(false);

  useEffect(() => {
    const wasDismissed = localStorage.getItem('pwa-install-dismissed');
    if (wasDismissed) {
      const daysSinceDismissed = (Date.now() - parseInt(wasDismissed)) / (1000 * 60 * 60 * 24);
      if (daysSinceDismissed < 7) return;
    }
    const handler = (e: Event) => {
      e.preventDefault();
      setDeferredPrompt(e as BeforeInstallPromptEvent);
      setTimeout(() => { setShowPrompt(true); }, 10000);
    };
    window.addEventListener('beforeinstallprompt', handler);
    return () => { window.removeEventListener('beforeinstallprompt', handler); };
  }, []);

  const handleInstall = async () => {
    if (!deferredPrompt) return;
    await deferredPrompt.prompt();
    const { outcome } = await deferredPrompt.userChoice;
    if (outcome === 'accepted') setShowPrompt(false);
    setDeferredPrompt(null);
  };

  const handleDismiss = () => {
    setShowPrompt(false);
    setDismissed(true);
    localStorage.setItem('pwa-install-dismissed', Date.now().toString());
  };

  if (!showPrompt || dismissed) return null;

  return (
    <AnimatePresence>
      <motion.div initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 50 }}
        className="fixed bottom-24 right-4 z-30 w-72 sm:right-6 sm:w-80">
        <div className="overflow-hidden rounded-xl border border-[var(--border-hover)] bg-[var(--bg-card)]/95 shadow-2xl backdrop-blur-md" style={{ boxShadow: '0 10px 40px var(--shadow-color)' }}>
          <button onClick={handleDismiss}
            className="absolute top-2 right-2 z-10 flex h-6 w-6 items-center justify-center rounded-full bg-[var(--bg-hover)] text-[var(--text-quaternary)] text-xs transition-colors hover:bg-[var(--bg-input)] hover:text-[var(--text-secondary)]">
            <X className="h-3 w-3" />
          </button>
          <div className="p-4">
            <div className="flex items-start gap-3">
              <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-[var(--accent-500)] to-[var(--accent-400)] shadow-lg">
                <span className="text-xl font-bold text-white">F</span>
              </div>
              <div className="min-w-0 flex-1">
                <p className="text-sm font-bold text-[var(--text-primary)]">Install FoodMart</p>
                <p className="mt-0.5 text-xs text-[var(--text-secondary)] leading-relaxed">Akses lebih cepat tanpa buka browser. Install sekarang!</p>
              </div>
            </div>
            <div className="mt-3 flex gap-2">
              <button onClick={handleInstall}
                className="flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-gradient-to-r from-[var(--accent-500)] to-[var(--accent-400)] px-3 py-2 text-xs font-semibold text-white transition-all hover:shadow-lg active:scale-95">
                <Download className="h-3.5 w-3.5" />Install
              </button>
              <button onClick={handleDismiss}
                className="rounded-lg border border-[var(--border-hover)] bg-[var(--bg-input)] px-3 py-2 text-xs text-[var(--text-secondary)] transition-colors hover:text-[var(--text-primary)]">
                Nanti
              </button>
            </div>
          </div>
        </div>
      </motion.div>
    </AnimatePresence>
  );
}