{% extends "base.html" %}

{% block title %}{{ podcast.title }}{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="page-header">
    <h1 class="page-title">{{ podcast.title }}</h1>
    <div class="page-actions">
        <form action="{{ url_for('podcasts.update', podcast_id=podcast.id) }}" method="post" style="display: inline;">
            <button type="submit" class="btn btn-primary">Update Episodes</button>
        </form>
        <form action="{{ url_for('podcasts.delete', podcast_id=podcast.id) }}" method="post"
              style="display: inline; margin-left: 8px;"
              onsubmit="return confirm('Are you sure you want to delete this podcast?');">
            <button type="submit" class="btn btn-danger">Delete Podcast</button>
        </form>
    </div>
</div>

<!-- Podcast Info -->
<div style="padding: 16px; background-color: #161b22; border-bottom: 1px solid #30363d;">
    <div style="display: flex; gap: 16px;">
        <div style="flex-shrink: 0;">
            {% if podcast.image_url %}
                <img src="{{ podcast.image_url }}" alt="{{ podcast.title }}"
                     style="width: 120px; height: 120px; object-fit: cover; border-radius: 6px;">
            {% else %}
                <div style="width: 120px; height: 120px; background-color: #21262d; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #7d8590;">
                    No Image
                </div>
            {% endif %}
        </div>
        <div style="flex: 1;">
            <h2 style="color: #f0f6fc; margin-bottom: 8px; font-size: 18px;">{{ podcast.title }}</h2>
            <p style="color: #7d8590; margin-bottom: 8px; font-size: 13px;">{{ podcast.author or 'Unknown Author' }}</p>
            {% if podcast.description %}
                <p style="color: #c9d1d9; font-size: 12px; line-height: 1.4; margin-bottom: 12px;">{{ podcast.description[:200] }}{% if podcast.description|length > 200 %}...{% endif %}</p>
            {% endif %}
            <div style="display: flex; gap: 16px; font-size: 11px; color: #7d8590;">
                <span>Episodes: {{ episodes|length }}</span>
                <span>Last Updated: {{ podcast.last_updated.strftime('%Y-%m-%d %H:%M') if podcast.last_updated else 'Never' }}</span>
                <span>Last Checked: {{ podcast.last_checked.strftime('%Y-%m-%d %H:%M') if podcast.last_checked else 'Never' }}</span>
            </div>
            <div style="display: flex; gap: 16px; margin-top: 8px; font-size: 11px;">
                {% if podcast.feed_url %}
                    <a href="{{ podcast.feed_url }}" target="_blank" style="color: #58a6ff;">View RSS Feed</a>
                {% endif %}
                <a href="#" onclick="document.getElementById('naming-format-modal').style.display='block'; return false;" style="color: #58a6ff;">Configure Naming Format</a>
            </div>
        </div>
    </div>
</div>

<!-- Toolbar -->
<div class="toolbar">
    <span class="toolbar-btn">{{ episodes|length }} Episodes</span>
    <div style="margin-left: auto;">
        <form action="{{ url_for('podcasts.verify', podcast_id=podcast.id) }}" method="post" style="display: inline;">
            <button type="submit" class="toolbar-btn">Verify Files</button>
        </form>
        <button class="toolbar-btn" onclick="window.location.reload()">Refresh</button>
    </div>
</div>


<!-- Episodes Table -->
<div class="content-area">
    {% if episodes %}
        {# Check if any episodes have season information #}
        {% set has_seasons = false %}
        {% for episode in episodes %}
            {% if episode.season and not has_seasons %}
                {% set has_seasons = true %}
            {% endif %}
        {% endfor %}

        {% if has_seasons %}
            {# Group episodes by season #}
            {% set seasons = {} %}
            {% for episode in episodes %}
                {% set season_num = episode.season|default(0) %}
                {% if season_num not in seasons %}
                    {% set seasons = seasons|merge({season_num: []}) %}
                {% endif %}
                {% set _ = seasons[season_num].append(episode) %}
            {% endfor %}

            {# Display seasons in order #}
            {% for season_num in seasons|sort %}
                <div class="season-accordion">
                    <div class="season-header" onclick="toggleSeason('{{ season_num }}')">
                        <h3>
                            {% if season_num == 0 %}
                                Unsorted Episodes
                            {% else %}
                                Season {{ season_num }}
                            {% endif %}
                            <span class="episode-count">({{ seasons[season_num]|length }} episodes)</span>
                        </h3>
                        <span id="toggle-icon-{{ season_num }}" class="toggle-icon">▼</span>
                    </div>
                    <div id="season-{{ season_num }}" class="season-content">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>Episode</th>
                                    <th style="width: 100px;">Published</th>
                                    <th style="width: 80px;">Duration</th>
                                    <th style="width: 80px;">Status</th>
                                    <th style="width: 120px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for episode in seasons[season_num]|sort(attribute='episode_number') %}
                                <tr>
                                    <td>
                                        <div class="cell-title">
                                            {% if episode.episode_number %}
                                                <span style="color: #58a6ff; font-weight: bold; margin-right: 5px;">
                                                    {% if episode.season %}
                                                        S{{ episode.season }}E{{ episode.episode_number }}
                                                    {% else %}
                                                        #{{ episode.episode_number }}
                                                    {% endif %}
                                                </span>
                                            {% endif %}
                                            {{ episode.title }}
                                            {% if episode.explicit %}
                                                <span class="explicit-badge" title="Explicit Content">E</span>
                                            {% endif %}
                                        </div>
                                        {% if episode.description %}
                                            <div class="cell-secondary" style="margin-top: 4px;">
                                                {{ episode.description[:100] }}{% if episode.description|length > 100 %}...{% endif %}
                                            </div>
                                        {% endif %}
                                    </td>
                                    <td class="cell-center">
                                        <div class="cell-secondary">
                                            {{ episode.published_date.strftime('%Y-%m-%d') if episode.published_date else 'Unknown' }}
                                        </div>
                                    </td>
                                    <td class="cell-center">
                                        <div class="cell-secondary">
                                            {% if episode.duration %}
                                                {{ (episode.duration / 60)|int }}m
                                            {% else %}
                                                -
                                            {% endif %}
                                        </div>
                                    </td>
                                    <td class="cell-center">
                                        {% if episode.downloaded %}
                                            <span class="status-badge status-active">Downloaded</span>
                                        {% else %}
                                            <span class="status-badge status-pending">Available</span>
                                        {% endif %}
                                    </td>
                                    <td class="cell-actions">
                                        {% if not episode.downloaded %}
                                            <a href="{{ url_for('podcasts.download', episode_id=episode.id) }}" class="btn btn-sm">Download</a>
                                        {% else %}
                                            <form action="{{ url_for('podcasts.rename_episode', episode_id=episode.id) }}" method="post" style="display: inline;">
                                                <button type="submit" class="btn btn-sm">Rename</button>
                                            </form>
                                        {% endif %}
                                        {% if episode.audio_url %}
                                            <a href="{{ episode.audio_url }}" target="_blank" class="btn btn-sm btn-secondary" style="margin-left: 4px;">Stream</a>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            {# Display episodes in a flat table if no season information is available #}
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Episode</th>
                        <th style="width: 100px;">Published</th>
                        <th style="width: 80px;">Duration</th>
                        <th style="width: 80px;">Status</th>
                        <th style="width: 120px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for episode in episodes %}
                    <tr>
                        <td>
                            <div class="cell-title">
                                {% if episode.episode_number %}
                                    <span style="color: #58a6ff; font-weight: bold; margin-right: 5px;">#{{ episode.episode_number }}</span>
                                {% endif %}
                                {{ episode.title }}
                                {% if episode.explicit %}
                                    <span class="explicit-badge" title="Explicit Content">E</span>
                                {% endif %}
                            </div>
                            {% if episode.description %}
                                <div class="cell-secondary" style="margin-top: 4px;">
                                    {{ episode.description[:100] }}{% if episode.description|length > 100 %}...{% endif %}
                                </div>
                            {% endif %}
                        </td>
                        <td class="cell-center">
                            <div class="cell-secondary">
                                {{ episode.published_date.strftime('%Y-%m-%d') if episode.published_date else 'Unknown' }}
                            </div>
                        </td>
                        <td class="cell-center">
                            <div class="cell-secondary">
                                {% if episode.duration %}
                                    {{ (episode.duration / 60)|int }}m
                                {% else %}
                                    -
                                {% endif %}
                            </div>
                        </td>
                        <td class="cell-center">
                            {% if episode.downloaded %}
                                <span class="status-badge status-active">Downloaded</span>
                            {% else %}
                                <span class="status-badge status-pending">Available</span>
                            {% endif %}
                        </td>
                        <td class="cell-actions">
                            {% if not episode.downloaded %}
                                <a href="{{ url_for('podcasts.download', episode_id=episode.id) }}" class="btn btn-sm">Download</a>
                            {% else %}
                                <form action="{{ url_for('podcasts.rename_episode', episode_id=episode.id) }}" method="post" style="display: inline;">
                                    <button type="submit" class="btn btn-sm">Rename</button>
                                </form>
                            {% endif %}
                            {% if episode.audio_url %}
                                <a href="{{ episode.audio_url }}" target="_blank" class="btn btn-sm btn-secondary" style="margin-left: 4px;">Stream</a>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}
    {% else %}
        <div class="empty-state">
            <h3>No Episodes Found</h3>
            <p>No episodes found for this podcast.</p>
            <form action="{{ url_for('podcasts.update', podcast_id=podcast.id) }}" method="post">
                <button type="submit" class="btn btn-primary">Try Updating Episodes</button>
            </form>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
    function toggleSeason(seasonId) {
        const seasonContent = document.getElementById('season-' + seasonId);
        const toggleIcon = document.getElementById('toggle-icon-' + seasonId);

        if (seasonContent.style.display === 'block') {
            seasonContent.style.display = 'none';
            toggleIcon.innerHTML = '▼';
        } else {
            seasonContent.style.display = 'block';
            toggleIcon.innerHTML = '▲';
        }
    }

    // Open the first season by default when the page loads
    document.addEventListener('DOMContentLoaded', function() {
        const firstSeasonAccordion = document.querySelector('.season-accordion');
        if (firstSeasonAccordion) {
            const seasonId = firstSeasonAccordion.querySelector('.season-content').id.replace('season-', '');
            toggleSeason(seasonId);
        }
    });
</script>

{% include 'podcasts/naming_format_modal.html' %}
{% endblock %}