{% extends "_base.html" %}

{% block content %}
<div class="row row-cards">

  <!-- Custom Worlds -->
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title d-flex align-items-center">
          Custom Worlds
          <input type="file" id="track-file-input" class="d-none" accept=".tar.gz,.gz">
          <button id="import-btn" class="btn btn-primary btn-sm ms-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
              stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 5v14"/>
              <path d="M5 12h14"/>
            </svg>
            Import
          </button>
        </h3>
        <div class="card-actions">
          <span class="text-muted" id="custom-track-count">{{ custom_tracks_info | length }} tracks</span>
        </div>
      </div>
      <div class="card-body" id="custom-tracks-container">
        <!-- Import Progress/Result -->
        <div id="import-progress" class="mb-3 d-none">
          <div class="progress">
            <div class="progress-bar progress-bar-indeterminate"></div>
          </div>
          <small class="text-muted">Importing and validating...</small>
        </div>
        <div id="import-result" class="mb-3 d-none"></div>
        
        {% if custom_tracks_info | length == 0 %}
        <div class="empty" id="empty-state">
          <p class="empty-title">No custom worlds</p>
          <p class="empty-subtitle text-muted">
            Import a world archive (.tar.gz) exported from the 3D Track Builder.
          </p>
        </div>
        {% else %}
        <div class="row g-3" id="custom-tracks-grid">
          {% for track_id, track_info in custom_tracks_info.items() %}
          <div class="col-6 col-sm-4 col-md-3" id="track-card-{{ track_id }}">
            <div class="card card-sm">
              <div class="card-body p-2">
                <div style="width:100%;height:120px;overflow:hidden;" class="d-flex align-items-center justify-content-center bg-light rounded mb-2">
                  <img src="/api/tracks/custom/{{ track_id }}/thumbnail"
                    alt="{{ track_id }}"
                    style="max-width:100%;max-height:100%;object-fit:contain;"
                    onerror="this.style.display='none'">
                </div>
                <div class="d-flex align-items-start justify-content-between">
                  <div class="flex-fill" style="min-width:0;">
                    <div class="text-truncate fw-bold small" title="{{ track_id }}">{{ track_id }}</div>
                    <div class="text-muted small">
                      {% if track_info.track_length %}Length: {{ "%.1f" | format(track_info.track_length) }}m{% endif %}<br>
                      {% if track_info.track_width %}Width: {{ "%.2f" | format(track_info.track_width) }}m{% endif %}
                    </div>
                  </div>
                  <button class="btn btn-ghost-danger btn-icon btn-sm delete-track-btn"
                          data-track-id="{{ track_id }}" title="Delete">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                      stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M4 7l16 0"/><path d="M10 11l0 6"/><path d="M14 11l0 6"/>
                      <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12"/>
                      <path d="M9 7v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/>
                    </svg>
                  </button>
                </div>
                <a href="/api/tracks/{{ track_id }}/waypoints" class="btn btn-outline-primary btn-sm w-100 mt-1" download>
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-sm" width="16" height="16" viewBox="0 0 24 24"
                    stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/>
                    <path d="M7 11l5 5 5-5"/><path d="M12 4v12"/>
                  </svg>
                  Waypoints
                </a>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Official Worlds -->
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Official Worlds</h3>
        <div class="card-actions">
          <span class="text-muted">{{ tracks_info | length }} tracks</span>
        </div>
      </div>
      <div class="card-body">
        <div class="row g-3">
          {% for track_id, track_info in tracks_info.items() %}
          <div class="col-6 col-sm-4 col-md-3 col-lg-2">
            <div class="card card-sm">
              <div class="card-body p-2">
                <div style="width:100%;height:100px;overflow:hidden;" class="d-flex align-items-center justify-content-center bg-light rounded mb-2">
                  <img src="/static/tracks/thumbnail/{{ track_id }}.svg"
                    alt="{{ track_id }}"
                    style="max-width:100%;max-height:100%;object-fit:contain;"
                    onerror="this.style.display='none'">
                </div>
                <div class="text-truncate fw-bold small" title="{{ track_id }}">{{ track_id }}</div>
                <div class="text-muted small">
                  Length: {{ "%.1f" | format(track_info.track_length) }}m<br>
                  Width: {{ "%.2f" | format(track_info.track_width) }}m
                </div>
                <a href="/api/tracks/{{ track_id }}/waypoints" class="btn btn-outline-primary btn-sm w-100 mt-1" download>
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-sm" width="16" height="16" viewBox="0 0 24 24"
                    stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/>
                    <path d="M7 11l5 5 5-5"/><path d="M12 4v12"/>
                  </svg>
                  Waypoints
                </a>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
  const fileInput = document.getElementById('track-file-input');
  const importBtn = document.getElementById('import-btn');
  const importProgress = document.getElementById('import-progress');
  const importResult = document.getElementById('import-result');

  // Import 버튼 클릭 시 파일 선택 다이얼로그 열기
  importBtn.addEventListener('click', () => {
    fileInput.click();
  });

  // 파일 선택 시 바로 업로드 시작
  fileInput.addEventListener('change', async () => {
    const file = fileInput.files[0];
    if (!file) return;

    importBtn.disabled = true;
    importProgress.classList.remove('d-none');
    importResult.classList.add('d-none');

    const formData = new FormData();
    formData.append('file', file);

    try {
      const res = await fetch('/api/tracks/custom/upload', {
        method: 'POST',
        body: formData,
      });
      const data = await res.json();

      if (res.ok) {
        importResult.className = 'mb-3 alert alert-success';
        importResult.textContent = `Track "${data.track_id}" imported successfully (${data.track_length}m, ${data.track_width}m wide)`;
        importResult.classList.remove('d-none');
        setTimeout(() => location.reload(), 1000);
      } else {
        importResult.className = 'mb-3 alert alert-danger';
        importResult.textContent = data.detail || 'Import failed';
        importResult.classList.remove('d-none');
      }
    } catch (e) {
      importResult.className = 'mb-3 alert alert-danger';
      importResult.textContent = 'Network error: ' + e.message;
      importResult.classList.remove('d-none');
    } finally {
      importBtn.disabled = false;
      importProgress.classList.add('d-none');
      fileInput.value = '';
    }
  });

  // Delete buttons
  document.querySelectorAll('.delete-track-btn').forEach(btn => {
    btn.addEventListener('click', async () => {
      const trackId = btn.dataset.trackId;
      const result = await Swal.fire({
        title: 'Delete Track',
        text: `Are you sure you want to delete "${trackId}"? This will remove all track files.`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d63939',
        confirmButtonText: 'Delete',
      });

      if (!result.isConfirmed) return;

      try {
        const res = await fetch(`/api/tracks/custom/${encodeURIComponent(trackId)}`, {
          method: 'DELETE',
        });
        const data = await res.json();

        if (res.ok) {
          const card = document.getElementById(`track-card-${trackId}`);
          if (card) card.remove();

          const grid = document.getElementById('custom-tracks-grid');
          const remaining = grid ? grid.children.length : 0;
          document.getElementById('custom-track-count').textContent = `${remaining} tracks`;

          if (remaining === 0) {
            location.reload();
          }
        } else {
          Swal.fire('Error', data.detail || 'Delete failed', 'error');
        }
      } catch (e) {
        Swal.fire('Error', 'Network error: ' + e.message, 'error');
      }
    });
  });
});
</script>
{% endblock %}