{% extends "base.html" %}

{% block title %}{{ player.name }} - DigiServer v2{% endblock %}

{% block content %}
<div class="container" style="max-width: 1400px;">
    <!-- Header -->
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
        <div>
            <h1>{{ player.name }}</h1>
            <div style="margin-top: 10px;">
                {% if status_info.online %}
                    <span style="background: #28a745; color: white; padding: 5px 12px; border-radius: 3px; font-size: 14px; margin-right: 10px;">
                        🟢 Online
                    </span>
                {% else %}
                    <span style="background: #6c757d; color: white; padding: 5px 12px; border-radius: 3px; font-size: 14px; margin-right: 10px;">
                        ⚫ Offline
                    </span>
                {% endif %}
                <span style="color: #6c757d; font-size: 14px;">
                    Last seen: {{ status_info.last_seen_ago }}
                </span>
            </div>
        </div>
        <div>
            <a href="{{ url_for('players.edit_player', player_id=player.id) }}" class="btn btn-primary">
                ✏️ Edit Player
            </a>
            <a href="{{ url_for('content.upload_content', target_type='player', target_id=player.id, return_url=url_for('players.player_page', player_id=player.id)) }}" class="btn btn-success">
                📤 Upload Content
            </a>
            <a href="{{ url_for('players.list') }}" class="btn">
                ← Back to Players
            </a>
        </div>
    </div>

    <!-- Main Content Grid -->
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
        <!-- Player Information Card -->
        <div class="card">
            <h3 style="margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #dee2e6;">
                📋 Player Information
            </h3>
            <table style="width: 100%; border-collapse: collapse;">
                <tr style="border-bottom: 1px solid #dee2e6;">
                    <td style="padding: 10px; font-weight: bold; width: 40%;">Display Name:</td>
                    <td style="padding: 10px;">{{ player.name }}</td>
                </tr>
                <tr style="border-bottom: 1px solid #dee2e6;">
                    <td style="padding: 10px; font-weight: bold;">Hostname:</td>
                    <td style="padding: 10px;">
                        <code style="background: #f8f9fa; padding: 3px 8px; border-radius: 3px;">{{ player.hostname }}</code>
                    </td>
                </tr>
                <tr style="border-bottom: 1px solid #dee2e6;">
                    <td style="padding: 10px; font-weight: bold;">Location:</td>
                    <td style="padding: 10px;">{{ player.location or '-' }}</td>
                </tr>
                <tr style="border-bottom: 1px solid #dee2e6;">
                    <td style="padding: 10px; font-weight: bold;">Orientation:</td>
                    <td style="padding: 10px;">{{ player.orientation or 'Landscape' }}</td>
                </tr>
                <tr style="border-bottom: 1px solid #dee2e6;">
                    <td style="padding: 10px; font-weight: bold;">Group:</td>
                    <td style="padding: 10px;">
                        {% if player.group %}
                            <span style="background: #007bff; color: white; padding: 3px 8px; border-radius: 3px; font-size: 12px;">
                                {{ player.group.name }}
                            </span>
                        {% else %}
                            <span style="color: #6c757d;">No group</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td style="padding: 10px; font-weight: bold;">Created:</td>
                    <td style="padding: 10px;">{{ player.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                </tr>
            </table>
        </div>

        <!-- Authentication Details Card -->
        <div class="card">
            <h3 style="margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #dee2e6;">
                🔐 Authentication Details
            </h3>
            <table style="width: 100%; border-collapse: collapse;">
                <tr style="border-bottom: 1px solid #dee2e6;">
                    <td style="padding: 10px; font-weight: bold; width: 40%;">Password Set:</td>
                    <td style="padding: 10px;">
                        {% if player.password_hash %}
                            <span style="color: #28a745;">✓ Yes</span>
                        {% else %}
                            <span style="color: #dc3545;">✗ No</span>
                        {% endif %}
                    </td>
                </tr>
                <tr style="border-bottom: 1px solid #dee2e6;">
                    <td style="padding: 10px; font-weight: bold;">Quick Connect Code:</td>
                    <td style="padding: 10px;">
                        {% if player.quickconnect_code %}
                            <span style="color: #28a745;">✓ Yes</span>
                        {% else %}
                            <span style="color: #dc3545;">✗ No</span>
                        {% endif %}
                    </td>
                </tr>
                <tr style="border-bottom: 1px solid #dee2e6;">
                    <td style="padding: 10px; font-weight: bold;">Auth Code:</td>
                    <td style="padding: 10px;">
                        {% if player.auth_code %}
                            <span style="color: #28a745;">✓ Yes</span>
                            <form method="POST" action="{{ url_for('players.regenerate_auth_code', player_id=player.id) }}" style="display: inline; margin-left: 10px;">
                                <button type="submit" class="btn btn-sm" style="background: #ffc107; padding: 3px 8px;" 
                                        onclick="return confirm('Regenerate auth code? The player will need to authenticate again.')">
                                    🔄 Regenerate
                                </button>
                            </form>
                        {% else %}
                            <span style="color: #dc3545;">✗ No</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="padding: 15px 10px;">
                        <a href="{{ url_for('players.edit_player', player_id=player.id) }}" 
                           class="btn btn-primary" style="width: 100%; text-align: center;">
                            ✏️ Edit Authentication Settings
                        </a>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <!-- Playlist Management Card -->
    <div class="card" style="margin-bottom: 20px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
            <h3 style="margin: 0;">🎬 Current Playlist</h3>
            <div>
                <a href="{{ url_for('content.upload_content', target_type='player', target_id=player.id, return_url=url_for('players.player_page', player_id=player.id)) }}" 
                   class="btn btn-success btn-sm">
                    + Add Content
                </a>
            </div>
        </div>

        {% if playlist %}
        <div style="background: #f8f9fa; padding: 10px; border-radius: 5px; margin-bottom: 15px;">
            <strong>Total Items:</strong> {{ playlist|length }} | 
            <strong>Total Duration:</strong> {% set total_duration = namespace(value=0) %}{% for item in playlist %}{% set total_duration.value = total_duration.value + (item.duration or 10) %}{% endfor %}{{ total_duration.value }}s
        </div>

        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr style="background: #f8f9fa; text-align: left;">
                    <th style="padding: 10px; border-bottom: 2px solid #dee2e6; width: 50px;">Order</th>
                    <th style="padding: 10px; border-bottom: 2px solid #dee2e6;">File Name</th>
                    <th style="padding: 10px; border-bottom: 2px solid #dee2e6;">Type</th>
                    <th style="padding: 10px; border-bottom: 2px solid #dee2e6;">Duration</th>
                    <th style="padding: 10px; border-bottom: 2px solid #dee2e6;">Actions</th>
                </tr>
            </thead>
            <tbody id="playlist-items">
                {% for item in playlist %}
                <tr style="border-bottom: 1px solid #dee2e6;" data-content-id="{{ item.id }}">
                    <td style="padding: 10px; text-align: center;">
                        <strong>{{ loop.index }}</strong>
                    </td>
                    <td style="padding: 10px;">
                        {{ item.filename }}
                    </td>
                    <td style="padding: 10px;">
                        {% if item.type == 'image' %}
                            <span style="background: #28a745; color: white; padding: 3px 8px; border-radius: 3px; font-size: 12px;">📷 Image</span>
                        {% elif item.type == 'video' %}
                            <span style="background: #007bff; color: white; padding: 3px 8px; border-radius: 3px; font-size: 12px;">🎬 Video</span>
                        {% elif item.type == 'pdf' %}
                            <span style="background: #dc3545; color: white; padding: 3px 8px; border-radius: 3px; font-size: 12px;">📄 PDF</span>
                        {% else %}
                            <span style="background: #6c757d; color: white; padding: 3px 8px; border-radius: 3px; font-size: 12px;">📁 Other</span>
                        {% endif %}
                    </td>
                    <td style="padding: 10px;">
                        {{ item.duration or 10 }}s
                    </td>
                    <td style="padding: 10px;">
                        <button onclick="moveUp({{ item.id }})" class="btn btn-sm" 
                                style="background: #007bff; color: white; padding: 3px 8px; margin-right: 5px;"
                                {% if loop.first %}disabled{% endif %}>
                            ↑
                        </button>
                        <button onclick="moveDown({{ item.id }})" class="btn btn-sm" 
                                style="background: #007bff; color: white; padding: 3px 8px; margin-right: 5px;"
                                {% if loop.last %}disabled{% endif %}>
                            ↓
                        </button>
                        <button onclick="removeFromPlaylist({{ item.id }}, '{{ item.filename }}')" 
                                class="btn btn-danger btn-sm" style="padding: 3px 8px;">
                            🗑️ Remove
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div style="background: #fff3cd; border: 1px solid #ffc107; color: #856404; padding: 15px; border-radius: 5px; text-align: center;">
            ⚠️ No content in playlist. <a href="{{ url_for('content.upload_content', target_type='player', target_id=player.id, return_url=url_for('players.player_page', player_id=player.id)) }}" style="color: #856404; text-decoration: underline;">Upload content</a> to get started.
        </div>
        {% endif %}
    </div>

    <!-- Player Activity Log Card -->
    <div class="card">
        <h3 style="margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #dee2e6;">
            📊 Recent Activity & Feedback
        </h3>

        {% if recent_feedback %}
        <div style="max-height: 400px; overflow-y: auto;">
            <table style="width: 100%; border-collapse: collapse;">
                <thead style="position: sticky; top: 0; background: white;">
                    <tr style="background: #f8f9fa; text-align: left;">
                        <th style="padding: 10px; border-bottom: 2px solid #dee2e6;">Time</th>
                        <th style="padding: 10px; border-bottom: 2px solid #dee2e6;">Status</th>
                        <th style="padding: 10px; border-bottom: 2px solid #dee2e6;">Message</th>
                        <th style="padding: 10px; border-bottom: 2px solid #dee2e6;">Error</th>
                    </tr>
                </thead>
                <tbody>
                    {% for feedback in recent_feedback %}
                    <tr style="border-bottom: 1px solid #dee2e6;">
                        <td style="padding: 10px; white-space: nowrap;">
                            <small style="color: #6c757d;">{{ feedback.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</small>
                        </td>
                        <td style="padding: 10px;">
                            {% if feedback.status == 'playing' %}
                                <span style="background: #28a745; color: white; padding: 3px 8px; border-radius: 3px; font-size: 12px;">▶️ Playing</span>
                            {% elif feedback.status == 'idle' %}
                                <span style="background: #6c757d; color: white; padding: 3px 8px; border-radius: 3px; font-size: 12px;">⏸️ Idle</span>
                            {% elif feedback.status == 'error' %}
                                <span style="background: #dc3545; color: white; padding: 3px 8px; border-radius: 3px; font-size: 12px;">❌ Error</span>
                            {% else %}
                                <span style="background: #007bff; color: white; padding: 3px 8px; border-radius: 3px; font-size: 12px;">{{ feedback.status }}</span>
                            {% endif %}
                        </td>
                        <td style="padding: 10px;">
                            {{ feedback.message or '-' }}
                        </td>
                        <td style="padding: 10px;">
                            {% if feedback.error %}
                                <span style="color: #dc3545; font-family: monospace; font-size: 12px;">{{ feedback.error[:50] }}...</span>
                            {% else %}
                                -
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div style="background: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; padding: 15px; border-radius: 5px; text-align: center;">
            ℹ️ No activity logs yet. The player will send feedback once it starts playing content.
        </div>
        {% endif %}
    </div>
</div>

<script>
function moveUp(contentId) {
    updatePlaylistOrder(contentId, 'up');
}

function moveDown(contentId) {
    updatePlaylistOrder(contentId, 'down');
}

function updatePlaylistOrder(contentId, direction) {
    fetch('/players/{{ player.id }}/playlist/reorder', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            content_id: contentId,
            direction: direction
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Error reordering playlist: ' + data.message);
        }
    })
    .catch(error => {
        alert('Error reordering playlist: ' + error);
    });
}

function removeFromPlaylist(contentId, filename) {
    if (confirm(`Remove "${filename}" from this player's playlist?`)) {
        fetch('/players/{{ player.id }}/playlist/remove', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                content_id: contentId
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error removing content: ' + data.message);
            }
        })
        .catch(error => {
            alert('Error removing content: ' + error);
        });
    }
}
</script>
{% endblock %}