{% extends "base.html" %}

{% block title %}Edited Media Report - {{ player.name }}{% endblock %}

{% block content %}
<style>
    .report-container {
        margin-bottom: 2rem;
    }

    .report-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
    }

    .report-header h1 {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.5rem;
    }

    .report-summary {
        display: flex;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
    }

    .summary-stat {
        background: #f8f9fa;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 0.75rem 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    body.dark-mode .summary-stat {
        background: #1a202c;
        border-color: #4a5568;
    }

    .summary-stat .stat-value {
        font-size: 1.4rem;
        font-weight: 700;
        color: #7c3aed;
    }

    .summary-stat .stat-label {
        font-size: 0.85rem;
        color: #64748b;
    }

    .report-table-wrapper {
        overflow-x: auto;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    body.dark-mode .report-table-wrapper {
        background: #1a202c;
        border-color: #4a5568;
    }

    .report-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
    }

    .report-table thead {
        background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
        color: white;
    }

    .report-table thead th {
        padding: 0.85rem 1rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    .report-table tbody tr {
        border-bottom: 1px solid #e2e8f0;
        transition: background 0.15s;
    }

    body.dark-mode .report-table tbody tr {
        border-bottom-color: #4a5568;
    }

    .report-table tbody tr:hover {
        background: rgba(124, 58, 237, 0.05);
    }

    body.dark-mode .report-table tbody tr:hover {
        background: rgba(124, 58, 237, 0.12);
    }

    .report-table tbody tr:nth-child(even) {
        background: #f8fafc;
    }

    body.dark-mode .report-table tbody tr:nth-child(even) {
        background: #162032;
    }

    .report-table tbody td {
        padding: 0.75rem 1rem;
        vertical-align: middle;
    }

    .report-table .col-user {
        font-weight: 600;
        color: #1a202c;
    }

    body.dark-mode .report-table .col-user {
        color: #e2e8f0;
    }

    .report-table .col-filename {
        font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
        font-size: 0.82rem;
        color: #475569;
        word-break: break-all;
    }

    body.dark-mode .report-table .col-filename {
        color: #cbd5e1;
    }

    .report-table .col-date {
        color: #64748b;
        white-space: nowrap;
        font-size: 0.85rem;
    }

    .report-table .col-link a {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.4rem 0.8rem;
        background: #7c3aed;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-size: 0.8rem;
        font-weight: 500;
        transition: background 0.2s, transform 0.15s;
        white-space: nowrap;
    }

    .report-table .col-link a:hover {
        background: #6d28d9;
        transform: translateY(-1px);
    }

    body.dark-mode .report-table .col-link a {
        background: #6d28d9;
    }

    body.dark-mode .report-table .col-link a:hover {
        background: #5b21b6;
    }

    .report-table .col-version {
        text-align: center;
    }

    .version-badge {
        display: inline-block;
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 600;
        background: #ede9fe;
        color: #7c3aed;
    }

    body.dark-mode .version-badge {
        background: rgba(124, 58, 237, 0.2);
        color: #a78bfa;
    }

    .no-data {
        text-align: center;
        padding: 4rem 2rem;
        color: #6c757d;
    }

    .no-data .icon {
        font-size: 3rem;
        margin-bottom: 0.75rem;
    }

    .no-data p {
        margin: 0.25rem 0;
    }

    .print-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: #64748b;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 0.9rem;
        cursor: pointer;
        transition: background 0.2s;
        text-decoration: none;
    }

    .print-btn:hover {
        background: #475569;
    }

    @media print {
        body {
            background: white !important;
            color: black !important;
        }
        .report-table-wrapper {
            border: 1px solid #ccc !important;
            box-shadow: none !important;
        }
        .report-table thead {
            background: #333 !important;
        }
        .btn, .print-btn, nav, .back-link {
            display: none !important;
        }
    }
</style>

<div class="report-container">
    <div class="report-header">
        <a href="{{ url_for('players.manage_player', player_id=player.id) }}"
           class="btn back-link"
           style="background: #6c757d; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 6px; display: inline-flex; align-items: center; gap: 0.5rem;">
            ← Back to Player
        </a>
        <h1>
            <img src="{{ url_for('static', filename='icons/edit.svg') }}" alt="" style="width: 28px; height: 28px;">
            Edited Media Report — {{ player.name }}
        </h1>
        <button class="print-btn" onclick="window.print()">
            🖨️ Print / PDF
        </button>
    </div>

    {% if edited_media %}
    {% set total_edits = edited_media|length %}
    {% set unique_files = edited_media|map(attribute='content_id')|unique|list|length %}
    {% set unique_users = edited_media|selectattr('user')|map(attribute='user')|unique|list|length %}

    <div class="report-summary">
        <div class="summary-stat">
            <span class="stat-value">{{ total_edits }}</span>
            <span class="stat-label">Total Edits</span>
        </div>
        <div class="summary-stat">
            <span class="stat-value">{{ unique_files }}</span>
            <span class="stat-label">Files Edited</span>
        </div>
        <div class="summary-stat">
            <span class="stat-value">{{ unique_users }}</span>
            <span class="stat-label">Editors</span>
        </div>
    </div>

    <div class="report-table-wrapper">
        <table class="report-table">
            <thead>
                <tr>
                    <th style="width: 22%;">User</th>
                    <th style="width: 30%;">Edited File</th>
                    <th style="width: 15%;">Version</th>
                    <th style="width: 18%;">Date</th>
                    <th style="width: 15%;">Link</th>
                </tr>
            </thead>
            <tbody>
                {% for edit in edited_media %}
                <tr>
                    <td class="col-user">
                        {% if edit.user %}
                            {% set display_name = user_mappings.get(edit.user, edit.user) %}
                            👤 {{ display_name }}
                        {% else %}
                            <span style="color: #94a3b8;">—</span>
                        {% endif %}
                    </td>
                    <td class="col-filename">
                        📄 {{ edit.new_name }}
                    </td>
                    <td class="col-version">
                        <span class="version-badge">v{{ edit.version }}</span>
                    </td>
                    <td class="col-date">
                        {% if edit.time_of_modification %}
                            {{ edit.time_of_modification | localtime('%Y-%m-%d %H:%M') }}
                        {% elif edit.created_at %}
                            {{ edit.created_at | localtime('%Y-%m-%d %H:%M') }}
                        {% else %}
                            <span style="color: #94a3b8;">—</span>
                        {% endif %}
                    </td>
                    <td class="col-link">
                        <a href="{{ url_for('static', filename='uploads/edited_media/' ~ edit.content_id ~ '/' ~ edit.new_name) }}"
                           target="_blank"
                           title="Open {{ edit.new_name }}">
                            🔗 Open File
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="no-data">
        <div class="icon">📋</div>
        <p style="font-size: 1.1rem; font-weight: 500;">No edited media found</p>
        <p>This player has not submitted any edited media yet.</p>
    </div>
    {% endif %}
</div>
{% endblock %}