'use client';

import React, { useState, useEffect } from 'react';
import { X } from 'lucide-react';
import { useTranslations } from 'next-intl';
import Link from 'next/link';

interface CookiePreferences {
    functional: boolean;
    statistical: boolean;
    preferences: boolean;
    marketing: boolean;
}

const CookiePopup: React.FC = () => {
    const t = useTranslations();

    const [showBanner, setShowBanner] = useState(false);
    const [showSettings, setShowSettings] = useState(false);
    const [cookiePreferences, setCookiePreferences] = useState<CookiePreferences>({
        functional: true,
        statistical: false,
        preferences: false,
        marketing: false,
    });

    useEffect(() => {
        const cookieConsent = localStorage.getItem('cookieConsent');
        if (!cookieConsent) {
            setShowBanner(true);
        }
    }, []);

    const handleAcceptAll = () => {
        const allAccepted = {
            functional: true,
            statistical: true,
            preferences: true,
            marketing: true,
        };
        setCookiePreferences(allAccepted);
        localStorage.setItem('cookieConsent', JSON.stringify(allAccepted));
        setShowBanner(false);
        setShowSettings(false);
         window.location.reload();
    };

    const handleRejectAll = () => {
        const onlyFunctional = {
            functional: true,
            statistical: false,
            preferences: false,
            marketing: false,
        };
        setCookiePreferences(onlyFunctional);
        localStorage.setItem('cookieConsent', JSON.stringify(onlyFunctional));
        setShowBanner(false);
        setShowSettings(false);
    };

    const handleSaveSelection = () => {
        localStorage.setItem('cookieConsent', JSON.stringify(cookiePreferences));
        setShowBanner(false);
        setShowSettings(false);
        window.location.reload();
    };

    const handlePreferenceChange = (key: keyof CookiePreferences) => {
        if (key === 'functional') return;
        setCookiePreferences(prev => ({
            ...prev,
            [key]: !prev[key],
        }));
    };

    const openSettings = () => {
        setShowSettings(true);
    };

    if (!showBanner && !showSettings) return null;

    return (
        <>
            {/* Cookie Banner */}
            {showBanner && !showSettings && (
                <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg z-50 p-6">
                    <div className="max-w-4xl mx-auto">
                        <div className="flex items-start justify-between gap-4">
                            <div className="flex-1">
                                <h3 className="text-lg font-semibold text-gray-900 mb-2 flex items-center gap-2">
                                    {t('We use cookies 🍪')}
                                </h3>
                                <p className="text-gray-600 text-sm mb-4  ">
                                    {t("We use cookies to ensure the proper functioning of our website, personalize content and ads, provide social media features, and analyze our traffic You can choose which types of cookies you're willing to accept")}

                                    <Link href={"/politique-de-cookies"} className='text-primary'>{("Cookies policy")}</Link>
                                </p>
                            </div>
                        </div>
                        <div className="flex flex-wrap gap-3 mt-4">
                            <button
                                onClick={handleAcceptAll}
                                className="bg-primary text-white px-6 py-2 rounded-md hover:bg-primary transition-colors font-medium"
                            >
                                {t('Accept All')}
                            </button>
                            <button
                                onClick={openSettings}
                                className="bg-gray-100 text-gray-700 px-6 py-2 rounded-md hover:bg-gray-200 transition-colors font-medium"
                            >
                                {t('Customize Preferences')}
                            </button>
                            <button
                                onClick={handleRejectAll}
                                className="text-gray-600 px-6 py-2 rounded-md hover:bg-gray-100 transition-colors font-medium"
                            >
                                {t('Keep necessary')}
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {/* Cookie Settings Modal */}
            {showSettings && (
                <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
                    <div className="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
                        <div className="p-6">
                            <div className="flex items-center justify-between mb-6">
                                <h2 className="text-xl font-semibold text-gray-900">
                                    {t('Customize Preferences')}
                                </h2>
                                <button
                                    onClick={() => setShowSettings(false)}
                                    className="text-gray-400 hover:text-gray-600 transition-colors"
                                >
                                    <X size={24} />
                                </button>
                            </div>

                            <div className="space-y-6">
                                {/* Essential Cookies */}
                                <div className="border-b border-gray-200 pb-6">
                                    <div className="flex items-center gap-3 mb-3">
                                        <input
                                            type="checkbox"
                                            id="functional"
                                            checked={cookiePreferences.functional}
                                            disabled={true}
                                            className="w-4 h-4 accent-primary bg-gray-100 border-gray-300 rounded focus:!ring-primary"
                                        />
                                        <label htmlFor="functional" className="font-medium text-gray-900">
                                            {t('Essential cookies – Always active. Necessary for basic site functionality.')}
                                        </label>
                                    </div>
                                </div>

                                {/* Functional Cookies */}
                                <div className="border-b border-gray-200 pb-6">
                                    <div className="flex items-center gap-3 mb-3">
                                        <input
                                            type="checkbox"
                                            id="preferences"
                                            checked={cookiePreferences.preferences}
                                            onChange={() => handlePreferenceChange('preferences')}
                                            className="w-4 h-4 accent-primary bg-gray-100 border-gray-300 rounded focus:!ring-primary"
                                        />
                                        <label htmlFor="preferences" className="font-medium text-gray-900">
                                            {t('Functional cookies – Optional. Help us remember your preferences and settings.')}
                                        </label>
                                    </div>
                                </div>

                                {/* Analytics Cookies */}
                                <div className="border-b border-gray-200 pb-6">
                                    <div className="flex items-center gap-3 mb-3">
                                        <input
                                            type="checkbox"
                                            id="statistical"
                                            checked={cookiePreferences.statistical}
                                            onChange={() => handlePreferenceChange('statistical')}
                                            className="w-4 h-4 accent-primary bg-gray-100 border-gray-300 rounded focus:!ring-primary"
                                        />
                                        <label htmlFor="statistical" className="font-medium text-gray-900">
                                            {t('Analytics cookies – Optional. Allow us to understand how you use our website.')}
                                        </label>
                                    </div>
                                </div>

                                {/* Marketing Cookies */}
                                <div className="pb-6">
                                    <div className="flex items-center gap-3 mb-3">
                                        <input
                                            type="checkbox"
                                            id="marketing"
                                            checked={cookiePreferences.marketing}
                                            onChange={() => handlePreferenceChange('marketing')}
                                            className="w-4 h-4 accent-primary bg-gray-100 border-gray-300 rounded focus:!ring-primary"
                                        />
                                        <label htmlFor="marketing" className="font-medium text-gray-900">
                                            {t('Marketing cookies – Optional. Help us show you more relevant ads and content.')}
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div className="flex gap-3 pt-6 border-t border-gray-200">
                                <button
                                    onClick={handleAcceptAll}
                                    className="bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition-colors font-medium flex-1"
                                >
                                    {t('Accept All')}
                                </button>
                                <button
                                    onClick={handleSaveSelection}
                                    className="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary transition-colors font-medium flex-1"
                                >
                                    {t('Save selection')}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
};

export default CookiePopup;