@extends('layouts.app')

@section('title', 'My Downloads - BDCodeShop')

@push('styles')
<style>
.downloads-page{padding-bottom:110px}
.downloads-head{margin-bottom:20px}
.downloads-title{font-size:27px;font-weight:900;letter-spacing:-.8px}
.downloads-subtitle{margin-top:5px;color:#858594;font-size:13px;line-height:1.5}
.download-count{display:inline-flex;margin-top:13px;padding:7px 12px;border-radius:999px;background:rgba(104,87,245,.09);color:#6857f5;font-size:11px;font-weight:850}
.download-card{position:relative;overflow:hidden;padding:17px;margin-bottom:13px}
.download-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,#6857f5,#8b5cf6)}
.product-row{display:flex;align-items:center;gap:13px}
.product-image{width:62px;height:62px;flex:0 0 62px;border-radius:17px;object-fit:cover;background:#f0eff7}
.product-placeholder{display:flex;align-items:center;justify-content:center;color:#6857f5;font-size:18px;font-weight:900}
.product-info{min-width:0;flex:1}
.product-name{font-size:15px;font-weight:850;line-height:1.35}
.product-version{display:inline-flex;margin-top:6px;padding:4px 8px;border-radius:8px;background:#f3f2f8;color:#777787;font-size:10px;font-weight:750}
.download-icon{width:40px;height:40px;flex:0 0 40px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:rgba(104,87,245,.09);color:#6857f5;font-size:19px;font-weight:900}
.download-meta{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(0,0,0,.055)}
.meta-box{padding:10px;border-radius:13px;background:#f8f8fb}
.meta-label{color:#9999a7;font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.4px}
.meta-value{margin-top:4px;color:#30303d;font-size:11px;font-weight:800;word-break:break-all}
.download-button{width:100%;min-height:48px;margin-top:14px;border:0;border-radius:15px;background:linear-gradient(135deg,#6857f5,#8b5cf6);color:#fff;font-size:13px;font-weight:850;cursor:pointer;box-shadow:0 10px 25px rgba(104,87,245,.20)}
.download-button:active{transform:scale(.98)}
.download-button:disabled{opacity:.65;cursor:not-allowed}
.loading-card{height:180px;margin-bottom:13px;border-radius:22px;background:linear-gradient(90deg,#eeeeF3 25%,#f8f8fa 50%,#eeeeF3 75%);background-size:200% 100%;animation:loading 1.3s infinite}
@keyframes loading{from{background-position:200% 0}to{background-position:-200% 0}}
.empty{padding:48px 20px;text-align:center}
.empty-icon{width:64px;height:64px;margin:0 auto 15px;border-radius:21px;display:flex;align-items:center;justify-content:center;background:#f0eff7;color:#6857f5;font-size:25px;font-weight:900}
.empty-title{font-size:17px;font-weight:850}
.empty-text{margin-top:7px;color:#888897;font-size:12px;line-height:1.5}
.empty-button{margin-top:18px;padding:12px 19px;border:0;border-radius:14px;background:#6857f5;color:#fff;font-size:12px;font-weight:800}
.error{padding:26px;text-align:center}
.error-title{font-size:16px;font-weight:850}
.error-text{margin-top:6px;color:#888897;font-size:12px;line-height:1.5}
.retry{margin-top:16px;padding:12px 19px;border:0;border-radius:14px;background:#6857f5;color:#fff;font-size:12px;font-weight:800}
</style>
@endpush

@section('content')

<div class="downloads-page">

    <div class="downloads-head">
        <div class="downloads-title">My Downloads</div>
        <div class="downloads-subtitle">
            Access all products you have purchased.
        </div>

        <div class="download-count" id="downloadCount">
            Loading...
        </div>
    </div>

    <div id="downloadsList">

        <div class="loading-card"></div>
        <div class="loading-card"></div>

    </div>

</div>

@endsection

@push('scripts')
<script>
const downloadsTg = window.Telegram?.WebApp;

if (downloadsTg) {
    downloadsTg.ready();
    downloadsTg.expand();
}

function getInitData() {
    return downloadsTg?.initData || '';
}

function escapeHtml(value) {
    const div = document.createElement('div');
    div.textContent = value ?? '';
    return div.innerHTML;
}

async function loadDownloads() {

    const list = document.getElementById('downloadsList');
    const count = document.getElementById('downloadCount');

    const initData = getInitData();

    if (!initData) {
        list.innerHTML = `
            <div class="card error">
                <div class="error-title">Open from Telegram</div>
                <div class="error-text">
                    Please open BDCodeShop from Telegram to access your downloads.
                </div>
                <button class="retry" onclick="loadDownloads()">
                    Retry
                </button>
            </div>
        `;
        return;
    }

    try {

        const response = await fetch('/api/downloads/data', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                init_data: initData
            })
        });

        const data = await response.json();

        if (!response.ok || !data.success) {
            throw new Error(
                data.message || 'Unable to load downloads.'
            );
        }

        const downloads = data.downloads || [];

        count.textContent =
            downloads.length + ' ' +
            (downloads.length === 1 ? 'Product' : 'Products');

        if (!downloads.length) {

            list.innerHTML = `
                <div class="card empty">
                    <div class="empty-icon">↓</div>
                    <div class="empty-title">
                        No Downloads Yet
                    </div>
                    <div class="empty-text">
                        Products you purchase will appear here.
                    </div>
                    <button class="empty-button"
                            onclick="window.location.href='/shop'">
                        Browse Shop
                    </button>
                </div>
            `;

            return;
        }

        list.innerHTML = downloads.map(item => {

            const image = item.thumbnail
                ? `
                    <img
                        class="product-image"
                        src="${escapeHtml(item.thumbnail)}"
                        alt=""
                    >
                `
                : `
                    <div class="product-image product-placeholder">
                        BC
                    </div>
                `;

            return `
                <div class="card download-card">

                    <div class="product-row">

                        ${image}

                        <div class="product-info">

                            <div class="product-name">
                                ${escapeHtml(item.name)}
                            </div>

                            ${
                                item.version
                                ? `
                                    <div class="product-version">
                                        v${escapeHtml(item.version)}
                                    </div>
                                `
                                : ''
                            }

                        </div>

                        <div class="download-icon">
                            ↓
                        </div>

                    </div>

                    <div class="download-meta">

                        <div class="meta-box">
                            <div class="meta-label">
                                Order
                            </div>

                            <div class="meta-value">
                                ${escapeHtml(item.order_number)}
                            </div>
                        </div>

                        <div class="meta-box">
                            <div class="meta-label">
                                Purchased
                            </div>

                            <div class="meta-value">
                                ${escapeHtml(item.purchased_at)}
                            </div>
                        </div>

                    </div>

                    <button
                        class="download-button"
                        onclick="downloadProduct(
                            '${encodeURIComponent(item.order_number)}',
                            '${item.product_id}',
                            this
                        )"
                    >
                        Download Product
                    </button>

                </div>
            `;

        }).join('');

    } catch (error) {

        console.error(error);

        list.innerHTML = `
            <div class="card error">

                <div class="error-title">
                    Unable to Load Downloads
                </div>

                <div class="error-text">
                    ${escapeHtml(error.message)}
                </div>

                <button class="retry" onclick="loadDownloads()">
                    Retry
                </button>

            </div>
        `;
    }
}

async function downloadProduct(orderNumber, productId, button) {

    const initData = getInitData();

    if (!initData) {
        alert('Please open BDCodeShop from Telegram.');
        return;
    }

    if (button.disabled) {
        return;
    }

    button.disabled = true;
    button.textContent = 'Preparing Download...';

    try {

        /*
         * The download controller expects init_data
         * from the query string.
         */
        const downloadUrl =
            '/download/' +
            orderNumber +
            '/' +
            encodeURIComponent(productId) +
            '?init_data=' +
            encodeURIComponent(initData);

        /*
         * Use Telegram external browser when available.
         * This keeps the signed init_data attached to the request.
         */
        if (downloadsTg?.openLink) {

            downloadsTg.openLink(downloadUrl);

        } else {

            window.location.href = downloadUrl;

        }

        setTimeout(() => {
            button.disabled = false;
            button.textContent = 'Download Product';
        }, 2500);

    } catch (error) {

        console.error(error);

        button.disabled = false;
        button.textContent = 'Download Product';

        alert('Unable to start download. Please try again.');
    }
}

loadDownloads();
</script>
@endpush