{% extends "base.html" %}
{% set active_nav = 'home' %}
{% block title %}Dashboard - TheRoad Scene Lab{% endblock %}
{% block topbar_left %}<h1 class="topbar-title">Dashboard</h1>{% endblock %}

{% block content %}
<!-- Stats overview -->
<div class="stats-row">
  <div class="stat-card">
    <div class="stat-number">{{ runs|length }}</div>
    <div class="stat-label">Total Runs</div>
  </div>
  <div class="stat-card accent">
    <div class="stat-number">{{ runs|selectattr('status', 'equalto', 'completed')|list|length }}</div>
    <div class="stat-label">Completed</div>
  </div>
  <div class="stat-card warn">
    <div class="stat-number">{{ runs|selectattr('status', 'equalto', 'running')|list|length }}</div>
    <div class="stat-label">Running</div>
  </div>
  <div class="stat-card">
    <div class="stat-number">{{ screenplays|length }}</div>
    <div class="stat-label">Screenplays</div>
  </div>
</div>

<!-- Action panels -->
<div class="grid-2">
  <!-- New run -->
  <section class="card">
    <div class="card-header">
      <h2>New Run</h2>
      <span class="badge">Pipeline</span>
    </div>
    <form action="/runs" method="post" class="form-stack">
      <div class="field">
        <label for="source_file">Screenplay</label>
        <select name="source_file" id="source_file" required>
          {% for screenplay in screenplays %}
          <option value="{{ screenplay }}">{{ screenplay }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="field-row">
        <div class="field">
          <label for="web_episode_count">Episodes</label>
          <input type="number" name="web_episode_count" id="web_episode_count" min="2" max="8" value="4" required />
        </div>
        <div class="field">
          <label for="sections_per_episode">Sections / EP</label>
          <input type="number" name="sections_per_episode" id="sections_per_episode" min="6" max="16" value="10" required />
        </div>
      </div>
      <div class="field">
        <label for="prompt_version">Prompt Version</label>
        <select name="prompt_version" id="prompt_version" required>
          {% for version, info in manifest.versions.items() %}
          <option value="{{ version }}" {% if version == current_prompt_version %}selected{% endif %}>
            {{ version }} &mdash; {{ info.description }}
          </option>
          {% endfor %}
        </select>
      </div>
      <button class="btn btn-primary" type="submit">Start Generation</button>
    </form>
  </section>

  <!-- Upload -->
  <section class="card">
    <div class="card-header">
      <h2>Upload Screenplay</h2>
      <span class="badge muted">PDF</span>
    </div>
    <form action="/screenplays/upload" method="post" enctype="multipart/form-data" class="form-stack">
      <div class="field">
        <label for="file">PDF File</label>
        <div class="file-drop" id="file-drop">
          <input type="file" name="file" id="file" accept="application/pdf" required />
          <div class="file-drop-label">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
            <span>Drop PDF here or click to browse</span>
          </div>
        </div>
      </div>
      <button class="btn btn-secondary" type="submit">Upload</button>
    </form>
    <p class="help-text">Uploaded files go to <code>screenplay/uploads/</code></p>
  </section>
</div>

<!-- Runs table -->
<section class="card">
  <div class="card-header">
    <h2>Run History</h2>
    <span class="help-text">Auto-discovers existing <code>prototype/*</code> outputs</span>
  </div>
  {% if runs %}
  <div class="table-wrap">
    <table class="data-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Status</th>
          <th>Source</th>
          <th>Episodes</th>
          <th>Sections/EP</th>
          <th>Prompt</th>
          <th>Created</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for run in runs %}
        <tr class="clickable-row" data-href="/runs/{{ run.id }}">
          <td class="mono">#{{ run.id }}</td>
          <td><span class="status-dot status-{{ run.status }}"></span> {{ run.status }}</td>
          <td class="truncate" title="{{ run.source_file }}">{{ run.source_file | replace('screenplay/', '') }}</td>
          <td class="center">{{ run.web_episode_count }}</td>
          <td class="center">{{ run.sections_per_episode }}</td>
          <td class="mono">{{ run.prompt_version or '-' }}</td>
          <td class="mono">{{ run.created_at[:16] }}</td>
          <td><a href="/runs/{{ run.id }}" class="btn btn-ghost btn-sm">View</a></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="empty-state">
    <p>No runs yet. Start a new generation above.</p>
  </div>
  {% endif %}
</section>

<script>
document.querySelectorAll('.clickable-row').forEach(row => {
  row.addEventListener('click', e => {
    if (e.target.tagName !== 'A' && e.target.tagName !== 'BUTTON') {
      window.location = row.dataset.href;
    }
  });
});
</script>
{% endblock %}