"use client";

import React from 'react';
import { useStore } from '@/lib/store';
import { AlertTriangle, Settings, X, Cookie, ExternalLink } from 'lucide-react';
import { cn } from '@/lib/utils';

export function CookieExpiredDialog() {
    const {
        showCookieExpired,
        setShowCookieExpired,
        setCurrentView,
        settings
    } = useStore();

    if (!showCookieExpired) return null;

    const providerName = settings.provider === 'meta' ? 'Meta AI' : 'Google Whisk';

    const providerUrl = settings.provider === 'meta' ? 'https://www.meta.ai' :
        'https://labs.google/fx/tools/whisk/project';

    const handleFixIssues = () => {
        setShowCookieExpired(false);
        setCurrentView('settings');
    };

    return (
        <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-md animate-in fade-in duration-300">
            <div className="relative w-full max-w-[400px] bg-[#121214] border border-white/5 rounded-[2.5rem] shadow-[0_0_50px_-12px_rgba(0,0,0,0.5)] animate-in zoom-in-95 duration-300 overflow-hidden">

                {/* Top Glow/Gradient */}
                <div className="absolute top-0 left-0 right-0 h-48 bg-gradient-to-b from-amber-500/20 via-transparent to-transparent pointer-events-none" />

                <div className="relative p-8 flex flex-col items-center text-center">
                    {/* Close Button */}
                    <button
                        onClick={() => setShowCookieExpired(false)}
                        className="absolute top-6 right-6 p-2 text-white/20 hover:text-white transition-colors"
                    >
                        <X className="h-5 w-5" />
                    </button>

                    {/* Cookie Icon Container */}
                    <div className="relative mt-4 mb-8">
                        {/* Glow effect */}
                        <div className="absolute inset-0 bg-amber-500/20 blur-2xl rounded-full" />
                        <div className="relative h-20 w-20 rounded-full bg-[#1A1A1D] border-2 border-amber-500/30 flex items-center justify-center shadow-[inset_0_0_20px_rgba(245,158,11,0.1)]">
                            <Cookie className="h-10 w-10 text-amber-500" />
                        </div>
                    </div>

                    <h2 className="text-2xl font-black text-white mb-4 tracking-tight">Cookies Expired</h2>

                    <p className="text-[#A1A1AA] text-[15px] mb-8 leading-relaxed max-w-[280px]">
                        Your <span className="text-white font-bold">{providerName}</span> session has timed out.
                        To continue generating images, please refresh your cookies.
                    </p>

                    <div className="w-full space-y-3">
                        <button
                            onClick={handleFixIssues}
                            className="w-full py-4 px-6 bg-[#7C3AED] hover:bg-[#6D28D9] text-white font-bold rounded-2xl transition-all flex items-center justify-center gap-3 shadow-[0_10px_20px_-10px_rgba(124,58,237,0.5)] active:scale-[0.98]"
                        >
                            <Settings className="h-5 w-5" />
                            Update Settings
                        </button>

                        <a
                            href={providerUrl}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="w-full py-4 px-6 bg-[#27272A] hover:bg-[#3F3F46] text-white font-bold rounded-2xl transition-all flex items-center justify-center gap-3 border border-white/5 active:scale-[0.98]"
                        >
                            <ExternalLink className="h-5 w-5" />
                            Open {providerName}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
}
