<?php require_once 'api_helper.php'; ?>
<?php include 'partials/header.php'; ?>

<div class="space-y-6 pb-28 pt-2">

  <div class="flex items-center justify-between bg-slate-900 border border-slate-800 p-5 rounded-2xl shadow-lg relative overflow-hidden">
    <div class="space-y-1.5 relative z-10">
      <p class="text-[10px] text-yellow-400 font-extrabold uppercase font-mono tracking-widest">UID: #<?= htmlspecialchars($user['uid']) ?></p>
      <h2 class="text-[#f8fafc] text-xl font-black tracking-tight flex items-center gap-1.5">Hi, <?= htmlspecialchars($user['name']) ?><span class="inline-block animate-bounce text-base">👑</span></h2>
      <p class="text-[#94a3b8] text-xs font-bold leading-none"><?= htmlspecialchars($user['phone']) ?></p>
      <p class="text-[#94a3b8]/80 text-[11px] font-medium leading-none"><?= htmlspecialchars($user['email']) ?></p>
    </div>
    <div class="w-16 h-16 rounded-full bg-slate-800 border-2 border-slate-700/80 flex items-center justify-center relative shadow-lg">
      <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
      <div class="absolute -bottom-1 -right-1 bg-green-500 w-4 h-4 rounded-full border-2 border-slate-900"></div>
    </div>
    <div class="absolute right-0 bottom-0 w-32 h-32 bg-yellow-500/5 rounded-full blur-2xl"></div>
  </div>

  <div class="bg-[#131b2e] border border-slate-800 p-5 rounded-2xl shadow-lg text-center space-y-4">
    <div>
      <span class="text-[11px] text-slate-400 font-bold uppercase tracking-widest block font-mono">AVAILABLE BALANCE</span>
      <div class="flex items-center justify-center gap-2 mt-1">
        <span class="text-yellow-400 font-extrabold text-lg">BDT</span>
        <span class="text-white font-black text-3xl"><?= number_format($user['balance'] + $user['winning_balance']) ?></span>
        <a href="wallet.php" class="p-1 text-emerald-400 hover:text-emerald-300 transition-colors" title="Add Balance">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/><path d="M12 8v8"/></svg>
        </a>
      </div>
    </div>
    <div class="w-full h-px bg-slate-800/80"></div>
    <div class="flex items-center justify-between text-xs px-2">
      <span class="text-slate-400 font-semibold uppercase">Winning Balance:</span>
      <span class="bg-yellow-400/15 border border-yellow-400/25 text-[#facc15] font-black text-xs px-3.5 py-1 rounded-full font-mono">BDT <?= number_format($user['winning_balance']) ?></span>
    </div>
  </div>

  <div class="grid grid-cols-3 gap-2 text-center bg-slate-900 border border-slate-850 p-4 rounded-xl shadow-inner">
    <div class="space-y-0.5">
      <span class="text-yellow-400 font-black text-xl font-mono block leading-none"><?= (int)$user['matches_played'] ?></span>
      <span class="text-[9px] text-[#94a3b8] font-bold uppercase tracking-wider block leading-none">MATCH WORKED</span>
    </div>
    <div class="border-x border-slate-800/80 space-y-0.5">
      <span class="text-emerald-400 font-black text-xl font-mono block leading-none"><?= (int)$user['referrals_count'] ?></span>
      <span class="text-[9px] text-[#94a3b8] font-bold uppercase tracking-wider block leading-none">TOTAL REFER</span>
    </div>
    <div class="space-y-0.5">
      <span class="text-blue-400 font-black text-xl font-mono block leading-none">৳ <?= number_format($user['total_earnings']) ?></span>
      <span class="text-[9px] text-[#94a3b8] font-bold uppercase tracking-wider block leading-none">TOTAL WINNING</span>
    </div>
  </div>

  <div class="space-y-2 border-t border-slate-800/60 pt-4">
    <span class="text-[10px] text-slate-400 font-black tracking-widest uppercase block mb-3 font-mono">ACCOUNT</span>

    <a href="edit-profile.php" class="flex items-center justify-between p-4 bg-slate-900 border border-slate-850 hover:bg-slate-850 rounded-xl cursor-pointer transition-all active:scale-[0.99] no-underline">
      <div class="flex items-center gap-3.5">
        <div class="w-9 h-9 rounded-lg bg-yellow-400/10 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#facc15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v1"/><path d="M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/><path d="m21 15-3-3 3-3"/><path d="M18 12h3"/></svg>
        </div>
        <span class="text-white font-bold text-sm tracking-tight">Edit Profile</span>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
    </a>

    <a href="wallet.php" class="flex items-center justify-between p-4 bg-slate-900 border border-slate-850 hover:bg-slate-850 rounded-xl cursor-pointer transition-all active:scale-[0.99] no-underline">
      <div class="flex items-center gap-3.5">
        <div class="w-9 h-9 rounded-lg bg-emerald-500/10 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/></svg>
        </div>
        <span class="text-white font-bold text-sm tracking-tight">My Wallet</span>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
    </a>

    <a href="refer-earn.php" class="flex items-center justify-between p-4 bg-slate-900 border border-slate-850 hover:bg-slate-850 rounded-xl cursor-pointer transition-all active:scale-[0.99] no-underline">
      <div class="flex items-center gap-3.5">
        <div class="w-9 h-9 rounded-lg bg-orange-500/10 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fb923c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
        </div>
        <span class="text-white font-bold text-sm tracking-tight">Refer & Earn</span>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
    </a>

    <span class="text-[10px] text-slate-400 font-black tracking-widest uppercase block pt-4 mb-3 font-mono">ABOUT PLATFORM</span>

    <a href="leaderboard.php" class="flex items-center justify-between p-4 bg-slate-900 border border-slate-850 hover:bg-slate-850 rounded-xl cursor-pointer transition-all active:scale-[0.99] no-underline">
      <div class="flex items-center gap-3.5">
        <div class="w-9 h-9 rounded-lg bg-cyan-400/10 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22d3ee" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg>
        </div>
        <span class="text-white font-bold text-sm tracking-tight">Top Players</span>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
    </a>

    <a href="terms.php" class="flex items-center justify-between p-4 bg-slate-900 border border-slate-850 hover:bg-slate-850 rounded-xl cursor-pointer transition-all active:scale-[0.99] no-underline">
      <div class="flex items-center gap-3.5">
        <div class="w-9 h-9 rounded-lg bg-purple-500/10 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#a855f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
        </div>
        <span class="text-white font-bold text-sm tracking-tight">Terms and Conditions</span>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
    </a>

    <a href="developer-panel.php" class="flex items-center justify-between p-4 bg-slate-900 border border-slate-850 hover:bg-slate-850 rounded-xl cursor-pointer transition-all active:scale-[0.99] no-underline">
      <div class="flex items-center gap-3.5">
        <div class="w-9 h-9 rounded-lg bg-sky-500/10 flex items-center justify-center animate-pulse">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M20 15h2"/></svg>
        </div>
        <span class="text-white font-bold text-sm tracking-tight text-sky-400">Developer Profile & Admin Panel</span>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
    </a>

    <div onclick="handleShare()" class="flex items-center justify-between p-4 bg-slate-900 border border-slate-850 hover:bg-slate-850 rounded-xl cursor-pointer transition-all active:scale-[0.99]">
      <div class="flex items-center gap-3.5">
        <div class="w-9 h-9 rounded-lg bg-[#3b82f6]/10 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
        </div>
        <span class="text-white font-bold text-sm tracking-tight">Share App</span>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
    </div>

    <div onclick="confirmReset()" class="flex items-center justify-between p-4 bg-slate-900 border border-slate-850 hover:bg-red-950/20 rounded-xl cursor-pointer transition-all active:scale-[0.99]">
      <div class="flex items-center gap-3.5">
        <div class="w-9 h-9 rounded-lg bg-red-500/10 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
        </div>
        <span class="text-red-400 font-bold text-sm tracking-tight">Reset Data / Logout</span>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
    </div>

  </div>

  <p class="text-center text-slate-600 text-xs font-bold font-mono py-2">Version 1.0.2 • Made with ❤️ for Rahul</p>
</div>

<script>
function handleShare() {
  var referralCode = "<?= htmlspecialchars($user['referral_code'] ?? $user['referralCode'] ?? '') ?>";
  if (navigator.share) {
    navigator.share({
      title: 'Ludo Master BD',
      text: 'Hey, use my Referral Code: ' + referralCode + ' to play Ludo tourneys & make earnings!',
      url: window.location.href,
    }).catch(function(){});
  } else {
    var shareText = 'Ludo Master BD গেম খেলুন এবং জিতে টাকা আয় করুন! আমার রেফারেল কোড: ' + referralCode;
    navigator.clipboard.writeText(shareText);
    alert('শেয়ার লিঙ্ক কপি করা হয়েছে! বন্ধুদের সাথে শেয়ার করুন:\n\n' + shareText);
  }
}

function confirmReset() {
  if (window.confirm('আপনি কি অ্যাকাউন্ট ডেটা রিসেট করতে চান? আপনার মূল ব্যালেন্স পুনরায় ১৫৫০ টাকা হয়ে যাবে।')) {
    window.location.href = 'reset.php';
  }
}
</script>

<?php include 'partials/footer.php'; ?>
