{% extends 'base.html' %}
{% block title %}Dashboard — 2N Painel{% endblock %}

{% block content %}
<div class="topbar">
  <div class="topbar-title">Dashboard</div>
  <div class="topbar-actions">
    {% if current_user.is_admin() %}
    <a href="{{ url_for('projects.new') }}" class="btn btn-primary">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      Novo Projeto
    </a>
    {% endif %}
  </div>
</div>

<div class="page-content">
  <!-- Stats -->
  <div class="grid-4 mb-24">
    <div class="stat-card">
      <div class="stat-label">Total</div>
      <div class="stat-value">{{ stats.total }}</div>
      <div class="stat-sub">projetos ativos</div>
    </div>
    <div class="stat-card" style="border-left: 3px solid var(--accent);">
      <div class="stat-label">Em Andamento</div>
      <div class="stat-value" style="color:var(--accent)">{{ stats.em_andamento }}</div>
      <div class="stat-sub">em execução</div>
    </div>
    <div class="stat-card" style="border-left: 3px solid var(--yellow);">
      <div class="stat-label">Aguardando</div>
      <div class="stat-value" style="color:var(--yellow)">{{ stats.aguardando }}</div>
      <div class="stat-sub">pendente de retorno</div>
    </div>
    <div class="stat-card" style="border-left: 3px solid var(--green);">
      <div class="stat-label">Concluídos</div>
      <div class="stat-value" style="color:var(--green)">{{ stats.concluido }}</div>
      <div class="stat-sub">finalizados</div>
    </div>
  </div>

  <!-- Filters -->
  <div class="card mb-16">
    <form method="GET" style="display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;">
      <div style="flex:1; min-width:140px;">
        <label class="form-label">Status</label>
        <select name="status" class="form-control" onchange="this.form.submit()">
          <option value="">Todos</option>
          <option value="em_andamento" {% if selected_status=='em_andamento' %}selected{% endif %}>Em Andamento</option>
          <option value="aguardando" {% if selected_status=='aguardando' %}selected{% endif %}>Aguardando</option>
          <option value="pausado" {% if selected_status=='pausado' %}selected{% endif %}>Pausado</option>
          <option value="concluido" {% if selected_status=='concluido' %}selected{% endif %}>Concluído</option>
          <option value="cancelado" {% if selected_status=='cancelado' %}selected{% endif %}>Cancelado</option>
        </select>
      </div>
      <div style="flex:1; min-width:140px;">
        <label class="form-label">Cliente</label>
        <select name="client_id" class="form-control" onchange="this.form.submit()">
          <option value="">Todos</option>
          {% for c in clients %}
          <option value="{{ c.id }}" {% if selected_client == c.id|string %}selected{% endif %}>{{ c.name }}</option>
          {% endfor %}
        </select>
      </div>
      {% if current_user.is_admin() %}
      <div style="flex:1; min-width:140px;">
        <label class="form-label">Responsável</label>
        <select name="responsible_id" class="form-control" onchange="this.form.submit()">
          <option value="">Todos</option>
          {% for u in users %}
          <option value="{{ u.id }}" {% if selected_responsible == u.id|string %}selected{% endif %}>{{ u.name }}</option>
          {% endfor %}
        </select>
      </div>
      {% endif %}
      {% if selected_status or selected_client or selected_responsible %}
      <a href="{{ url_for('dashboard.index') }}" class="btn btn-ghost btn-sm">Limpar</a>
      {% endif %}
    </form>
  </div>

  <!-- Projects table -->
  <div class="card">
    {% if projects %}
    <table class="table">
      <thead>
        <tr>
          <th>Projeto</th>
          <th>Cliente</th>
          <th>Tipo</th>
          <th>Status</th>
          <th>Prioridade</th>
          <th>Prazo</th>
          <th>Responsável</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for p in projects %}
        <tr>
          <td>
            <a href="{{ url_for('projects.detail', project_id=p.id) }}" style="color:var(--text); font-weight:500;">{{ p.name }}</a>
          </td>
          <td style="color:var(--text-muted);">{{ p.client.name }}</td>
          <td style="color:var(--text-muted);">{{ p.service_type or '—' }}</td>
          <td>
            {% if p.status == 'em_andamento' %}<span class="badge badge-blue">Em Andamento</span>
            {% elif p.status == 'aguardando' %}<span class="badge badge-yellow">Aguardando</span>
            {% elif p.status == 'concluido' %}<span class="badge badge-green">Concluído</span>
            {% elif p.status == 'cancelado' %}<span class="badge badge-red">Cancelado</span>
            {% elif p.status == 'pausado' %}<span class="badge badge-gray">Pausado</span>
            {% endif %}
          </td>
          <td>
            {% if p.priority == 'urgente' %}<span class="badge badge-red">Urgente</span>
            {% elif p.priority == 'alta' %}<span class="badge badge-orange">Alta</span>
            {% elif p.priority == 'normal' %}<span class="badge badge-gray">Normal</span>
            {% elif p.priority == 'baixa' %}<span class="badge badge-gray" style="opacity:.6">Baixa</span>
            {% endif %}
          </td>
          <td style="color:var(--text-muted);">
            {% if p.deadline %}{{ p.deadline.strftime('%d/%m/%Y') }}{% else %}—{% endif %}
          </td>
          <td style="color:var(--text-muted);">
            {% if p.responsible %}{{ p.responsible.name.split()[0] }}{% else %}—{% endif %}
          </td>
          <td>
            <div style="display:flex; gap:6px;">
              <a href="{{ url_for('projects.detail', project_id=p.id) }}" class="btn btn-ghost btn-sm">Ver</a>
              <a href="{{ url_for('chat.index', project_id=p.id) }}" class="btn btn-ghost btn-sm" title="Chat IA">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
              </a>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="empty-state">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
      <p>Nenhum projeto encontrado.</p>
      {% if current_user.is_admin() %}
      <a href="{{ url_for('projects.new') }}" class="btn btn-primary" style="margin-top:16px;">Criar primeiro projeto</a>
      {% endif %}
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}