{% extends "_base.html" %}

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

  <!-- Custom Tracks -->
  <div class="col-12">
    <div class="card">
      <div class="card-header d-block">
        <div class="d-flex align-items-center">
          <h3 class="card-title d-flex align-items-center mb-0">
            Custom Tracks
            <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 width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
              Import
            </button>
          </h3>
          <div class="card-actions ms-auto">
            <span class="text-muted" id="custom-track-count">{{ custom_tracks_info | length }} tracks</span>
          </div>
        </div>
        <p class="text-muted mb-0 mt-2">
          To create your own track, use the World Builder at
          <a href="https://physicar.ai/resources/world-builder" target="_blank" rel="noopener">https://physicar.ai/resources/world-builder</a>
        </p>
      </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 tracks</p>
          <p class="empty-subtitle text-muted">
            Import a track archive (.tar.gz) created with the World 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 Tracks -->
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Official Tracks</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');

  // Open the file picker when the Import button is clicked
  importBtn.addEventListener('click', () => {
    fileInput.click();
  });

  // Start uploading immediately when a file is selected
  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');

    try {
      const CHUNK_SIZE = 10 * 1024 * 1024; // 10 MB
      const totalChunks = Math.ceil(file.size / CHUNK_SIZE);

      // 1) init
      const initForm = new FormData();
      initForm.append('filename', file.name);
      initForm.append('total_chunks', totalChunks);
      const initRes = await fetch('/api/tracks/custom/upload/init', { method: 'POST', body: initForm });
      if (!initRes.ok) { const d = await initRes.json(); throw new Error(d.detail || 'Init failed'); }
      const { upload_id } = await initRes.json();

      // 2) Upload chunks in parallel (4 concurrent)
      const CONCURRENCY = 4;
      let next = 0;
      const uploadChunk = async () => {
        while (next < totalChunks) {
          const idx = next++;
          const start = idx * CHUNK_SIZE;
          const blob = file.slice(start, start + CHUNK_SIZE);
          const fd = new FormData();
          fd.append('upload_id', upload_id);
          fd.append('chunk_index', idx);
          fd.append('file', blob, `chunk_${idx}`);
          const r = await fetch('/api/tracks/custom/upload/chunk', { method: 'POST', body: fd });
          if (!r.ok) { const d = await r.json(); throw new Error(d.detail || `Chunk ${idx} failed`); }
        }
      };
      await Promise.all(Array.from({ length: Math.min(CONCURRENCY, totalChunks) }, () => uploadChunk()));

      // 3) complete
      const completeForm = new FormData();
      completeForm.append('upload_id', upload_id);
      const res = await fetch('/api/tracks/custom/upload/complete', { method: 'POST', body: completeForm });
      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 = 'Upload 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 %}