{% extends "base.html" %}

{% block title %}Dashboard - DigiServer v2{% endblock %}

{% block content %}
<h1 style="margin-bottom: 2rem;">Dashboard</h1>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-bottom: 2rem;">
    <div class="card">
        <h3 style="color: #3498db; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
            <img src="{{ url_for('static', filename='icons/monitor.svg') }}" alt="" style="width: 24px; height: 24px;">
            Players
        </h3>
        <p style="font-size: 2rem; font-weight: bold;">{{ total_players or 0 }}</p>
        <a href="{{ url_for('players.list') }}" class="btn" style="margin-top: 1rem;">View Players</a>
    </div>
    
    <div class="card">
        <h3 style="color: #9b59b6; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
            <img src="{{ url_for('static', filename='icons/playlist.svg') }}" alt="" style="width: 24px; height: 24px;">
            Playlists
        </h3>
        <p style="font-size: 2rem; font-weight: bold;">{{ total_playlists or 0 }}</p>
        <a href="{{ url_for('content.content_list') }}" class="btn" style="margin-top: 1rem;">Manage Playlists</a>
    </div>
    
    <div class="card">
        <h3 style="color: #e67e22; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
            <img src="{{ url_for('static', filename='icons/upload.svg') }}" alt="" style="width: 24px; height: 24px;">
            Media Library
        </h3>
        <p style="font-size: 2rem; font-weight: bold;">{{ total_content or 0 }}</p>
        <p class="secondary-text" style="font-size: 0.9rem; margin-top: 0.5rem;">Unique media files</p>
    </div>
    
    <div class="card">
        <h3 style="color: #27ae60; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
            <img src="{{ url_for('static', filename='icons/info.svg') }}" alt="" style="width: 24px; height: 24px;">
            Storage
        </h3>
        <p style="font-size: 2rem; font-weight: bold;">{{ storage_mb or 0 }} MB</p>
        <p class="secondary-text" style="font-size: 0.9rem; margin-top: 0.5rem;">Total uploads</p>
    </div>
</div>

<div class="card">
    <h2>Quick Actions</h2>
    <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem;">
        <a href="{{ url_for('players.add_player') }}" class="btn btn-success" style="display: flex; align-items: center; gap: 0.5rem;">
            <img src="{{ url_for('static', filename='icons/monitor.svg') }}" alt="" style="width: 18px; height: 18px; filter: brightness(0) invert(1);">
            Add Player
        </a>
        <a href="{{ url_for('content.content_list') }}" class="btn btn-success" style="display: flex; align-items: center; gap: 0.5rem;">
            <img src="{{ url_for('static', filename='icons/playlist.svg') }}" alt="" style="width: 18px; height: 18px; filter: brightness(0) invert(1);">
            Create Playlist
        </a>
        <a href="{{ url_for('content.content_list') }}" class="btn btn-success" style="display: flex; align-items: center; gap: 0.5rem;">
            <img src="{{ url_for('static', filename='icons/upload.svg') }}" alt="" style="width: 18px; height: 18px; filter: brightness(0) invert(1);">
            Upload Media
        </a>
        {% if current_user.is_admin %}
            <a href="{{ url_for('admin.admin_panel') }}" class="btn">Admin Panel</a>
        {% endif %}
    </div>
</div>

<div class="card">
    <h2 style="display: flex; align-items: center; gap: 0.5rem;">
        <img src="{{ url_for('static', filename='icons/info.svg') }}" alt="" style="width: 24px; height: 24px;">
        Workflow Guide
    </h2>
    <div class="workflow-guide">
        <ol style="line-height: 2; margin: 0; padding-left: 1.5rem;">
            <li><strong>Create a Playlist</strong> - Group your content into themed collections</li>
            <li><strong>Upload Media</strong> - Add images, videos, or PDFs to your media library</li>
            <li><strong>Add Content to Playlist</strong> - Build your playlist with drag-and-drop ordering</li>
            <li><strong>Add Player</strong> - Register physical display devices</li>
            <li><strong>Assign Playlist</strong> - Connect players to their playlists</li>
            <li><strong>Players Auto-Download</strong> - Devices fetch and display content automatically</li>
        </ol>
    </div>
</div>

<style>
.workflow-guide {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

body.dark-mode .workflow-guide {
    background: #1a202c;
    border: 1px solid #4a5568;
}

.secondary-text {
    color: #7f8c8d;
}

body.dark-mode .secondary-text {
    color: #a0aec0;
}

.log-item {
    padding: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

body.dark-mode .log-item {
    border-bottom: 1px solid #4a5568;
}
</style>

{% if recent_logs %}
<div class="card">
    <h2>Recent Activity</h2>
    <div style="margin-top: 1rem;">
        {% for log in recent_logs %}
        <div class="log-item">
            <span style="color: {% if log.level == 'error' %}#e74c3c{% elif log.level == 'warning' %}#f39c12{% else %}#27ae60{% endif %}; font-weight: bold;">
                [{{ log.level.upper() }}]
            </span>
            {{ log.message }}
            <small class="secondary-text" style="float: right;">{{ log.timestamp | localtime('%Y-%m-%d %H:%M:%S') }}</small>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<div class="card">
    <h2>System Status</h2>
    <p>✅ All systems operational</p>
    <p>� Playlist-centric architecture active</p>
    <p>🔄 Groups removed - Streamlined workflow</p>
    <p>⚡ DigiServer v2.0</p>
</div>
{% endblock %}