{% extends "base.html" %}
{% block title %}Upload & Analyze - Feedmill Recounter{% endblock %}
{% block head %}
<style>
  .page-heading { margin-bottom: var(--space-6); }
  .page-heading h2 { font-size: var(--text-2xl); margin-bottom: var(--space-1); }
  .page-heading p { color: var(--color-neutral-500); font-size: var(--text-sm); }

  /* Upload zone */
  .upload-zone {
    border: 2px dashed var(--color-neutral-300);
    border-radius: var(--radius-lg);
    padding: var(--space-10) var(--space-6);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    background: var(--color-neutral-50);
    position: relative;
  }
  .upload-zone:hover,
  .upload-zone.dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-50);
  }
  .upload-zone-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-3);
    display: block;
    color: var(--color-neutral-400);
  }
  .upload-zone-text {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-neutral-600);
    margin-bottom: var(--space-1);
  }
  .upload-zone-hint {
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
  }
  .upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }

  /* Existing videos section */
  .existing-videos-section { margin-top: var(--space-8); }
  .section-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-4);
  }
  .video-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
  }
  .video-item {
    background: var(--color-neutral-50);
    border: 2px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .video-item:hover {
    border-color: var(--color-neutral-300);
    box-shadow: var(--shadow-sm);
  }
  .video-item.selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
  }
  .video-item-radio {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
  }
  .video-item-info { flex: 1; min-width: 0; }
  .video-item-name {
    font-weight: var(--font-medium);
    color: var(--color-neutral-800);
    font-size: var(--text-sm);
    word-break: break-word;
  }
  .video-item-meta {
    font-size: var(--text-xs);
    color: var(--color-neutral-500);
    margin-top: var(--space-1);
  }

  /* File info */
  .file-info {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    display: none;
  }
  .file-info.visible { display: block; }
  .file-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--text-sm);
  }
  .file-info-item { color: var(--color-neutral-600); }
  .file-info-item strong { color: var(--color-neutral-800); }

  /* Video preview */
  .video-preview {
    margin-top: var(--space-4);
    display: none;
  }
  .video-preview.visible { display: block; }
  .video-preview video {
    width: 100%;
    max-height: 400px;
    border-radius: var(--radius-md);
    background: var(--color-neutral-900);
  }

  /* Model section */
  .model-section { margin-top: var(--space-8); }
  .model-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .model-section-header h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
  }
  .model-toggle-btns {
    display: flex;
    gap: var(--space-2);
  }

  /* Model cards grid */
  .model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
  }
  .model-card {
    background: var(--color-neutral-50);
    border: 2px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
  }
  .model-card:hover {
    border-color: var(--color-neutral-300);
    box-shadow: var(--shadow-sm);
  }
  .model-card.selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
  }
  .model-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .model-card-check {
    flex-shrink: 0;
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
  }
  .model-card-name {
    font-weight: var(--font-semibold);
    color: var(--color-neutral-800);
    font-size: var(--text-sm);
    word-break: break-word;
  }
  .model-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
  }
  .model-card-filter {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .model-card-filter label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-neutral-500);
    white-space: nowrap;
  }
  .model-card-filter select {
    flex: 1;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-50);
    color: var(--color-neutral-700);
  }
  .model-card-format {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }
  .model-card-format label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-neutral-500);
    white-space: nowrap;
  }
  .model-card-format select {
    flex: 1;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-50);
    color: var(--color-neutral-700);
  }

  /* Output options */
  .output-height-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-neutral-600);
    cursor: pointer;
  }

  /* Submit area */
  .submit-area {
    margin-top: var(--space-8);
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .submit-hint {
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
  }

  /* Empty state */
  .empty-state {
    text-align: center;
    padding: var(--space-8);
    color: var(--color-neutral-500);
  }
  .empty-state p { margin-bottom: var(--space-2); }

  /* Active jobs banner */
  .active-jobs-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: #f0f9ff;
    border: 1px solid #0EA5E9;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
  }

  /* Zone mode section */
  .zone-section { margin-top: var(--space-8); }
  .zone-section h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-4);
  }
  .zone-radio-group {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .zone-radio-group label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-neutral-700);
    cursor: pointer;
  }
  .zone-radio-group input[type="radio"] {
    accent-color: var(--color-primary);
  }
  .zone-fixed-config {
    display: none;
    padding: var(--space-4);
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
  }
  .zone-fixed-config.visible { display: block; }
  .zone-preset-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .zone-preset-row label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-neutral-600);
    white-space: nowrap;
  }
  .zone-preset-row select {
    flex: 1;
    max-width: 320px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--color-neutral-700);
  }

  /* Video delete button */
  .video-delete-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-50);
    color: var(--color-neutral-400);
    cursor: pointer;
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
    opacity: 0;
  }
  .video-item:hover .video-delete-btn {
    opacity: 1;
  }
  .video-delete-btn:hover {
    background: #FEE2E2;
    color: #DC2626;
    border-color: #FECACA;
  }
</style>
{% endblock %}

{% block content %}
<div class="page-heading">
  <h2>Upload &amp; Analyze</h2>
  <p>Upload a video and select detection models to run analysis.</p>
</div>

<div class="active-jobs-banner" id="active-jobs-banner" style="display:none">
  <span class="badge badge-info">&#9654;</span>
  <span id="active-jobs-text"></span>
  <a href="/jobs" class="btn btn-ghost btn-sm">View All</a>
</div>

<form action="/upload" method="post" enctype="multipart/form-data" id="upload-form">
  <input type="hidden" name="video_path" id="video-path-input" value="">

  {# --- Upload Zone --- #}
  <div class="upload-zone" id="upload-zone" role="button" tabindex="0" aria-label="Upload video file">
    <span class="upload-zone-icon" aria-hidden="true">&#128190;</span>
    <div class="upload-zone-text">Drag video here or click to browse</div>
    <div class="upload-zone-hint">Supports MP4, AVI, MOV, MKV</div>
    <input type="file" name="video" id="video-input" accept="video/*" required aria-label="Choose video file">
  </div>

  {# --- Video Preview --- #}
  <div class="video-preview" id="video-preview">
    <video id="preview-video" controls muted aria-label="Video preview"></video>
  </div>

  {# --- File Info --- #}
  <div class="file-info" id="file-info">
    <div class="file-info-row">
      <span class="file-info-item"><strong>Name:</strong> <span id="file-name"></span></span>
      <span class="file-info-item"><strong>Size:</strong> <span id="file-size"></span></span>
      <span class="file-info-item"><strong>Duration:</strong> <span id="file-duration">probing...</span></span>
    </div>
  </div>

  {# --- Existing Videos --- #}
  <div class="existing-videos-section" id="existing-videos-section" style="display:none">
    <h3 class="section-title">Or use a previously uploaded video</h3>
    <div class="video-list" id="video-list"></div>
  </div>

  {# --- Counting Zone --- #}
  <div class="zone-section" id="zone-section" style="display:none">
    <h3>Counting Zone</h3>
    <div class="zone-radio-group">
      <label>
        <input type="radio" name="zone_mode" value="dynamic" checked>
        Auto-detect Truck
      </label>
      <label>
        <input type="radio" name="zone_mode" value="fixed">
        Fixed Zone
      </label>
      <label>
        <input type="radio" name="zone_mode" value="freeze">
        Auto-detect + Freeze
      </label>
    </div>
    <div class="zone-fixed-config" id="zone-fixed-config">
      <div class="zone-preset-row">
        <label for="zone-preset-select">Preset:</label>
        <select name="zone_preset" id="zone-preset-select">
          <option value="">Loading presets...</option>
        </select>
      </div>
    </div>
  </div>

  {# --- Model Selection --- #}
  <div class="model-section">
    <div class="model-section-header">
      <h3>Select Models</h3>
      {% if model_groups %}
      <div class="model-toggle-btns">
        <button type="button" class="btn btn-ghost btn-sm" id="select-all-btn">Select All</button>
        <button type="button" class="btn btn-ghost btn-sm" id="deselect-all-btn">Deselect All</button>
      </div>
      {% endif %}
    </div>

    {% if model_groups %}
    <div class="model-grid" id="model-grid" role="group" aria-label="Available detection models">
      {% for group in model_groups %}
      <label class="model-card" id="card-{{ loop.index }}">
        <div class="model-card-header">
          <input type="checkbox" name="model_stems" value="{{ group.stem }}" class="model-card-check" id="m-{{ loop.index }}">
          <span class="model-card-name">{{ group.stem }}</span>
        </div>
        <div class="model-card-badges">
          {% if group.known_classes %}
            {% for cls in group.known_classes %}
            <span class="badge badge-info">{{ cls }}</span>
            {% endfor %}
          {% else %}
            <span class="badge badge-neutral">no class info</span>
          {% endif %}
        </div>
        <div class="model-card-format">
          <label for="format-{{ loop.index }}">Format:</label>
          <select name="format_{{ group.stem }}" id="format-{{ loop.index }}">
            {% for fmt in group.formats %}
            <option value="{{ fmt }}"{% if fmt == group.default_format %} selected{% endif %}>{{ fmt }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="model-card-filter">
          <label for="filter-{{ loop.index }}">Filter:</label>
          <select name="filter_{{ group.stem }}" id="filter-{{ loop.index }}">
            <option value="default">Use model defaults</option>
            <option value="sack">sack only</option>
            <option value="box">box only</option>
            <option value="sack,box">sack + box</option>
            <option value="truck">truck only</option>
            <option value="all">all classes</option>
          </select>
        </div>
      </label>
      {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
      <p>No models found.</p>
      <p>Place model files in the <code>models/</code> directory.</p>
    </div>
    {% endif %}
  </div>

  {# --- Output Options --- #}
  <label class="output-height-label">
    <input type="checkbox" name="output_height" value="720">
    Downscale output to 720p
  </label>

  {# --- Submit --- #}
  <div class="submit-area">
    <button type="submit" class="btn btn-primary" id="submit-btn" disabled>Start Analysis</button>
    <span class="submit-hint" id="submit-hint">Select a video and at least one model to begin.</span>
  </div>
</form>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='app.js') }}"></script>
{% endblock %}