{% extends "base.html" %}
{% block title %}Annotate — {{ project.name }}{% endblock %}
{% block body_class %}page-annotate{% endblock %}
{% block head %}
<style>
  body.page-annotate .main-content {
    padding: 0;
    overflow: hidden;
    height: 100vh;
  }

  .annotate-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 300px;
    height: 100vh;
    width: 100%;
    overflow: hidden;
  }

  .annotate-sidebar,
  .annotate-panel {
    background: var(--surface-2);
    padding: .85rem;
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 0;
  }

  .annotate-sidebar { border-right: 1px solid var(--border); }
  .annotate-panel { border-left: 1px solid var(--border); }

  .annotate-main {
    display: flex;
    flex-direction: column;
    background:
      radial-gradient(circle at 20% 20%, rgba(20,184,166,.06), transparent 40%),
      #0a0e14;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .annotate-tools {
    display: flex;
    gap: .35rem;
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--border);
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
    background: rgba(17, 24, 32, 0.95);
    backdrop-filter: blur(8px);
  }

  .tool-group {
    display: inline-flex;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
  }

  .tool-sep {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 .4rem;
  }

  .canvas-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #annotate-canvas {
    cursor: crosshair;
    max-width: 100%;
    max-height: 100%;
    display: block;
    box-shadow: 0 8px 40px rgba(0,0,0,.45);
    border-radius: 4px;
  }

  .thumb-grid {
    display: flex;
    flex-direction: column;
    gap: .55rem;
  }

  .thumb-cell {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid transparent;
    background: var(--surface-3);
    cursor: pointer;
    transition: border-color .15s, transform .15s;
  }

  .thumb-cell:hover { border-color: rgba(20,184,166,.4); }
  .thumb-cell.active { border-color: var(--accent); transform: scale(1.01); }
  .thumb-cell.done::after {
    content: "✓";
    position: absolute;
    top: 4px; right: 5px;
    font-size: .7rem;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
  }

  .thumb-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .tool-btn {
    padding: .4rem .75rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 500;
  }

  .tool-group .tool-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  .tool-btn.assist {
    background: linear-gradient(135deg, #0d9488, #0891b2);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
  }

  .tool-btn.assist:hover { filter: brightness(1.1); }
  .tool-btn.danger-tool {
    border: 1px solid #991b1b;
    background: rgba(127, 29, 29, .45);
    color: #fecaca;
  }
  .tool-btn.danger-tool:hover { background: #7f1d1d; color: #fff; }
  .tool-btn:disabled { opacity: .5; cursor: wait; }

  .ann-item {
    padding: .55rem .6rem;
    border-radius: 8px;
    background: var(--surface-3);
    margin-bottom: .4rem;
    font-size: .82rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 3px solid var(--accent);
  }

  .panel-section { margin-bottom: 1.1rem; }
  .panel-section h3 {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: .55rem;
  }

  .class-pick {
    display: flex;
    flex-direction: column;
    gap: .35rem;
  }

  .class-pick button {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .6rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--surface-3);
    color: var(--text);
    cursor: pointer;
    font-size: .85rem;
    text-align: left;
  }

  .class-pick button.active {
    border-color: var(--accent);
    background: var(--accent-soft);
  }

  .class-pick button .class-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  }

  .assist-box {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .85rem;
  }

  .assist-box p {
    font-size: .8rem;
    color: var(--text-muted);
    margin-bottom: .75rem;
  }

  .assist-box label {
    display: block;
    font-size: .75rem;
    color: var(--text-muted);
    margin-bottom: .25rem;
  }

  .assist-box select,
  .assist-box input:not([type="range"]) {
    width: 100%;
    margin-bottom: .65rem;
    padding: .4rem .5rem;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: .85rem;
  }

  .assist-actions {
    display: flex;
    flex-direction: column;
    gap: .4rem;
  }

  .assist-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Modal */
  .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;
    width: min(420px, 92vw);
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
  }

  .modal h2 { font-size: 1.15rem; margin-bottom: .35rem; }
  .modal .subtitle { margin-bottom: 1.25rem; }

  .modal .form-group { margin-bottom: .9rem; }
  .modal .form-group label {
    display: block;
    font-size: .8rem;
    color: var(--text-muted);
    margin-bottom: .35rem;
  }

  .modal select, .modal input:not([type="range"]) {
    width: 100%;
    padding: .55rem .7rem;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
  }

  .modal-actions {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
  }

  .status-pill {
    font-size: .75rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
  }

  .annotate-locked .canvas-wrap {
    opacity: .45;
    pointer-events: none;
  }

  .lock-banner {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    align-items: center;
    justify-content: center;
    background: rgba(10, 14, 20, 0.72);
    text-align: center;
    padding: 2rem;
  }

  body.no-classes .lock-banner { display: flex; }
  body.no-classes .annotate-tools .tool-btn,
  body.no-classes #assist-section .btn,
  body.no-classes #open-label-assist {
    opacity: .45;
    pointer-events: none;
  }
</style>
{% endblock %}
{% block content %}
<script>
{% if not classes %}document.body.classList.add('no-classes');{% endif %}
</script>
<div class="annotate-layout {% if not classes %}annotate-locked{% endif %}" id="annotate-root">
  <div class="annotate-sidebar">
    <nav class="breadcrumb" style="margin-bottom:1rem"><a href="/projects/{{ project.id }}">{{ project.name }}</a></nav>
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem">
      <h3 style="font-size:.9rem;margin:0">Images</h3>
      <span id="progress-pill" class="status-pill">0/0</span>
    </div>
    <div id="thumb-grid" class="thumb-grid"></div>
  </div>

  <div class="annotate-main">
    <div class="annotate-tools">
      <div class="tool-group">
        <button class="tool-btn active" data-tool="bbox" title="Bounding Box (B)">▭ Box</button>
        <button class="tool-btn" data-tool="polygon" title="Polygon (P)">⬡ Polygon</button>
        <button class="tool-btn" data-tool="sam" title="SAM smart polygon">◎ SAM</button>
      </div>
      <span class="tool-sep"></span>
      <button class="tool-btn assist" id="open-label-assist" title="Auto-label with YOLO">⚡ Label Assist</button>
      <span style="flex:1"></span>
      <button class="tool-btn" id="undo-btn" style="border:1px solid var(--border);background:var(--surface-3);color:var(--text)">Undo</button>
      <button class="tool-btn" id="save-btn" style="border:1px solid var(--border);background:var(--surface-3);color:var(--text)">Save</button>
      <button class="tool-btn danger-tool" id="delete-image-btn" title="Delete current image">Delete image</button>
      <span id="image-info" class="muted" style="font-size:.8rem"></span>
    </div>
    <div class="canvas-wrap">
      <div class="lock-banner">
        <div>
          <h3 style="margin-bottom:.5rem">Add a class to start annotating</h3>
          <p class="muted" style="max-width:320px;margin:0 auto">Define at least one label class in the right panel (e.g. person, car), then draw boxes or run Label Assist.</p>
        </div>
      </div>
      <canvas id="annotate-canvas"></canvas>
    </div>
  </div>

  <div class="annotate-panel">
    <div class="panel-section">
      <h3>Classes</h3>
      <div id="no-class-gate" class="assist-box" style="margin-bottom:.75rem;{% if classes %}display:none{% endif %}">
        <p style="margin-bottom:.65rem"><strong>Add a class first</strong> — annotation is locked until you define at least one label (same as Roboflow).</p>
        <div class="inline-form" style="margin:0">
          <input type="text" id="inline-class-name" placeholder="e.g. person" style="flex:1;min-width:0;padding:.4rem .5rem;background:var(--surface-1);border:1px solid var(--border);border-radius:6px;color:var(--text)">
          <input type="color" id="inline-class-color" value="#14b8a6" style="width:36px;height:32px;border:none;background:none;cursor:pointer">
          <button class="btn btn-primary btn-sm" id="inline-add-class" type="button">Add</button>
        </div>
      </div>
      <div id="class-pick" class="class-pick">
        {% for c in classes %}
        <button type="button" data-class-id="{{ c.id }}" {% if loop.first %}class="active"{% endif %}>
          <span class="class-dot" style="background:{{ c.color }}"></span>{{ c.name }}
        </button>
        {% endfor %}
      </div>
      <div id="add-class-row" class="inline-form" style="margin-top:.65rem;{% if not classes %}display:none{% endif %}">
        <input type="text" id="more-class-name" placeholder="+ class" style="flex:1;min-width:0;padding:.35rem .5rem;background:var(--surface-3);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.8rem">
        <input type="color" id="more-class-color" value="#14b8a6" style="width:28px;height:28px;border:none;background:none;cursor:pointer">
        <button class="btn btn-ghost btn-sm" id="more-add-class" type="button">Add</button>
      </div>
      <select id="active-class" hidden>
        {% for c in classes %}
        <option value="{{ c.id }}" data-color="{{ c.color }}">{{ c.name }}</option>
        {% endfor %}
      </select>
    </div>

    <div class="panel-section" id="assist-section">
      <h3>Label Assist</h3>
      <div class="assist-box">
        <p>Auto-annotate with YOLO. Class names must match detections (e.g. <code>person</code>, <code>car</code>).</p>
        <label>Model</label>
        <select id="assist-model" class="assist-model-select">
          <option value="yolo26n.pt">YOLO26 Nano (fast)</option>
        </select>
        <div class="slider-field">
          <div class="slider-head">
            <span class="slider-label">Confidence</span>
            <span class="slider-value" id="assist-conf-val">0.25</span>
          </div>
          <input type="range" class="oo-slider" id="assist-conf" min="0.05" max="0.95" step="0.05" value="0.25" data-value-target="assist-conf-val">
        </div>
        <div class="assist-actions">
          <button class="btn btn-primary" id="assist-this-btn">Auto Label This Image</button>
          <button class="btn btn-secondary" id="assist-remaining-btn">Auto Label Unannotated</button>
          <button class="btn btn-ghost" id="assist-all-btn">Auto Label All Images</button>
        </div>
      </div>
    </div>

    <div class="panel-section">
      <h3>Annotations</h3>
      <div id="ann-list"></div>
    </div>

    <div class="panel-section">
      <h3>Navigation</h3>
      <div style="display:flex;gap:.5rem">
        <button class="btn btn-ghost btn-sm" id="prev-btn">← Prev</button>
        <button class="btn btn-ghost btn-sm" id="next-btn">Next →</button>
      </div>
    </div>
  </div>
</div>

<div class="modal-backdrop" id="assist-modal">
  <div class="modal">
    <h2>⚡ Label Assist</h2>
    <p class="subtitle">Pre-label images with YOLO open weights, then review &amp; correct — Roboflow-style.</p>
    <div class="form-group">
      <label>Scope</label>
      <select id="modal-scope">
        <option value="current">This image only</option>
        <option value="unannotated">All unannotated images</option>
        <option value="all">Entire dataset</option>
      </select>
    </div>
    <div class="form-group">
      <label>Model</label>
      <select id="modal-model" class="assist-model-select">
        <option value="yolo26n.pt">YOLO26 Nano (fast)</option>
      </select>
    </div>
    <div class="form-group">
      <label>Confidence threshold</label>
      <div class="slider-field" style="margin-bottom:0">
        <div class="slider-head">
          <span class="slider-label">Min confidence</span>
          <span class="slider-value" id="modal-conf-val">0.25</span>
        </div>
        <input type="range" class="oo-slider" id="modal-conf" min="0.05" max="0.95" step="0.05" value="0.25" data-value-target="modal-conf-val">
      </div>
    </div>
    <div class="modal-actions">
      <button class="btn btn-ghost" id="modal-cancel">Cancel</button>
      <button class="btn btn-primary" id="modal-run">Run Auto Label</button>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
const PROJECT_ID = {{ project.id }};
const CLASSES = {{ classes_json | safe }};
</script>
<script src="/static/js/annotator.js"></script>
{% endblock %}