<?php
include 'includes/header.php';
require_once 'includes/pexels.php';
?>

<div class="container py-5">
    <h1 class="display-4 fw-bold">Coding Challenges</h1>
    <p class="fs-5 text-muted">Test your skills with our coding challenges.</p>

    <?php if (isset($_SESSION['success_message'])) : ?>
        <div class="alert alert-success">
            <?php
            echo $_SESSION['success_message'];
            unset($_SESSION['success_message']);
            ?>
        </div>
    <?php endif; ?>

    <?php if (isset($_SESSION['error_message'])) : ?>
        <div class="alert alert-danger">
            <?php
            echo $_SESSION['error_message'];
            unset($_SESSION['error_message']);
            ?>
        </div>
    <?php endif; ?>

    <?php if (isset($_SESSION['info_message'])) : ?>
        <div class="alert alert-info">
            <?php
            echo $_SESSION['info_message'];
            unset($_SESSION['info_message']);
            ?>
        </div>
    <?php endif; ?>

    <div class="row mb-4">
        <div class="col-md-4">
            <div class="input-group">
                <label class="input-group-text" for="difficulty-filter">Difficulty</label>
                <select class="form-select" id="difficulty-filter">
                    <option value="all">All</option>
                    <option value="easy">Easy</option>
                    <option value="medium">Medium</option>
                    <option value="advanced">Advanced</option>
                </select>
            </div>
        </div>
        <div class="col-md-4">
            <div class="input-group">
                <label class="input-group-text" for="learning-style-filter">Learning Style</label>
                <select class="form-select" id="learning-style-filter">
                    <option value="all">All</option>
                    <option value="kinesthetic">Kinesthetic</option>
                    <option value="visual">Visual</option>
                    <option value="auditory">Auditory</option>
                    <option value="reading/writing">Reading/Writing</option>
                </select>
            </div>
        </div>
        <div class="col-md-4">
            <div class="input-group">
                <label class="input-group-text" for="sort-by">Sort By</label>
                <select class="form-select" id="sort-by">
                    <option value="date_desc">Newest</option>
                    <option value="date_asc">Oldest</option>
                    <option value="popularity">Popularity</option>
                </select>
            </div>
        </div>
    </div>

    <div class="row">
        <?php
        require_once 'db/config.php';
        $pdo = db();
        $stmt = $pdo->query('SELECT * FROM challenges WHERE deleted_at IS NULL ORDER BY created_at DESC');
        $challenges = $stmt->fetchAll();

        if (count($challenges) > 0) {
            foreach ($challenges as $challenge) {
                $image_data = pexels_get('https://api.pexels.com/v1/search?query=' . urlencode($challenge['title']) . '&per_page=1');
                if ($image_data && isset($image_data['photos'][0])) {
                    $image_url = $image_data['photos'][0]['src']['large'];
                } else {
                    $image_url = 'https://via.placeholder.com/600x400'; // Default placeholder
                }

                echo '<div class="col-md-4 mb-4">';
                echo '<div class="card h-100">';
                echo '<div class="card-img-container">';
                echo '<img src="' . $image_url . '" class="card-img-top" alt="' . htmlspecialchars($challenge['title']) . '">';
                echo '<div class="card-img-overlay d-flex flex-column justify-content-end">';
                echo '<h5 class="card-title text-white"><a href="challenge.php?id=' . $challenge['id'] . '">' . htmlspecialchars($challenge['title']) . '</a></h5>';
                echo '<span class="badge bg-primary">' . htmlspecialchars($challenge['difficulty']) . '</span>';
                echo '</div>';
                echo '</div>';
                echo '<div class="card-body d-flex flex-column">';
                echo '<p class="card-text flex-grow-1">' . htmlspecialchars(substr($challenge['description'], 0, 100)) . '...</p>';
                echo '<div class="d-flex justify-content-between align-items-center">';
                echo '<small class="text-muted">' . htmlspecialchars($challenge['learning_style']) . '</small>';
                echo '</div>';
                echo '</div>';
                echo '</div>';
                echo '</div>';
            }
        } else {
            echo '<div class="alert alert-info">No challenges available yet. Please check back later.</div>';
        }
        ?>
    </div>
</div>

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