import { buildProfile } from '../systems/profile.js?v=20260427c';
import { createShareCard } from '../systems/shareCard.js?v=20260427c';

export class RevealScene extends Phaser.Scene {
    constructor() {
        super('RevealScene');
    }

    init(data) {
        this.session = data.session;
    }

    create() {
        this.session.endedAt = Date.now();
        const profile = buildProfile(this.session);
        this.cameras.main.setBackgroundColor(0xf7f7f2);
        this.renderReceipt(profile);
    }

    renderReceipt(profile) {
        const overlay = document.createElement('div');
        overlay.className = 'receipt-backdrop';
        overlay.innerHTML = `
            <article class="receipt">
                <h1>DATA RECEIPT</h1>
                <div class="receipt-line"><span>Session ID</span><strong>${escapeHtml(profile.header.sessionId)}</strong></div>
                <div class="receipt-line"><span>Duration</span><strong>${escapeHtml(profile.header.duration)}</strong></div>
                <div class="receipt-line"><span>Date</span><strong>${escapeHtml(profile.header.date)}</strong></div>
                <div class="receipt-grid">
                    ${sectionTemplate('DEVICE PROFILE', profile.device)}
                    ${sectionTemplate('BEHAVIORAL PROFILE', profile.behavioral)}
                    ${sectionTemplate('ESTIMATED AD PROFILE', profile.advertising)}
                </div>
                <section class="receipt-section">
                    <h2>CONTEXT</h2>
                    ${profile.context.copy.map((line) => `<p class="receipt-callout">${escapeHtml(line)}</p>`).join('')}
                </section>
                <section class="receipt-section">
                    <h2>WHAT WE NOTICED</h2>
                    ${profile.callouts.map((line) => `<p class="receipt-callout">${escapeHtml(line)}</p>`).join('')}
                    <p class="receipt-callout">This game collected your data for a few minutes to show you what it feels like. The rest of the internet does it 24/7 and rarely shows you this screen.</p>
                </section>
                <div class="receipt-actions">
                    <button type="button" data-share>Share your receipt</button>
                    <a class="secondary" href="./?privacy=1">Play again (with privacy)</a>
                    <a class="secondary" href="/privacy.html">Learn more</a>
                    <a class="secondary" href="https://www.eff.org/issues/privacy" rel="noopener noreferrer">EFF privacy resources</a>
                    <a class="secondary" href="https://privacybadger.org/" rel="noopener noreferrer">Privacy Badger</a>
                    <a class="secondary" href="https://www.mozilla.org/privacy/" rel="noopener noreferrer">Mozilla privacy</a>
                </div>
            </article>
        `;
        document.body.appendChild(overlay);
        overlay.querySelector('[data-share]').addEventListener('click', async () => {
            const url = createShareCard(profile, this.session);
            const link = document.createElement('a');
            link.download = 'accept-the-cookie-data-receipt.png';
            link.href = url;
            link.click();
        });
        this.events.once('shutdown', () => overlay.remove());
    }
}

function sectionTemplate(title, lines) {
    return `
        <section class="receipt-section">
            <h2>${escapeHtml(title)}</h2>
            ${Object.entries(lines).map(([key, value]) => `
                <div class="receipt-line"><span>${escapeHtml(key)}</span><strong>${escapeHtml(String(value))}</strong></div>
            `).join('')}
        </section>
    `;
}

function escapeHtml(value) {
    return value
        .replaceAll('&', '&amp;')
        .replaceAll('<', '&lt;')
        .replaceAll('>', '&gt;')
        .replaceAll('"', '&quot;')
        .replaceAll("'", '&#039;');
}