<?php
$t          = $tier ?? customer_tier(0);
$delivered  = (int)($stats['delivered_orders'] ?? 0);
$total      = (int)($stats['total_orders']     ?? 0);
$spent      = (float)($stats['total_spent']    ?? 0);

// Progress to next tier
$tiers = [
    ['label' => 'Bronze',   'min' => 1],
    ['label' => 'Silver',   'min' => 5],
    ['label' => 'Gold',     'min' => 15],
    ['label' => 'Platinum', 'min' => 30],
];
$nextTier  = null;
$progress  = 100;
$needed    = 0;
foreach ($tiers as $tr) {
    if ($delivered < $tr['min']) {
        $nextTier = $tr['label'];
        $needed   = $tr['min'] - $delivered;
        // previous milestone
        $prev = 0;
        foreach ($tiers as $p) { if ($p['min'] < $tr['min']) $prev = $p['min']; }
        $range    = $tr['min'] - $prev;
        $progress = min(99, round(($delivered - $prev) / $range * 100));
        break;
    }
}

$tierColors = [
    'Platinum' => ['bg' => '#e0f7fa', 'text' => '#006064', 'bar' => '#00bcd4'],
    'Gold'     => ['bg' => '#fff8e1', 'text' => '#f57f17', 'bar' => '#ffc107'],
    'Silver'   => ['bg' => '#f5f5f5', 'text' => '#424242', 'bar' => '#9e9e9e'],
    'Bronze'   => ['bg' => '#fbe9e7', 'text' => '#bf360c', 'bar' => '#ff7043'],
    'New'      => ['bg' => '#f3f4f6', 'text' => '#6b7280', 'bar' => '#d1d5db'],
];
$tc = $tierColors[$t['label']] ?? $tierColors['New'];
?>

<style>
.acc-hero{background:linear-gradient(135deg,#1c1c1e 60%,#3a3a3c);color:#fff;padding:28px 20px 20px;margin-bottom:0;}
.acc-avatar{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:1.6rem;font-weight:800;margin:0 auto 10px;border:3px solid rgba(255,255,255,.25);}
.acc-name{font-size:1.1rem;font-weight:700;text-align:center;}
.acc-email{font-size:.78rem;color:rgba(255,255,255,.6);text-align:center;margin-top:2px;}
.tier-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;
    font-weight:700;font-size:.8rem;margin:10px auto 0;border:1.5px solid rgba(255,255,255,.2);}
.acc-stats-row{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-bottom:1px solid #ebebeb;}
.acc-stat{text-align:center;padding:14px 8px;border-right:1px solid #ebebeb;}
.acc-stat:last-child{border-right:none;}
.acc-stat .n{font-size:1.25rem;font-weight:800;color:#1c1c1e;}
.acc-stat .l{font-size:.68rem;color:#6b7280;margin-top:2px;text-transform:uppercase;letter-spacing:.03em;}
.tier-progress-card{margin:12px 14px;background:#fff;border-radius:12px;padding:14px 16px;
    box-shadow:0 1px 6px rgba(0,0,0,.07);}
.tier-progress-card .tier-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;margin-bottom:8px;}
.tier-bar-wrap{background:#f0f0f0;border-radius:10px;height:8px;overflow:hidden;margin-bottom:6px;}
.tier-bar{height:100%;border-radius:10px;transition:width .6s ease;}
.tier-progress-card .tier-note{font-size:.72rem;color:#6b7280;}
.acc-group{margin:12px 14px;background:#fff;border-radius:12px;overflow:hidden;
    box-shadow:0 1px 6px rgba(0,0,0,.07);}
.account-row{display:flex;align-items:center;gap:12px;padding:14px 16px;text-decoration:none;
    color:#1c1c1e;border-bottom:1px solid #f4f4f4;transition:background .15s;}
.account-row:last-child{border-bottom:none;}
.account-row:hover{background:#f9f9f9;}
.acc-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
.acc-label{flex:1;font-size:.88rem;font-weight:500;}
.acc-chevron{color:#d1d5db;font-size:.75rem;}
</style>

<!-- Hero -->
<div class="acc-hero">
    <div class="acc-avatar" style="background:var(--accent);">
        <?= strtoupper(substr($user['name'] ?? 'U', 0, 1)) ?>
    </div>
    <div class="acc-name"><?= e($user['name'] ?? '') ?></div>
    <div class="acc-email"><?= e($user['email'] ?? '') ?></div>
    <div style="display:flex;justify-content:center;">
        <div class="tier-chip" style="background:<?= $tc['bg'] ?>;color:<?= $tc['text'] ?>;border-color:<?= $tc['bar'] ?>;">
            <?= $t['icon'] ?> <?= $t['label'] ?> Member
        </div>
    </div>
</div>

<!-- Stats row -->
<div class="acc-stats-row">
    <div class="acc-stat">
        <div class="n"><?= $total ?></div>
        <div class="l">Orders</div>
    </div>
    <div class="acc-stat">
        <div class="n"><?= $delivered ?></div>
        <div class="l">Delivered</div>
    </div>
    <div class="acc-stat">
        <div class="n"><?= money($spent) ?></div>
        <div class="l">Total Spent</div>
    </div>
</div>

<!-- Tier progress -->
<div class="tier-progress-card">
    <div class="tier-title">
        <?= $t['icon'] ?> <?= $t['label'] ?> Tier
        <?php if ($nextTier): ?>
        &nbsp;→&nbsp; <?= $nextTier ?>
        <?php else: ?>
        &nbsp;— Highest tier!
        <?php endif ?>
    </div>
    <?php if ($nextTier): ?>
    <div class="tier-bar-wrap">
        <div class="tier-bar" style="width:<?= $progress ?>%;background:<?= $tc['bar'] ?>;"></div>
    </div>
    <div class="tier-note">
        <?= $needed ?> more delivered order<?= $needed !== 1 ? 's' : '' ?> to reach <strong><?= $nextTier ?></strong>
    </div>
    <?php else: ?>
    <div class="tier-bar-wrap">
        <div class="tier-bar" style="width:100%;background:<?= $tc['bar'] ?>;"></div>
    </div>
    <div class="tier-note">You've reached the top tier. Thank you! 💎</div>
    <?php endif ?>
</div>

<!-- Tier breakdown hint -->
<div style="margin:0 14px 4px;padding:10px 14px;background:#fff8e1;border-radius:10px;
            border:1px solid #fde68a;font-size:.72rem;color:#92400e;line-height:1.6;">
    <strong>How tiers work:</strong>
    🆕 New (0) &nbsp;·&nbsp; 🥉 Bronze (1+) &nbsp;·&nbsp; 🥈 Silver (5+) &nbsp;·&nbsp; 🥇 Gold (15+) &nbsp;·&nbsp; 💎 Platinum (30+) delivered orders
</div>

<!-- Menu -->
<div class="acc-group" style="margin-top:12px;">
    <a href="<?= url('shop/orders') ?>" class="account-row">
        <div class="acc-icon" style="background:#fff4ee;color:var(--accent);"><i class="bi bi-receipt"></i></div>
        <span class="acc-label">My Orders</span>
        <i class="bi bi-chevron-right acc-chevron"></i>
    </a>
    <a href="<?= url('shop/menu') ?>" class="account-row">
        <div class="acc-icon" style="background:#f0fdf4;color:#16a34a;"><i class="bi bi-shop"></i></div>
        <span class="acc-label">Browse Menu</span>
        <i class="bi bi-chevron-right acc-chevron"></i>
    </a>
    <a href="<?= url('shop/cart') ?>" class="account-row">
        <div class="acc-icon" style="background:#eff6ff;color:#3b82f6;"><i class="bi bi-bag"></i></div>
        <span class="acc-label">My Cart</span>
        <i class="bi bi-chevron-right acc-chevron"></i>
    </a>
</div>

<div class="acc-group" style="margin-top:8px;margin-bottom:30px;">
    <a href="<?= url('shop/logout') ?>" class="account-row">
        <div class="acc-icon" style="background:#fef2f2;color:#ef4444;"><i class="bi bi-box-arrow-right"></i></div>
        <span class="acc-label" style="color:#ef4444;">Sign Out</span>
        <i class="bi bi-chevron-right acc-chevron"></i>
    </a>
</div>
