<?php
require_once __DIR__ . '/includes/functions.php';
startSecureSession();
requireLogin();

$orderId = $_GET['order_id'] ?? '';
$type = $_GET['type'] ?? 'plan_purchase';
$user = getUserById($_SESSION['user_id']);

if (!$user) { header('Location: logout.php'); exit; }

$order = null;
if ($orderId) {
    $order = getOrderById($orderId);
}

$amount = $order ? number_format((float)$order['amount'], 0) : 'N/A';
$orderIdDisplay = $order ? substr($orderId, -8) : '';
$paidAt = $order && !empty($order['confirmed_at']) ? $order['confirmed_at'] : date('d M Y, h:i A');

if ($type === 'custom_api') {
    $pageTitle = 'Custom API Key Activated!';
    $pageSubtitle = 'Your custom-named API key is now active.';
    $planLabel = 'Custom API Key';
    $planExpiry = 'Lifetime';
    $btnPrimaryLabel = 'View API Keys';
    $btnPrimaryUrl = 'api_keys.php';
} elseif ($type === 'reset_unlock') {
    $pageTitle = 'Reset Chances Unlocked!';
    $pageSubtitle = 'You have 10 fresh reset chances available.';
    $planLabel = '10 Reset Chances';
    $planExpiry = 'Lifetime';
    $btnPrimaryLabel = 'View API Keys';
    $btnPrimaryUrl = 'api_keys.php';
} else {
    $pageTitle = 'Payment Successful!';
    $pageSubtitle = 'Your plan is now active. Start using the API.';
    $planLabel = $user['plan_label'] ?? 'N/A';
    $planExpiry = $user['plan_expires_at'] ? date('d M Y, h:i A', strtotime($user['plan_expires_at'])) : 'N/A';
    $btnPrimaryLabel = 'Go to Dashboard';
    $btnPrimaryUrl = 'dashboard.php';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment Successful — FamAPI</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;background:#0a0a0a;color:#fff;overflow:hidden}
.page{position:relative;width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center}

/* Green gradient background */
.bg{position:absolute;inset:0;background:linear-gradient(160deg,#065f46 0%,#047857 30%,#059669 60%,#10b981 100%);z-index:0}
.bg::after{content:'';position:absolute;top:-30%;right:-20%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%)}
.bg::before{content:'';position:absolute;bottom:-20%;left:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.4),transparent 60%)}

/* Content card */
.card{position:relative;z-index:1;text-align:center;padding:50px 40px 40px;width:min(440px,92vw)}

/* Animated checkmark circle */
.check-wrap{width:100px;height:100px;margin:0 auto 28px;position:relative}
.check-circle{width:100px;height:100px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;animation:popIn .5s cubic-bezier(.17,.89,.32,1.28) forwards;opacity:0;transform:scale(0)}
.check-svg{width:50px;height:50px;stroke:#059669;stroke-width:3;fill:none;stroke-dasharray:60;stroke-dashoffset:60;animation:drawCheck .4s .35s ease forwards}
.check-ring{position:absolute;inset:-6px;border-radius:50%;border:3px solid rgba(255,255,255,.3);animation:ringPulse 1.5s .5s ease infinite}

/* Floating particles */
.particles{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none}
.particle{position:absolute;width:8px;height:8px;border-radius:50%;animation:flyOut .8s .3s ease-out forwards;opacity:0}
.particle:nth-child(1){background:#fbbf24;--tx:-40px;--ty:-80px}
.particle:nth-child(2){background:#f472b6;--tx:50px;--ty:-60px}
.particle:nth-child(3){background:#60a5fa;--tx:-60px;--ty:-30px}
.particle:nth-child(4){background:#a78bfa;--tx:40px;--ty:-90px}
.particle:nth-child(5){background:#34d399;--tx:-30px;--ty:-70px}
.particle:nth-child(6){background:#fbbf24;--tx:60px;--ty:-40px}
.particle:nth-child(7){background:#f87171;--tx:-50px;--ty:-50px}
.particle:nth-child(8){background:#38bdf8;--tx:30px;--ty:-85px}

/* Text */
.title{font-size:26px;font-weight:800;margin-bottom:6px;animation:fadeUp .5s .4s ease both;opacity:0}
.subtitle{font-size:14px;color:rgba(255,255,255,.75);margin-bottom:32px;animation:fadeUp .5s .5s ease both;opacity:0}

/* Details card */
.details{background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:20px 22px;text-align:left;margin-bottom:28px;animation:fadeUp .5s .6s ease both;opacity:0}
.detail-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.detail-row:last-child{border-bottom:none}
.detail-label{font-size:13px;color:rgba(255,255,255,.65)}
.detail-value{font-size:14px;font-weight:700;color:#fff}
.detail-value.amount{font-size:22px;color:#fbbf24}

/* Buttons */
.btn-group{display:flex;gap:12px;animation:fadeUp .5s .7s ease both;opacity:0}
.btn{flex:1;padding:14px 20px;border-radius:14px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;border:none;transition:.2s;text-decoration:none;text-align:center}
.btn-white{background:#fff;color:#065f46}
.btn-white:hover{background:#f0fdf4;transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-ghost:hover{background:rgba(255,255,255,.25)}

/* Auto redirect */
.redirect{font-size:12px;color:rgba(255,255,255,.5);margin-top:20px;animation:fadeUp .5s .8s ease both;opacity:0}

/* Animations */
@keyframes popIn{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
@keyframes drawCheck{to{stroke-dashoffset:0}}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.15);opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes flyOut{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)}}

/* Confetti */
.confetti{position:fixed;top:-10px;width:10px;height:10px;border-radius:2px;animation:confettiFall linear forwards;z-index:2}
@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}
</style>
</head>
<body>
<div class="page">
  <div class="bg"></div>
  
  <!-- Confetti -->
  <div id="confetti"></div>
  
  <div class="card">
    <div class="check-wrap">
      <div class="check-circle">
        <svg class="check-svg" viewBox="0 0 24 24"><polyline points="6 12 10 16 18 8"></polyline></svg>
      </div>
      <div class="check-ring"></div>
      <div class="particles">
        <div class="particle"></div><div class="particle"></div><div class="particle"></div>
        <div class="particle"></div><div class="particle"></div><div class="particle"></div>
        <div class="particle"></div><div class="particle"></div>
      </div>
    </div>
    
    <h1 class="title"><?= htmlspecialchars($pageTitle) ?></h1>
    <p class="subtitle"><?= htmlspecialchars($pageSubtitle) ?></p>
    
    <div class="details">
      <div class="detail-row">
        <span class="detail-label">Amount Paid</span>
        <span class="detail-value amount">₹<?= htmlspecialchars($amount) ?></span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Plan</span>
        <span class="detail-value"><?= htmlspecialchars($planLabel) ?></span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Valid Until</span>
        <span class="detail-value"><?= htmlspecialchars($planExpiry) ?></span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Order ID</span>
        <span class="detail-value" style="font-size:11px;font-family:monospace;opacity:.7">...<?= htmlspecialchars($orderIdDisplay) ?></span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Paid At</span>
        <span class="detail-value" style="font-size:13px"><?= htmlspecialchars($paidAt) ?></span>
      </div>
    </div>
    
    <div class="btn-group">
      <a href="<?= htmlspecialchars($btnPrimaryUrl) ?>" class="btn btn-white"><?= htmlspecialchars($btnPrimaryLabel) ?></a>
      <a href="api_keys.php" class="btn btn-ghost">View API Keys</a>
    </div>
    
    <div class="redirect">Redirecting to dashboard in <span id="countdown">8</span>s...</div>
  </div>
</div>

<script>
// Confetti
(function(){
  var c=document.getElementById('confetti');
  var colors=['#fbbf24','#f472b6','#60a5fa','#a78bfa','#34d399','#f87171','#38bdf8','#fcd34d'];
  for(var i=0;i<40;i++){
    var el=document.createElement('div');
    el.className='confetti';
    el.style.left=Math.random()*100+'vw';
    el.style.background=colors[Math.floor(Math.random()*colors.length)];
    el.style.width=(Math.random()*8+5)+'px';
    el.style.height=(Math.random()*8+5)+'px';
    el.style.animationDuration=(Math.random()*2+2)+'s';
    el.style.animationDelay=(Math.random()*1.5)+'s';
    c.appendChild(el);
  }
})();

// Auto redirect countdown
var sec=8;
setInterval(function(){
  sec--;
  if(sec<=0){window.location.href='<?= htmlspecialchars($btnPrimaryUrl) ?>';return;}
  document.getElementById('countdown').innerText=sec;
},1000);
</script>
</body>
</html>
