{% extends 'admin/custom_base.html' %}
{% block body %}
<div class="container-fluid mt-3">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <div>
      <h4 class="mb-0">Soundtrack</h4>
      <p class="text-muted small mb-0">Manage the KittyRec in-game music. Uploaded files are served at <code>/api/music/v1/file/&lt;name&gt;</code>. Non-WAV files are auto-converted by ffmpeg on first play.</p>
    </div>
    <span class="badge badge-secondary">{{ tracks|length }} track(s)</span>
  </div>

  {% if error %}
  <div class="alert alert-danger alert-dismissible">{{ error }}<button type="button" class="close" data-dismiss="alert">&times;</button></div>
  {% endif %}
  {% if success %}
  <div class="alert alert-success alert-dismissible">{{ success }}<button type="button" class="close" data-dismiss="alert">&times;</button></div>
  {% endif %}

  {% if SCOPE_ADMIN in scopes %}
  <div class="card mb-4">
    <div class="card-header bg-primary text-white"><strong>+ Upload Track</strong></div>
    <div class="card-body">
      <form method="POST" enctype="multipart/form-data">
        <input type="hidden" name="action_type" value="upload">
        <div class="form-row align-items-end">
          <div class="form-group col-md-8 mb-2">
            <label class="small font-weight-bold">Audio File <span class="text-danger">*</span></label>
            <input type="file" class="form-control-file" name="music_file"
              accept=".wav,.mp3,.ogg,.flac,.m4a,.aac,.opus,.wma" required>
            <small class="form-text text-muted">Accepted: WAV, MP3, OGG, FLAC, M4A, AAC, OPUS, WMA — max 100 MB. Non-WAV files are converted to WAV automatically.</small>
          </div>
          <div class="form-group col-md-4 mb-2">
            <button type="submit" class="btn btn-success btn-block">Upload</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  {% endif %}

  <div class="card">
    <div class="card-header"><strong>Tracks</strong></div>
    <div class="card-body p-0">
      <table class="table table-sm table-hover mb-0">
        <thead class="thead-dark">
          <tr>
            <th>#</th>
            <th>Filename</th>
            <th>Format</th>
            <th>Size</th>
            <th>Preview</th>
            {% if SCOPE_ADMIN in scopes %}<th>Actions</th>{% endif %}
          </tr>
        </thead>
        <tbody>
          {% if not tracks %}
          <tr><td colspan="6" class="text-center text-muted py-4">No tracks in the music folder yet.</td></tr>
          {% else %}
          {% for t in tracks %}
          <tr>
            <td class="text-muted">{{ loop.index }}</td>
            <td><strong>{{ t.name }}</strong></td>
            <td><span class="badge badge-secondary">{{ t.ext.lstrip('.').upper() }}</span></td>
            <td class="text-muted">{{ t.size_kb }} KB</td>
            <td>
              {% if t.ext == '.wav' %}
              <audio controls style="height:28px;max-width:220px">
                <source src="/api/music/v1/file/{{ t.name }}" type="audio/wav">
              </audio>
              {% else %}
              <small class="text-muted">Converted on first play</small>
              {% endif %}
            </td>
            {% if SCOPE_ADMIN in scopes %}
            <td>
              <button class="btn btn-xs btn-outline-secondary" onclick="showRename('{{ t.name }}')">Rename</button>
              <form method="POST" style="display:inline"
                onsubmit="return confirm('Delete {{ t.name }}? This cannot be undone.')">
                <input type="hidden" name="action_type" value="delete">
                <input type="hidden" name="filename" value="{{ t.name }}">
                <button type="submit" class="btn btn-xs btn-outline-danger">Delete</button>
              </form>
            </td>
            {% endif %}
          </tr>
          {% endfor %}
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="modal fade" id="renameModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST">
        <input type="hidden" name="action_type" value="rename">
        <div class="modal-header">
          <h5 class="modal-title">Rename Track</h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="old_name" id="rename-old">
          <div class="form-group">
            <label class="small font-weight-bold">Current name</label>
            <input type="text" class="form-control" id="rename-display" disabled>
          </div>
          <div class="form-group">
            <label class="small font-weight-bold">New name <span class="text-danger">*</span></label>
            <input type="text" class="form-control" name="new_name" id="rename-new" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Rename</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
function showRename(name) {
  document.getElementById('rename-old').value = name;
  document.getElementById('rename-display').value = name;
  document.getElementById('rename-new').value = name;
  $('#renameModal').modal('show');
}
</script>
{% endblock %}