{% extends "base.html" %}

{% block title %}{{ project.title }} · agentplan dashboard{% endblock %}
{% block body_class %}dashboard-project{% endblock %}

{% block topbar_left %}
<div class="topbar-left">
  <div>
    <div class="brand">agentplan</div>
  </div>
</div>
{% endblock %}

{% block topbar_nav %}
<a href="{{ url_for('index') }}" class="btn-back">Home</a>
<a href="{{ url_for('activity') }}" class="btn-back">Activity</a>
{% endblock %}

{% block topbar_right %}
<div class="topbar-right">
  <span id="project-clock" class="clock"></span>
  <span class="sse-status"><span id="project-sse-dot" class="status-dot disconnected" aria-hidden="true"></span><span id="project-sse-label">connecting…</span></span>
</div>
{% endblock %}

{% block content %}
<nav class="breadcrumbs" aria-label="Breadcrumb">
  {% if space_info %}
  <a href="{{ url_for('space_detail', slug=space_info.slug) }}">{{ space_info.title }}</a>
  <span class="breadcrumb-sep" aria-hidden="true">›</span>
  {% else %}
  <span class="breadcrumb-muted">Unassigned</span>
  <span class="breadcrumb-sep" aria-hidden="true">›</span>
  {% endif %}
  <span class="breadcrumb-current">{{ project.title }}</span>
</nav>
<div class="project-title-row">
  <h1 class="project-title">{{ project.title }}</h1>
  <div class="project-header-actions">
    <button
      type="button"
      class="kebab-btn"
      id="project-header-menu-button"
      aria-label="Project actions for {{ project.title }}"
      aria-expanded="false"
      aria-haspopup="menu"
      data-project-menu-button
      data-project-slug="{{ project.slug }}"
      data-project-title="{{ project.title }}"
      data-project-status="{{ project.status }}"
    >⋯</button>
    <div class="kebab-menu" id="project-header-menu" data-project-menu hidden>
      {% if project.status not in ["completed", "archived", "abandoned"] %}
      <button type="button" class="kebab-menu-item" data-project-action="close">Close</button>
      {% endif %}
      {% if project.status != "archived" %}
      <button type="button" class="kebab-menu-item" data-project-action="archive">Archive</button>
      {% endif %}
      <button type="button" class="kebab-menu-item danger" data-project-action="delete">Delete</button>
    </div>
  </div>
</div>
<div class="project-dir-row" id="project-dir-row">
  <span id="project-dir-display" class="project-dir">
  {%- if project.dir -%}
    <a href="file://{{ project.dir }}">{{ project.dir }}</a>
  {%- else -%}
    <span class="project-dir-empty">No directory set</span>
  {%- endif -%}
  </span>
  <input id="project-dir-input" class="project-dir-input" name="directory" type="text" value="{{ project.dir or '' }}" placeholder="~/path/to/repo" hidden>
  <button id="project-dir-edit-btn" class="btn btn-sm btn-secondary" type="button">Edit</button>
  <button id="project-dir-save-btn" class="btn btn-sm btn-primary" type="button" hidden>Save</button>
  <button id="project-dir-cancel-btn" class="btn btn-sm" type="button" hidden>Cancel</button>
</div>
<div id="project-dir-warning" class="project-dir-warning" {% if not directory_warning %}hidden{% endif %}>⚠ Linked directory does not exist on disk.</div>

<div id="chain-controls" class="chain-controls" hidden>
  <div id="chain-status" class="chain-status">
    <span id="chain-status-dot" class="chain-dot {{ chain.status if chain and chain.status else 'stopped' }}"></span>
    <span id="chain-status-text">{{ chain_text }}</span>
  </div>
</div>

<div class="project-meta">
  <span id="project-done-counter">{{ done_count }}/{{ total_count }} done</span>
  <button id="add-ticket-btn" class="btn btn-primary project-action-btn" type="button">+ Add Ticket</button>
</div>

<dialog id="add-ticket-dialog" class="ticket-dialog">
  <form id="add-ticket-form" method="dialog">
    <h3>Add Ticket</h3>
    <label>Title <input type="text" name="title" required autofocus placeholder="What needs to be done?"></label>
    <label>Description <textarea name="description" rows="3" placeholder="Details (optional)"></textarea></label>
    <label>Priority
      <select name="priority">
        <option value="none">None</option>
        <option value="high">High</option>
        <option value="medium">Medium</option>
        <option value="low">Low</option>
      </select>
    </label>
    <label>Model Tier
      <select name="model_tier">
        <option value="auto">Auto</option>
        <option value="light">Light</option>
        <option value="standard">Standard</option>
        <option value="reasoning">Reasoning</option>
      </select>
    </label>
    <div class="dialog-actions">
      <button type="button" class="btn" id="add-ticket-cancel">Cancel</button>
      <button type="submit" class="btn btn-primary">Create</button>
    </div>
  </form>
</dialog>

<dialog id="ticket-field-dialog" class="ticket-dialog ticket-field-dialog">
  <form id="ticket-field-form" method="dialog">
    <h3 id="ticket-field-dialog-title">Edit field</h3>
    <p id="ticket-field-dialog-help" class="ticket-field-help">Update the selected ticket field.</p>
    <label id="ticket-field-input-row" class="ticket-field-row" hidden>
      <span id="ticket-field-input-label">Value</span>
      <input id="ticket-field-input" type="text" name="value" maxlength="255" autocomplete="off">
    </label>
    <label id="ticket-field-textarea-row" class="ticket-field-row" hidden>
      <span id="ticket-field-textarea-label">Value</span>
      <textarea id="ticket-field-textarea" name="value_multiline" rows="5" maxlength="4000"></textarea>
    </label>
    <label id="ticket-field-select-row" class="ticket-field-row" hidden>
      <span id="ticket-field-select-label">Value</span>
      <select id="ticket-field-select" name="value_select">
        <option value="none">None</option>
        <option value="high">High</option>
        <option value="medium">Medium</option>
        <option value="low">Low</option>
      </select>
    </label>
    <p id="ticket-field-error" class="ticket-field-error" hidden></p>
    <div class="dialog-actions">
      <button type="button" class="btn" id="ticket-field-cancel">Cancel</button>
      <button type="submit" class="btn btn-primary" id="ticket-field-save">Save</button>
    </div>
  </form>
</dialog>

<form method="get" class="filters" aria-label="filters">
  <select name="priority" aria-label="Priority filter">
    <option value="" {{ "selected" if not filters.priority else "" }}>All priorities</option>
    {% for priority in ["high", "medium", "low", "none"] %}
    <option value="{{ priority }}" {{ "selected" if filters.priority == priority else "" }}>{{ priority | capitalize }}</option>
    {% endfor %}
  </select>
  <select name="tag" aria-label="Tag filter">
    <option value="" {{ "selected" if not filters.tag else "" }}>All tags</option>
    {% for tag in available_tags %}
    <option value="{{ tag }}" {{ "selected" if filters.tag == tag|lower else "" }}>{{ tag }}</option>
    {% endfor %}
  </select>
  <div class="filter-actions">
    <button class="btn btn-sm btn-primary" type="submit">Apply filters</button>
    <a class="btn btn-sm btn-secondary" href="{{ url_for('project_detail', slug=project.slug) }}">Reset</a>
  </div>
</form>

<section class="kanban-grid" aria-label="kanban board">
  {% for status in status_order %}
  <article class="kanban-column" data-status="{{ status }}">
    <header class="kanban-column-header">
      <h2 class="kanban-column-title">{{ status_labels[status] }}</h2>
      <span class="kanban-count" data-count-for="{{ status }}">{{ grouped[status]|length }}</span>
    </header>
    <div class="kanban-column-body" data-column-body="{{ status }}">
      {% if grouped[status] %}
        {% for ticket in grouped[status] %}
        <a class="ticket-link" href="{{ url_for('ticket_detail', slug=project.slug, ticket_num=ticket.num) }}" data-ticket-num="{{ ticket.num }}" data-ticket-status="{{ ticket.status }}" draggable="{{ 'false' if ticket.status in ['done', 'skipped'] else 'true' }}" role="button" aria-label="Open ticket #{{ ticket.num }} details panel">
          <article class="ticket-card priority-{{ ticket.priority|lower }} {{ "has-active-agent" if ticket.active_agent else "" }}">
            <div class="ticket-head">
              <div>
                <div class="ticket-id">#{{ ticket.num }}</div>
                <div class="ticket-title">{{ ticket.title }}</div>
              </div>
              {% if ticket.due_date %}
              <div class="ticket-due {{ 'overdue' if ticket.is_overdue else '' }}">{{ ticket.due_date }}</div>
              {% endif %}
            </div>

            <div class="pill-row">
              <span class="priority-pill p-{{ ticket.priority|lower }}">{{ ticket.priority|lower }}</span>
              {% if ticket.model_tier and ticket.model_tier != 'auto' %}
              <span class="tag-pill tag-purple">{{ ticket.model_tier }}</span>
              {% endif %}
              {% for tag in (ticket.tags or []) %}
              <span class="tag-pill tag-{{ ticket.tag_tones.get(tag, 'blue') }}">{{ tag }}</span>
              {% endfor %}
            </div>

            {% if ticket.assignee %}
            <div class="agent-row">
              <span class="agent-avatar">{{ ticket.assignee_initials }}</span>
              <span class="agent-name">{{ ticket.assignee }}</span>
            </div>
            {% endif %}

            {% if ticket.subtask_total > 0 %}
            <div class="progress-meta">
              <span>subtasks</span>
              <span>{{ ticket.subtask_done }}/{{ ticket.subtask_total }}</span>
            </div>
            <div class="mini-progress" role="img" aria-label="subtask progress">
              <div class="mini-progress-value" style="--progress: {{ ticket.subtask_pct }}%;"></div>
            </div>
            {% endif %}
          </article>
        </a>
        {% endfor %}
      {% else %}
        <p class="kanban-empty">No tickets.</p>
      {% endif %}
    </div>
  </article>
  {% endfor %}
</section>
<div id="ticket-panel-backdrop" class="ticket-panel-backdrop" hidden></div>
<aside id="ticket-panel" class="ticket-panel" aria-hidden="true" aria-label="Ticket detail panel">
  <header class="ticket-panel-header">
    <div class="ticket-panel-heading">
      <div id="panel-ticket-id" class="ticket-panel-id">Ticket</div>
      <div class="ticket-panel-title-row">
        <h2 id="panel-ticket-title" class="ticket-panel-title">Loading…</h2>
        <button id="panel-title-edit-btn" class="ticket-panel-edit-btn" type="button" data-edit-field="title" hidden aria-label="Edit ticket title">✎</button>
      </div>
    </div>
    <div class="ticket-panel-header-actions">
      <div class="ticket-panel-menu-wrap">
        <button id="ticket-panel-menu-button" class="kebab-btn ticket-panel-menu-button" type="button" aria-label="Ticket actions" aria-expanded="false" aria-haspopup="menu" hidden>⋯</button>
        <div id="ticket-panel-menu" class="kebab-menu ticket-panel-menu" hidden>
          <button type="button" class="kebab-menu-item danger" data-ticket-delete-overflow>Delete Ticket</button>
        </div>
      </div>
      <button id="ticket-panel-close" class="ticket-panel-close" type="button" aria-label="Close ticket detail">✕</button>
    </div>
  </header>
  <div id="ticket-panel-content" class="ticket-panel-content"></div>
</aside>
<div id="toast-stack" class="toast-stack" aria-live="polite" aria-atomic="true"></div>
{% endblock %}

{% block scripts %}
<script>
  window.__projectPage = {
    projectSlug: {{ project.slug|tojson }},
    statusOrder: ["pending", "in-progress", "blocked", "needs-review", "failed", "done"],
    filters: {{ filters|tojson }},
    chainStatus: {{ (chain.status if chain else 'stopped')|tojson }},
    chainCurrentTicketNum: {{ chain_current_ticket_num|tojson }},
    chainPauseReason: {{ chain_pause_reason|tojson }},
    projectDir: {{ (project.dir or "")|tojson }},
  };
</script>
<script src="{{ url_for('static', filename='project.js') }}"></script>
{% endblock %}