{# Reusable Kanban board for tasks. Expects `tasks` in context. #}
{% set kanban_statuses = [
  {'key': 'todo', 'label': _('To Do'), 'icon': 'fas fa-list-check', 'accent': 'secondary'},
  {'key': 'in_progress', 'label': _('In Progress'), 'icon': 'fas fa-spinner', 'accent': 'warning'},
  {'key': 'review', 'label': _('Review'), 'icon': 'fas fa-user-check', 'accent': 'info'},
  {'key': 'done', 'label': _('Done'), 'icon': 'fas fa-check-circle', 'accent': 'success'}
] %}

<div class="kanban-board-wrapper">
  <div class="kanban-toolbar d-flex justify-content-between align-items-center mb-3">
    <div class="d-flex align-items-center gap-2">
      <div class="summary-icon bg-primary bg-opacity-10 text-primary" style="width:34px;height:34px;border-radius:8px;">
        <i class="fas fa-columns"></i>
      </div>
      <span class="fw-semibold">{{ _('Kanban Board') }}</span>
    </div>
  </div>

  <div id="kanbanBoard" class="kanban-board">
    {% for col in kanban_statuses %}
    <div class="kanban-column" data-status="{{ col.key }}">
      <div class="kanban-column-header sticky-top">
        <div class="d-flex align-items-center justify-content-between">
          <div class="d-flex align-items-center gap-2">
            <div class="icon-circle bg-{{ col.accent }} bg-opacity-10 text-{{ col.accent }}">
              <i class="{{ col.icon }}"></i>
            </div>
            <span class="fw-semibold">{{ col.label }}</span>
          </div>
          <span class="badge rounded-pill bg-{{ col.accent }} kanban-column-count">
            {{ tasks|selectattr('status', 'equalto', col.key)|list|length }}
          </span>
        </div>
      </div>
      <div class="kanban-column-body" data-status="{{ col.key }}">
        {% for task in tasks if task.status == col.key %}
        <div class="kanban-card task-card {{ task.priority_class }} {% if current_user.active_timer and current_user.active_timer.task_id == task.id %}is-active{% endif %}" draggable="true" data-task-id="{{ task.id }}" data-status="{{ task.status }}">
          <div class="card-body p-3">
            <div class="d-flex justify-content-between align-items-start mb-2">
              <div class="d-flex align-items-center flex-wrap gap-2">
                <span class="badge badge-soft-{{ col.accent }} badge-pill status-badge status-{{ task.status }}">{{ task.status_display }}</span>
                <span class="badge priority-badge priority-{{ task.priority }}">{{ task.priority_display }}</span>
                {% if current_user.active_timer and current_user.active_timer.task_id == task.id %}
                <span class="badge badge-soft-primary active-badge">
                  <i class="fas fa-circle me-1" style="font-size:8px;"></i>{{ _('Active') }}
                </span>
                {% endif %}
                {% if task.is_overdue %}
                <span class="badge bg-danger-subtle text-danger"><i class="fas fa-exclamation-triangle me-1"></i>{{ _('Overdue') }}</span>
                {% endif %}
              </div>
              <div class="d-flex align-items-center gap-2">
                <small class="text-muted">#{{ task.id }}</small>
                {% if current_user.active_timer and current_user.active_timer.task_id == task.id %}
                <form method="POST" action="{{ url_for('timer.stop_timer') }}" class="d-inline">
                  <button type="submit" class="btn btn-danger btn-sm">
                    <i class="fas fa-stop me-1"></i>Stop
                  </button>
                </form>
                {% else %}
                <form method="POST" action="{{ url_for('timer.start_timer') }}" class="d-inline">
                  <input type="hidden" name="project_id" value="{{ task.project_id }}">
                  <input type="hidden" name="task_id" value="{{ task.id }}">
                  <button type="submit" class="btn btn-success btn-sm">
                    <i class="fas fa-play me-1"></i>Start
                  </button>
                </form>
                {% endif %}
                <a href="{{ url_for('tasks.edit_task', task_id=task.id) }}" class="btn btn-outline-secondary btn-sm btn-icon" title="Edit task">
                  <i class="fas fa-pen"></i>
                </a>
              </div>
            </div>
            <h6 class="card-title mb-1">
              <a href="{{ url_for('tasks.view_task', task_id=task.id) }}" class="text-decoration-none task-title-link">{{ task.name }}</a>
            </h6>
            {% if task.description %}
            <p class="card-text text-muted small mb-2 task-description">{{ task.description[:110] }}{% if task.description|length > 110 %}...{% endif %}</p>
            {% endif %}
            {% if task.estimated_hours %}
            <div class="d-flex justify-content-between align-items-center small text-muted mb-1">
              <span>Progress</span>
              <span>{{ task.progress_percentage }}%</span>
            </div>
            <div class="progress progress-thin mb-2">
              <div class="progress-bar" role="progressbar" style="width: {{ task.progress_percentage }}%"></div>
            </div>
            {% endif %}
            <div class="d-flex align-items-center justify-content-between small task-meta-row">
              <div class="d-flex align-items-center gap-2">
                {% if task.assigned_user %}
                <span class="d-inline-flex align-items-center gap-1" title="Assignee">
                  <i class="fas fa-user text-info"></i>
                  {{ task.assigned_user.display_name }}
                </span>
                {% endif %}
              </div>
              {% if task.due_date %}
              <span class="d-inline-flex align-items-center gap-1 {% if task.is_overdue %}text-danger fw-semibold{% endif %}">
                <i class="fas fa-calendar"></i>{{ task.due_date.strftime('%b %d') }}
              </span>
              {% endif %}
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endfor %}
  </div>
</div>

<style>
.kanban-board-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.kanban-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.kanban-column { background: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); display: flex; flex-direction: column; min-height: 120px; box-shadow: var(--card-shadow); }
.kanban-column-header { padding: 12px 12px 8px 12px; border-bottom: 1px solid var(--border-color); background: #fff; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); font-weight: 600; color: var(--text-primary); position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 rgba(0,0,0,0.03); }
.kanban-column-body { padding: 12px; min-height: 120px; max-height: 70vh; overflow-y: auto; background: var(--light-color); }
.kanban-card { margin-bottom: 12px; cursor: grab; border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--card-shadow); transition: transform .15s ease, box-shadow .15s ease; }
.kanban-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
.kanban-card.is-active { box-shadow: 0 0 0 2px rgba(59,130,246,0.12), var(--card-shadow); }
.task-meta-row { color: var(--text-muted); }
.kanban-card.priority-low { border-left: 3px solid #22c55e; }
.kanban-card.priority-medium { border-left: 3px solid #eab308; }
.kanban-card.priority-high { border-left: 3px solid #f97316; }
.kanban-card.priority-urgent { border-left: 3px solid #ef4444; }
.kanban-card.dragging { opacity: 0.6; cursor: grabbing; }
.kanban-column-body.drag-over { outline: 2px dashed var(--primary-color); outline-offset: -6px; background: rgba(59, 130, 246, 0.05); }
.icon-circle { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 768px) { .kanban-board { grid-template-columns: repeat(1, minmax(260px, 1fr)); } }
[data-theme="dark"] .kanban-column { background: #0f172a; border-color: var(--border-color); box-shadow: var(--card-shadow); }
[data-theme="dark"] .kanban-column-header { background: #0f172a; border-color: var(--border-color); color: var(--text-secondary); box-shadow: 0 1px 0 rgba(255,255,255,0.04); }
[data-theme="dark"] .kanban-card.is-active { box-shadow: 0 0 0 2px rgba(96,165,250,0.25), var(--card-shadow); }
.active-badge { font-weight: 600; }
[data-theme="dark"] .kanban-column-body { background: #0f172a; }
</style>

<script>
(function(){
  const board = document.getElementById('kanbanBoard');
  if (!board) return;

  const statusLabels = { 
    todo: '{{ _('To Do') }}', 
    in_progress: '{{ _('In Progress') }}', 
    review: '{{ _('Review') }}', 
    done: '{{ _('Done') }}', 
    cancelled: '{{ _('Cancelled') }}' 
  };
  const updateUrlTemplate = "{{ url_for('tasks.api_update_status', task_id=0) }}"; // will replace 0 with actual id


  function updateCounts() {
    document.querySelectorAll('.kanban-column').forEach(col => {
      const body = col.querySelector('.kanban-column-body');
      const count = body ? body.querySelectorAll('.kanban-card').length : 0;
      const badge = col.querySelector('.kanban-column-count');
      if (badge) badge.textContent = count;
    });
  }

  let dragCard = null;
  board.addEventListener('dragstart', (e) => {
    const card = e.target.closest('.kanban-card');
    if (!card) return;
    dragCard = card;
    card.classList.add('dragging');
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', card.dataset.taskId);
  });

  board.addEventListener('dragend', () => {
    if (dragCard) dragCard.classList.remove('dragging');
    dragCard = null;
    document.querySelectorAll('.kanban-column-body').forEach(b => b.classList.remove('drag-over'));
  });

  document.querySelectorAll('.kanban-column-body').forEach(body => {
    body.addEventListener('dragover', (e) => {
      e.preventDefault();
      e.dataTransfer.dropEffect = 'move';
      body.classList.add('drag-over');
    });
    body.addEventListener('dragleave', () => body.classList.remove('drag-over'));
    body.addEventListener('drop', async (e) => {
      e.preventDefault();
      body.classList.remove('drag-over');
      const targetStatus = body.dataset.status;
      const taskId = e.dataTransfer.getData('text/plain');
      const card = dragCard || board.querySelector(`.kanban-card[data-task-id="${taskId}"]`);
      if (!card) return;
      const originalParent = card.parentElement;
      const originalStatus = card.dataset.status;
      if (targetStatus === originalStatus) {
        body.appendChild(card);
        return;
      }
      body.appendChild(card);
      updateCounts();
      // optimistic UI: update badge
      const statusBadge = card.querySelector('.status-badge');
      if (statusBadge) {
        statusBadge.className = `status-badge status-${targetStatus}`;
        statusBadge.textContent = statusLabels[targetStatus] || targetStatus;
      }
      card.dataset.status = targetStatus;

      const url = updateUrlTemplate.replace('/0/', `/${taskId}/`);
      try {
        const resp = await fetch(url, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
          body: JSON.stringify({ status: targetStatus })
        });
        if (!resp.ok) {
          throw new Error('{{ _('Failed to update status') }}');
        }
        const data = await resp.json();
        if (!data.success) {
          throw new Error(data.error || 'Update rejected');
        }
      } catch (err) {
        // revert
        if (originalParent) originalParent.appendChild(card);
        card.dataset.status = originalStatus;
        if (statusBadge) {
          statusBadge.className = `status-badge status-${originalStatus}`;
          statusBadge.textContent = statusLabels[originalStatus] || originalStatus;
        }
        updateCounts();
      }
    });
  });

  updateCounts();
})();
</script>


