import { useState } from 'react';
import { useCookie } from '../../contexts/CookieContext';
import { useLanguage } from '../../contexts/LanguageContext';
import './cookie-banner.scss';
import { X } from 'lucide-react';

const CookieBanner = () => {
    const { showBanner, acceptAll, rejectAll, updateConsent, consent } = useCookie();
    const [showSettings, setShowSettings] = useState(false);
    const [tempConsent, setTempConsent] = useState(consent);

    if (!showBanner) return null;

    // Simple translations for the banner since they are specific to this component
    // In a larger app, these would go into the main translation file.
    const content = {
        fr: {
            title: 'Gestion des cookies 🍪',
            text: 'Nous utilisons des cookies pour améliorer votre expérience et enregistrer vos préférences.',
            accept: 'Tout accepter',
            reject: 'Refuser',
            settings: 'Personnaliser',
            save: 'Enregistrer',
            essential: 'Essentiels',
            essentialDesc: 'Requis pour le fonctionnement (ex: langue)',
            preferences: 'Préférences',
            preferencesDesc: 'Thème (Dark/Light)',
            analytics: 'Analytiques',
            analyticsDesc: 'Statistiques anonymes',
            selectAll: 'Tout cocher',
        },
        en: {
            title: 'Cookie Management 🍪',
            text: 'We use cookies to improve your experience and save your preferences.',
            accept: 'Accept All',
            reject: 'Reject',
            settings: 'Customize',
            save: 'Save Preferences',
            essential: 'Essential',
            essentialDesc: 'Required for core functionality (e.g. language)',
            preferences: 'Preferences',
            preferencesDesc: 'Theme (Dark/Light)',
            analytics: 'Analytics',
            analyticsDesc: 'Anonymous statistics',
            selectAll: 'Select All',
        }
    };

    // Detect language from context or fallback to fr
    // Note: We might be inside the LanguageProvider, so we can use `useLanguage`?
    // Yes, App.tsx structure shows LanguageProvider wraps AppContent.
    // But wait, the banner might need to be shown BEFORE language is fully settled?
    // Actually, LanguageContext logic defaults to 'fr'. So we are safe.
    const { language } = useLanguage();
    const txt = content[language] || content.fr;

    const handleSaveSettings = () => {
        updateConsent(tempConsent);
    };

    const togglePreference = (key: keyof typeof tempConsent) => {
        setTempConsent(prev => ({ ...prev, [key]: !prev[key] }));
    };

    const handleSelectAll = () => {
        setTempConsent(prev => ({
            ...prev,
            preferences: true,
            analytics: true
        }));
    };

    return (
        <div className="cookie-banner">
            {!showSettings ? (
                <div className="cookie-banner__content">
                    <div className="cookie-banner__text">
                        <h3>{txt.title}</h3>
                        <p>{txt.text}</p>
                    </div>
                    <div className="cookie-banner__actions">
                        <button className="cookie-banner__button cookie-banner__button--secondary" onClick={() => setShowSettings(true)}>
                            {txt.settings}
                        </button>
                        <button className="cookie-banner__button cookie-banner__button--secondary" onClick={rejectAll}>
                            {txt.reject}
                        </button>
                        <button className="cookie-banner__button cookie-banner__button--primary" onClick={acceptAll}>
                            {txt.accept}
                        </button>
                    </div>
                </div>
            ) : (
                <div className="cookie-banner__settings-view">
                    <div className="cookie-banner__content">
                        <div className="cookie-banner__text">
                            <h3>{txt.settings}</h3>
                        </div>
                        <button className="cookie-banner__button--text" onClick={() => setShowSettings(false)}>
                            <X size={20} />
                        </button>
                    </div>

                    <div className="cookie-banner__settings">
                        <div className="cookie-banner__header-actions" style={{ marginBottom: '1rem', display: 'flex', justifyContent: 'flex-end' }}>
                            <button className="cookie-banner__button--link" onClick={handleSelectAll} style={{ background: 'none', border: 'none', color: '#007bff', cursor: 'pointer', textDecoration: 'underline', fontSize: '0.9rem' }}>
                                {txt.selectAll}
                            </button>
                        </div>

                        <div className="cookie-banner__option">
                            <label>
                                <strong>{txt.essential}</strong>
                                <small>{txt.essentialDesc}</small>
                            </label>
                            <input type="checkbox" checked disabled />
                        </div>

                        <div className="cookie-banner__option">
                            <label htmlFor="pref-check">
                                <strong>{txt.preferences}</strong>
                                <small>{txt.preferencesDesc}</small>
                            </label>
                            <input
                                id="pref-check"
                                type="checkbox"
                                checked={tempConsent.preferences}
                                onChange={() => togglePreference('preferences')}
                            />
                        </div>

                        <div className="cookie-banner__option">
                            <label htmlFor="analytics-check">
                                <strong>{txt.analytics}</strong>
                                <small>{txt.analyticsDesc}</small>
                            </label>
                            <input
                                id="analytics-check"
                                type="checkbox"
                                checked={tempConsent.analytics}
                                onChange={() => togglePreference('analytics')}
                            />
                        </div>
                    </div>

                    <div className="cookie-banner__actions" style={{ marginTop: '1rem' }}>
                        <button className="cookie-banner__button cookie-banner__button--primary" onClick={handleSaveSettings}>
                            {txt.save}
                        </button>
                    </div>
                </div>
            )}
        </div>
    );
};

export default CookieBanner;
