{% extends "base.html" %}
{% block title %}{{ project.name }} — {{ app_name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <nav class="breadcrumb"><a href="/">Dashboard</a> / {{ project.name }}</nav>
    <h1>{{ project.name }}</h1>
    <p class="subtitle">{{ project.description or project.project_type.value | replace('_', ' ') | title }}</p>
    {% if project.location %}
    <p class="muted" style="margin-top:.35rem;font-size:.8rem">Location: <code>{{ project.location }}</code></p>
    {% endif %}
  </div>
  <div class="header-actions">
    <button type="button" class="btn btn-danger" id="delete-project-btn">Delete Project</button>
    <a href="/projects/{{ project.id }}/annotate" class="btn btn-primary">Continue Annotating →</a>
  </div>
</div>

<!-- Roboflow-style workflow steps -->
<div class="workflow-steps">
  <a href="/projects/{{ project.id }}/upload" class="workflow-step">
    <span class="step-num">1</span>
    <div>
      <strong>Upload</strong>
      <span>Add images</span>
    </div>
  </a>
  <div class="workflow-arrow">→</div>
  <a href="/projects/{{ project.id }}/annotate" class="workflow-step">
    <span class="step-num">2</span>
    <div>
      <strong>Annotate</strong>
      <span>Manual + Label Assist</span>
    </div>
  </a>
  <div class="workflow-arrow">→</div>
  <button type="button" class="workflow-step" data-tab-jump="versions" id="step-generate">
    <span class="step-num">3</span>
    <div>
      <strong>Generate</strong>
      <span>Preprocess + augment</span>
    </div>
  </button>
  <div class="workflow-arrow">→</div>
  <button type="button" class="workflow-step" data-tab-jump="export" id="step-train">
    <span class="step-num">4</span>
    <div>
      <strong>Train / Export</strong>
      <span>YOLO locally</span>
    </div>
  </button>
</div>

<div class="tabs">
  <button class="tab active" data-tab="overview">Overview</button>
  <button class="tab" data-tab="classes">Classes</button>
  <button class="tab" data-tab="versions">Generate</button>
  <button class="tab" data-tab="export">Train / Export</button>
</div>

<div id="tab-overview" class="tab-panel active">
  <div class="action-grid">
    <a class="action-card" href="/projects/{{ project.id }}/upload">
      <div class="action-icon">⬆</div>
      <h3>1. Upload Images</h3>
      <p>Import photos into this dataset</p>
    </a>
    <a class="action-card" href="/projects/{{ project.id }}/annotate">
      <div class="action-icon">✎</div>
      <h3>2. Annotate</h3>
      <p>Draw labels or use Label Assist (YOLO)</p>
    </a>
    <button type="button" class="action-card" id="open-own-model-btn" style="text-align:left;font:inherit;color:inherit;width:100%">
      <div class="action-icon">🧠</div>
      <h3>Use Your Own Model</h3>
      <p>Register trained YOLO weights for auto-annotate</p>
    </button>
    <div class="action-card" data-tab-jump="versions" style="cursor:pointer">
      <div class="action-icon">📦</div>
      <h3>3. Generate Version</h3>
      <p>Preprocess, augment, split &amp; snapshot</p>
    </div>
    <div class="action-card" data-tab-jump="export" style="cursor:pointer">
      <div class="action-icon">🚀</div>
      <h3>4. Train / Export</h3>
      <p>Export YOLO/COCO or train locally</p>
    </div>
  </div>
  <div id="image-list-container" class="section">
    <div class="section-toolbar">
      <h2 style="margin:0">Images</h2>
      <div class="selection-bar" id="image-selection-bar">
        <button type="button" class="btn btn-ghost btn-sm" id="toggle-select-images">Select</button>
        <button type="button" class="btn btn-secondary btn-sm" id="open-own-model-btn-2">Use Own Model</button>
        <a href="/projects/{{ project.id }}/annotate" class="btn btn-secondary btn-sm">Open Annotator</a>
      </div>
    </div>
    <div id="image-grid" class="image-grid"></div>
  </div>
</div>

<div class="bulk-bar" id="image-bulk-bar" hidden>
  <div class="bulk-bar-inner">
    <div class="bulk-bar-left">
      <span class="bulk-count" id="image-selected-count">0 selected</span>
      <button type="button" class="btn btn-ghost btn-sm" id="select-all-images">Select all</button>
      <button type="button" class="btn btn-ghost btn-sm" id="clear-image-selection">Clear</button>
    </div>
    <div class="bulk-bar-right">
      <button type="button" class="btn btn-danger btn-sm" id="delete-selected-images">Delete</button>
      <button type="button" class="btn btn-secondary btn-sm" id="done-select-images">Done</button>
    </div>
  </div>
</div>

<div id="tab-classes" class="tab-panel">
  <div class="section">
    <p class="muted" style="margin-bottom:1rem">Define your label classes (or let Label Assist create COCO classes automatically).</p>
    <div class="inline-form">
      <input type="text" id="new-class-name" placeholder="Class name (e.g. person)">
      <input type="color" id="new-class-color" value="#14b8a6">
      <button class="btn btn-primary" id="add-class-btn">Add Class</button>
    </div>
    <ul id="class-list" class="class-list">
      {% for c in classes %}
      <li class="class-item" data-id="{{ c.id }}">
        <span class="class-dot" style="background: {{ c.color }}"></span>
        {{ c.name }}
        <button class="btn-icon delete-class" data-id="{{ c.id }}">×</button>
      </li>
      {% endfor %}
    </ul>
  </div>
</div>

<div id="tab-versions" class="tab-panel">
  <div class="form-card generate-card" style="margin-bottom:1.5rem">
    <h3>Generate Dataset Version</h3>
    <p class="muted" style="margin-bottom:1rem">Configure splits, preprocessing, and augmentations — with live thumbnail examples like Roboflow.</p>

    <div class="preview-source">
      <img id="pipeline-preview-thumb" alt="" style="display:none">
      <div>
        <div style="font-size:.85rem;font-weight:600">Thumbnail source</div>
        <div class="muted" id="pipeline-preview-label" style="font-size:.75rem">Loading preview…</div>
      </div>
    </div>

    <div class="form-group">
      <label>Version name</label>
      <input type="text" id="version-name" placeholder="e.g. v1-aug-640">
    </div>

    <h4 class="gen-section-title">Train / Valid / Test Split</h4>
    <div class="split-preview" id="split-preview-bar"></div>
    <div class="form-row slider-stack" style="display:block;margin-bottom:.5rem">
      <div class="slider-field">
        <div class="slider-head">
          <span class="slider-label">Train</span>
          <span class="slider-value" id="split-train-val">70%</span>
        </div>
        <input type="range" class="oo-slider" id="split-train" min="0" max="100" step="5" value="70" data-value-target="split-train-val" data-suffix="%">
      </div>
      <div class="slider-field">
        <div class="slider-head">
          <span class="slider-label">Valid</span>
          <span class="slider-value" id="split-valid-val">20%</span>
        </div>
        <input type="range" class="oo-slider" id="split-valid" min="0" max="100" step="5" value="20" data-value-target="split-valid-val" data-suffix="%">
      </div>
      <div class="slider-field">
        <div class="slider-head">
          <span class="slider-label">Test</span>
          <span class="slider-value" id="split-test-val">10%</span>
        </div>
        <input type="range" class="oo-slider" id="split-test" min="0" max="100" step="5" value="10" data-value-target="split-test-val" data-suffix="%">
      </div>
      <p class="muted" id="split-sum-hint" style="margin-top:.25rem">Total: 100%</p>
    </div>

    <h4 class="gen-section-title">Preprocessing</h4>
    <p class="muted" style="margin-bottom:.35rem">Applied once to every image. Click a card to toggle.</p>
    <div class="form-group" style="max-width:220px;margin-bottom:.5rem">
      <label>Resize mode</label>
      <select id="pre-resize-mode">
        <option value="stretch">Stretch</option>
        <option value="fit">Fit (letterbox)</option>
      </select>
    </div>
    <div class="fx-grid" id="pre-fx-grid"></div>

    <h4 class="gen-section-title">Augmentation</h4>
    <div class="aug-master" id="aug-master">
      <div>
        <strong style="font-size:.9rem">Enable augmentation</strong>
        <div class="muted" style="font-size:.75rem">Creates extra labeled variants for training</div>
      </div>
      <label class="toggle-row" style="margin:0">
        <input type="checkbox" id="aug-enabled"> On
      </label>
    </div>
    <div class="form-row" style="margin-bottom:.5rem">
      <div class="form-group">
        <label>Outputs per image</label>
        <input type="number" id="aug-outputs" value="3" min="1" max="20">
      </div>
      <div class="form-group">
        <label>Apply to</label>
        <select id="aug-apply-to">
          <option value="train">Train only</option>
          <option value="train_valid">Train + Valid</option>
          <option value="all">All splits</option>
        </select>
      </div>
    </div>
    <div class="fx-grid" id="aug-fx-grid"></div>

    <div class="form-actions" style="justify-content:flex-start;margin-top:1.25rem">
      <button class="btn btn-secondary" id="apply-splits-btn">Apply Splits Only</button>
      <button class="btn btn-primary" id="create-version-btn">Generate Version</button>
    </div>
  </div>

  <ul id="version-list" class="version-list">
    {% for v in versions %}
    <li class="version-item">
      <div>
        <strong>v{{ v.version_number }}</strong> — {{ v.name or 'Untitled' }}
        <span class="muted">{{ v.created_at.strftime('%Y-%m-%d') if v.created_at else '' }}</span>
        {% set pipe = v.augmentation_config or {} %}
        <div class="muted" style="font-size:.75rem;margin-top:.2rem">
          {% if pipe.get('preprocessing', {}).get('resize', {}).get('enabled') %}
            Resize {{ pipe.get('preprocessing', {}).get('resize', {}).get('width', 640) }}×{{ pipe.get('preprocessing', {}).get('resize', {}).get('height', 640) }}
          {% else %}
            No resize
          {% endif %}
          ·
          {% if pipe.get('augmentation', {}).get('enabled') %}
            Aug ×{{ pipe.get('augmentation', {}).get('outputs_per_image', 0) }}
          {% else %}
            No augmentation
          {% endif %}
        </div>
      </div>
    </li>
    {% else %}
    <li class="muted">No versions yet. Configure preprocess/augment and generate one.</li>
    {% endfor %}
  </ul>
</div>

<div id="tab-export" class="tab-panel">
  <div class="form-card">
    <h3>Export Dataset</h3>
    <div class="form-group">
      <label>Format</label>
      <select id="export-format">
        <option value="yolo">YOLO (.zip + data.yaml)</option>
        <option value="coco">COCO (.json)</option>
      </select>
    </div>
    <button class="btn btn-primary" id="export-btn">Export</button>
    <div id="export-result" class="muted" style="margin-top:.75rem"></div>
  </div>
  <div class="form-card" style="margin-top:1.5rem;max-width:720px">
    <h3>Train Model</h3>
    <p class="muted">Train Ultralytics YOLO (v8 → YOLO26) or MIT-licensed LibreYOLO locally.</p>
    <div class="form-row">
      <div class="form-group" style="grid-column:1/-1">
        <label>Model</label>
        <select id="train-model"></select>
      </div>
      <div class="form-group">
        <label>Epochs</label>
        <input type="number" id="train-epochs" value="50" min="1">
      </div>
      <div class="form-group">
        <label>Batch</label>
        <input type="number" id="train-batch" value="8" min="1">
      </div>
      <div class="form-group">
        <label>Image size</label>
        <input type="number" id="train-imgsz" value="640" min="32" step="32">
      </div>
      <div class="form-group">
        <label>Device</label>
        <select id="train-device">
          <option value="auto">Auto (GPU if available)</option>
          <option value="0">GPU (CUDA 0)</option>
          <option value="cpu">CPU</option>
        </select>
        <p class="field-hint" id="train-device-hint" style="margin-top:.35rem"></p>
      </div>
    </div>
    <button class="btn btn-primary" id="train-btn">Start Training</button>

    <div id="train-panel" class="train-panel hidden" style="margin-top:1.25rem">
      <div class="train-panel-head">
        <div>
          <strong id="train-status-label">Idle</strong>
          <span id="train-model-label" class="muted" style="margin-left:.5rem"></span>
        </div>
        <span id="train-epoch-label" class="muted">—</span>
      </div>
      <div class="train-progress-track">
        <div class="train-progress-fill" id="train-progress-fill" style="width:0%"></div>
      </div>
      <div class="train-stats-grid" id="train-stats-grid">
        <div class="train-stat"><div class="train-stat-val" id="stat-map50">—</div><div class="train-stat-lbl">mAP50</div></div>
        <div class="train-stat"><div class="train-stat-val" id="stat-map5095">—</div><div class="train-stat-lbl">mAP50-95</div></div>
        <div class="train-stat"><div class="train-stat-val" id="stat-precision">—</div><div class="train-stat-lbl">Precision</div></div>
        <div class="train-stat"><div class="train-stat-val" id="stat-recall">—</div><div class="train-stat-lbl">Recall</div></div>
        <div class="train-stat"><div class="train-stat-val" id="stat-box">—</div><div class="train-stat-lbl">Box loss</div></div>
        <div class="train-stat"><div class="train-stat-val" id="stat-cls">—</div><div class="train-stat-lbl">Cls loss</div></div>
        <div class="train-stat"><div class="train-stat-val" id="stat-dfl">—</div><div class="train-stat-lbl">DFL loss</div></div>
        <div class="train-stat"><div class="train-stat-val" id="stat-fitness">—</div><div class="train-stat-lbl">Fitness</div></div>
        <div class="train-stat"><div class="train-stat-val" id="stat-its">—</div><div class="train-stat-lbl">it/s</div></div>
        <div class="train-stat"><div class="train-stat-val" id="stat-imgs">—</div><div class="train-stat-lbl">img/s</div></div>
        <div class="train-stat"><div class="train-stat-val" id="stat-eta">—</div><div class="train-stat-lbl">ETA</div></div>
        <div class="train-stat"><div class="train-stat-val" id="stat-elapsed">—</div><div class="train-stat-lbl">Elapsed</div></div>
      </div>
      <p id="train-timing-line" class="muted" style="margin-top:.65rem;font-size:.85rem"></p>
      <p id="train-message" class="muted" style="margin-top:.75rem"></p>
      <div id="train-error" class="train-error hidden" role="alert"></div>
      <div id="train-result" class="muted" style="margin-top:.5rem"></div>
    </div>
  </div>
</div>

<!-- Own model modal (auto-annotate) -->
<div class="modal-backdrop" id="own-model-modal">
  <div class="modal" style="width:min(560px, 94vw)">
    <h2>Use Your Own Model</h2>
    <p class="subtitle">Register trained YOLO weights, then use them in Label Assist to auto-annotate.</p>

    <div class="form-group">
      <label>From training run</label>
      <div class="inline-form">
        <select id="run-pick" style="flex:1"></select>
        <button class="btn btn-secondary" id="register-run-btn" type="button">Register</button>
      </div>
    </div>

    <div class="form-group">
      <label>Or paste weights path (.pt)</label>
      <div class="inline-form">
        <input type="text" id="reg-model-name" placeholder="Model name" style="max-width:140px">
        <input type="text" id="reg-model-path" placeholder="C:\path\to\best.pt" style="flex:1">
        <button class="btn btn-secondary" id="register-path-btn" type="button">Register</button>
      </div>
    </div>

    <div class="form-group">
      <label>Or upload .pt file</label>
      <div class="inline-form">
        <input type="text" id="upload-model-name" placeholder="Model name" style="max-width:140px">
        <input type="file" id="upload-model-file" accept=".pt,.pth,.onnx">
        <button class="btn btn-primary" id="upload-model-btn" type="button">Upload</button>
      </div>
    </div>

    <h3 style="font-size:.85rem;margin:1rem 0 .5rem">Registered for auto-annotate</h3>
    <ul id="custom-model-list" class="version-list"></ul>

    <div class="modal-actions">
      <button class="btn btn-ghost" id="own-model-close" type="button">Close</button>
      <a class="btn btn-primary" href="/projects/{{ project.id }}/annotate">Open Annotator →</a>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<style>
.workflow-steps {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.workflow-step {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: 1;
  min-width: 140px;
  padding: .9rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s;
}
.workflow-step:hover { border-color: var(--accent); }
.workflow-step strong { display: block; font-size: .9rem; }
.workflow-step span:not(.step-num) { display: block; font-size: .75rem; color: var(--text-muted); }
.step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
  flex-shrink: 0;
}
.workflow-arrow { color: var(--text-muted); align-self: center; font-size: 1.1rem; }
a.action-card { color: inherit; }

.train-panel {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
}
.train-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
  gap: .75rem;
  flex-wrap: wrap;
}
.train-progress-track {
  height: 8px;
  background: var(--surface-1);
  border-radius: 999px;
  overflow: hidden;
}
.train-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #0891b2);
  border-radius: 999px;
  transition: width .35s ease;
}
.train-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .train-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .train-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.train-stat {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .65rem .7rem;
  text-align: center;
}
.train-stat-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.train-stat-lbl {
  font-size: .7rem;
  color: var(--text-muted);
  margin-top: .15rem;
}
.train-panel.is-failed {
  border-color: #991b1b;
  background: linear-gradient(180deg, rgba(127, 29, 29, .18), var(--surface-3) 40%);
}
.train-panel.is-failed #train-status-label { color: #fca5a5; }
.train-error {
  margin-top: .85rem;
  padding: .85rem 1rem;
  border-radius: 8px;
  border: 1px solid #991b1b;
  background: rgba(127, 29, 29, .28);
  color: #fecaca;
  font-size: .88rem;
  line-height: 1.45;
}
.train-error.hidden { display: none; }
.train-error-title {
  font-weight: 700;
  margin-bottom: .35rem;
  color: #fecaca;
}
.train-error-msg {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
  font-size: .8rem;
  color: #fee2e2;
}
.train-error-hint {
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(252, 165, 165, .25);
  color: #fde68a;
  font-size: .82rem;
}
.train-error details {
  margin-top: .6rem;
  font-size: .75rem;
  color: #fca5a5;
}
.train-error summary { cursor: pointer; user-select: none; }
.train-error pre {
  margin-top: .4rem;
  max-height: 220px;
  overflow: auto;
  padding: .6rem;
  border-radius: 6px;
  background: rgba(0,0,0,.35);
  color: #fecaca;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .72rem;
}

.gen-section-title {
  font-size: .95rem;
  margin: 1.25rem 0 .35rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
}
.toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .45rem .75rem;
}
.toggle-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
}
.toggle-row input { accent-color: var(--accent); }
.aug-fields.disabled-block,
.fx-grid.disabled-block { opacity: .4; pointer-events: none; }
.generate-card { max-width: 920px !important; }

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  max-height: 90vh;
  overflow-y: auto;
}
.modal h2 { font-size: 1.15rem; margin-bottom: .35rem; }
.modal .subtitle { margin-bottom: 1.1rem; color: var(--text-muted); font-size: .9rem; }
.modal-actions {
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
  align-items: center;
}
button.action-card { cursor: pointer; }
</style>
<script>
const PROJECT_ID = {{ project.id }};
</script>
<link rel="stylesheet" href="/static/css/pipeline.css">
<script src="/static/js/project.js"></script>
<script src="/static/js/pipeline_ui.js"></script>
{% endblock %}