<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IG Radio | Portal de Música e Notícias</title>
    <meta name="description"
        content="A tua rádio online premium. Ouve música em direto, lê as últimas notícias e vota nas tuas músicas favoritas.">
    <link rel="stylesheet" href="/static/css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800;900&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <style>
        /* All styles moved to style.css — only page-specific overrides remain */
    </style>
</head>

<body>
    <!-- ── Header ───────────────────────────────────────── -->
    <nav class="top-nav">
        <a href="/" class="top-nav-logo">
            <img src="/static/images/logo.png" alt="IG Radio" style="height: 50px; width: auto;">
        </a>
        <ul class="top-nav-links">
            <li><a href="/" class="nav-link active">Início</a></li>
            <li><a href="/blog" class="nav-link">Notícias</a></li>
        </ul>
        <button id="theme-toggle" class="btn small theme-toggle" title="Alternar tema" aria-pressed="false">🌙</button>
        <button class="mobile-menu-btn">☰</button>
    </nav>

    <!-- ── Mobile Overlay ───────────────────────────────── -->
    <div class="mobile-overlay" id="mobileOverlay">
        <a href="/" class="nav-link active" onclick="toggleMobileMenu()">Início</a>
        <a href="/blog" class="nav-link" onclick="toggleMobileMenu()">Notícias</a>
    </div>

    <!-- ── Live Player Hero ─────────────────────────────── -->
    <section class="player-hero">
        <div class="container player-container">
            <div style="position: relative;">
                <img id="cover-image" class="player-artwork" src="/static/images/logo.png"
                    alt="Cover Art">
                <div id="live-indicator" style="position: absolute; top: 15px; left: 15px;">
                    <span class="live-badge">
                        <div class="live-dot"></div>
                        <span id="radio-status">Sincronizando...</span>
                    </span>
                </div>
            </div>

            <div class="player-content">
                <h1 class="song-title" id="song-title">A carregar rádio...</h1>
                <p class="song-artist" id="song-artist">Por favor, aguarde</p>

                <div class="player-controls-row">
                    <button class="play-btn" id="toggle-play" title="Começar a Ouvir">
                        <svg viewBox="0 0 24 24" width="32" height="32" fill="currentColor">
                            <polygon points="5 3 19 12 5 21 5 3"></polygon>
                        </svg>
                    </button>

                    <div class="progress-wrap">
                        <div class="progress-bar">
                            <div id="progress" class="progress-fill"></div>
                        </div>
                        <div class="time-row">
                            <span id="current-time">0:00</span>
                            <span id="time-left">-0:00</span>
                        </div>
                    </div>
                </div>

                <div class="player-action-btns" style="position: relative;">
                    <a href="/live.mp3" target="_blank" class="btn secondary small" title="Link Direto MP3">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                        </svg>
                        Link Direto
                    </a>
                    <button id="fav-btn" class="btn secondary small hidden" title="Adicionar aos Favoritos">
                        <svg id="fav-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <path
                                d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
                            </path>
                        </svg>
                        Favorito
                    </button>
                    <button id="share-btn" class="btn secondary small" title="Partilhar">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <circle cx="18" cy="5" r="3"></circle>
                            <circle cx="6" cy="12" r="3"></circle>
                            <circle cx="18" cy="19" r="3"></circle>
                            <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
                            <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
                        </svg>
                        Partilhar
                    </button>

                    <!-- Share Panel -->
                    <div id="share-panel" class="card hidden"
                        style="position: absolute; top: calc(100% + 10px); right: 0; z-index: 1000; min-width: 280px; backdrop-filter: blur(15px); background: rgba(22, 22, 26, 0.95); border: 1px solid var(--primary); box-shadow: 0 20px 40px rgba(0,0,0,0.4);">
                        <p style="font-size: 0.8rem; margin-bottom: 15px; font-weight: 800; text-transform: uppercase; color: var(--primary); letter-spacing: 1px;">
                            Partilhar Rádio</p>
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                            <button class="btn small secondary" id="share-copy" style="font-size: 0.75rem; padding: 10px;">Copiar Link</button>
                            <button class="btn small success" id="share-wa" style="font-size: 0.75rem; background: #25D366; color: #fff; border:none; padding: 10px;">WhatsApp</button>
                            <button class="btn small secondary" id="share-tw" style="font-size: 0.75rem; padding: 10px;">Twitter</button>
                            <button class="btn small secondary" id="share-fb" style="font-size: 0.75rem; padding: 10px;">Facebook</button>
                        </div>
                        <div id="share-copied" class="hidden"
                            style="color: #00ff7f; font-size: 0.75rem; margin-top: 15px; text-align: center; font-weight: 700;">✓ Link copiado!
                        </div>
                    </div>
                </div>

                <div class="vote-pills hidden">
                    <button id="like-btn" class="vote-pill">
                        👍 <span id="like-count">0</span> Likes
                    </button>
                    <button id="dislike-btn" class="vote-pill">
                        👎 <span id="dislike-count">0</span> Dislikes
                    </button>
                </div>

            </div>
        </div>
    </section>

    <audio id="audio-player"></audio>

    <!-- ── Main Grid ───────────────────────────────────── -->
    <main class="container main-grid">
        <!-- News Column -->
        <section>
            <h2 class="card-title">Últimas Notícias</h2>
            <div class="card" style="padding: 0;">
                {% if posts %}
                {% for post in posts %}
                <a href="/blog/{{ post.id }}" class="news-item">
                    <img src="{{ url_for('static', filename='images/' + post.banner_filename) if post.banner_filename else 'https://via.placeholder.com/300x200' }}"
                        class="news-img" alt="{{ post.title }}">
                    <div class="news-info">
                        <span class="news-category">Destaque</span>
                        <h3 class="news-headline">{{ post.title }}</h3>
                        <p class="news-excerpt">{{ post.description[:120] }}...</p>
                        <div style="margin-top: 15px;">
                            <span class="btn secondary small" style="font-size: 0.7rem;">Ler Artigo Completo</span>
                        </div>
                    </div>
                </a>
                {% endfor %}
                <div style="padding: 20px; text-align: center;">
                    <a href="/blog" class="btn secondary small">Ver Todas as Notícias</a>
                </div>
                {% else %}
                <p style="padding: 40px; text-align: center; color: var(--text-muted);">Ainda não há notícias
                    publicadas.</p>
                {% endif %}
            </div>

            <!-- AI Chat Section -->
            <h2 class="card-title" style="margin-top: 40px;">Assistente IA 🤖</h2>
            <div class="card" id="ai-chat-container" style="display: flex; flex-direction: column; padding: 16px; gap: 12px; min-height: 480px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                    <span style="font-size: 0.85rem; color: #888;">Histórico de conversa</span>
                    <button id="ai-clear-btn" class="btn small secondary" style="padding: 6px 12px; font-size: 0.8rem;">Limpar Histórico</button>
                </div>
                <div id="ai-messages">
                    <div class="ai-message-bot" style="align-self: flex-start;">
                        <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px;">
                            <img src="/static/images/logo.png" alt="IG Radio" style="width: 32px; height: 32px; border-radius: 50%;">
                            <span style="font-weight: 700; color: #ff007f; font-size: 0.85rem;">IG Radio IA</span>
                        </div>
                        <p>🎤 Olá! Sou o assistente IA do IG Radio. Qual é a tua pergunta?</p>
                    </div>
                </div>
                <div style="display: flex; gap: 8px; align-items: center;">
                    <input type="text" id="ai-input" placeholder="Pergunta algo...">
                    <button id="ai-send-btn" class="btn">Enviar</button>
                </div>

            </div>

            <h2 class="card-title" style="margin-top: 40px;">Recomendar Música</h2>
            <div class="card">
                <form id="recommend-form">
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                        <div class="input-group">
                            <label style="display:block; margin-bottom: 8px; font-weight: 700;">Título</label>
                            <input type="text" id="rec-title" placeholder="Nome da música" required>
                        </div>
                        <div class="input-group">
                            <label style="display:block; margin-bottom: 8px; font-weight: 700;">Artista</label>
                            <input type="text" id="rec-artist" placeholder="Nome do artista" required>
                        </div>
                        <div class="input-group" style="grid-column: span 2;">
                            <label style="display:block; margin-bottom: 8px; font-weight: 700;">O teu Email</label>
                            <input type="email" id="rec-email" placeholder="Para seres notificado se for aceite"
                                required>
                        </div>

                        <div class="input-group" style="grid-column: span 2;">
                            <label style="display:block; margin-bottom: 8px; font-weight: 700;">Verificação</label>
                            <div style="display: flex; gap: 10px; align-items: center;">
                                <canvas id="captcha-canvas" width="150" height="50"
                                    style="border: 1px solid var(--border); border-radius: 8px;"></canvas>
                                <button type="button" id="refresh-captcha" class="btn small secondary">↻</button>
                                <input type="text" id="captcha-input" placeholder="Código" required style="flex:1;">
                            </div>
                        </div>

                        <button type="submit" class="btn" style="grid-column: span 2;">Enviar Recomendação</button>
                    </div>
                    <div id="rec-msg" class="msg hidden"></div>
                </form>
            </div>
        </section>

        <!-- Sidebar -->
        <aside>
            <h2 class="card-title">Mural de Votação</h2>
            <div class="card" id="poll-box">
                <ul class="item-list" id="poll-list">
                    <p style="text-align: center; color: var(--text-muted);">A carregar votações...</p>
                </ul>
            </div>

            <h2 class="card-title">Próximas Músicas</h2>
            <div class="card hidden" id="queue-box">
                <ul class="item-list" id="queue-list"></ul>
            </div>

            <div id="favorites-section" class="hidden">
                <h2 class="card-title">Favoritos <button id="clear-favs-btn" class="btn small danger"
                        style="font-size: 0.6rem; padding: 2px 8px; margin-left: auto;">Limpar</button></h2>
                <div class="card" id="fav-box">
                    <ul class="item-list" id="fav-list"></ul>
                    <p id="fav-empty" class="hidden"
                        style="text-align: center; color: var(--text-muted); font-size: 0.9rem;">Sem favoritos
                        guardados.
                    </p>
                </div>
            </div>
        </aside>
    </main>

    <!-- ── Footer ───────────────────────────────────────── -->
    <footer>
        <div class="container footer-content">
            <div>
                <span class="footer-logo">IG RADIO</span>
                <p class="footer-desc">A tua rádio digital de confiança.</p>
                <p class="footer-contact">Contacto: <a href="mailto:igradio@tbhwf.com">igradio@tbhwf.com</a></p>
            </div>
            <div class="footer-links">
                <h4>Navegação</h4>
                <ul>
                    <li><a href="/">Início</a></li>
                    <li><a href="/blog">Notícias</a></li>
                </ul>
            </div>
            <div class="footer-links">
                <h4>Legal</h4>
                <ul>
                    <li><a href="/privacy">Privacidade</a></li>
                    <li><a href="/terms">Termos de Uso</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            &copy; 2026 IG Radio. Desenvolvido para amantes de música.
        </div>
    </footer>

    <script src="/static/js/script.js"></script>
</body>

</html>