"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-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
            <div className="relative w-full max-w-md bg-[#18181B] border border-white/10 rounded-2xl shadow-2xl animate-in zoom-in-95 duration-200 overflow-hidden">

                {/* Decorative header background */}
                <div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-br from-amber-500/10 to-red-500/10 pointer-events-none" />

                <div className="relative p-6 px-8 flex flex-col items-center text-center">
                    <button
                        onClick={() => setShowCookieExpired(false)}
                        className="absolute top-4 right-4 p-2 text-white/40 hover:text-white rounded-full hover:bg-white/5 transition-colors"
                    >
                        <X className="h-4 w-4" />
                    </button>

                    <div className="h-16 w-16 mb-6 rounded-full bg-amber-500/10 flex items-center justify-center ring-1 ring-amber-500/20 shadow-lg shadow-amber-900/20">
                        <Cookie className="h-8 w-8 text-amber-500" />
                    </div>

                    <h2 className="text-xl font-bold text-white mb-2">Cookies Expired</h2>

                    <p className="text-muted-foreground text-sm mb-6 leading-relaxed">
                        Your <span className="text-white font-medium">{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-3 px-4 bg-primary text-primary-foreground font-semibold rounded-xl hover:bg-primary/90 transition-all flex items-center justify-center gap-2 shadow-lg shadow-primary/20"
                        >
                            <Settings className="h-4 w-4" />
                            Update Settings
                        </button>

                        <a
                            href={providerUrl}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="w-full py-3 px-4 bg-white/5 hover:bg-white/10 text-white font-medium rounded-xl transition-all flex items-center justify-center gap-2 border border-white/5"
                        >
                            <ExternalLink className="h-4 w-4" />
                            Open {providerName}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
}