'use client';

import { useState, useEffect } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Sparkles, Shield, Bell, Smartphone, Monitor, Trophy, Rocket, Scale, Heart } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useTheme } from '@/lib/theme-context';

export function VersionUpdateModal() {
    const [isOpen, setIsOpen] = useState(false);
    const { theme } = useTheme();

    useEffect(() => {
        // Check local storage for the flag
        const hasSeenUpdate = localStorage.getItem('seen_version_1.0_update');
        if (!hasSeenUpdate) {
            setIsOpen(true);
        }
    }, []);

    const handleClose = () => {
        // Set the flag in local storage
        localStorage.setItem('seen_version_1.0_update', 'true');
        setIsOpen(false);
    };

    return (
        <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
            <DialogContent className={cn(
                "sm:max-w-xl max-h-[85vh] overflow-y-auto border-0 shadow-2xl p-0 gap-0 rounded-3xl",
                theme === 'light' ? 'bg-white' : 'bg-[#1a1b26]'
            )}>

                {/* Header Section with Gradient Background */}
                <div className="relative overflow-hidden bg-gradient-to-br from-indigo-600 to-purple-700 p-8 text-white">
                    <div className="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 bg-white/10 rounded-full blur-3xl" />
                    <div className="relative z-10 flex flex-col items-center text-center space-y-4">
                        <div className="p-3 bg-white/20 backdrop-blur-md rounded-2xl shadow-inner">
                            <Rocket className="w-10 h-10 text-white" />
                        </div>
                        <div className="space-y-1">
                            <DialogTitle className="text-3xl font-bold tracking-tight">Version 1.0 is Live!</DialogTitle>
                            <DialogDescription className="text-white/80 text-base font-medium">
                                The biggest update to QuitTraq is finally here.
                            </DialogDescription>
                        </div>
                    </div>
                </div>

                {/* Content Section */}
                <div className="p-6 space-y-6">
                    <h3 className="text-sm font-bold uppercase tracking-widest opacity-50 px-2">What's New</h3>

                    <div className="grid gap-4">

                        {/* Security */}
                        <div className={cn("flex gap-4 p-4 rounded-2xl border", theme === 'light' ? 'bg-slate-50 border-slate-100' : 'bg-white/5 border-white/5')}>
                            <div className="p-2.5 bg-emerald-500/10 rounded-xl h-fit">
                                <Shield className="w-5 h-5 text-emerald-500" />
                            </div>
                            <div className="space-y-1">
                                <h4 className="font-bold text-sm">Major Security Overhaul</h4>
                                <p className="text-xs opacity-70 leading-relaxed">
                                    implemented complete security audit and fixes. This is why you had to login again—we've secured your session data with industry-standard encryption.
                                </p>
                            </div>
                        </div>

                        {/* PWA Icon & Look */}
                        <div className={cn("flex gap-4 p-4 rounded-2xl border", theme === 'light' ? 'bg-indigo-50 border-indigo-100' : 'bg-indigo-500/10 border-indigo-500/10')}>
                            <div className="p-2.5 bg-indigo-500/10 rounded-xl h-fit">
                                <Sparkles className="w-5 h-5 text-indigo-500" />
                            </div>
                            <div className="space-y-2">
                                <h4 className="font-bold text-sm">Fresh New Look</h4>
                                <p className="text-xs opacity-70 leading-relaxed">
                                    We've updated the app icon to be cleaner and more modern.
                                </p>
                                <div className={cn("text-[10px] p-2 rounded-lg border", theme === 'light' ? 'bg-yellow-50 border-yellow-200 text-yellow-800' : 'bg-yellow-500/10 border-yellow-500/20 text-yellow-200')}>
                                    <strong>iOS Users:</strong> To see the new icon, you'll need to remove the app from your home screen and re-add it (Share → Add to Home Screen).
                                </div>
                            </div>
                        </div>

                        {/* Notifications & Input */}
                        <div className="grid sm:grid-cols-2 gap-4">
                            <div className={cn("p-4 rounded-2xl border space-y-2", theme === 'light' ? 'bg-slate-50 border-slate-100' : 'bg-white/5 border-white/5')}>
                                <Bell className="w-5 h-5 text-amber-500 mb-1" />
                                <h4 className="font-bold text-sm">Smart Notifications</h4>
                                <p className="text-[10px] opacity-70 leading-relaxed">
                                    Updated messaging system that adapts based on the time of day to keep you motivated.
                                </p>
                            </div>

                            <div className={cn("p-4 rounded-2xl border space-y-2", theme === 'light' ? 'bg-slate-50 border-slate-100' : 'bg-white/5 border-white/5')}>
                                <Smartphone className="w-5 h-5 text-blue-500 mb-1" />
                                <h4 className="font-bold text-sm">PWA & UI Polish</h4>
                                <p className="text-[10px] opacity-70 leading-relaxed">
                                    New login screen, landing page, and optimization fixes for a smoother app-like experience.
                                </p>
                            </div>
                        </div>

                        {/* Tracking Improvements */}
                        <div className={cn("flex gap-4 p-4 rounded-2xl border", theme === 'light' ? 'bg-slate-50 border-slate-100' : 'bg-white/5 border-white/5')}>
                            <div className="p-2.5 bg-indigo-500/10 rounded-xl h-fit">
                                <Scale className="w-5 h-5 text-indigo-500" />
                            </div>
                            <div className="space-y-1">
                                <h4 className="font-bold text-sm">Refined Tracking</h4>
                                <p className="text-xs opacity-70 leading-relaxed">
                                    Fixed input logging on desktop, improved the independent track buttons for weed/nicotine, and fixed the scroll system.
                                </p>
                            </div>
                        </div>

                        {/* Goals & Moods */}
                        <div className="grid sm:grid-cols-2 gap-4">
                            <div className={cn("p-4 rounded-2xl border space-y-2", theme === 'light' ? 'bg-slate-50 border-slate-100' : 'bg-white/5 border-white/5')}>
                                <Trophy className="w-5 h-5 text-yellow-500 mb-1" />
                                <h4 className="font-bold text-sm">Independent Goals</h4>
                                <p className="text-[10px] opacity-70 leading-relaxed">
                                    Set separate quit plans for nicotine and marijuana. Fixed achievement unlocking celebrations.
                                </p>
                            </div>

                            <div className={cn("p-4 rounded-2xl border space-y-2", theme === 'light' ? 'bg-slate-50 border-slate-100' : 'bg-white/5 border-white/5')}>
                                <Heart className="w-5 h-5 text-rose-500 mb-1" />
                                <h4 className="font-bold text-sm">Mood Tracker 2.0</h4>
                                <p className="text-[10px] opacity-70 leading-relaxed">
                                    Friendlier messages, more mood options, daily average charts, and weekly score tracking.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Footer */}
                <div className={cn("p-6 pt-2", theme === 'light' ? 'bg-slate-50/50' : 'bg-black/20')}>
                    <Button
                        className="w-full h-12 rounded-xl text-base font-bold bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white shadow-lg active:scale-95 transition-all"
                        onClick={handleClose}
                    >
                        Let's Go!
                    </Button>
                </div>

            </DialogContent>
        </Dialog>
    );
}
