<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Lenny's Podcast Genie</title>
    <style>
        /* Reset and Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: #ffffff;
            color: #333;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Header Styles */
        header {
            padding: 15px 20px;
            background-color: #ffffff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }

        header h1 {
            font-size: clamp(20px, 5vw, 24px);
            color: #ff7f50;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: bold;
            text-align: center;
        }

        header h1 span {
            font-size: clamp(24px, 6vw, 30px);
        }

        nav {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
        }

        nav a {
            text-decoration: none;
            color: #333;
            font-size: 16px;
            padding: 5px 10px;
            transition: color 0.3s ease;
            white-space: nowrap;
        }

        nav a:hover {
            color: #ff7f50;
        }

        /* Hero Section */
        .hero {
            padding: 40px 20px;
            background: linear-gradient(135deg, #ff7f50, #e3673b);
            color: #fff;
            text-align: center;
        }

        .hero h2 {
            font-size: clamp(24px, 6vw, 36px);
            margin-bottom: 20px;
            padding: 0 10px;
        }

        .hero p {
            font-size: clamp(16px, 4vw, 18px);
            margin-bottom: 30px;
            padding: 0 10px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Button Styles */
        button {
            padding: 12px 30px;
            font-size: 16px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: fit-content;
        }

        .hero button {
            color: #ff7f50;
            background-color: #fff;
        }

        .hero button:hover {
            background-color: #f4f4f4;
            transform: translateY(-2px);
        }

        /* Main Content */
        .container {
            width: 100%;
            max-width: 900px;
            margin: 40px auto;
            padding: 20px;
        }

        .action-section {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px;
        }

        .action-section h3 {
            font-size: clamp(20px, 5vw, 24px);
            margin-bottom: 20px;
        }

        .action-section p {
            font-size: 16px;
            margin-bottom: 20px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Input Group */
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 600px;
            margin: 0 auto;
        }

        @media (min-width: 768px) {
            .input-group {
                flex-direction: row;
            }
            .header-content {
                flex-direction: row;
                justify-content: space-between;
            }
        }

        .input-group input {
            padding: 12px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 5px;
            width: 100%;
        }

        .input-group button {
            padding: 12px 20px;
            color: #fff;
            background-color: #ff7f50;
            border-radius: 5px;
            white-space: nowrap;
        }

        .input-group button:hover {
            background-color: #e3673b;
        }

        /* Loader */
        #loader {
            display: none; /* Masqué par défaut */
            margin: 20px auto;
            border: 4px solid #f3f3f3; /* Light grey */
            border-top: 4px solid #ff7f50; /* Corail */
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        /* Results and Error Display */
        #error {
            margin-top: 20px;
            padding: 20px;
            border-radius: 5px;
            word-wrap: break-word;
            color: red;
            background-color: rgba(255, 0, 0, 0.1);
        }

        /* Card styling pour le résultat */
        .result-card {
            display: none; /* caché par défaut, on l'affichera quand la réponse arrive */
            background-color: #fff;
            border: 2px solid #ff7f50;
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px;
            word-wrap: break-word;
            text-align: left;
        }

        .result-card h4 {
            margin-bottom: 10px;
            color: #ff7f50;
            font-size: 18px;
        }

        .result-card p {
            margin-bottom: 8px;
        }

        .result-label {
            font-weight: bold;
        }

        /* Footer */
        footer {
            background-color: #ffffff;
            padding: 20px;
            text-align: center;
            font-size: 14px;
            color: #999;
            border-top: 1px solid #ddd;
            margin-top: auto;
        }

        .footer-links {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
        }

        .footer-links a {
            text-decoration: none;
            color: #ff7f50;
            font-weight: bold;
            padding: 5px;
        }
    </style>
</head>
<body>
    <header>
        <div class="header-content">
            <h1><span>🎙️</span> Lenny's Podcast Genie</h1>
            <nav>
                <a href="/dashboard">Dashboard</a>
                <a href="#contact">Contact</a>
            </nav>
        </div>
    </header>

    <div class="hero">
        <h2>Explore the World of Podcasts</h2>
        <p>Analyze, compare, and get inspired by podcasts from across the world.</p>
        <a href="/dashboard"><button>Go to Dashboard</button></a>
    </div>

    <div class="container">
        <div class="action-section" id="generate">
            <h3>Générer les informations du Podcast</h3>
            <p>Entrez l'URL YouTube ci-dessous pour récupérer son titre, description et miniature.</p>
            <div class="input-group">
                <input type="text" id="youtube-url" placeholder="Entrez l'URL YouTube ici...">
                <button onclick="generateDetails()">Générer</button>
            </div>
            
            <!-- Loader qui apparaît pendant le fetch -->
            <div id="loader"></div>

            <!-- Erreur -->
            <div id="error" style="display: none;">
                <p id="error-message"></p>
            </div>

            <!-- Card Résultat -->
            <div id="result" class="result-card">
                <h4>Résultat :</h4>
                <p><span class="result-label">Titre :</span> <span id="title"></span></p>
                <p><span class="result-label">Description :</span> <span id="description"></span></p>
                <p><span class="result-label">Miniature :</span> <span id="thumbnail"></span></p>
            </div>
        </div>
    </div>

    <footer>
        &copy; 2025 Lenny's Podcast Genie. All Rights Reserved.
        <div class="footer-links">
            <a href="/dashboard">Dashboard</a>
            <a href="#contact">Contact</a>
        </div>
    </footer>

    <script>
        function generateDetails() {
            const youtubeUrl = document.getElementById('youtube-url').value;
            const resultDiv = document.getElementById('result');
            const errorDiv = document.getElementById('error');
            const titleSpan = document.getElementById('title');
            const descriptionSpan = document.getElementById('description');
            const thumbnailSpan = document.getElementById('thumbnail');
            const errorMessage = document.getElementById('error-message');
            const loader = document.getElementById('loader');

            // On réinitialise l'affichage
            resultDiv.style.display = 'none';
            errorDiv.style.display = 'none';

            // Affiche le loader
            loader.style.display = 'block';

            fetch('/generate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ youtube_url: youtubeUrl }),
            })
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        errorMessage.textContent = data.error;
                        errorDiv.style.display = 'block';
                    } else {
                        titleSpan.textContent = data.title;
                        descriptionSpan.textContent = data.description;
                        thumbnailSpan.textContent = data.thumbnail;
                        resultDiv.style.display = 'block';
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    errorMessage.textContent = 'Une erreur est survenue. Veuillez réessayer.';
                    errorDiv.style.display = 'block';
                })
                .finally(() => {
                    // Cache le loader à la fin de la requête (succès ou erreur)
                    loader.style.display = 'none';
                });
        }
    </script>
</body>
</html>
