{% extends "base.html" %}
{% block title %}Mantenedor — Cantina{% endblock %}

{% block content %}
<div class="admin-container">
    <div class="admin-header">
        <h1>Mantenedor</h1>
        <div style="display:flex;gap:.5rem">
            <a href="/admin/voting" class="btn-sm">🗳 Votación</a>
            <a href="/auth/logout" class="btn-sm btn-danger"
               onclick="return confirm('¿Desconectar la cuenta de Spotify?')">⏏ Cuenta Spotify</a>
            <a href="/admin/logout" class="btn-sm btn-danger">Cerrar sesión</a>
        </div>
    </div>

    {% if error %}
    <div class="alert alert-error">{{ error }}</div>
    {% endif %}
    {% if success %}
    <div class="alert alert-success">{{ success }}</div>
    {% endif %}

    <!-- Formulario para agregar -->
    <div class="card">
        <h2>Agregar elemento</h2>
        <form method="post" action="/admin/playlists" class="add-form">
            <div class="form-row">
                <input
                    type="text"
                    name="spotify_url"
                    class="input"
                    placeholder="URL de Spotify (canción, álbum, artista o playlist)"
                    required
                >
                <button type="submit" class="btn-primary">Agregar</button>
            </div>
            <small class="hint">
                Acepta cualquier URL de <strong>open.spotify.com</strong>,
                URI (<code>spotify:track:…</code>, <code>spotify:album:…</code>, etc.)
                o ID de 22 caracteres (se asume playlist).
            </small>
        </form>
    </div>

    <!-- Lista -->
    <div class="card">
        <h2>Elementos configurados ({{ playlists | length }})</h2>
        {% if playlists %}
        <table class="table">
            <thead>
                <tr>
                    <th></th>
                    <th>Nombre</th>
                    <th>Tipo</th>
                    <th>Descripción</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                {% for pl in playlists %}
                {% set type_info = type_labels.get(pl.spotify_type, ('🎵', pl.spotify_type)) %}
                <tr>
                    <td>
                        {% if pl.emoji %}
                        <div class="table-thumb-placeholder emoji-thumb">{{ pl.emoji }}</div>
                        {% elif pl.image_url %}
                        <img src="{{ pl.image_url }}" alt="" class="table-thumb">
                        {% else %}
                        <div class="table-thumb-placeholder">{{ type_info[0] }}</div>
                        {% endif %}
                    </td>
                    <td class="td-name">{{ pl.name }}</td>
                    <td>
                        <span class="type-badge type-{{ pl.spotify_type }}">
                            {{ type_info[0] }} {{ type_info[1] }}
                        </span>
                    </td>
                    <td class="td-desc">{{ pl.description[:80] }}{% if pl.description | length > 80 %}…{% endif %}</td>
                    <td class="td-actions">
                        <button class="btn-sm btn-play-now" id="play-btn-{{ pl.id }}"
                                onclick="playNow('{{ pl.spotify_id }}', '{{ pl.spotify_type }}', {{ pl.id }})">▶ Reproducir</button>
                        <button class="btn-sm" onclick="toggleEdit({{ pl.id }})">✏️ Editar</button>
                        <form method="post" action="/admin/playlists/{{ pl.id }}/delete"
                              onsubmit="return confirm('¿Eliminar {{ pl.name }}?')">
                            <button type="submit" class="btn-sm btn-danger">Eliminar</button>
                        </form>
                    </td>
                </tr>
                <!-- Fila de edición inline -->
                <tr id="edit-row-{{ pl.id }}" class="edit-row" style="display:none">
                    <td colspan="5">
                        <form method="post" action="/admin/playlists/{{ pl.id }}/edit" class="edit-form">
                            <div class="edit-fields">
                                <div class="edit-field">
                                    <label>Nombre</label>
                                    <input type="text" name="name" class="input"
                                           value="{{ pl.name }}" required maxlength="200">
                                </div>
                                <div class="edit-field edit-field-desc">
                                    <label>Descripción</label>
                                    <input type="text" name="description" class="input"
                                           value="{{ pl.description }}" maxlength="300">
                                </div>
                                <div class="edit-field edit-field-emoji">
                                    <label>Emoticono <span class="hint-inline">(reemplaza imagen)</span></label>
                                    <div class="emoji-input-wrap">
                                        <input type="text" name="emoji" id="emoji-{{ pl.id }}" class="input emoji-input"
                                               value="{{ pl.emoji }}" maxlength="8" placeholder="😀">
                                        {% if pl.emoji %}
                                        <button type="button" class="btn-sm emoji-clear"
                                                onclick="clearEmoji({{ pl.id }})">✕</button>
                                        {% endif %}
                                    </div>
                                    <div class="emoji-picker">
                                        {% for e in ['🎵','🎶','🎸','🎹','🎺','🎻','🥁','🎤','🎧','🎼','🎷','🪗','🪘','🔥','⚡','🌟','✨','💫','🌈','🎉','🥳','🍕','🍺','🍹','🌙','☀️','🏖️','🌊','💃','🕺','🎭','🎬','🎮','🏆','❤️','🤘'] %}
                                        <button type="button" class="emoji-opt"
                                                onclick="pickEmoji({{ pl.id }}, '{{ e }}')">{{ e }}</button>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                            <div class="edit-actions">
                                <button type="submit" class="btn-primary btn-sm">Guardar</button>
                                <button type="button" class="btn-sm" onclick="toggleEdit({{ pl.id }})">Cancelar</button>
                            </div>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p class="empty-msg">No hay elementos configurados todavía.</p>
        {% endif %}
    </div>

    {% include "admin/_system_buttons.html" %}
</div>

<script>
async function playNow(spotifyId, spotifyType, plId) {
    const btn = document.getElementById('play-btn-' + plId);
    btn.disabled = true;
    btn.textContent = '⏳';

    const body = spotifyType === 'track'
        ? { uris: [`spotify:track:${spotifyId}`] }
        : { context_uri: `spotify:${spotifyType}:${spotifyId}` };

    try {
        const res = await fetch('/player/play', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(body),
        });
        btn.textContent = res.ok ? '✓ Reproduciendo' : '✗ Error';
    } catch (_) {
        btn.textContent = '✗ Error';
    }

    setTimeout(() => { btn.disabled = false; btn.textContent = '▶ Reproducir'; }, 2500);
}

function toggleEdit(id) {
    const row = document.getElementById('edit-row-' + id);
    const visible = row.style.display !== 'none';
    row.style.display = visible ? 'none' : 'table-row';
    if (!visible) row.querySelector('input[name="name"]').focus();
}
function pickEmoji(id, emoji) {
    document.getElementById('emoji-' + id).value = emoji;
}
function clearEmoji(id) {
    document.getElementById('emoji-' + id).value = '';
}
</script>

<style>
.td-actions { display: flex; gap: .4rem; align-items: center; }
.btn-play-now { color: var(--green); border-color: rgba(29,185,84,.4); }
.btn-play-now:hover { background: rgba(29,185,84,.12); }

.edit-row td { background: var(--surface2); padding: .75rem 1rem; }
.edit-form { display: flex; flex-direction: column; gap: .75rem; }
.edit-fields { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-start; }
.edit-field { display: flex; flex-direction: column; gap: .25rem; min-width: 140px; }
.edit-field-desc { flex: 2; }
.edit-field-emoji { min-width: 180px; }
.edit-field label { font-size: .75rem; color: var(--text-muted); }
.hint-inline { font-weight: 400; opacity: .6; }
.edit-actions { display: flex; gap: .4rem; align-items: center; }

.emoji-input-wrap { display: flex; gap: .35rem; align-items: center; }
.emoji-input { width: 70px; font-size: 1.2rem; text-align: center; padding: .3rem .4rem; }
.emoji-clear { padding: .3rem .5rem; line-height: 1; }

.emoji-picker { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.emoji-opt {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 6px;
    font-size: 1.15rem;
    width: 34px; height: 34px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s, transform .1s;
}
.emoji-opt:hover { background: var(--surface3); transform: scale(1.15); }

.emoji-thumb { font-size: 1.6rem; }

.type-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    padding: .2rem .55rem;
    border-radius: 20px;
    font-weight: 500;
    white-space: nowrap;
}
.type-playlist { background: rgba(29,185,84,.12);  color: #1db954; border: 1px solid rgba(29,185,84,.3); }
.type-album    { background: rgba(168,85,247,.12); color: #a855f7; border: 1px solid rgba(168,85,247,.3); }
.type-artist   { background: rgba(59,130,246,.12); color: #3b82f6; border: 1px solid rgba(59,130,246,.3); }
.type-track    { background: rgba(245,158,11,.12); color: #f59e0b; border: 1px solid rgba(245,158,11,.3); }
</style>
{% endblock %}