{% extends 'admin/layout.twig' %}

{% block title %}Manage TV Shows - Admin Panel - MediaLib{% endblock %}

{% block content %}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">Manage TV Shows</h1>
            <p class="text-muted mb-0">View and manage your TV show library</p>
        </div>
        <a href="{{ path_for('admin.shows.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle me-2"></i>Add New Show
        </a>
    </div>

    {# Search and Filters #}
    <div class="card mb-4">
        <div class="card-body">
            <form method="get" action="{{ path_for('admin.shows') }}" class="mb-0">
                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-search"></i></span>
                            <input type="text" name="search" class="form-control" placeholder="Search shows..." value="{{ filters.search }}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <select name="genre" class="form-select">
                            <option value="">All Genres</option>
                            {% for genre in genres %}
                                <option value="{{ genre }}" {{ filters.genre == genre ? 'selected' : '' }}>{{ genre }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select name="status" class="form-select">
                            <option value="">All Statuses</option>
                            {% for status in statuses %}
                                <option value="{{ status }}" {{ filters.status == status ? 'selected' : '' }}>{{ status }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select name="sort" class="form-select">
                            <option value="title_asc" {{ filters.sort == 'title_asc' ? 'selected' : '' }}>Title (A-Z)</option>
                            <option value="title_desc" {{ filters.sort == 'title_desc' ? 'selected' : '' }}>Title (Z-A)</option>
                            <option value="rating_desc" {{ filters.sort == 'rating_desc' ? 'selected' : '' }}>Highest Rated</option>
                            <option value="rating_asc" {{ filters.sort == 'rating_asc' ? 'selected' : '' }}>Lowest Rated</option>
                            <option value="newest" {{ filters.sort == 'newest' ? 'selected' : '' }}>Newest First</option>
                            <option value="oldest" {{ filters.sort == 'oldest' ? 'selected' : '' }}>Oldest First</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <div class="d-flex">
                            <button type="submit" class="btn btn-primary me-2">
                                <i class="bi bi-funnel me-1"></i> Apply
                            </button>
                            <a href="{{ path_for('admin.shows') }}" class="btn btn-outline-secondary">
                                <i class="bi bi-arrow-counterclockwise"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            {% if flash.getMessage('success') %}
                <div class="alert alert-success">
                    {{ flash.getMessage('success') | first }}
                </div>
            {% endif %}

            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Poster</th>
                            <th>Title</th>
                            <th>First Aired</th>
                            <th>Seasons</th>
                            <th>Rating</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for show in shows %}
                            <tr>
                                <td>
                                    {% if show.poster_path %}
                                        <img src="{{ show.poster_path }}" alt="{{ show.title }}" style="width: 50px; height: 75px; object-fit: cover;">
                                    {% else %}
                                        <div class="bg-light d-flex align-items-center justify-content-center" style="width: 50px; height: 75px;">
                                            <i class="bi bi-tv text-muted"></i>
                                        </div>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="fw-medium">{{ show.title }}</div>
                                    <small class="text-muted">{{ show.network ? show.network : 'N/A' }}</small>
                                </td>
                                <td>{{ show.first_air_date ? show.first_air_date|date('Y') : 'N/A' }}</td>
                                <td>{{ show.number_of_seasons ?? '0' }}</td>
                                <td>
                                    {% if show.vote_average %}
                                        <span class="badge bg-primary">{{ show.vote_average|number_format(1) }}/10</span>
                                    {% else %}
                                        <span class="text-muted">N/A</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if show.status == 'Returning Series' %}
                                        <span class="badge bg-success">Ongoing</span>
                                    {% elseif show.status == 'Ended' %}
                                        <span class="badge bg-secondary">Ended</span>
                                    {% else %}
                                        <span class="badge bg-info">{{ show.status ?? 'N/A' }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a href="{{ path_for('admin.shows.edit', {id: show.id}) }}" class="btn btn-outline-primary">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <form action="{{ path_for('admin.shows.delete', {id: show.id}) }}" method="post" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this show?');">
                                            <input type="hidden" name="_METHOD" value="DELETE">
                                            <button type="submit" class="btn btn-outline-danger">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="7" class="text-center py-4">
                                    <div class="text-muted">No TV shows found. <a href="{{ path_for('admin.shows.create') }}">Add your first show</a></div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {% if pagination.total > 1 %}
                <div class="d-flex justify-content-between align-items-center mt-4">
                    <div class="text-muted">
                        Showing {{ pagination.from }} to {{ pagination.to }} of {{ pagination.total_items }} shows
                    </div>
                    <nav>
                        <ul class="pagination mb-0">
                            {% if pagination.current > 1 %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ path_for('admin.shows', {'page': pagination.current - 1, 'search': filters.search, 'genre': filters.genre, 'status': filters.status, 'sort': filters.sort}) }}" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                            {% else %}
                                <li class="page-item disabled">
                                    <span class="page-link" aria-hidden="true">&laquo;</span>
                                </li>
                            {% endif %}

                            {% for i in 1..pagination.total %}
                                {% if i == pagination.current %}
                                    <li class="page-item active" aria-current="page">
                                        <span class="page-link">{{ i }}</span>
                                    </li>
                                {% else %}
                                    {% if (i >= pagination.current - 2 and i <= pagination.current + 2) or i == 1 or i == pagination.total %}
                                        <li class="page-item">
                                            <a class="page-link" href="{{ path_for('admin.shows', {'page': i, 'search': filters.search, 'genre': filters.genre, 'status': filters.status, 'sort': filters.sort}) }}">{{ i }}</a>
                                        </li>
                                    {% elseif (i == pagination.current - 3 or i == pagination.current + 3) %}
                                        <li class="page-item disabled">
                                            <span class="page-link">...</span>
                                        </li>
                                    {% endif %}
                                {% endif %}
                            {% endfor %}

                            {% if pagination.current < pagination.total %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ path_for('admin.shows', {'page': pagination.current + 1, 'search': filters.search, 'genre': filters.genre, 'status': filters.status, 'sort': filters.sort}) }}" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            {% else %}
                                <li class="page-item disabled">
                                    <span class="page-link" aria-hidden="true">&raquo;</span>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}