@extends('layouts.app')

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

@push('styles')
<style>
.orders-page {
    padding-bottom: 110px;
}

.orders-head {
    margin-bottom: 18px;
}

.orders-title {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -.7px;
}

.orders-subtitle {
    margin-top: 5px;
    color: #858594;
    font-size: 13px;
}

.order-count {
    display: inline-flex;
    margin-top: 12px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(104,87,245,.09);
    color: #6857f5;
    font-size: 11px;
    font-weight: 850;
}

.order-card {
    padding: 17px;
    margin-bottom: 13px;
}

.order-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.order-number {
    font-size: 14px;
    font-weight: 850;
    word-break: break-all;
}

.order-date {
    margin-top: 5px;
    color: #8a8a99;
    font-size: 11px;
}

.status {
    flex-shrink: 0;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
}

.status.pending {
    background: #fff5dc;
    color: #a86f00;
}

.status.success {
    background: #e9f8ef;
    color: #168044;
}

.status.cancelled {
    background: #ffeded;
    color: #c43d3d;
}

.items {
    margin-top: 15px;
}

.item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(0,0,0,.055);
}

.item:first-child {
    border-top: 0;
}

.item-image {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    border-radius: 13px;
    object-fit: cover;
    background: #f0eff7;
}

.item-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6857f5;
    font-size: 14px;
    font-weight: 900;
}

.item-info {
    min-width: 0;
    flex: 1;
}

.item-name {
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
}

.item-meta {
    margin-top: 3px;
    color: #9292a0;
    font-size: 10px;
}

.item-price {
    font-size: 12px;
    font-weight: 850;
}

.order-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,.06);
}

.total-label {
    color: #858594;
    font-size: 11px;
}

.total-value {
    margin-top: 3px;
    font-size: 18px;
    font-weight: 900;
}

.action-button {
    min-width: 125px;
    min-height: 43px;
    padding: 0 15px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg,#6857f5,#8b5cf6);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 9px 22px rgba(104,87,245,.18);
}

.action-button.download {
    background: linear-gradient(135deg,#168044,#20a45d);
    box-shadow: 0 9px 22px rgba(22,128,68,.16);
}

.action-button.cancelled {
    background: #f2f2f6;
    color: #777787;
    box-shadow: none;
    cursor: default;
}

.action-button:active {
    transform: scale(.97);
}

.skeleton {
    height: 190px;
    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: 45px 20px;
    text-align: center;
}

.empty-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    border-radius: 20px;
    background: #f0eff7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6857f5;
    font-size: 24px;
    font-weight: 900;
}

.empty-title {
    font-size: 16px;
    font-weight: 850;
}

.empty-text {
    margin-top: 6px;
    color: #888897;
    font-size: 12px;
}

.empty-button {
    margin-top: 17px;
    padding: 12px 18px;
    border: 0;
    border-radius: 14px;
    background: #6857f5;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.error {
    padding: 25px;
    text-align: center;
}

.error-title {
    font-size: 16px;
    font-weight: 850;
}

.error-text {
    margin-top: 6px;
    color: #888897;
    font-size: 12px;
}

.retry {
    margin-top: 15px;
    padding: 12px 18px;
    border: 0;
    border-radius: 14px;
    background: #6857f5;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.hidden {
    display: none !important;
}
</style>
@endpush

@section('content')
<div class="orders-page">

    <div class="orders-head">
        <div class="orders-title">My Orders</div>

        <div class="orders-subtitle">
            View your purchases and payment status
        </div>

        <div id="orderCount" class="order-count">
            Loading...
        </div>
    </div>

    <div id="loading">
        <div class="skeleton"></div>
        <div class="skeleton"></div>
    </div>

    <div id="errorBox" class="card error hidden">
        <div class="error-title">
            Unable to load orders
        </div>

        <div id="errorText" class="error-text">
            Please try again.
        </div>

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

    <div id="ordersList"></div>

    <div id="emptyBox" class="card empty hidden">
        <div class="empty-icon">◫</div>

        <div class="empty-title">
            No orders yet
        </div>

        <div class="empty-text">
            Your purchased products will appear here.
        </div>

        <button
            class="empty-button"
            onclick="openShop()"
        >
            Browse Shop
        </button>
    </div>

</div>
@endsection

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

function escapeHtml(value) {
    return String(value ?? '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

function money(value) {
    return '৳' + Number(value || 0).toFixed(2);
}

function formatDate(value) {
    if (!value) return '-';

    const date = new Date(value);

    if (isNaN(date.getTime())) {
        return value;
    }

    return date.toLocaleString('en-BD', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: 'numeric',
        minute: '2-digit'
    });
}

function getStatus(order) {
    const orderStatus =
        String(order.status || '').toLowerCase();

    const paymentStatus =
        String(order.payment_status || '').toLowerCase();

    if (
        orderStatus === 'completed' ||
        orderStatus === 'paid' ||
        paymentStatus === 'completed' ||
        paymentStatus === 'paid'
    ) {
        return {
            type: 'success',
            text: 'Paid'
        };
    }

    if (
        orderStatus === 'cancelled' ||
        orderStatus === 'canceled' ||
        orderStatus === 'failed' ||
        paymentStatus === 'cancelled' ||
        paymentStatus === 'canceled' ||
        paymentStatus === 'failed'
    ) {
        return {
            type: 'cancelled',
            text: 'Cancelled'
        };
    }

    return {
        type: 'pending',
        text: 'Pending'
    };
}

function renderItems(items) {
    if (!items || !items.length) {
        return `
            <div class="item">
                <div class="item-info">
                    <div class="item-name">
                        No product information
                    </div>
                </div>
            </div>
        `;
    }

    return items.map(item => {
        const product = item.product || {};

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

        return `
            <div class="item">
                ${image}

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

                    <div class="item-meta">
                        Quantity: ${Number(item.quantity || 1)}
                    </div>
                </div>

                <div class="item-price">
                    ${money(item.total)}
                </div>
            </div>
        `;
    }).join('');
}

function actionButton(order, status) {
    if (status.type === 'success') {
        return `
            <button
                class="action-button download"
                onclick="openDownloads()"
            >
                Download
            </button>
        `;
    }

    if (status.type === 'cancelled') {
        return `
            <button
                class="action-button cancelled"
                disabled
            >
                Cancelled
            </button>
        `;
    }

    return `
        <button
            class="action-button cancelled"
            disabled
        >
            Pending
        </button>
    `;
}

function renderOrders(orders) {
    const container =
        document.getElementById('ordersList');

    container.innerHTML = orders.map(order => {
        const status = getStatus(order);

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

                <div class="order-top">
                    <div>
                        <div class="order-number">
                            ${escapeHtml(
                                order.order_number || '-'
                            )}
                        </div>

                        <div class="order-date">
                            ${formatDate(order.created_at)}
                        </div>
                    </div>

                    <div class="status ${status.type}">
                        ${status.text}
                    </div>
                </div>

                <div class="items">
                    ${renderItems(order.items || [])}
                </div>

                <div class="order-bottom">
                    <div>
                        <div class="total-label">
                            Total
                        </div>

                        <div class="total-value">
                            ${money(order.total)}
                        </div>
                    </div>

                    ${actionButton(order, status)}
                </div>

            </div>
        `;
    }).join('');
}

async function loadOrders() {
    document
        .getElementById('loading')
        .classList.remove('hidden');

    document
        .getElementById('errorBox')
        .classList.add('hidden');

    document
        .getElementById('emptyBox')
        .classList.add('hidden');

    document
        .getElementById('ordersList')
        .innerHTML = '';

    try {
        if (!ordersTg || !ordersTg.initData) {
            throw new Error(
                'Please open BDCodeShop from Telegram.'
            );
        }

        const response = await fetch(
            "{{ url('/api/orders/data') }}",
            {
                method: 'POST',

                headers: {
                    'Content-Type':
                        'application/x-www-form-urlencoded;charset=UTF-8'
                },

                body: new URLSearchParams({
                    init_data: ordersTg.initData
                })
            }
        );

        const data = await response.json();

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

        const orders = data.orders || [];

        document
            .getElementById('loading')
            .classList.add('hidden');

        document
            .getElementById('orderCount')
            .textContent =
            `${orders.length} ${orders.length === 1 ? 'Order' : 'Orders'}`;

        if (!orders.length) {
            document
                .getElementById('emptyBox')
                .classList.remove('hidden');

            return;
        }

        renderOrders(orders);

    } catch (error) {
        console.error(error);

        document
            .getElementById('loading')
            .classList.add('hidden');

        document
            .getElementById('errorBox')
            .classList.remove('hidden');

        document
            .getElementById('errorText')
            .textContent =
            error.message ||
            'Unable to load orders.';
    }
}

function continuePayment(orderNumber) {
    window.location.href =
        "{{ url('/payment') }}/" +
        orderNumber;
}

function openDownloads() {
    window.location.href =
        "{{ url('/downloads') }}";
}

function openShop() {
    window.location.href =
        "{{ url('/shop') }}";
}

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

loadOrders();
</script>
@endpush