---
import Base from '../layouts/Base.astro';
import { prisma } from '../lib/db.mjs';

const products = await prisma.product.findMany({
    select: { stripeKey: true, imagePath: true },
});
const productImages = Object.fromEntries(
    products.filter(p => p.stripeKey).map(p => [p.stripeKey, p.imagePath])
);
---

<Base
    title="REBOURS — COMMANDE CONFIRMÉE"
    description="Votre commande REBOURS Studio a été confirmée."
    canonical="https://rebours.studio/success"
>
    <meta name="robots" content="noindex, nofollow" slot="head">
    <style>
        main {
            flex-grow: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        .left {
            border-right: var(--border);
            padding: 5rem 2rem;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            gap: 2rem;
            position: relative;
            overflow: hidden;
        }
        .product-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 1;
        }
        .left::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.25);
            pointer-events: none;
        }
        .slabel { font-size: 0.75rem; color: #888; }
        h1 {
            font-size: clamp(2.5rem, 5vw, 4.5rem);
            font-weight: 700;
            line-height: 0.95;
            letter-spacing: -0.02em;
        }
        .status-line {
            font-size: 0.82rem;
            line-height: 1.8;
            color: #555;
        }
        .amount {
            display: inline-block;
            background: var(--clr-red);
            padding: 0.3rem 0.7rem;
            font-weight: 700;
            font-size: 1rem;
        }
        .right {
            padding: 5rem 2rem;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            gap: 1.5rem;
        }
        .info-row {
            display: flex;
            gap: 1.5rem;
            padding: 0.6rem 0;
            border-bottom: 1px solid rgba(0,0,0,0.1);
            font-size: 0.8rem;
            align-items: baseline;
        }
        .info-key { color: #888; width: 8rem; flex-shrink: 0; font-size: 0.72rem; }
        a.back {
            display: inline-block;
            border: var(--border);
            padding: 0.9rem 1.5rem;
            font-family: var(--font-mono);
            font-size: 0.78rem;
            font-weight: 700;
            text-decoration: none;
            color: var(--clr-black);
            transition: background 0.15s, color 0.15s;
            align-self: flex-start;
            margin-top: 1rem;
            cursor: none;
        }
        a.back:hover { background: var(--clr-black); color: var(--clr-white); }
        #receipt-btn:hover { background: var(--clr-red) !important; color: var(--clr-black) !important; border-color: var(--clr-red) !important; }
        #loading { color: #888; font-size: 0.78rem; }

        @media (max-width: 600px) {
            main { grid-template-columns: 1fr; }
            .left {
                padding: 2rem 1.5rem;
                min-height: 55vw;
                border-right: none;
                border-bottom: var(--border);
            }
            h1 { font-size: clamp(2rem, 12vw, 3rem); }
            .right { padding: 2rem 1.5rem; justify-content: flex-start; }
            a.back { align-self: stretch; text-align: center; }
        }
    </style>

    <!-- Grid background -->
    <div id="interactive-grid" class="interactive-grid"></div>

    <div style="display:flex; flex-direction:column; min-height:100vh; position:relative; z-index:1;">
        <header class="header">
            <a href="/" class="logo-text">REBOURS</a>
            <span style="font-size:0.78rem;color:#888">COLLECTION_001</span>
        </header>

        <main>
            <div class="left">
                <img id="product-img" class="product-img" src="/assets/lamp-violet.jpg" alt="Produit REBOURS Studio">
                <p class="slabel" style="position:relative">// COMMANDE_CONFIRMÉE</p>
                <h1 style="position:relative">MERCI<br>POUR<br>VOTRE<br>COMMANDE</h1>
                <p class="status-line" id="loading" style="position:relative">Vérification du paiement...</p>
            </div>
            <div class="right">
                <p class="slabel">// RÉCAPITULATIF</p>
                <hr>
                <div id="order-details" style="display:none; flex-direction:column; gap:0;">
                    <div class="info-row"><span class="info-key">PRODUIT</span><span>Solar_Altar</span></div>
                    <div class="info-row"><span class="info-key">COLLECTION</span><span>001 — ÉDITION UNIQUE</span></div>
                    <div class="info-row"><span class="info-key">MONTANT</span><span id="amount-display"></span></div>
                    <div class="info-row"><span class="info-key">EMAIL</span><span id="email-display"></span></div>
                    <div class="info-row"><span class="info-key">DÉLAI</span><span>6 À 8 SEMAINES</span></div>
                    <div class="info-row"><span class="info-key">STATUS</span><span style="color:var(--clr-red); font-weight:700">CONFIRMÉ ■</span></div>
                </div>
                <p style="font-size:0.78rem; line-height:1.8; color:#555; margin-top:1rem;">
                    Un email de confirmation vous sera envoyé.<br>
                    Votre lampe est fabriquée à la main à Paris.
                </p>
                <div style="display:flex; gap:0.8rem; flex-wrap:wrap;">
                    <a href="/" class="back">← RETOUR</a>
                    <a id="receipt-btn" href="#" target="_blank" rel="noopener" class="back" style="display:none; background:var(--clr-black); color:#e8a800; border-color:var(--clr-black);">↓ FACTURE PDF</a>
                </div>
            </div>
        </main>

        <footer class="footer">
            <span>© 2026 REBOURS STUDIO — PARIS</span>
            <nav aria-label="Liens secondaires">
                <a href="https://instagram.com/rebour.studio" rel="noopener" target="_blank">INSTAGRAM</a>
                &nbsp;/&nbsp;
                <a href="mailto:contact@rebour.studio">CONTACT</a>
            </nav>
        </footer>
    </div>

    <div class="cursor-dot"></div>
    <div class="cursor-outline"></div>

    <script src="/main.js" is:inline></script>

    <script define:vars={{ productImages }}>
        const params = new URLSearchParams(window.location.search);
        const sessionId = params.get('session_id');

        const PRODUCT_IMAGES = productImages;

        if (sessionId) {
            fetch(`/api/session/${sessionId}`)
                .then(r => r.json())
                .then((data) => {
                    const loading = document.getElementById('loading');
                    const orderDetails = document.getElementById('order-details');
                    if (loading) loading.style.display = 'none';
                    if (orderDetails) orderDetails.style.display = 'flex';

                    const amount = data.amount ? `${(data.amount / 100).toLocaleString('fr-FR')} €` : '—';
                    const amountEl = document.getElementById('amount-display');
                    const emailEl = document.getElementById('email-display');
                    if (amountEl) amountEl.textContent = amount;
                    if (emailEl) emailEl.textContent = data.customer_email ?? '—';

                    if (data.product && PRODUCT_IMAGES[data.product]) {
                        const img = document.getElementById('product-img');
                        if (img) img.src = PRODUCT_IMAGES[data.product];
                    }

                    if (data.receipt_url) {
                        const btn = document.getElementById('receipt-btn');
                        if (btn) { btn.href = data.receipt_url; btn.style.display = 'inline-block'; }
                    }
                })
                .catch(() => {
                    const loading = document.getElementById('loading');
                    if (loading) loading.textContent = 'Commande enregistrée.';
                });
        } else {
            const loading = document.getElementById('loading');
            if (loading) loading.textContent = 'Commande enregistrée.';
        }
    </script>
</Base>
