
'use client';

import { useState, useEffect } from 'react';
import { X, Download } from 'lucide-react';
import { toast } from 'sonner';

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

export function InstallPrompt() {
    const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
    const [isVisible, setIsVisible] = useState(false);

    useEffect(() => {
        const handler = (e: Event) => {
            // Prevent default browser install banner
            e.preventDefault();
            // Stash the event so it can be triggered later
            setDeferredPrompt(e as BeforeInstallPromptEvent);
            // Show the UI
            setIsVisible(true);
        };

        window.addEventListener('beforeinstallprompt', handler);

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

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

        // Show the install prompt
        await deferredPrompt.prompt();

        // Wait for the user to respond to the prompt
        const { outcome } = await deferredPrompt.userChoice;

        if (outcome === 'accepted') {
            console.log('User accepted the install prompt');
            toast.success('Thanks for installing!');
        } else {
            console.log('User dismissed the install prompt');
        }

        // We can't use the prompt again, so clear it
        setDeferredPrompt(null);
        setIsVisible(false);
    };

    const handleDismiss = () => {
        setIsVisible(false);
    };

    if (!isVisible) return null;

    return (
        <div className="fixed bottom-20 left-4 right-4 z-50 md:left-auto md:right-6 md:w-80 md:bottom-6 animate-in slide-in-from-bottom-4 fade-in duration-300">
            <div className="bg-slate-900 text-white p-4 rounded-xl shadow-2xl flex items-start gap-3 border border-slate-700/50">
                <div className="bg-white/10 p-2 rounded-lg shrink-0">
                    <Download className="w-6 h-6 text-sky-400" />
                </div>

                <div className="flex-1 min-w-0">
                    <h3 className="font-semibold text-sm">Install Test01</h3>
                    <p className="text-xs text-slate-400 mt-1">
                        Install this app on your home screen for quick access and offline use.
                    </p>

                    <div className="flex items-center gap-3 mt-3">
                        <button
                            onClick={handleInstallClick}
                            className="bg-sky-500 hover:bg-sky-400 text-white text-xs font-semibold px-3 py-1.5 rounded-full transition-colors"
                        >
                            Install
                        </button>
                        <button
                            onClick={handleDismiss}
                            className="text-slate-400 hover:text-white text-xs font-medium px-2 py-1 transition-colors"
                        >
                            Not Now
                        </button>
                    </div>
                </div>

                <button
                    onClick={handleDismiss}
                    className="text-slate-500 hover:text-slate-300 -mr-1 -mt-1 p-1"
                    aria-label="Close"
                >
                    <X className="w-4 h-4" />
                </button>
            </div>
        </div>
    );
}
