<?php
/**
 * StudyTrack — Post-signup Welcome Splash
 * URL: /welcome.php
 *
 * Shown once, right after a brand-new account is created (email+OTP,
 * Google, or Facebook sign-up). Displays a short animated "setting things
 * up" sequence, then auto-redirects to the dashboard.
 *
 * Not shown on normal logins — only linked to from the signup-completion
 * steps (verify-otp.php, google-terms.php, fb-terms.php).
 */
require_once 'includes/config.php';
requireLogin();

$name  = $_SESSION['user_name'] ?? 'there';
$first = trim(explode(' ', $name)[0] ?? $name) ?: 'there';

?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Welcome — <?= SITE_NAME ?></title>
<link rel="icon" type="image/png" href="https://studytrack.edurx.icu/studytrack/images/studytrack.png">
<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=Sora:wght@400;600;700;800;900&family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #080812; --bg2: #0e0e1a; --card: #111120;
  --border: rgba(255,255,255,.08);
  --ink: #f0f0ff; --ink2: #a0a0c8; --ink3: #5a5a80;
  --accent: #6366f1; --accent2: #8b5cf6; --accent3: #06b6d4;
  --success: #10b981;
}
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--ink); font-family: 'DM Sans', sans-serif;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}

/* ambient floating blobs, matching the rest of the auth flow */
.blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.blob-1 { width: 480px; height: 480px; top: -140px; left: -140px; background: radial-gradient(circle, rgba(99,102,241,.20) 0%, transparent 65%); animation: floatA 9s ease-in-out infinite; }
.blob-2 { width: 380px; height: 380px; bottom: -120px; right: -120px; background: radial-gradient(circle, rgba(139,92,246,.16) 0%, transparent 65%); animation: floatB 11s ease-in-out infinite; }
@keyframes floatA { 0%,100%{ transform: translate(0,0);} 50%{ transform: translate(30px,20px);} }
@keyframes floatB { 0%,100%{ transform: translate(0,0);} 50%{ transform: translate(-25px,-15px);} }

.wc-card {
  position: relative; z-index: 1; width: 100%; max-width: 420px; text-align: center;
  padding: 0 24px; animation: cardIn .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes cardIn { from { opacity:0; transform: translateY(18px) scale(.97);} to { opacity:1; transform: translateY(0) scale(1);} }

.wc-logo { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 22px; display: block; box-shadow: 0 8px 28px rgba(99,102,241,.35); }

.wc-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; color: var(--accent3);
  background: rgba(6,182,212,.10); border: 1px solid rgba(6,182,212,.25);
  padding: 5px 12px; border-radius: 99px; margin-bottom: 18px;
}

.wc-title {
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 27px; line-height: 1.3;
  margin-bottom: 10px;
}
.wc-title span {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.wc-sub { font-size: 14px; color: var(--ink2); margin-bottom: 34px; line-height: 1.6; }

/* Loading ring around a shifting emoji/icon */
.wc-spinner-wrap { position: relative; width: 88px; height: 88px; margin: 0 auto 26px; }
.wc-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--border); }
.wc-ring-progress {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent2);
  animation: wcSpin 1s linear infinite;
}
@keyframes wcSpin { to { transform: rotate(360deg); } }
.wc-spinner-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; }

.wc-step {
  font-size: 13.5px; font-weight: 600; color: var(--ink2); min-height: 20px;
  transition: opacity .25s ease;
}

.wc-bar-wrap { width: 100%; height: 5px; background: var(--border); border-radius: 99px; margin-top: 22px; overflow: hidden; }
.wc-bar { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3)); }

.wc-skip {
  display: inline-block; margin-top: 26px; font-size: 12.5px; color: var(--ink3);
  opacity: 0; transition: opacity .3s ease; text-decoration: none; border-bottom: 1px solid transparent;
}
.wc-skip.show { opacity: 1; }
.wc-skip:hover { color: var(--ink2); border-color: var(--ink3); }
</style>
</head>
<body>

<div class="blob blob-1"></div>
<div class="blob blob-2"></div>

<div class="wc-card">
  <img class="wc-logo" src="https://studytrack.edurx.icu/studytrack/images/studytrack.png" alt="StudyTrack">
  <div class="wc-badge">✅ Account created</div>

  <h1 class="wc-title">Welcome aboard,<br><span><?= htmlspecialchars($first) ?>!</span> 🎉</h1>
  <p class="wc-sub">Give us a few seconds while we get your study space ready.</p>

  <div class="wc-spinner-wrap">
    <div class="wc-ring"></div>
    <div class="wc-ring-progress"></div>
    <div class="wc-spinner-icon" id="wcIcon">📚</div>
  </div>

  <div class="wc-step" id="wcStep">Setting up your account…</div>

  <div class="wc-bar-wrap"><div class="wc-bar" id="wcBar"></div></div>

  <a href="<?= SITE_URL ?>/dashboard.php" class="wc-skip" id="wcSkip">Skip and go to dashboard →</a>
</div>

<script>
(function () {
  const steps = [
    { icon: '📚', text: 'Setting up your account…' },
    { icon: '🗂️', text: 'Preparing your subjects…' },
    { icon: '🔥', text: 'Loading your study streak…' },
    { icon: '📊', text: 'Building your dashboard…' },
    { icon: '✨', text: 'Almost there…' },
  ];
  const TOTAL_MS = 8000;
  const stepMs = TOTAL_MS / steps.length;

  const stepEl = document.getElementById('wcStep');
  const iconEl = document.getElementById('wcIcon');
  const barEl  = document.getElementById('wcBar');
  const skipEl = document.getElementById('wcSkip');

  let i = 0;
  function showStep(idx) {
    stepEl.style.opacity = 0;
    iconEl.style.opacity = 0;
    setTimeout(() => {
      stepEl.textContent = steps[idx].text;
      iconEl.textContent = steps[idx].icon;
      stepEl.style.opacity = 1;
      iconEl.style.opacity = 1;
    }, 150);
  }
  showStep(0);

  const stepTimer = setInterval(() => {
    i++;
    if (i < steps.length) showStep(i);
    else clearInterval(stepTimer);
  }, stepMs);

  // Progress bar fills smoothly over the same 5s window
  requestAnimationFrame(() => {
    barEl.style.transition = TOTAL_MS + 'ms linear';
    barEl.style.width = '100%';
  });

  // Let people skip ahead if they don't want to wait
  setTimeout(() => skipEl.classList.add('show'), 1200);

  // Auto-redirect once everything has "finished loading"
  setTimeout(() => {
    window.location.href = '<?= SITE_URL ?>/dashboard.php?welcome=1';
  }, TOTAL_MS);
})();
</script>
</body>
</html>
