{% extends "_base.html" %}

{% set title = "Home" %}
{% set current_page = "home" %}

{% block content %}
<div class="row row-deck row-cards">
  
  <!-- Welcome Card -->
  <div class="col-12">
    <div class="card">
      <div class="card-body">
        <div class="d-flex align-items-center">
          <div class="subheader">Welcome to AI Castle DeepRacer</div>
        </div>
        <p class="text-secondary mt-2">
          Train, evaluate, and race your autonomous driving models.
        </p>
      </div>
    </div>
  </div>

  <!-- Stats Cards -->
  <div class="col-sm-6 col-lg-3">
    <div class="card">
      <div class="card-body">
        <div class="d-flex align-items-center">
          <div class="subheader">Your Models</div>
        </div>
        <div class="h1 mb-3">{{ stats.models | default(0) }}</div>
        <div class="d-flex mb-2">
          <div>
            <a href="/models" class="text-primary">View all models →</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-lg-3">
    <div class="card">
      <div class="card-body">
        <div class="d-flex align-items-center">
          <div class="subheader">Active Races</div>
        </div>
        <div class="h1 mb-3">{{ stats.active_races | default(0) }}</div>
        <div class="d-flex mb-2">
          <div>
            <a href="/races" class="text-primary">View races →</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-lg-3">
    <div class="card">
      <div class="card-body">
        <div class="d-flex align-items-center">
          <div class="subheader">Training Hours</div>
        </div>
        <div class="h1 mb-3">{{ stats.training_hours | default(0) }}h</div>
        <div class="d-flex mb-2">
          <div>
            <span class="text-green d-inline-flex align-items-center lh-1">
              This month
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-lg-3">
    <div class="card">
      <div class="card-body">
        <div class="d-flex align-items-center">
          <div class="subheader">Best Lap Time</div>
        </div>
        <div class="h1 mb-3">{{ stats.best_lap | default('--:--') }}</div>
        <div class="d-flex mb-2">
          <div>
            <a href="/leaderboard" class="text-primary">Leaderboard →</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Quick Actions -->
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Quick Actions</h3>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-auto">
            <a href="/pages/models/create" class="btn btn-primary">
              <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 stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M12 5l0 14"></path>
                <path d="M5 12l14 0"></path>
              </svg>
              Create Model
            </a>
          </div>
          <div class="col-auto">
            <a href="/races/create" class="btn btn-outline-primary">
              Create Race
            </a>
          </div>
          <div class="col-auto">
            <a href="/learn/tutorial" class="btn btn-outline-secondary">
              View Tutorial
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Active Jobs (Training/Evaluation) -->
  <div class="col-12">
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title mb-0">Active Jobs</h3>
        <div class="d-flex align-items-center gap-3">
          <span class="text-muted">CPU:</span>
          <span id="cpu-used" class="badge bg-secondary">-</span>
          <span class="text-muted">/</span>
          <span id="cpu-total" class="badge bg-secondary">-</span>
          <span class="text-muted ms-2">Available:</span>
          <span id="cpu-available" class="badge bg-success">-</span>
          <button type="button" id="refresh-jobs-btn" class="btn btn-sm btn-ghost-secondary ms-2">
            <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 stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path>
              <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="table-responsive">
        <table class="table table-vcenter card-table">
          <thead>
            <tr>
              <th>Run ID</th>
              <th>Type</th>
              <th>Model</th>
              <th>Workers</th>
              <th>CPU</th>
              <th>Remaining</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody id="jobs-table-body">
            <tr id="no-jobs-row">
              <td colspan="7" class="text-center text-muted py-4">No active jobs</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Recent Models -->
  <div class="col-lg-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Recent Models</h3>
      </div>
      <div class="list-group list-group-flush">
        {% if recent_models %}
          {% for model in recent_models %}
          <div class="list-group-item">
            <div class="row align-items-center">
              <div class="col-auto">
                <span class="avatar bg-blue-lt">{{ model.name[:2] | upper }}</span>
              </div>
              <div class="col text-truncate">
                <a href="/models/{{ model.id }}" class="text-reset d-block">{{ model.name }}</a>
                <div class="d-block text-secondary text-truncate mt-n1">
                  {{ model.track }} • {{ model.created_at }}
                </div>
              </div>
              <div class="col-auto">
                <span class="badge bg-{{ 'green' if model.status == 'ready' else 'yellow' }}-lt">
                  {{ model.status }}
                </span>
              </div>
            </div>
          </div>
          {% endfor %}
        {% else %}
          <div class="list-group-item text-center text-secondary py-4">
            No models yet. <a href="/models/create">Create your first model</a>
          </div>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Upcoming Races -->
  <div class="col-lg-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Upcoming Races</h3>
      </div>
      <div class="list-group list-group-flush">
        {% if upcoming_races %}
          {% for race in upcoming_races %}
          <div class="list-group-item">
            <div class="row align-items-center">
              <div class="col-auto">
                <span class="avatar bg-purple-lt">🏎️</span>
              </div>
              <div class="col text-truncate">
                <a href="/races/{{ race.id }}" class="text-reset d-block">{{ race.name }}</a>
                <div class="d-block text-secondary text-truncate mt-n1">
                  {{ race.track }} • Starts {{ race.start_time }}
                </div>
              </div>
              <div class="col-auto">
                <a href="/races/{{ race.id }}/join" class="btn btn-sm btn-primary">Join</a>
              </div>
            </div>
          </div>
          {% endfor %}
        {% else %}
          <div class="list-group-item text-center text-secondary py-4">
            No upcoming races. <a href="/races">Browse races</a>
          </div>
        {% endif %}
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Fetch with timeout (default 10s)
  async function fetchWithTimeout(url, options = {}, timeout = 10000) {
    const controller = new AbortController();
    const id = setTimeout(() => controller.abort(), timeout);
    try {
      const response = await fetch(url, { ...options, signal: controller.signal });
      clearTimeout(id);
      return response;
    } catch (e) {
      clearTimeout(id);
      throw e;
    }
  }
  
  async function refreshJobs() {
    try {
      const res = await fetchWithTimeout('/api/jobs');
      const data = await res.json();
      
      // Update CPU status
      document.getElementById('cpu-used').textContent = data.cpu.used;
      document.getElementById('cpu-total').textContent = data.cpu.total;
      const availEl = document.getElementById('cpu-available');
      availEl.textContent = data.cpu.available;
      availEl.className = data.cpu.available > 0 ? 'badge bg-success' : 'badge bg-danger';
      
      // Update table
      const tbody = document.getElementById('jobs-table-body');
      if (data.jobs.length === 0) {
        tbody.innerHTML = '<tr id="no-jobs-row"><td colspan="7" class="text-center text-muted py-4">No active jobs</td></tr>';
        return;
      }
      
      tbody.innerHTML = data.jobs.map(job => `
        <tr>
          <td><span class="badge bg-blue-lt">${job.run_id}</span></td>
          <td><span class="badge ${job.job_type === 'training' ? 'bg-green' : 'bg-purple'}">${job.job_type}</span></td>
          <td><strong>${job.model_name}</strong></td>
          <td>${job.worker_count}</td>
          <td>${job.cpu_usage} cores</td>
          <td>${job.remaining_minutes !== null ? job.remaining_minutes + ' min' : '-'}</td>
          <td>
            <button class="btn btn-sm btn-danger stop-job-btn" 
                    data-run-id="${job.run_id}" 
                    data-job-type="${job.job_type}">
              Stop
            </button>
          </td>
        </tr>
      `).join('');
      
      // Wire up Stop button events
      tbody.querySelectorAll('.stop-job-btn').forEach(btn => {
        btn.addEventListener('click', async function() {
          const runId = this.dataset.runId;
          const jobType = this.dataset.jobType;
          const endpoint = jobType === 'training' 
            ? `/api/training/${runId}/stop` 
            : `/api/evaluation/${runId}/stop`;
          
          const result = await Swal.fire({
            title: 'Stop Job?',
            text: `Stop ${jobType} (Run ID: ${runId})?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            confirmButtonText: 'Stop',
          });
          
          if (result.isConfirmed) {
            try {
              const res = await fetch(endpoint, { method: 'POST' });
              const data = await res.json();
              if (res.ok) {
                Swal.fire('Stopped!', data.message, 'success');
                refreshJobs();
              } else {
                throw new Error(data.detail || 'Failed to stop');
              }
            } catch (e) {
              Swal.fire('Error', e.message, 'error');
            }
          }
        });
      });
    } catch (e) {
      console.error('Failed to fetch jobs:', e);
    }
  }
  
  // Auto-refresh on page load and every 10 seconds
  refreshJobs();
  setInterval(refreshJobs, 10000);
  
  // Refresh button
  document.getElementById('refresh-jobs-btn')?.addEventListener('click', refreshJobs);
});
</script>
{% endblock %}