<?php
require_once __DIR__ . '/db.php';
session_start();

 $comps = $pdo->query("
  SELECT id, title, description, category, event_date, entry_fee, status
  FROM competitions
  WHERE status IN ('published','closed')
  ORDER BY event_date DESC
")->fetchAll(PDO::FETCH_ASSOC);

 $uid  = (int)($_SESSION['user_id'] ?? 0);
 $role = $_SESSION['type'] ?? '';

/** Map of my regs: comp_id => [payment_status, video_link] */
 $myRegs = [];
if ($uid && $role === 'dancer') {
  $st = $pdo->prepare("
    SELECT competition_id, payment_status,
           NULLIF(TRIM(video_link),'') AS video_link
    FROM competition_registrations
    WHERE user_id=?
  ");
  $st->execute([$uid]);
  foreach ($st->fetchAll(PDO::FETCH_ASSOC) as $r) {
    $myRegs[(int)$r['competition_id']] = $r;
  }
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Competitions • DanceON</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #ff006e;
            --primary-dark: #c3005a;
            --secondary: #3a86ff;
            --accent: #ffbe0b;
            --accent2: #8338ec;
            --light: #f8f9fa;
            --dark: #1a1a2e;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #fff5f5 0%, #f0f9ff 100%);
            color: #333;
            overflow-x: hidden;
        }
        
        .bebas {
            font-family: 'Bebas Neue', cursive;
        }
        
        .mj-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://static01.nyt.com/images/2022/05/29/arts/29mj-dancer-2/merlin_198901542_0b8dadc5-bd9b-4ce4-b52a-f477f2608abb-mediumSquareAt3X.jpg');
            background-size: cover;
            background-position: center;
            z-index: -2;
            opacity: 0.15;
        }
        
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 249, 255, 0.9) 100%);
            z-index: -1;
        }
        
        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.8);
        }
        
        .glow-button {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(255, 0, 110, 0.3);
        }
        
        .glow-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 0, 110, 0.4);
        }
        
        .glow-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s;
        }
        
        .glow-button:hover::before {
            left: 100%;
        }
        
        .competition-card {
            background: white;
            border-radius: 1rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }
        
        .competition-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .status-badge {
            font-size: 0.75rem;
            font-weight: 600;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
        }
        
        .status-published {
            background-color: rgba(34, 197, 94, 0.1);
            color: #16a34a;
        }
        
        .status-closed {
            background-color: rgba(239, 68, 68, 0.1);
            color: #dc2626;
        }
        
        .gradient-text {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .slide-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }
        
        .slide-in.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        .ribbon {
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            overflow: hidden;
        }
        
        .ribbon-content {
            position: absolute;
            top: 20px;
            right: -25px;
            transform: rotate(45deg);
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            padding: 3px 0;
            width: 120px;
            text-align: center;
            color: white;
            font-weight: bold;
            font-size: 0.75rem;
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="mj-bg"></div>
    <div class="overlay"></div>

    <!-- Header -->
    <header class="fixed top-0 w-full z-50 glass border-b border-gray-200 shadow-md">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <img src="uploads/images/log.png" alt="DanceON Logo" class="w-10 h-10 rounded-lg shadow-lg">
                        <span class="ml-3 bebas text-2xl text-gray-800">DANCEON</span>
                    </div>
                    <nav class="hidden md:ml-10 md:flex md:space-x-8">
                        <a href="index.html" class="text-gray-600 hover:text-pink-600 px-3 py-2 rounded-md text-sm font-medium transition">Home</a>
                        <a href="#" class="text-pink-600 px-3 py-2 rounded-md text-sm font-medium bg-pink-50">Competitions</a>
                        <a href="about.php" class="text-gray-600 hover:text-pink-600 px-3 py-2 rounded-md text-sm font-medium transition">About</a>
                        <a href="#" class="text-gray-600 hover:text-pink-600 px-3 py-2 rounded-md text-sm font-medium transition">Contact</a>
                    </nav>
                </div>
                <div class="flex items-center">
                    <?php if (!empty($_SESSION['user_id'])): ?>
                        <a href="login.php?action=logout" class="text-sm px-4 py-2 rounded-full border hover:bg-gray-50 transition-colors">Logout</a>
                    <?php else: ?>
                        <a href="index.html?login=1" class="glow-button rounded-full px-4 py-2 text-sm font-bold">Login</a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="pt-20 pb-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Hero Section -->
            <section class="mb-16">
                <div class="text-center">
                    <h1 class="bebas text-4xl md:text-5xl font-bold mb-4 gradient-text">COMPETITIONS</h1>
                    <p class="text-xl text-gray-600 max-w-3xl mx-auto">Join the biggest dance competitions and showcase your talent</p>
                </div>
            </section>

            <!-- Competitions Grid -->
            <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <?php foreach ($comps as $c):
                    $cid = (int)$c['id'];
                    $mine = $myRegs[$cid] ?? null;
                    $hasVideo = $mine && !empty($mine['video_link']);
                    $isPaid   = $mine && $mine['payment_status'] === 'paid';
                    $status   = $c['status'] ?? 'draft';
                ?>
                    <div class="competition-card slide-in relative">
                        <?php if ($status === 'published'): ?>
                            <div class="ribbon">
                                <div class="ribbon-content">OPEN</div>
                            </div>
                        <?php endif; ?>
                        
                        <div class="p-6">
                            <div class="flex items-start justify-between mb-4">
                                <div>
                                    <h3 class="text-xl font-bold text-gray-900 mb-1"><?= htmlspecialchars($c['title']) ?></h3>
                                    <div class="flex items-center gap-2">
                                        <span class="status-badge <?= $status === 'published' ? 'status-published' : 'status-closed' ?>">
                                            <?= ucfirst($status) ?>
                                        </span>
                                        <span class="text-sm text-gray-500"><?= htmlspecialchars($c['category']) ?></span>
                                    </div>
                                </div>
                                <div class="text-lg font-bold text-gray-900">₹<?= htmlspecialchars($c['entry_fee']) ?></div>
                            </div>
                            
                            <p class="text-gray-600 mb-6 line-clamp-3"><?= nl2br(htmlspecialchars(mb_strimwidth((string)($c['description'] ?? ''), 0, 160, '...'))) ?></p>
                            
                            <div class="flex items-center justify-between mb-4">
                                <div class="flex items-center text-gray-500">
                                    <i class="far fa-calendar-alt mr-2"></i>
                                    <span><?= htmlspecialchars($c['event_date']) ?></span>
                                </div>
                            </div>
                            
                            <div class="flex flex-wrap gap-2">
                                <?php if ($status === 'published'): ?>
                                    <?php if ($uid && $role==='dancer'): ?>
                                        <?php if ($hasVideo): ?>
                                            <button class="flex-1 px-4 py-2 rounded-full bg-gray-200 text-gray-600 cursor-not-allowed" disabled>
                                                <i class="fas fa-check mr-2"></i>Submitted
                                            </button>
                                            <a href="results.php?cid=<?= $cid ?>" class="flex-1 px-4 py-2 rounded-full border hover:bg-gray-50 transition-colors">
                                                <i class="fas fa-trophy mr-2"></i>Leaderboard
                                            </a>
                                        <?php elseif ($isPaid): ?>
                                            <a href="dancer_dashboard.php" class="flex-1 px-4 py-2 rounded-full glow-button font-medium">
                                                <i class="fas fa-video mr-2"></i>Upload Video
                                            </a>
                                        <?php elseif ($mine): ?>
                                            <a href="dancer_dashboard.php" class="flex-1 px-4 py-2 rounded-full glow-button font-medium">
                                                <i class="fas fa-user-check mr-2"></i>Complete Registration
                                            </a>
                                        <?php else: ?>
                                            <a href="join.php?id=<?= $cid ?>" class="flex-1 px-4 py-2 rounded-full glow-button font-medium">
                                                <i class="fas fa-plus mr-2"></i>Register
                                            </a>
                                        <?php endif; ?>
                                    <?php else: ?>
                                        <a href="<?= !empty($_SESSION['user_id']) ? "join.php?id={$cid}" : "index.html?login=1" ?>"
                                           class="flex-1 px-4 py-2 rounded-full glow-button font-medium">
                                            <i class="fas fa-plus mr-2"></i>Register
                                        </a>
                                    <?php endif; ?>
                                <?php else: ?>
                                    <span class="flex-1 px-4 py-2 rounded-full bg-gray-200 text-gray-600 text-center">
                                        <i class="fas fa-lock mr-2"></i>Closed
                                    </span>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
                
                <?php if (!$comps): ?>
                    <div class="col-span-full text-center py-12">
                        <i class="fas fa-calendar-times text-5xl text-gray-300 mb-4"></i>
                        <h3 class="text-xl font-semibold text-gray-600 mb-2">No competitions yet</h3>
                        <p class="text-gray-500">Check back soon for upcoming events!</p>
                    </div>
                <?php endif; ?>
            </section>
        </div>
    </main>

    <script>
        // Slide-in animations
        document.addEventListener('DOMContentLoaded', () => {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('active');
                    }
                });
            }, { threshold: 0.1 });
            
            document.querySelectorAll('.slide-in').forEach(el => {
                observer.observe(el);
            });
        });
    </script>
</body>
</html>