{% extends "base.html" %}
{% block title %}Studio — {{ app_name }}{% endblock %}
{% block body_class %}page-studio{% endblock %}
{% block content %}
<section class="studio-hero" aria-label="ML Studio overview">
  <div class="studio-hero-glow" aria-hidden="true"></div>
  <div class="studio-hero-grid" aria-hidden="true"></div>
  <div class="studio-hero-copy">
    <p class="studio-kicker">Local-first ML Studio</p>
    <h1>Build, train, and ship models</h1>
    <p class="subtitle">From raw data to versioned datasets, training runs, and registered weights — all on your machine.</p>
    <div class="studio-hero-actions">
      <a href="/projects/new" class="btn btn-primary btn-glow">New project</a>
      <a href="/projects/new#import" class="btn btn-secondary">Import dataset</a>
      {% if projects %}
      <a href="/projects/{{ projects[0].id }}#export" class="btn btn-ghost">Resume training</a>
      {% endif %}
    </div>
  </div>
  <div class="studio-pipeline" aria-label="ML workflow">
    <div class="pipeline-node" style="--i:0">
      <span class="pipeline-dot"></span>
      <strong>Data</strong>
      <span>Ingest</span>
    </div>
    <div class="pipeline-edge" aria-hidden="true"></div>
    <div class="pipeline-node" style="--i:1">
      <span class="pipeline-dot"></span>
      <strong>Label</strong>
      <span>Annotate</span>
    </div>
    <div class="pipeline-edge" aria-hidden="true"></div>
    <div class="pipeline-node" style="--i:2">
      <span class="pipeline-dot"></span>
      <strong>Version</strong>
      <span>Split &amp; augment</span>
    </div>
    <div class="pipeline-edge" aria-hidden="true"></div>
    <div class="pipeline-node is-accent" style="--i:3">
      <span class="pipeline-dot"></span>
      <strong>Train</strong>
      <span>Local YOLO / adapters</span>
    </div>
  </div>
</section>

<div class="stats-grid studio-stats">
  <div class="stat-card anim-stat" style="--i:0">
    <div class="stat-value" data-count="{{ stats.project_count }}">0</div>
    <div class="stat-label">Projects</div>
  </div>
  <div class="stat-card anim-stat" style="--i:1">
    <div class="stat-value" data-count="{{ stats.asset_count }}">0</div>
    <div class="stat-label">Samples</div>
  </div>
  <div class="stat-card anim-stat" style="--i:2">
    <div class="stat-value" data-count="{{ stats.model_count }}">0</div>
    <div class="stat-label">Models</div>
  </div>
  <div class="stat-card anim-stat" style="--i:3">
    <div class="stat-value" data-count="{{ stats.experiment_count }}">0</div>
    <div class="stat-label">Experiments</div>
  </div>
</div>

<section class="section">
  <div class="section-toolbar">
    <div>
      <h2 style="margin:0">Projects</h2>
      <p class="muted" style="margin:.25rem 0 0">Projects live under a workspace (Organization → Workspace → Project).</p>
    </div>
    <div class="header-actions">
      {% if projects %}
      <button type="button" class="btn btn-ghost" id="toggle-select-projects">Select</button>
      {% endif %}
      <a href="/projects/new" class="btn btn-primary">+ New</a>
    </div>
  </div>

  {% if projects %}
  <div class="project-grid" id="project-grid">
    {% for p in projects %}
    {% set ready_pct = (p.annotated_count / p.image_count * 100) if p.image_count else 0 %}
    <div class="project-card studio-card selectable anim-card" data-id="{{ p.id }}" style="--i:{{ loop.index0 }}">
      <button type="button" class="oo-check project-check-btn" data-id="{{ p.id }}" aria-label="Select {{ p.name }}" aria-pressed="false"></button>
      <a href="/projects/{{ p.id }}" class="project-card-link">
        <div class="studio-card-top">
          <div class="project-type">{{ p.project_type.value | replace('_', ' ') | title }}</div>
          <div class="ready-ring" style="--p: {{ ready_pct }}" title="{{ '%.0f'|format(ready_pct) }}% labeled">
            <span>{{ '%.0f'|format(ready_pct) }}%</span>
          </div>
        </div>
        <h3>{{ p.name }}</h3>
        <p class="muted" style="font-size:.8rem;margin:.25rem 0 .5rem">
          {% if p.organization_name or p.workspace_name %}
          {{ p.organization_name or 'Org' }} / {{ p.workspace_name or 'Workspace' }}
          {% else %}
          Unassigned workspace
          {% endif %}
        </p>
        <p>{{ p.description or 'Ready for labeling, versioning, and local training.' }}</p>
        <div class="project-meta">
          <span>{{ p.annotated_count }} / {{ p.image_count }} labeled</span>
          <span>{{ p.class_count }} classes</span>
        </div>
        <div class="progress-bar">
          <div class="progress-fill" style="width: {{ ready_pct }}%"></div>
        </div>
      </a>
      <div class="card-actions">
        <a href="/projects/{{ p.id }}#export" class="btn btn-primary btn-sm">Train</a>
        <a href="/projects/{{ p.id }}/annotate" class="btn btn-secondary btn-sm">Label</a>
        <button type="button" class="btn btn-ghost btn-sm delete-one-project" data-id="{{ p.id }}" data-name="{{ p.name }}">Delete</button>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty-state studio-empty">
    <div class="empty-icon pulse-soft" aria-hidden="true">◉</div>
    <h3>Create your first project</h3>
    <p>Projects sit under a workspace. Label data, version datasets, then train.</p>
    <div style="display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap">
      <a href="/projects/new" class="btn btn-primary btn-glow">Create project</a>
      <a href="/projects/new#import" class="btn btn-ghost">Import dataset</a>
    </div>
  </div>
  {% endif %}
</section>

<div class="bulk-bar" id="project-bulk-bar" hidden>
  <div class="bulk-bar-inner">
    <div class="bulk-bar-left">
      <span class="bulk-count" id="project-selected-count">0 selected</span>
      <button type="button" class="btn btn-ghost btn-sm" id="select-all-projects">Select all</button>
      <button type="button" class="btn btn-ghost btn-sm" id="clear-project-selection">Clear</button>
    </div>
    <div class="bulk-bar-right">
      <button type="button" class="btn btn-danger btn-sm" id="delete-selected-projects">Delete</button>
      <button type="button" class="btn btn-secondary btn-sm" id="done-select-projects">Done</button>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/dashboard.js"></script>
{% endblock %}