{% extends "base.html" %}
{% block content %}
<section class="board-header">
  <div>
    <div class="eyebrow">Proyecto</div>
    <h2>{{ project.name }}</h2>
    <p class="muted">{{ project.description or "Sin descripcion" }}</p>
  </div>
  <div class="board-actions">
    <a class="ghost-button" href="/projects">Volver</a>
  </div>
</section>

{% if overdue_notifications %}
<section class="notification-panel">
  <div class="notification-card">
    <h3>Retrasos detectados</h3>
    <div class="notification-list">
      {% for notice in overdue_notifications %}
      <div class="notification-item">
        <div>
          <div class="notification-title">{{ notice.task.title }}</div>
          <div class="muted">Retraso de {{ notice.metrics.overdue_days }} dias ({{ notice.metrics.elapsed_days }} dias en progreso)</div>
        </div>
        <div class="notification-meta">
          <span class="badge high">retraso</span>
          <span class="assignee">{{ notice.task.assigned_user.username if notice.task.assigned_user else "Sin asignar" }}</span>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

<section class="request-panel">
  <div class="request-block">
    <h3>Crear actividad</h3>
    <form method="post" action="/projects/{{ project.id }}/tasks" class="request-form">
      <label>
        Titulo
        <input type="text" name="title" required />
      </label>
      <label>
        Descripcion
        <input type="text" name="description" />
      </label>
      <label>
        Duracion (dias)
        <input type="number" name="duration_days" min="1" value="1" required />
      </label>
      <label>
        Prioridad
        <select name="priority">
          <option value="low">Baja</option>
          <option value="medium" selected>Media</option>
          <option value="high">Alta</option>
        </select>
      </label>
      <label>
        Asignar a
        {% if user.role == "admin" %}
        <select name="assigned_user_id">
          <option value="">Sin asignar</option>
          {% for candidate in users %}
          <option value="{{ candidate.id }}">{{ candidate.username }}</option>
          {% endfor %}
        </select>
        {% else %}
        <select name="assigned_user_id">
          <option value="">Sin asignar</option>
          <option value="{{ user.id }}">Yo</option>
        </select>
        {% endif %}
      </label>
      <button class="primary" type="submit">Crear actividad</button>
    </form>
  </div>
  <div class="request-block">
    <h3>Solicitar apoyo en una tarea</h3>
    <form method="post" action="/requests" class="request-form">
      <input type="hidden" name="project_id" value="{{ project.id }}" />
      <label>
        Actividad
        <select name="task_id" required>
          {% for task in tasks %}
          <option value="{{ task.id }}">{{ task.title }}</option>
          {% endfor %}
        </select>
      </label>
      <label>
        Usuario
        <select name="target_user_id" required>
          {% for candidate in users %}
          {% if candidate.id != user.id %}
          <option value="{{ candidate.id }}">{{ candidate.username }}</option>
          {% endif %}
          {% endfor %}
        </select>
      </label>
      <button class="primary" type="submit">Enviar solicitud</button>
    </form>
  </div>
  <div class="request-block">
    <h3>Solicitudes pendientes</h3>
    {% if pending_requests %}
    <div class="pending-list">
      {% for req in pending_requests %}
      <div class="pending-item">
        <div>
          <div class="pending-title">{{ req.task.title }}</div>
          <div class="muted">Solicita: {{ req.requester.username }}</div>
        </div>
        <div class="pending-actions">
          <form method="post" action="/requests/{{ req.id }}/accept">
            <button class="primary" type="submit">Aceptar</button>
          </form>
          <form method="post" action="/requests/{{ req.id }}/reject">
            <button class="ghost-button" type="submit">Rechazar</button>
          </form>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="muted">No tienes solicitudes pendientes.</div>
    {% endif %}
  </div>
</section>

<section class="board" data-project-id="{{ project.id }}">
  <div class="board-column" data-status="not_started">
    <div class="column-header">
      <span class="status-dot gray"></span>
      <span>No iniciado</span>
      <span class="count">{{ tasks | selectattr('status', 'equalto', 'not_started') | list | length }}</span>
    </div>
    <div class="column-body" data-dropzone>
      {% for task in tasks %}
      {% if task.status == "not_started" %}
      <div class="task-card" draggable="true" data-task-id="{{ task.id }}">
        <div class="task-title">{{ task.title }}</div>
        <div class="task-meta">
          <span class="badge {{ task.priority }}">{{ task.priority }}</span>
          <span class="assignee">{{ task.assigned_user.username if task.assigned_user else "Sin asignar" }}</span>
        </div>
        <div class="task-extra">Duracion: {{ task.duration_days }} dias</div>
        <div class="task-status-actions">
          <button class="ghost-button tiny-button" type="button" data-task-id="{{ task.id }}" data-status-button="in_progress">
            Pasar a En progreso
          </button>
        </div>
        {% if user.role == "admin" or task.created_by_id == user.id %}
        <div class="task-actions">
          <form method="post" action="/tasks/{{ task.id }}/delete" class="inline-form">
            <button class="ghost-button danger-button" type="submit">Eliminar</button>
          </form>
        </div>
        {% endif %}
      </div>
      {% endif %}
      {% endfor %}
    </div>
  </div>

  <div class="board-column" data-status="in_progress">
    <div class="column-header">
      <span class="status-dot blue"></span>
      <span>En progreso</span>
      <span class="count">{{ tasks | selectattr('status', 'equalto', 'in_progress') | list | length }}</span>
    </div>
    <div class="column-body" data-dropzone>
      {% for task in tasks %}
      {% if task.status == "in_progress" %}
      {% set metrics = task_metrics[task.id] %}
      <div class="task-card" draggable="true" data-task-id="{{ task.id }}">
        <div class="task-title">{{ task.title }}</div>
        <div class="task-meta">
          <span class="badge {{ task.priority }}">{{ task.priority }}</span>
          <span class="assignee">{{ task.assigned_user.username if task.assigned_user else "Sin asignar" }}</span>
        </div>
        <div class="task-extra">Asignados: {{ task.duration_days }} dias</div>
        <div class="task-extra">En proceso: {{ metrics.elapsed_days }} dias</div>
        <div class="task-extra">
          Restan:
          <span class="metric-value{% if metrics.remaining_days < 0 %} negative{% endif %}">
            {{ metrics.remaining_days }} dias
          </span>
        </div>
        <div class="task-status-actions">
          <button class="ghost-button tiny-button" type="button" data-task-id="{{ task.id }}" data-status-button="not_started">
            Regresar
          </button>
          <button class="ghost-button tiny-button" type="button" data-task-id="{{ task.id }}" data-status-button="done">
            Marcar hecha
          </button>
        </div>
      </div>
      {% endif %}
      {% endfor %}
    </div>
  </div>

  <div class="board-column" data-status="done">
    <div class="column-header">
      <span class="status-dot green"></span>
      <span>Hecho</span>
      <span class="count">{{ tasks | selectattr('status', 'equalto', 'done') | list | length }}</span>
    </div>
    <div class="column-body" data-dropzone>
      {% for task in tasks %}
      {% if task.status == "done" %}
      <div class="task-card" draggable="true" data-task-id="{{ task.id }}">
        <div class="task-title">{{ task.title }}</div>
        <div class="task-meta">
          <span class="badge {{ task.priority }}">{{ task.priority }}</span>
          <span class="assignee">{{ task.assigned_user.username if task.assigned_user else "Sin asignar" }}</span>
        </div>
        <div class="task-extra">Duracion: {{ task.duration_days }} dias</div>
        <div class="task-status-actions">
          <button class="ghost-button tiny-button" type="button" data-task-id="{{ task.id }}" data-status-button="in_progress">
            Reabrir
          </button>
        </div>
        {% if task.support_url %}
        <div class="task-support">
          <a href="{{ task.support_url }}" target="_blank" rel="noreferrer">Soporte</a>
        </div>
        {% endif %}
        {% if task.assigned_user_id == user.id or user.role == "admin" %}
        <form method="post" action="/tasks/{{ task.id }}/support" class="support-form">
          <label>
            Direccion de soporte
            <input type="url" name="support_url" placeholder="https://..." value="{{ task.support_url or '' }}" />
          </label>
          <button class="ghost-button" type="submit">Guardar</button>
        </form>
        {% endif %}
      </div>
      {% endif %}
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}