{% extends 'ls_portal/base.html' %}
{% block body_class %}chat-page{% endblock %}
{% block content %}
<style>
  .plans-scroll {
    display:grid;
    gap:8px;
    align-content:start;
    padding-bottom:8px;
  }
  .plans-filter-panel,
  .plan-card {
    padding:10px;
  }
  .plans-filter-grid {
    display:grid;
    gap:6px;
    grid-template-columns:minmax(0,1.6fr) repeat(3, minmax(0,1fr));
    align-items:end;
  }
  .plans-filter-grid label,
  .plan-field label {
    display:block;
    margin-bottom:3px;
    font-size:11px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .plans-filter-actions {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:6px;
    margin-top:6px;
    flex-wrap:wrap;
  }
  .plan-tag-cloud {
    display:flex;
    gap:5px;
    flex-wrap:wrap;
  }
  .plan-tag-filter,
  .plan-tag-chip {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    color:var(--muted);
    font-size:12px;
    line-height:1;
    padding:6px 9px;
  }
  .plan-tag-filter {
    cursor:pointer;
  }
  .plan-tag-filter.is-active {
    background:var(--accent);
    color:#052135;
    border-color:transparent;
  }
  .plan-tag-chip.is-auto {
    background:rgba(125,211,252,.12);
    color:var(--accent);
  }
  .plan-list {
    display:grid;
    gap:8px;
  }
  .plan-card[hidden] {
    display:none !important;
  }
  .plan-card-form {
    display:grid;
    gap:6px;
  }
  .plan-card-head {
    display:flex;
    gap:6px;
    align-items:flex-start;
  }
  .plan-title-input {
    font-size:15px;
    font-weight:600;
    padding:9px 10px;
  }
  .plan-chip-row {
    display:flex;
    gap:5px;
    flex-wrap:wrap;
    align-items:center;
  }
  .plan-grid {
    display:grid;
    gap:6px;
    grid-template-columns:repeat(4, minmax(0,1fr));
  }
  .plan-field input,
  .plan-field select,
  .plan-field textarea {
    padding:9px 10px;
  }
  .plan-field textarea {
    min-height:72px;
  }
  .plan-card-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
  }
  .plan-card-actions {
    display:flex;
    gap:6px;
    margin-left:auto;
  }
  .plan-meta {
    font-size:11px;
    color:var(--muted);
  }
  .plan-overdue {
    color:var(--danger);
  }
  @media (max-width:720px) {
    .plans-filter-grid,
    .plan-grid {
      grid-template-columns:1fr 1fr;
    }
    .plan-card-head {
      flex-direction:column;
    }
    .plan-card-actions {
      width:100%;
      margin-left:0;
    }
    .plan-card-actions > button {
      flex:1 1 0;
    }
  }
</style>

<section class="chat-shell">
  <header class="chat-header header app-topbar">
    <div class="slim-header-row">
      <div class="slim-title-wrap">
        <div class="kicker">Haigh Environmental Executive Assistant</div>
        <h1 class="title">To-Dos</h1>
        <div class="subtitle">Personal work, project, and task lists.</div>
      </div>
      <details class="header-menu">
        <summary class="burger-button" aria-label="Open menu">☰</summary>
        <nav class="menu-panel" aria-label="Operator navigation">
          <a href="{{ url_for('ls_portal_bp.home') }}">Chat</a>
          <a class="is-active" href="{{ url_for('ls_portal_bp.plans') }}">To-Dos</a>
          {% if approvals_enabled %}
            <a href="{{ url_for('ls_portal_bp.approvals') }}">Approvals</a>
          {% endif %}
          <a href="{{ url_for('ls_portal_bp.ops') }}">Ops</a>
          {% if current_account.can_manage_accounts or current_account.is_superuser %}
            <a href="{{ url_for('ls_portal_bp.accounts') }}">Accounts</a>
          {% endif %}
        </nav>
      </details>
    </div>
  </header>

  <section class="thread-pane">
    <section class="chat-thread plans-scroll" id="plans-scroll">
      <section class="panel plans-filter-panel">
        <div class="plans-filter-grid">
          <div>
            <label for="plans-search">Search</label>
            <input id="plans-search" type="search" placeholder="Search titles, details, tags">
          </div>
          <div>
            <label for="plans-type-filter">List</label>
            <select id="plans-type-filter">
              <option value="">All</option>
              {% for value in plan_item_types %}
                <option value="{{ value }}">{{ value.title() }}</option>
              {% endfor %}
            </select>
          </div>
          <div>
            <label for="plans-status-filter">Status</label>
            <select id="plans-status-filter">
              <option value="">All</option>
              {% for value in plan_statuses %}
                <option value="{{ value }}">{{ value.title() }}</option>
              {% endfor %}
            </select>
          </div>
          <div>
            <label for="plans-priority-filter">Priority</label>
            <select id="plans-priority-filter">
              <option value="">All</option>
              {% for value in plan_priorities %}
                <option value="{{ value }}">{{ value.title() }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="plans-filter-actions">
          <div class="plan-tag-cloud" id="plan-tag-filters"></div>
          <button type="button" class="secondary" id="plans-clear-filters">Clear filters</button>
        </div>
      </section>

      <section class="plan-list" id="plan-list">
        {% for row in plans %}
          {% set due_value = row.due_at.strftime('%Y-%m-%dT%H:%M') if row.due_at else '' %}
          {% set due_label = row.due_at.strftime('%d %b %Y %H:%M') if row.due_at else 'No due date' %}
          <article
            class="panel plan-card"
            data-plan-item
            data-plan-id="{{ row.id }}"
            data-plan-type="{{ row.item_type }}"
            data-plan-status="{{ row.status }}"
            data-plan-priority="{{ row.priority }}"
            data-plan-tags="{{ row.tags|join('|') }}"
            data-plan-search="{{ (row.title ~ ' ' ~ (row.details or '') ~ ' ' ~ (row.tags|join(' ')))|lower }}"
          >
            <form method="post" action="{{ url_for('ls_portal_bp.update_plan', plan_item_id=row.id) }}" class="plan-card-form">
              <div class="plan-card-head">
                <input class="plan-title-input" type="text" name="title" value="{{ row.title }}" maxlength="255" required>
              </div>

              <div class="plan-chip-row">
                {% for tag in row.tags %}
                  <span class="plan-tag-chip {% if tag in row.auto_tags %}is-auto{% endif %}">{{ tag }}</span>
                {% endfor %}
              </div>

              <div class="plan-grid">
                <div class="plan-field">
                  <label>List</label>
                  <select name="item_type">
                    {% for value in plan_item_types %}
                      <option value="{{ value }}" {% if row.item_type == value %}selected{% endif %}>{{ value.title() }}</option>
                    {% endfor %}
                  </select>
                </div>
                <div class="plan-field">
                  <label>Status</label>
                  <select name="status">
                    {% for value in plan_statuses %}
                      <option value="{{ value }}" {% if row.status == value %}selected{% endif %}>{{ value.title() }}</option>
                    {% endfor %}
                  </select>
                </div>
                <div class="plan-field">
                  <label>Priority</label>
                  <select name="priority">
                    {% for value in plan_priorities %}
                      <option value="{{ value }}" {% if row.priority == value %}selected{% endif %}>{{ value.title() }}</option>
                    {% endfor %}
                  </select>
                </div>
                <div class="plan-field">
                  <label>Due</label>
                  <input type="datetime-local" name="due_at" value="{{ due_value }}">
                </div>
              </div>

              <div class="plan-field">
                <label>Tags</label>
                <input type="text" name="tags" value="{{ row.tags_text }}" maxlength="500" placeholder="comma-separated tags">
              </div>

              <div class="plan-field">
                <label>Details</label>
                <textarea name="details" rows="3" maxlength="4000">{{ row.details or '' }}</textarea>
              </div>

              <div class="plan-card-footer">
                <div class="plan-meta">
                  #{{ row.id }} · created by {{ row.creator_label }} ·
                  <span>{{ due_label }}</span>
                </div>
                <div class="plan-card-actions">
                  <button class="secondary" type="submit" name="_action" value="delete">Delete</button>
                  <button type="submit">Save</button>
                </div>
              </div>
            </form>
          </article>
        {% else %}
          <section class="panel compact-panel">
            <div class="muted">No plan items yet.</div>
          </section>
        {% endfor %}
      </section>
    </section>
  </section>
</section>

<script>
  const searchInput = document.getElementById('plans-search');
  const typeFilter = document.getElementById('plans-type-filter');
  const statusFilter = document.getElementById('plans-status-filter');
  const priorityFilter = document.getElementById('plans-priority-filter');
  const clearFiltersButton = document.getElementById('plans-clear-filters');
  const tagFilterWrap = document.getElementById('plan-tag-filters');
  const planCards = Array.from(document.querySelectorAll('[data-plan-item]'));
  const selectedTags = new Set();

  function collectTags() {
    const tags = new Set();
    planCards.forEach((card) => {
      (card.dataset.planTags || '').split('|').filter(Boolean).forEach((tag) => tags.add(tag));
    });
    return Array.from(tags).sort();
  }

  function renderTagFilters() {
    const tags = collectTags();
    tagFilterWrap.innerHTML = tags.map((tag) => `
      <button type="button" class="plan-tag-filter${selectedTags.has(tag) ? ' is-active' : ''}" data-tag-filter="${tag}">${tag}</button>
    `).join('');
  }

  function applyFilters() {
    const searchText = (searchInput.value || '').trim().toLowerCase();
    const typeValue = typeFilter.value;
    const statusValue = statusFilter.value;
    const priorityValue = priorityFilter.value;
    planCards.forEach((card) => {
      const haystack = (card.dataset.planSearch || '').toLowerCase();
      const tags = (card.dataset.planTags || '').split('|').filter(Boolean);
      const matchesSearch = !searchText || haystack.includes(searchText);
      const matchesType = !typeValue || card.dataset.planType === typeValue;
      const matchesStatus = !statusValue || card.dataset.planStatus === statusValue;
      const matchesPriority = !priorityValue || card.dataset.planPriority === priorityValue;
      const matchesTags = !selectedTags.size || Array.from(selectedTags).every((tag) => tags.includes(tag));
      card.hidden = !(matchesSearch && matchesType && matchesStatus && matchesPriority && matchesTags);
    });
    renderTagFilters();
  }

  tagFilterWrap.addEventListener('click', (event) => {
    const button = event.target.closest('[data-tag-filter]');
    if (!button) return;
    const tag = button.dataset.tagFilter;
    if (selectedTags.has(tag)) selectedTags.delete(tag);
    else selectedTags.add(tag);
    applyFilters();
  });

  [searchInput, typeFilter, statusFilter, priorityFilter].forEach((element) => {
    element.addEventListener('input', applyFilters);
    element.addEventListener('change', applyFilters);
  });

  clearFiltersButton.addEventListener('click', () => {
    searchInput.value = '';
    typeFilter.value = '';
    statusFilter.value = '';
    priorityFilter.value = '';
    selectedTags.clear();
    applyFilters();
  });

  renderTagFilters();
  applyFilters();
</script>
{% endblock %}