{% extends 'base.html' %}
{% block title %}Dashboard — ClickUp Mailer{% endblock %}

{% block content %}
<div class="d-flex align-items-center justify-content-between mb-4">
  <h4 class="mb-0 fw-bold">Dashboard</h4>
  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addTaskModal">
    <i class="bi bi-plus-lg me-1"></i> Przypisz zadanie z ClickUp
  </button>
</div>

<!-- Statystyki -->
<div class="row g-3 mb-4">
  {% set counts = {'pending': 0, 'sent': 0, 'replied': 0, 'closed': 0} %}
  {% for a in assignments %}{% set _ = counts.update({a.status: counts[a.status] + 1}) %}{% endfor %}
  {% for label, key, icon, color in [
      ('Oczekujące', 'pending', 'hourglass', 'secondary'),
      ('Wysłane', 'sent', 'send', 'primary'),
      ('Odpowiedziano', 'replied', 'chat-dots', 'success'),
      ('Zamknięte', 'closed', 'check-circle', 'secondary'),
  ] %}
  <div class="col-6 col-md-3">
    <div class="card p-3">
      <div class="text-muted small mb-1"><i class="bi bi-{{ icon }} me-1"></i>{{ label }}</div>
      <div class="fs-2 fw-bold text-{{ color }}">{{ counts[key] }}</div>
    </div>
  </div>
  {% endfor %}
</div>

<!-- Tabela przypisań -->
<form method="post" action="{{ url_for('bulk_delete') }}" id="bulkForm" onsubmit="return document.querySelectorAll('.row-check:checked').length > 0">
<div class="card">
  <div class="card-header bg-white d-flex align-items-center justify-content-between py-2" id="bulkBar" style="display:none!important">
    <span class="text-muted small" id="selectedCount">0 zaznaczonych</span>
    <button type="submit" class="btn btn-sm btn-danger"
            onclick="return confirm('Usunąć zaznaczone zadania?')"
            id="bulkDeleteBtn" disabled>
      <i class="bi bi-trash me-1"></i>Usuń zaznaczone
    </button>
  </div>
  <div class="card-body p-0">
    <table class="table table-hover mb-0">
      <thead class="table-light">
        <tr>
          <th class="ps-3" style="width:36px">
            <input type="checkbox" class="form-check-input" id="selectAll">
          </th>
          <th>Zadanie</th>
          <th>Przypisane do</th>
          <th>Deadline</th>
          <th>Status</th>
          <th>Wysłano</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for a in assignments %}
        <tr>
          <td class="ps-3">
            <input type="checkbox" class="form-check-input row-check" name="ids" value="{{ a.id }}">
          </td>
          <td>
            <div class="fw-semibold" style="max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
              {% if a.task_url %}<a href="{{ a.task_url }}" target="_blank" class="text-decoration-none text-dark">{{ a.task_name }}</a>
              {% else %}{{ a.task_name }}{% endif %}
            </div>
            <small class="text-muted">{{ a.clickup_task_id }}</small>
          </td>
          <td>{{ a.assignee_label() }}</td>
          <td>
            {% if a.due_date %}
              {% set diff = (a.due_date - now).days %}
              <span class="{{ 'text-danger fw-semibold' if diff < 0 else ('text-warning fw-semibold' if diff <= 2 else '') }}">
                {{ a.due_date.strftime('%d.%m.%Y') }}
                {% if diff < 0 %}<small>(po terminie)</small>{% elif diff == 0 %}<small>(dziś)</small>{% endif %}
              </span>
            {% else %}—{% endif %}
          </td>
          <td>
            <span class="status-badge badge-{{ a.status }}">
              {{ {'pending': 'Oczekuje', 'sent': 'Wysłano', 'replied': 'Odpowiedziano', 'closed': 'Zamknięte'}[a.status] }}
            </span>
          </td>
          <td class="text-muted small">{{ a.email_sent_at.strftime('%d.%m %H:%M') if a.email_sent_at else '—' }}</td>
          <td class="text-end pe-3">
            <a href="{{ url_for('assignment_detail', aid=a.id) }}" class="btn btn-sm btn-outline-secondary">
              <i class="bi bi-eye"></i>
            </a>
          </td>
        </tr>
        {% else %}
        <tr><td colspan="7" class="text-center text-muted py-4">Brak przypisanych zadań</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
</form>

<!-- Modal: dodaj zadanie -->
<div class="modal fade" id="addTaskModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Przypisz zadanie z ClickUp</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <!-- Krok 1: wybierz Space i List -->
        <div class="mb-3">
          <label class="form-label fw-semibold">Space w ClickUp</label>
          <select id="spaceSelect" class="form-select" onchange="loadLists()">
            <option value="">— ładowanie... —</option>
          </select>
        </div>
        <div class="mb-3">
          <label class="form-label fw-semibold">Lista</label>
          <select id="listSelect" class="form-select" onchange="loadTasks()">
            <option value="">— wybierz Space —</option>
          </select>
        </div>
        <div class="mb-3">
          <label class="form-label fw-semibold">Zadanie</label>
          <select id="taskSelect" class="form-select" onchange="fillTaskData()">
            <option value="">— wybierz listę —</option>
          </select>
        </div>
        <hr>
        <form method="post" action="{{ url_for('assign_task') }}" id="assignForm">
          <input type="hidden" name="task_id" id="f_task_id">
          <input type="hidden" name="task_name" id="f_task_name">
          <input type="hidden" name="task_url" id="f_task_url">
          <input type="hidden" name="task_description" id="f_task_description">
          <div class="mb-3">
            <label class="form-label fw-semibold">Deadline</label>
            <input type="date" name="due_date" id="f_due_date" class="form-control">
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">Przypisz do</label>
            <div class="d-flex gap-3 mb-2">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="assignee_type" value="group" id="typeGroup" checked onchange="toggleAssignee()">
                <label class="form-check-label" for="typeGroup">Grupy emaili</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="assignee_type" value="email" id="typeEmail" onchange="toggleAssignee()">
                <label class="form-check-label" for="typeEmail">Pojedynczy email</label>
              </div>
            </div>
            <div id="groupSection">
              {% if groups %}
              <div class="border rounded p-2" style="max-height:200px;overflow-y:auto">
                {% for g in groups %}
                <div class="form-check">
                  <input class="form-check-input group-checkbox" type="checkbox" name="group_ids" value="{{ g.id }}" id="grp{{ g.id }}">
                  <label class="form-check-label" for="grp{{ g.id }}">
                    {{ g.name }}
                    <span class="text-muted small">({{ g.members|length }} os.)</span>
                  </label>
                </div>
                {% endfor %}
              </div>
              <div id="groupWarning" class="text-danger small mt-1" style="display:none">Wybierz co najmniej jedną grupę</div>
              {% else %}
              <p class="text-muted small">Brak grup — utwórz w sekcji Grupy</p>
              {% endif %}
            </div>
            <div id="emailSection" style="display:none">
              <div class="row g-2">
                <div class="col-6">
                  <input type="text" name="individual_name" class="form-control" placeholder="Imię i nazwisko">
                </div>
                <div class="col-6">
                  <input type="email" name="individual_email" class="form-control" placeholder="email@firma.pl">
                </div>
              </div>
            </div>
          </div>
          <div id="taskPreview" class="alert alert-light border" style="display:none">
            <strong id="previewName"></strong>
            <div class="text-muted small mt-1" id="previewDesc"></div>
          </div>
          <div class="modal-footer px-0 pb-0">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Anuluj</button>
            <button type="submit" class="btn btn-primary" id="submitBtn" disabled>Przypisz zadanie</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const now = new Date();

window.addEventListener('DOMContentLoaded', () => {
  fetch('/api/spaces')
    .then(r => r.json())
    .then(spaces => {
      const sel = document.getElementById('spaceSelect');
      sel.innerHTML = '<option value="">— wybierz Space —</option>';
      spaces.forEach(s => sel.insertAdjacentHTML('beforeend', `<option value="${s.id}">${s.name}</option>`));
    })
    .catch(() => document.getElementById('spaceSelect').innerHTML = '<option>Błąd połączenia z ClickUp</option>');
});

function loadLists() {
  const spaceId = document.getElementById('spaceSelect').value;
  if (!spaceId) return;
  document.getElementById('listSelect').innerHTML = '<option>Ładowanie...</option>';
  fetch(`/api/lists?space_id=${spaceId}`)
    .then(r => r.json())
    .then(lists => {
      const sel = document.getElementById('listSelect');
      sel.innerHTML = '<option value="">— wybierz listę —</option>';
      lists.forEach(l => {
        const folder = l.folder_name ? ` [${l.folder_name}]` : '';
        sel.insertAdjacentHTML('beforeend', `<option value="${l.id}">${l.name}${folder}</option>`);
      });
    });
}

let tasksCache = [];
function loadTasks() {
  const listId = document.getElementById('listSelect').value;
  if (!listId) return;
  document.getElementById('taskSelect').innerHTML = '<option>Ładowanie...</option>';
  fetch(`/api/tasks?list_id=${listId}`)
    .then(r => r.json())
    .then(tasks => {
      tasksCache = tasks;
      const sel = document.getElementById('taskSelect');
      sel.innerHTML = '<option value="">— wybierz zadanie —</option>';
      tasks.forEach(t => sel.insertAdjacentHTML('beforeend', `<option value="${t.id}">${t.name}</option>`));
    });
}

function fillTaskData() {
  const taskId = document.getElementById('taskSelect').value;
  const task = tasksCache.find(t => t.id === taskId);
  if (!task) { document.getElementById('submitBtn').disabled = true; return; }

  document.getElementById('f_task_id').value = task.id;
  document.getElementById('f_task_name').value = task.name;
  document.getElementById('f_task_url').value = task.url || '';
  document.getElementById('f_task_description').value = task.description || '';
  document.getElementById('previewName').textContent = task.name;
  document.getElementById('previewDesc').textContent = (task.description || '').substring(0, 200);
  document.getElementById('taskPreview').style.display = 'block';

  if (task.due_date) {
    const d = new Date(parseInt(task.due_date));
    document.getElementById('f_due_date').value = d.toISOString().split('T')[0];
  }

  document.getElementById('submitBtn').disabled = false;
}

function toggleAssignee() {
  const isGroup = document.getElementById('typeGroup').checked;
  document.getElementById('groupSection').style.display = isGroup ? '' : 'none';
  document.getElementById('emailSection').style.display = isGroup ? 'none' : '';
}

document.getElementById('assignForm').addEventListener('submit', function(e) {
  const isGroup = document.getElementById('typeGroup').checked;
  if (isGroup) {
    const checked = document.querySelectorAll('.group-checkbox:checked');
    if (checked.length === 0) {
      e.preventDefault();
      document.getElementById('groupWarning').style.display = '';
      return;
    }
  }
  document.getElementById('groupWarning').style.display = 'none';
});

// Bulk delete checkboxes
const selectAll = document.getElementById('selectAll');
const bulkBar = document.getElementById('bulkBar');
const bulkBtn = document.getElementById('bulkDeleteBtn');
const countLabel = document.getElementById('selectedCount');

function updateBulkBar() {
  const checked = document.querySelectorAll('.row-check:checked');
  const n = checked.length;
  if (n > 0) {
    bulkBar.style.display = 'flex';
    bulkBar.style.removeProperty('display');
    bulkBtn.disabled = false;
    countLabel.textContent = n + ' zaznaczon' + (n === 1 ? 'e' : 'ych');
  } else {
    bulkBar.style.setProperty('display', 'none', 'important');
    bulkBtn.disabled = true;
  }
}

selectAll.addEventListener('change', function() {
  document.querySelectorAll('.row-check').forEach(cb => cb.checked = this.checked);
  updateBulkBar();
});

document.querySelectorAll('.row-check').forEach(cb => {
  cb.addEventListener('change', () => {
    const all = document.querySelectorAll('.row-check');
    const checked = document.querySelectorAll('.row-check:checked');
    selectAll.indeterminate = checked.length > 0 && checked.length < all.length;
    selectAll.checked = checked.length === all.length;
    updateBulkBar();
  });
});
</script>
{% endblock %}