const c15t = {
    storageKey: 'c15t-consent',
    state: {
        necessary: true,
        preferences: false,
        statistics: false,
        marketing: false,
        unclassified: false
    },

    init() {
        const stored = localStorage.getItem(this.storageKey);
        if (stored) {
            this.state = JSON.parse(stored);
        } else {
            // Using a longer delay and requestIdleCallback for LCP protection
            const triggerBanner = () => {
                if ('requestIdleCallback' in window) {
                    window.requestIdleCallback(() => this.showBanner(), { timeout: 2000 });
                } else {
                    setTimeout(() => this.showBanner(), 2000);
                }
            };
            triggerBanner();
        }
        this.renderFloatingButton();
    },

    save(type) {
        if (type === 'all') {
            this.state = { necessary: true, preferences: true, statistics: true, marketing: true, unclassified: true };
        } else if (type === 'none') {
            this.state = { necessary: true, preferences: false, statistics: false, marketing: false, unclassified: false };
        } else {
            this.state = {
                necessary: true,
                preferences: document.getElementById('c15t-pref').checked,
                statistics: document.getElementById('c15t-stats').checked,
                marketing: document.getElementById('c15t-mark').checked,
                unclassified: document.getElementById('c15t-uncl').checked
            };
        }

        localStorage.setItem(this.storageKey, JSON.stringify(this.state));
        window.dispatchEvent(new CustomEvent('c15t:consent-updated', { detail: this.state }));
        this.hideBanner();
    },

    showBanner() {
        if (document.getElementById('c15t-banner')) return;

        const banner = document.createElement('div');
        banner.id = 'c15t-banner';
        // We add a class to trigger a smooth fade-in so it's less "jarring"
        banner.className = 'c15t-fade-in';
        banner.innerHTML = `
            <div class="c15t-inner">
                <div class="c15t-content">
                    <div class="c15t-header">
                        <strong>Cookie Consent</strong>
                        <p>We use cookies to personalize content and analyze our traffic.</p>
                    </div>
                    <div id="c15t-custom-ui" class="c15t-grid" style="display:none;">
                        <label class="c15t-option"><input type="checkbox" checked disabled> <span>Necessary</span></label>
                        <label class="c15t-option"><input type="checkbox" id="c15t-pref" ${this.state.preferences ? 'checked' : ''}> <span>Preferences</span></label>
                        <label class="c15t-option"><input type="checkbox" id="c15t-stats" ${this.state.statistics ? 'checked' : ''}> <span>Statistics</span></label>
                        <label class="c15t-option"><input type="checkbox" id="c15t-mark" ${this.state.marketing ? 'checked' : ''}> <span>Marketing</span></label>
                        <label class="c15t-option"><input type="checkbox" id="c15t-uncl" ${this.state.unclassified ? 'checked' : ''}> <span>Unclassified</span></label>
                    </div>
                </div>
                <div class="c15t-actions">
                    <div class="c15t-main-btns">
                        <button class="c15t-btn c15t-customize" onclick="c15t.toggleCustomize()">Customize</button>
                        <button class="c15t-btn c15t-decline" onclick="c15t.save('none')">Reject All</button>
                        <button class="c15t-btn c15t-accept" onclick="c15t.save('all')">Accept All</button>
                    </div>
                    <button class="c15t-btn c15t-save-custom" style="display:none;" onclick="c15t.save('custom')">Save Selection</button>
                </div>
            </div>`;
        document.body.appendChild(banner);
    },

    toggleCustomize() {
        document.getElementById('c15t-custom-ui').style.display = 'grid';
        document.querySelector('.c15t-main-btns').style.display = 'none';
        document.querySelector('.c15t-save-custom').style.display = 'block';
    },

    hideBanner() {
        document.getElementById('c15t-banner')?.remove();
    },

    renderFloatingButton() {
        if (document.getElementById('c15t-trigger')) return;
        const btn = document.createElement('div');
        btn.id = 'c15t-trigger';
        btn.innerHTML = `<svg viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/></svg>`;
        btn.onclick = () => this.showBanner();
        document.body.appendChild(btn);
    }
};

// Initialize only after the browser is finished with the main "Load" tasks
window.addEventListener('load', () => {
    c15t.init();
});