@extends('layouts.app')

@section('title', 'Dashboard')

@push('styles')
<style>
:root {
    --primary: #6857f5;
    --secondary: #8b5cf6;
    --text: #171725;
    --muted: #858594;
    --bg: #f7f7fb;
    --card: #ffffff;
}

.dashboard {
    padding-bottom: 8px;
}

/* HERO */

.hero {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: 26px;
    background: linear-gradient(135deg,#6857f5 0%,#7659f5 45%,#8b5cf6 100%);
    color: #fff;
    box-shadow: 0 18px 45px rgba(104,87,245,.22);
}

.hero::before {
    content:"";
    position:absolute;
    width:190px;
    height:190px;
    right:-80px;
    top:-90px;
    border-radius:50%;
    background:rgba(255,255,255,.10);
}

.hero::after {
    content:"";
    position:absolute;
    width:130px;
    height:130px;
    left:-70px;
    bottom:-85px;
    border-radius:50%;
    background:rgba(255,255,255,.07);
}

.hero-content {
    position:relative;
    z-index:2;
}

.hero-top {
    display:flex;
    align-items:center;
    gap:13px;
}

.avatar {
    width:52px;
    height:52px;
    border-radius:17px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.22);
    font-size:18px;
    font-weight:900;
    flex-shrink:0;
}

.avatar img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-user {
    min-width:0;
}

.hero-name-row {
    display:flex;
    align-items:center;
    gap:6px;
}

.hero-name {
    max-width:190px;
    font-size:16px;
    font-weight:850;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.verify {
    width:18px;
    height:18px;
    display:none;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    color:#6857f5;
    font-size:11px;
    font-weight:900;
}

.hero-username {
    margin-top:3px;
    font-size:11px;
    opacity:.75;
}

.hero-welcome {
    margin-top:22px;
    font-size:12px;
    opacity:.78;
}

.hero-balance {
    margin-top:4px;
    font-size:31px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:-1px;
}

.hero-actions {
    display:flex;
    gap:8px;
    margin-top:17px;
}

.hero-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:37px;
    padding:0 14px;
    border-radius:12px;
    color:#fff;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.22);
    font-size:11px;
    font-weight:800;
    backdrop-filter:blur(10px);
}

.hero-btn.primary {
    background:#fff;
    color:#6857f5;
}

/* QUICK ACTIONS */

.section {
    margin-top:24px;
}

.section-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:11px;
}

.section-title {
    font-size:18px;
    font-weight:900;
    letter-spacing:-.4px;
}

.section-link {
    color:#6857f5;
    font-size:11px;
    font-weight:800;
}

.quick-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}

.quick-card {
    min-height:86px;
    padding:12px 5px;
    border-radius:18px;
    background:#fff;
    border:1px solid rgba(20,20,40,.05);
    box-shadow:0 7px 25px rgba(25,20,60,.045);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
}

.quick-icon {
    width:39px;
    height:39px;
    border-radius:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f0eeff;
    color:#6857f5;
    font-size:17px;
    font-weight:900;
}

.quick-label {
    font-size:10px;
    color:#555565;
    font-weight:800;
}

/* STATS */

.stats {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.stat {
    padding:15px 8px;
    border-radius:18px;
    background:#fff;
    border:1px solid rgba(20,20,40,.05);
    text-align:center;
}

.stat-icon {
    color:#6857f5;
    font-size:15px;
    margin-bottom:5px;
}

.stat-value {
    font-size:20px;
    font-weight:900;
}

.stat-label {
    margin-top:3px;
    color:#8a8a98;
    font-size:9px;
    font-weight:750;
}

/* PRODUCTS */

.products {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
}

.product {
    position:relative;
    overflow:hidden;
    border-radius:21px;
    background:#fff;
    border:1px solid rgba(20,20,40,.055);
    box-shadow:0 9px 28px rgba(25,20,60,.055);
    transition:transform .15s ease;
}

.product:active {
    transform:scale(.975);
}

.product-image {
    position:relative;
    width:100%;
    aspect-ratio:1/0.82;
    overflow:hidden;
    background:linear-gradient(135deg,#f0eeff,#f8f7ff);
}

.product-image img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.product-placeholder {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#6857f5;
    font-size:25px;
    font-weight:900;
}

.discount-badge {
    position:absolute;
    top:9px;
    left:9px;
    padding:5px 8px;
    border-radius:8px;
    background:#171725;
    color:#fff;
    font-size:9px;
    font-weight:850;
}

.featured-badge {
    position:absolute;
    top:9px;
    right:9px;
    padding:5px 8px;
    border-radius:8px;
    background:rgba(255,255,255,.92);
    color:#6857f5;
    font-size:9px;
    font-weight:850;
}

.product-body {
    padding:12px;
}

.product-name {
    font-size:13px;
    font-weight:900;
    line-height:1.35;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.product-description {
    margin-top:5px;
    color:#8a8a98;
    font-size:9px;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.product-bottom {
    margin-top:10px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:6px;
}

.price {
    display:flex;
    flex-direction:column;
    min-width:0;
}

.current-price {
    color:#6857f5;
    font-size:14px;
    font-weight:900;
}

.old-price {
    margin-top:1px;
    color:#aaaab5;
    font-size:9px;
    text-decoration:line-through;
}

.buy-icon {
    width:31px;
    height:31px;
    flex-shrink:0;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#6857f5;
    color:#fff;
    font-size:15px;
    font-weight:900;
}

/* EMPTY */

.empty {
    grid-column:1/-1;
    padding:35px 20px;
    text-align:center;
    color:#858594;
    font-size:11px;
    background:#fff;
    border-radius:20px;
}

/* LOADING */

.loading {
    padding:70px 20px;
    text-align:center;
    color:#858594;
    font-size:12px;
}

.spinner {
    width:30px;
    height:30px;
    margin:0 auto 13px;
    border:3px solid #e9e7f5;
    border-top-color:#6857f5;
    border-radius:50%;
    animation:spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform:rotate(360deg);
    }
}

/* ERROR */

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

.error-title {
    font-size:15px;
    font-weight:900;
}

.error-message {
    margin-top:7px;
    color:#888895;
    font-size:11px;
}

.retry {
    margin-top:14px;
    padding:10px 17px;
    border:0;
    border-radius:12px;
    background:#6857f5;
    color:#fff;
    font-size:11px;
    font-weight:850;
}

/* MOBILE */

@media(max-width:390px) {

    .products {
        gap:8px;
    }

    .product-body {
        padding:10px;
    }

    .product-name {
        font-size:12px;
    }

    .current-price {
        font-size:13px;
    }

    .hero {
        padding:19px;
    }

    .hero-balance {
        font-size:28px;
    }

}
</style>
@endpush


@section('content')

<div id="loading" class="card loading">

    <div class="spinner"></div>

    Loading BDCodeShop...

</div>


<div id="error"
     class="card error"
     style="display:none;">

    <div class="error-title">
        Unable to load dashboard
    </div>

    <div id="errorMessage"
         class="error-message">
        Something went wrong.
    </div>

    <button
        type="button"
        class="retry"
        onclick="loadDashboard()">
        Try Again
    </button>

</div>


<div id="dashboard"
     class="dashboard"
     style="display:none;">

    <!-- HERO -->

    <div class="hero">

        <div class="hero-content">

            <div class="hero-top">

                <div id="avatar"
                     class="avatar">
                    BC
                </div>

                <div class="hero-user">

                    <div class="hero-name-row">

                        <div id="name"
                             class="hero-name">
                            User
                        </div>

                        <div id="verify"
                             class="verify">
                            ✓
                        </div>

                    </div>

                    <div id="username"
                         class="hero-username">
                        Telegram User
                    </div>

                </div>

            </div>


            <div class="hero-welcome">
                Welcome back
            </div>

            <div id="balance"
                 class="hero-balance">
                ৳0.00
            </div>


            <div class="hero-actions">

                <a href="{{ url('/add-money') }}"
                   class="hero-btn primary">
                    + Add Money
                </a>

                <a href="{{ url('/orders') }}"
                   class="hero-btn">
                    My Orders
                </a>

            </div>

        </div>

    </div>


    <!-- QUICK -->

    <div class="section">

        <div class="section-head">

            <div class="section-title">
                Quick Access
            </div>

        </div>


        <div class="quick-grid">

            <a href="{{ url('/shop') }}"
               class="quick-card">

                <div class="quick-icon">
                    ◈
                </div>

                <div class="quick-label">
                    Shop
                </div>

            </a>


            <a href="{{ url('/orders') }}"
               class="quick-card">

                <div class="quick-icon">
                    ◫
                </div>

                <div class="quick-label">
                    Orders
                </div>

            </a>


            <a href="{{ url('/downloads') }}"
               class="quick-card">

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

                <div class="quick-label">
                    Downloads
                </div>

            </a>


            <a href="{{ url('/profile') }}"
               class="quick-card">

                <div class="quick-icon">
                    ♙
                </div>

                <div class="quick-label">
                    Profile
                </div>

            </a>

        </div>

    </div>


    <!-- STATS -->

    <div class="section">

        <div class="section-head">

            <div class="section-title">
                Activity
            </div>

        </div>


        <div class="stats">

            <div class="stat">

                <div class="stat-icon">
                    ◫
                </div>

                <div id="orders"
                     class="stat-value">
                    0
                </div>

                <div class="stat-label">
                    ORDERS
                </div>

            </div>


            <div class="stat">

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

                <div id="downloads"
                     class="stat-value">
                    0
                </div>

                <div class="stat-label">
                    DOWNLOADS
                </div>

            </div>


            <div class="stat">

                <div class="stat-icon">
                    ✓
                </div>

                <div id="purchases"
                     class="stat-value">
                    0
                </div>

                <div class="stat-label">
                    PURCHASES
                </div>

            </div>

        </div>

    </div>


    <!-- PRODUCTS -->

    <div class="section">

        <div class="section-head">

            <div class="section-title">
                Featured Products
            </div>

            <a href="{{ url('/shop') }}"
               class="section-link">
                View All
            </a>

        </div>


        <div id="products"
             class="products">

        </div>

    </div>

</div>

@endsection


@push('scripts')
<script>

let dashboardRequest = false;


async function loadDashboard() {

    if (dashboardRequest) {
        return;
    }

    dashboardRequest = true;


    const tg =
        window.Telegram &&
        window.Telegram.WebApp;


    const loading =
        document.getElementById("loading");

    const error =
        document.getElementById("error");

    const dashboard =
        document.getElementById("dashboard");


    loading.style.display = "block";
    error.style.display = "none";
    dashboard.style.display = "none";


    try {

        if (!tg) {

            throw new Error(
                "Please open BDCodeShop from Telegram."
            );

        }


        tg.ready();
        tg.expand();


        const initData =
            tg.initData;


        if (!initData) {

            throw new Error(
                "Telegram authentication data not found."
            );

        }


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

                    headers:{
                        "Content-Type":
                            "application/json",

                        "Accept":
                            "application/json"
                    },

                    body:JSON.stringify({
                        init_data:initData
                    })
                }
            );


        const data =
            await response.json();


        console.log(
            "BDCodeShop API:",
            data
        );


        if (!response.ok ||
            data.success !== true) {

            throw new Error(
                data.message ||
                "Dashboard API error."
            );

        }


        renderDashboard(data);


        loading.style.display = "none";
        dashboard.style.display = "block";


    } catch (e) {

        console.error(e);


        loading.style.display = "none";
        dashboard.style.display = "none";
        error.style.display = "block";


        document.getElementById(
            "errorMessage"
        ).textContent =
            e.message ||
            "Something went wrong.";


    } finally {

        dashboardRequest = false;

    }

}


function renderDashboard(data) {

    const user =
        data.user || {};

    const stats =
        data.stats || {};

    const products =
        Array.isArray(data.products)
            ? data.products
            : [];


    /*
     * USER
     */

    const name =
        user.name ||
        "Telegram User";


    document.getElementById(
        "name"
    ).textContent =
        name;


    document.getElementById(
        "username"
    ).textContent =
        user.username
            ? "@" + user.username
            : "Telegram User";


    /*
     * VERIFIED
     */

    const verified =
        user.email_verified === true ||
        user.email_verified === 1 ||
        user.email_verified === "1";


    document.getElementById(
        "verify"
    ).style.display =
        verified
            ? "flex"
            : "none";


    /*
     * PHOTO
     */

    const avatar =
        document.getElementById(
            "avatar"
        );


    if (user.photo) {

        avatar.innerHTML =
            '<img src="' +
            escapeHtml(user.photo) +
            '" alt="Profile">';

    } else {

        avatar.textContent =
            name.trim().charAt(0).toUpperCase() ||
            "B";

    }


    /*
     * BALANCE
     */

    const balance =
        parseFloat(
            String(
                user.balance ?? 0
            ).replace(/,/g,"")
        ) || 0;


    document.getElementById(
        "balance"
    ).textContent =
        "৳" +
        balance.toFixed(2);


    /*
     * STATS
     */

    document.getElementById(
        "orders"
    ).textContent =
        Number(
            stats.orders || 0
        );


    document.getElementById(
        "downloads"
    ).textContent =
        Number(
            stats.downloads || 0
        );


    document.getElementById(
        "purchases"
    ).textContent =
        Number(
            stats.purchases || 0
        );


    /*
     * PRODUCTS
     */

    renderProducts(products);

}


function renderProducts(products) {

    const container =
        document.getElementById(
            "products"
        );


    if (!products.length) {

        container.innerHTML =
            '<div class="empty">' +
            'No featured products available.' +
            '</div>';

        return;

    }


    container.innerHTML =
        products.map(function(product) {

            const price =
                Number(product.price || 0);


            const discount =
                product.discount_price !== null &&
                product.discount_price !== undefined
                    ? Number(
                        product.discount_price
                      )
                    : null;


            const discounted =
                discount !== null &&
                discount < price;


            const finalPrice =
                discounted
                    ? discount
                    : price;


            let discountBadge = "";


            if (discounted) {

                const percent =
                    Math.round(
                        ((price - discount) /
                        price) * 100
                    );


                discountBadge =
                    '<div class="discount-badge">' +
                    '-' +
                    percent +
                    '% OFF' +
                    '</div>';

            }


            let image = "";


            if (product.thumbnail) {

                image =
                    '<img src="' +
                    escapeHtml(
                        product.thumbnail
                    ) +
                    '" alt="' +
                    escapeHtml(
                        product.name ||
                        "Product"
                    ) +
                    '">';

            } else {

                image =
                    '<div class="product-placeholder">' +
                    'BC' +
                    '</div>';

            }


            const oldPrice =
                discounted
                    ?
                    '<span class="old-price">৳' +
                    price.toFixed(2) +
                    '</span>'
                    :
                    "";


            return `

                <a
                    class="product"
                    href="{{ url('/shop') }}/${encodeURIComponent(product.slug || '')}"
                >

                    <div class="product-image">

                        ${image}

                        ${discountBadge}

                        ${
                            product.is_featured
                                ?
                                '<div class="featured-badge">Featured</div>'
                                :
                                ''
                        }

                    </div>


                    <div class="product-body">

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


                        <div class="product-description">
                            ${escapeHtml(
                                product.short_description ||
                                "Premium digital product"
                            )}
                        </div>


                        <div class="product-bottom">

                            <div class="price">

                                <span class="current-price">
                                    ৳${finalPrice.toFixed(2)}
                                </span>

                                ${oldPrice}

                            </div>


                            <div class="buy-icon">
                                ›
                            </div>

                        </div>

                    </div>

                </a>

            `;

        }).join("");

}


function escapeHtml(value) {

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

}


document.addEventListener(
    "DOMContentLoaded",
    function() {

        loadDashboard();

    }
);

</script>
@endpush