@extends('layouts.app')

@section('title', 'Profile • BDCodeShop')

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

/* Hero */
.profile-hero {
    position: relative;
    overflow: hidden;
    padding: 26px 20px 22px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 90% 10%, rgba(139,92,246,.35), transparent 35%),
        radial-gradient(circle at 0% 100%, rgba(104,87,245,.30), transparent 38%),
        linear-gradient(135deg, #211b48, #4b3a91 55%, #6857f5);
    color: #fff;
    box-shadow: 0 20px 55px rgba(57,45,130,.22);
}

.profile-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    right: -45px;
    top: -55px;
}

.profile-top {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.avatar-wrap {
    position: relative;
    flex: 0 0 auto;
}

.profile-avatar {
    width: 82px;
    height: 82px;
    border-radius: 27px;
    object-fit: cover;
    display: block;
    border: 3px solid rgba(255,255,255,.75);
    background: rgba(255,255,255,.14);
    box-shadow:
        0 10px 30px rgba(0,0,0,.22),
        0 0 0 6px rgba(255,255,255,.08);
}

.avatar-fallback {
    width: 82px;
    height: 82px;
    border-radius: 27px;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.15);
    border: 3px solid rgba(255,255,255,.7);
    font-size: 30px;
    font-weight: 900;
}

.verified-badge {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #6857f5;
    border: 3px solid #493982;
    font-size: 13px;
    font-weight: 900;
}

.profile-name {
    font-size: 22px;
    line-height: 1.15;
    font-weight: 850;
    letter-spacing: -.5px;
    word-break: break-word;
}

.profile-username {
    margin-top: 5px;
    font-size: 13px;
    color: rgba(255,255,255,.72);
}

.profile-status {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.13);
    font-size: 11px;
    font-weight: 750;
}

/* Balance */
.balance-card {
    position: relative;
    margin-top: 20px;
    padding: 18px;
    border-radius: 21px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(15px);
}

.balance-label {
    font-size: 11px;
    color: rgba(255,255,255,.66);
    font-weight: 700;
}

.balance-value {
    margin-top: 4px;
    font-size: 27px;
    font-weight: 900;
    letter-spacing: -.7px;
}

.balance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wallet-link {
    padding: 9px 13px;
    border-radius: 12px;
    background: #fff;
    color: #5041bc;
    font-size: 11px;
    font-weight: 800;
}

/* Section */
.section {
    margin-top: 24px;
}

.section-title {
    margin-bottom: 11px;
    font-size: 15px;
    font-weight: 850;
}

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

.stat-card {
    padding: 17px 10px;
    text-align: center;
    border-radius: 19px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 10px 30px rgba(25,20,60,.06);
}

.stat-icon {
    width: 34px;
    height: 34px;
    margin: 0 auto 8px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(104,87,245,.09);
    color: #6857f5;
    font-size: 15px;
    font-weight: 900;
}

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

.stat-label {
    margin-top: 3px;
    color: #858593;
    font-size: 10px;
    font-weight: 650;
}

/* Account */
.account-card {
    overflow: hidden;
    background: #fff;
    border-radius: 22px;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 10px 35px rgba(25,20,60,.06);
}

.info-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
}

.info-row + .info-row {
    border-top: 1px solid #f0f0f4;
}

.info-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f2ff;
    color: #6857f5;
    font-size: 15px;
    font-weight: 850;
}

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

.info-label {
    color: #90909d;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.info-value {
    margin-top: 3px;
    color: #22222d;
    font-size: 13px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.verified-text {
    color: #18a66a;
}

.unverified-text {
    color: #e29a20;
}

/* Quick actions */
.quick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
}

.quick-card {
    min-height: 86px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 10px 30px rgba(25,20,60,.055);
    transition: transform .15s ease;
}

.quick-card:active {
    transform: scale(.97);
}

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

.quick-title {
    font-size: 12px;
    font-weight: 850;
}

.quick-subtitle {
    margin-top: 3px;
    color: #92929f;
    font-size: 10px;
}

/* Support */
.support-card {
    padding: 19px;
    border-radius: 23px;
    background: linear-gradient(135deg, #fff, #f6f3ff);
    border: 1px solid rgba(104,87,245,.10);
    box-shadow: 0 10px 35px rgba(25,20,60,.05);
}

.support-title {
    font-size: 15px;
    font-weight: 850;
}

.support-text {
    margin-top: 5px;
    color: #858593;
    font-size: 12px;
    line-height: 1.5;
}

.support-button {
    width: 100%;
    margin-top: 14px;
    padding: 13px;
    border: 0;
    border-radius: 15px;
    background: #6857f5;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

/* Loading */
.profile-loading {
    padding: 50px 15px;
    text-align: center;
    color: #858593;
    font-size: 13px;
}

.profile-error {
    display: none;
    padding: 30px 15px;
    text-align: center;
    color: #777787;
}

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

@media (max-width: 380px) {
    .profile-avatar,
    .avatar-fallback {
        width: 72px;
        height: 72px;
        border-radius: 23px;
    }

    .profile-name {
        font-size: 19px;
    }

    .stats-grid {
        gap: 7px;
    }

    .quick-grid {
        gap: 8px;
    }
}
</style>
@endpush

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

    <div id="profileLoading" class="profile-loading">
        Loading profile...
    </div>

    <div id="profileError" class="profile-error">
        Unable to load profile.
        <br>
        <button class="retry-btn" onclick="loadProfile()">Retry</button>
    </div>

    <div id="profileContent" style="display:none;">

        <!-- Profile Hero -->
        <section class="profile-hero">

            <div class="profile-glow"></div>

            <div class="profile-top">

                <div class="avatar-wrap">

                    <img
                        id="profileAvatar"
                        class="profile-avatar"
                        src=""
                        alt="Profile"
                        referrerpolicy="no-referrer"
                    >

                    <div id="avatarFallback" class="avatar-fallback">
                        U
                    </div>

                    <div id="verifiedBadge" class="verified-badge">
                        ✓
                    </div>

                </div>

                <div style="min-width:0;">

                    <div id="profileName" class="profile-name">
                        User
                    </div>

                    <div id="profileUsername" class="profile-username">
                        @username
                    </div>

                    <div id="profileStatus" class="profile-status">
                        ● Account
                    </div>

                </div>

            </div>

            <div class="balance-card">

                <div class="balance-row">

                    <div>
                        <div class="balance-label">
                            Wallet Balance
                        </div>

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

                    <a href="{{ url('/add-money') }}" class="wallet-link">
                        Add Money
                    </a>

                </div>

            </div>

        </section>

        <!-- Stats -->
        <section class="section">

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

            <div class="stats-grid">

                <div class="stat-card">
                    <div class="stat-icon">◫</div>
                    <div id="ordersCount" class="stat-value">0</div>
                    <div class="stat-label">Orders</div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon">↓</div>
                    <div id="downloadsCount" class="stat-value">0</div>
                    <div class="stat-label">Downloads</div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon">✓</div>
                    <div id="purchasesCount" class="stat-value">0</div>
                    <div class="stat-label">Purchases</div>
                </div>

            </div>

        </section>

        <!-- Account -->
        <section class="section">

            <div class="section-title">
                Account Information
            </div>

            <div class="account-card">

                <div class="info-row">

                    <div class="info-icon">@</div>

                    <div class="info-content">
                        <div class="info-label">Email</div>
                        <div id="profileEmail" class="info-value">
                            Not available
                        </div>
                    </div>

                </div>

                <div class="info-row">

                    <div class="info-icon">T</div>

                    <div class="info-content">
                        <div class="info-label">Telegram ID</div>
                        <div id="telegramId" class="info-value">
                            Not available
                        </div>
                    </div>

                </div>

                <div class="info-row">

                    <div class="info-icon">#</div>

                    <div class="info-content">
                        <div class="info-label">Database User ID</div>
                        <div id="databaseId" class="info-value">
                            Not available
                        </div>
                    </div>

                </div>

                <div class="info-row">

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

                    <div class="info-content">
                        <div class="info-label">Email Verification</div>
                        <div id="emailStatus" class="info-value">
                            Checking...
                        </div>
                    </div>

                </div>

            </div>

        </section>

        <!-- Quick Access -->
        <section class="section">

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

            <div class="quick-grid">

                <a href="{{ url('/orders') }}" class="quick-card">
                    <div class="quick-icon">◫</div>
                    <div>
                        <div class="quick-title">My Orders</div>
                        <div class="quick-subtitle">View purchases</div>
                    </div>
                </a>

                <a href="{{ url('/downloads') }}" class="quick-card">
                    <div class="quick-icon">↓</div>
                    <div>
                        <div class="quick-title">Downloads</div>
                        <div class="quick-subtitle">Purchased files</div>
                    </div>
                </a>

                <a href="{{ url('/add-money') }}" class="quick-card">
                    <div class="quick-icon">৳</div>
                    <div>
                        <div class="quick-title">Wallet</div>
                        <div class="quick-subtitle">Manage balance</div>
                    </div>
                </a>

                <a href="{{ url('/shop') }}" class="quick-card">
                    <div class="quick-icon">◈</div>
                    <div>
                        <div class="quick-title">Shop</div>
                        <div class="quick-subtitle">Browse products</div>
                    </div>
                </a>

            </div>

        </section>

        <!-- Support -->
        <section class="section">

            <div class="support-card">

                <div class="support-title">
                    Need Help?
                </div>

                <div class="support-text">
                    Contact BDCodeShop support if you need help with orders,
                    payments or your account.
                </div>

                <button
                    id="supportButton"
                    class="support-button"
                    type="button"
                >
                    Contact Support
                </button>

            </div>

        </section>

    </div>

</div>
@endsection

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

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

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

function showProfileError() {
    document.getElementById('profileLoading').style.display = 'none';
    document.getElementById('profileContent').style.display = 'none';
    document.getElementById('profileError').style.display = 'block';
}

function showProfile() {
    document.getElementById('profileLoading').style.display = 'none';
    document.getElementById('profileError').style.display = 'none';
    document.getElementById('profileContent').style.display = 'block';
}

async function loadProfile() {

    const initData = profileTg?.initData || '';

    if (!initData) {
        showProfileError();
        return;
    }

    try {

        const response = await fetch('/api/dashboard/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 || !data.user) {
            throw new Error(data.message || 'Unable to load profile');
        }

        const user = data.user;
        const stats = data.stats || {};
        const settings = data.settings || {};

        /*
        |--------------------------------------------------------------------------
        | Profile
        |--------------------------------------------------------------------------
        */

        const name = user.name || 'BDCodeShop User';

        document.getElementById('profileName').textContent = name;

        document.getElementById('profileUsername').textContent =
            user.username
                ? '@' + String(user.username).replace(/^@/, '')
                : 'Telegram User';

        /*
        |--------------------------------------------------------------------------
        | Profile Picture
        |--------------------------------------------------------------------------
        */

        const avatar = document.getElementById('profileAvatar');
        const fallback = document.getElementById('avatarFallback');

        const photo = user.photo || '';

        if (photo) {

            avatar.src = photo;

            avatar.onload = function() {
                avatar.style.display = 'block';
                fallback.style.display = 'none';
            };

            avatar.onerror = function() {
                avatar.style.display = 'none';
                fallback.style.display = 'flex';
            };

        } else {

            avatar.style.display = 'none';
            fallback.style.display = 'flex';

        }

        fallback.textContent =
            name.trim().charAt(0).toUpperCase() || 'U';

        /*
        |--------------------------------------------------------------------------
        | Verification
        |--------------------------------------------------------------------------
        */

        const verified = Boolean(user.email_verified);

        const status = document.getElementById('profileStatus');
        const badge = document.getElementById('verifiedBadge');
        const emailStatus = document.getElementById('emailStatus');

        if (verified) {

            status.textContent = '● Verified Account';
            badge.style.display = 'flex';

            emailStatus.textContent = 'Verified';
            emailStatus.className = 'info-value verified-text';

        } else {

            status.textContent = '● Email Verification Required';
            badge.style.display = 'none';

            emailStatus.textContent = 'Unverified';
            emailStatus.className = 'info-value unverified-text';

        }

        /*
        |--------------------------------------------------------------------------
        | Balance
        |--------------------------------------------------------------------------
        */

        document.getElementById('profileBalance').textContent =
            '৳' + Number(user.balance || 0).toFixed(2);

        /*
        |--------------------------------------------------------------------------
        | Account Information
        |--------------------------------------------------------------------------
        */

        document.getElementById('profileEmail').textContent =
            user.email || 'Not added';

        document.getElementById('telegramId').textContent =
            user.telegram_id || 'Not available';

        document.getElementById('databaseId').textContent =
            user.id || 'Not available';

        /*
        |--------------------------------------------------------------------------
        | Statistics
        |--------------------------------------------------------------------------
        */

        document.getElementById('ordersCount').textContent =
            stats.orders_count ?? stats.orders ?? 0;

        document.getElementById('downloadsCount').textContent =
            stats.downloads_count ?? stats.downloads ?? 0;

        document.getElementById('purchasesCount').textContent =
            stats.purchases_count ?? stats.purchases ?? 0;

        /*
        |--------------------------------------------------------------------------
        | Support
        |--------------------------------------------------------------------------
        */

        const supportButton =
            document.getElementById('supportButton');

        const supportUsername =
            settings.support_username || '';

        const supportUrl =
            settings.support_url || '';

        supportButton.onclick = function() {

            if (supportUrl) {

                if (profileTg?.openTelegramLink) {
                    profileTg.openTelegramLink(supportUrl);
                } else {
                    window.open(supportUrl, '_blank');
                }

                return;
            }

            if (supportUsername) {

                const username =
                    String(supportUsername).replace(/^@/, '');

                const url =
                    'https://t.me/' + username;

                if (profileTg?.openTelegramLink) {
                    profileTg.openTelegramLink(url);
                } else {
                    window.open(url, '_blank');
                }

                return;
            }

            alert('Support contact is not configured yet.');
        };

        showProfile();

    } catch (error) {

        console.error('Profile error:', error);

        showProfileError();
    }
}

loadProfile();
</script>
@endpush