<?php
require_once __DIR__ . '/../config/config.php';

// Authentication Check: Redirect to login if session is not set
if (!isset($_SESSION['user_id'])) {
    header("Location: " . SITE_URL . "/public/login-register.php");
    exit();
}

$user_id = $_SESSION['user_id'];
$full_name = $_SESSION['full_name'] ?? 'Member';

// Fetch User's Referral Code (Assuming we stored it upon registration)
$user_stmt = $pdo->prepare("SELECT referral_code FROM users WHERE id = ?");
$user_stmt->execute([$user_id]);
$user_data = $user_stmt->fetch();
$ref_code = $user_data['referral_code'] ?? strtolower(str_replace(' ', '', $full_name));

// Generate unique referral URL
$affiliate_link = SITE_URL . "/public/login-register.php?ref=" . $ref_code;

// Fetch VIP Predictions for logged-in user
$vip_stmt = $pdo->query("SELECT * FROM predictions WHERE is_vip = 1 ORDER BY id DESC LIMIT 4");
$vip_predictions = $vip_stmt->fetchAll();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - Football Pred Pro</title>
    <link rel="stylesheet" href="<?php echo SITE_URL; ?>/assets/css/output.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style> body { font-family: 'Inter', sans-serif; } </style>
</head>
<body class="bg-[var(--color-dark-900)] text-gray-200 antialiased min-h-screen">

    <nav class="bg-[var(--color-glass-dark)] border-b border-[var(--color-glass-border)] backdrop-blur-glass sticky top-0 z-50 py-4">
        <div class="max-w-7xl mx-auto px-6 flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <div class="w-8 h-8 bg-emerald-500 rounded flex items-center justify-center font-bold text-[var(--color-dark-900)]">D</div>
                <span class="font-bold text-lg tracking-wide text-white">MEMBER DASHBOARD</span>
            </div>
            <div class="flex items-center space-x-6 text-sm font-semibold tracking-wider text-gray-400">
                <span class="text-white">Welcome, <?php echo htmlspecialchars($full_name); ?></span>
                <a href="<?php echo SITE_URL; ?>/public/index.php" class="hover:text-white transition">Public Home</a>
                <a href="logout.php" class="bg-rose-500/10 border border-rose-500/30 text-rose-500 px-4 py-2 rounded-lg text-xs hover:bg-rose-500 hover:text-white transition">LOGOUT</a>
            </div>
        </div>
    </nav>

    <main class="max-w-7xl mx-auto px-6 py-10 grid grid-cols-1 lg:grid-cols-12 gap-8">
        
        <div class="lg:col-span-7 space-y-6">
            <div class="bg-[var(--color-dark-800)] border border-[var(--color-glass-border)] rounded-2xl p-6">
                <h3 class="font-bold text-xl text-amber-500 tracking-wide mb-4">UNLOCKED VIP PREDICTIONS</h3>
                <p class="text-xs text-gray-400 mb-6">Your account is active. View your premium predictions below safely.</p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <?php if(!empty($vip_predictions)): foreach($vip_predictions as $vip): ?>
                    <div class="bg-gradient-to-br from-dark-900 to-indigo-900/20 border border-[var(--color-glass-border)] rounded-xl p-5 flex flex-col justify-between min-h-[120px]">
                        <span class="text-xs text-gray-400 font-semibold tracking-widest uppercase"><?php echo htmlspecialchars($vip['match_date']); ?></span>
                        <span class="font-bold text-white text-base py-2"><?php echo htmlspecialchars($vip['team_a']); ?> vs <?php echo htmlspecialchars($vip['team_b']); ?></span>
                        <div class="flex items-center justify-between border-t border-gray-700/40 pt-2 mt-2">
                            <span class="text-xs text-emerald-500 font-bold tracking-wider">ODDS: <?php echo number_format($vip['odds'], 2); ?></span>
                            <span class="bg-emerald-500/10 border border-emerald-500/20 text-emerald-500 text-[10px] px-2 py-0.5 rounded-full tracking-wider font-extrabold uppercase">CONFIRMED</span>
                        </div>
                    </div>
                    <?php endforeach; else: ?>
                        <p class="text-xs text-gray-500 py-6">No premium VIP predictions available at the moment.</p>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <div class="lg:col-span-5 space-y-6">
            <div class="bg-[var(--color-dark-800)] border border-[var(--color-glass-border)] rounded-2xl p-6 space-y-5">
                <div class="flex items-center justify-between">
                    <h3 class="font-bold text-xl tracking-wide text-white">AFFILIATE REFERRAL HUB</h3>
                    <span class="text-xs text-emerald-500 font-semibold tracking-wider bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20">30% COMMISSION</span>
                </div>
                <p class="text-xs text-gray-400 leading-relaxed">Share your unique affiliate invitation link. You will earn a 30% commission reward instantly upon successful VIP subscriptions.</p>
                
                <div class="bg-[var(--color-dark-900)] p-3 rounded-xl border border-[var(--color-glass-border)] flex items-center justify-between">
                    <input type="text" readonly value="<?php echo $affiliate_link; ?>" class="text-xs font-mono text-emerald-500 bg-transparent truncate pr-2 w-full outline-none" id="refLink">
                    <button onclick="copyRef()" class="text-gray-400 hover:text-white p-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg>
                    </button>
                </div>
                <span id="copyFeedback" class="text-[10px] text-emerald-500 hidden font-bold tracking-wider">Link copied to clipboard!</span>

                <div class="grid grid-cols-2 gap-4 pt-2 border-t border-gray-800/40 text-sm">
                    <div>
                        <span class="block text-xs text-gray-500 font-medium tracking-wider">Total Invites</span>
                        <span class="font-bold text-white text-base">0</span>
                    </div>
                    <div>
                        <span class="block text-xs text-gray-500 font-medium tracking-wider">Current Balance</span>
                        <span class="font-bold text-emerald-500 text-base">$0.00</span>
                    </div>
                    <div>
                        <span class="block text-xs text-gray-500 font-medium tracking-wider">Successful Referrals</span>
                        <span class="font-bold text-white text-base">0</span>
                    </div>
                    <div>
                        <span class="block text-xs text-gray-500 font-medium tracking-wider">Reward Earned</span>
                        <span class="font-bold text-emerald-500 text-base">$0.00</span>
                    </div>
                </div>

                <div class="bg-[var(--color-dark-900)] p-3 rounded-xl border border-[var(--color-glass-border)] flex items-center justify-between text-xs">
                    <span class="font-medium text-gray-400 tracking-wider">Convert Commissions to VIP Days</span>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" checked class="sr-only peer">
                        <div class="w-9 h-5 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-emerald-500"></div>
                    </label>
                </div>
            </div>
        </div>
    </main>

    <footer class="bg-[var(--color-dark-800)] border-t border-[var(--color-glass-border)] py-8 text-center text-xs text-gray-500 mt-12">
        <p>&copy; <?php echo date('Y'); ?> Football Pred Pro. All rights reserved.</p>
    </footer>

    <script>
        function copyRef() {
            const copyText = document.getElementById("refLink");
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            navigator.clipboard.writeText(copyText.value);
            
            const feedback = document.getElementById("copyFeedback");
            feedback.classList.remove("hidden");
            setTimeout(() => feedback.classList.add("hidden"), 3000);
        }
    </script>
</body>
</html>