{% extends "base.html" %}
{% block content %}
<div class="page-header">
    <h1 class="page-title">Focus</h1>
    <div class="flex items-center gap-2">
        {% if total_estimated %}<span class="text-sm text-muted">~{{ total_estimated }}min estimated</span>{% endif %}
    </div>
</div>

<!-- Quick add -->
<form action="/focus/quick-add" method="post" class="flex items-center gap-2 mb-3">
    <input type="text" name="title" class="form-input" placeholder="Add item to focus..." required style="flex:1;padding:6px 10px;font-size:0.85rem;">
    <select name="quick_domain_id" class="filter-select" style="min-width:120px;padding:6px 8px;font-size:0.82rem;">
        <option value="">No Domain</option>
        {% for d in domains %}
        <option value="{{ d.id }}">{{ d.name }}</option>
        {% endfor %}
    </select>
    <button type="submit" class="btn btn-primary btn-sm">+ Add</button>
</form>

<!-- Focus items grouped by domain -->
{% if items %}
<div class="card">
<table id="focus-table" style="width:100%;border-collapse:collapse;font-size:0.8rem;">
<colgroup>
    <col style="width:18px"><col style="width:24px"><col style="width:20px"><col style="width:74px"><col style="width:10px">
    <col><col style="width:110px"><col style="width:120px"><col style="width:50px"><col style="width:24px">
</colgroup>
{% for domain in hierarchy %}
    <tbody>
    <tr class="focus-domain-header" data-domain-key="{{ domain.key }}" style="cursor:pointer;">
        <td colspan="10" style="padding:2px 8px;border-bottom:1px solid var(--border);background:var(--surface2);">
            <span style="display:inline-flex;align-items:center;gap:6px;">
                <svg class="focus-domain-chevron" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" style="transition:transform 0.15s;flex-shrink:0;color:var(--muted);"><polyline points="4 2 8 6 4 10"/></svg>
                <span style="width:8px;height:8px;border-radius:50%;background:{{ domain.color or 'var(--accent)' }};flex-shrink:0;"></span>
                <span style="font-weight:700;font-size:0.8rem;letter-spacing:0.03em;text-transform:uppercase;color:var(--text)">{{ domain.label }}</span>
                <span style="font-size:0.72rem;color:var(--muted);font-weight:400;">{{ domain.rows|length }}</span>
            </span>
        </td>
    </tr>
    </tbody>
    <tbody class="focus-drag-group" data-domain-key="{{ domain.key }}">
    {% for item in domain.rows %}
    <tr class="focus-drag-row" draggable="true" data-id="{{ item.id }}" style="border-bottom:1px solid var(--border);{{ 'opacity:0.6;' if item.completed }}">
        <td class="focus-row-num" style="padding:1px 2px;vertical-align:middle;text-align:center;color:var(--muted);font-size:0.72rem;font-weight:600;">{{ loop.index }}</td>
        <td style="padding:1px 1px;vertical-align:middle;">{% with reorder_url="/focus/reorder", item_id=item.id %}{% include 'partials/reorder_arrows.html' %}{% endwith %}</td>
        <td style="padding:1px 1px;vertical-align:middle;">
            <form action="/focus/{{ item.id }}/toggle" method="post" style="display:inline">
                <div class="row-check"><input type="checkbox" id="f-{{ item.id }}" {{ 'checked' if item.completed }} onchange="this.form.submit()"><label for="f-{{ item.id }}"></label></div>
            </form>
        </td>
        <td style="padding:1px 3px;vertical-align:middle;color:var(--muted);font-size:0.78rem;white-space:nowrap;">{{ item.due_date or '' }}</td>
        <td style="padding:1px 1px;vertical-align:middle;">{% if item.task_id %}<span class="priority-dot priority-{{ item.priority }}"></span>{% elif item.list_item_id %}<span style="color:var(--muted);font-size:0.85rem;">&#9776;</span>{% else %}<span style="color:var(--muted);font-size:0.85rem;">&#9679;</span>{% endif %}</td>
        <td style="padding:1px 3px;vertical-align:middle;{{ 'text-decoration:line-through;' if item.completed }}">{% if item.task_id %}{% if item.task_title %}<a href="/tasks/{{ item.task_id }}" class="focus-title">{{ item.task_title }}</a>{% else %}<span style="color:var(--muted)">[Deleted]</span>{% endif %}{% elif item.list_item_id %}{% if item.list_item_content %}<a href="/lists/{{ item.list_item_list_id }}" class="focus-title">{{ item.list_item_content }}</a>{% else %}<span style="color:var(--muted)">[Deleted]</span>{% endif %}{% else %}<a href="/focus/{{ item.id }}/edit" class="focus-title">{{ item.title }}</a>{% endif %}</td>
        <td style="padding:1px 3px;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{% if item.area_name %}<span class="row-tag">{{ item.area_name }}</span>{% endif %}</td>
        <td style="padding:1px 3px;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{% if item.project_name %}<span class="row-tag" style="background:var(--accent-soft);color:var(--accent)">{{ item.project_name }}</span>{% elif item.list_item_id and item.list_name %}<span class="row-tag" style="background:var(--purple);color:#fff">{{ item.list_name }}</span>{% endif %}</td>
        <td style="padding:1px 3px;vertical-align:middle;text-align:right;color:var(--muted);font-size:0.78rem;">{{ '~%smin'|format(item.estimated_minutes) if item.estimated_minutes else '' }}</td>
        <td style="padding:1px 1px;vertical-align:middle;">
            <form action="/focus/{{ item.id }}/remove" method="post" style="display:inline">
                <button class="btn btn-ghost btn-xs" style="color:var(--red)" title="Remove from focus">&times;</button>
            </form>
        </td>
    </tr>
    {% endfor %}
    </tbody>
{% endfor %}
</table>
<form id="focus-reorder-form" action="/focus/reorder-all" method="post" style="display:none;">
    <input type="hidden" name="item_ids" id="focus-reorder-ids">
</form>
</div>
{% else %}
<div class="empty-state mb-4"><div class="empty-state-text">No focus items yet</div></div>
{% endif %}

<!-- Add to Focus -->
<div class="card mt-3">
    <div class="card-header" style="padding:4px 10px;"><h2 class="card-title" style="font-size:0.85rem;margin:0;">Add to Focus</h2></div>

    <!-- Tab strip -->
    <div class="tab-strip" style="padding: 0 10px;">
        <a href="/focus?source_type=tasks{% if current_search %}&search={{ current_search }}{% endif %}{% if current_domain_id %}&domain_id={{ current_domain_id }}{% endif %}{% if current_project_id %}&project_id={{ current_project_id }}{% endif %}"
           class="tab-item {{ 'active' if current_source_type == 'tasks' }}">Tasks</a>
        <a href="/focus?source_type=list_items{% if current_search %}&search={{ current_search }}{% endif %}{% if current_domain_id %}&domain_id={{ current_domain_id }}{% endif %}{% if current_project_id %}&project_id={{ current_project_id }}{% endif %}"
           class="tab-item {{ 'active' if current_source_type == 'list_items' }}">List Items</a>
    </div>

    <!-- Filters -->
    <form class="filters-bar" method="get" action="/focus" id="focus-filters" style="padding: 4px 10px; border-bottom: 1px solid var(--border);">
        <input type="hidden" name="source_type" value="{{ current_source_type }}">
        <input type="text" name="search" value="{{ current_search }}" placeholder="Search..." class="filter-select" style="min-width:150px">
        <select name="domain_id" class="filter-select" id="focus-domain" onchange="this.form.submit()">
            <option value="">All Domains</option>
            {% for d in domains %}
            <option value="{{ d.id }}" {{ 'selected' if current_domain_id == d.id|string }}>{{ d.name }}</option>
            {% endfor %}
        </select>
        {% if current_source_type == 'tasks' %}
        <select name="area_id" class="filter-select" onchange="this.form.submit()">
            <option value="">All Areas</option>
            {% for a in areas %}
            <option value="{{ a.id }}" {{ 'selected' if current_area_id == a.id|string }}>{{ a.name }}</option>
            {% endfor %}
        </select>
        {% endif %}
        <select name="project_id" class="filter-select" id="focus-project" onchange="this.form.submit()">
            <option value="">All Projects</option>
            {% for p in projects %}
            <option value="{{ p.id }}" {{ 'selected' if current_project_id == p.id|string }}>{{ p.name }}</option>
            {% endfor %}
        </select>
        <button type="submit" class="btn btn-ghost btn-xs">Search</button>
        {% if current_search or current_domain_id or current_area_id or current_project_id %}
        <a href="/focus?source_type={{ current_source_type }}" class="btn btn-ghost btn-xs" style="color:var(--red)">Clear</a>
        {% endif %}
    </form>

    <!-- Available tasks -->
    {% if current_source_type == 'tasks' %}
        {% for t in available_tasks %}
        <div class="list-row{% if loop.index > 25 %} focus-hidden-item hidden{% endif %}" style="padding:3px 8px;min-height:0;">
            <span class="priority-dot priority-{{ t.priority }}"></span>
            <span class="row-title">{{ t.title }}</span>
            {% if t.project_name %}<span class="row-tag">{{ t.project_name }}</span>{% endif %}
            {% if t.due_date %}<span class="row-meta">{{ t.due_date }}</span>{% endif %}
            <form action="/focus/add" method="post" style="display:inline">
                <input type="hidden" name="task_id" value="{{ t.id }}">
                <button class="btn btn-ghost btn-xs" style="color:var(--green)">+ Focus</button>
            </form>
        </div>
        {% else %}
        <div style="padding: 8px 10px; color: var(--muted); font-size: 0.8rem;">No available tasks matching filters</div>
        {% endfor %}
        {% if available_tasks|length > 25 %}
        <div style="padding: 4px 10px; text-align:center;" id="focus-show-more-wrap">
            <button class="btn btn-ghost btn-xs" id="focus-show-more">Show all {{ available_tasks|length }} tasks</button>
        </div>
        {% endif %}

    <!-- Available list items -->
    {% elif current_source_type == 'list_items' %}
        {% for li in available_list_items %}
        <div class="list-row{% if loop.index > 25 %} focus-hidden-item hidden{% endif %}" style="padding:3px 8px;min-height:0;">
            <span style="color:var(--muted);font-size:0.85rem;margin-right:4px">&#9776;</span>
            <span class="row-title">{{ li.content|autolink }}</span>
            {% if li.list_name %}<span class="row-tag" style="background:var(--purple);color:#fff">{{ li.list_name }}</span>{% endif %}
            <form action="/focus/add" method="post" style="display:inline">
                <input type="hidden" name="list_item_id" value="{{ li.id }}">
                <button class="btn btn-ghost btn-xs" style="color:var(--green)">+ Focus</button>
            </form>
        </div>
        {% else %}
        <div style="padding: 8px 10px; color: var(--muted); font-size: 0.8rem;">No available list items matching filters</div>
        {% endfor %}
        {% if available_list_items|length > 25 %}
        <div style="padding: 4px 10px; text-align:center;" id="focus-show-more-wrap">
            <button class="btn btn-ghost btn-xs" id="focus-show-more">Show all {{ available_list_items|length }} items</button>
        </div>
        {% endif %}
    {% endif %}
</div>

<script>
(function() {
    var domainSel = document.getElementById('focus-domain');
    var projectSel = document.getElementById('focus-project');
    var currentProjectId = '{{ current_project_id }}';
    var form = document.getElementById('focus-filters');

    if (domainSel) {
        domainSel.addEventListener('change', function() {
            var did = domainSel.value;
            if (!did || !projectSel) { form.submit(); return; }
            fetch('/projects/api/by-domain?domain_id=' + encodeURIComponent(did))
                .then(function(r) { return r.json(); })
                .then(function(projects) {
                    projectSel.innerHTML = '<option value="">All Projects</option>';
                    projects.forEach(function(p) {
                        var opt = document.createElement('option');
                        opt.value = p.id;
                        opt.textContent = p.name;
                        if (p.id === currentProjectId) opt.selected = true;
                        projectSel.appendChild(opt);
                    });
                    form.submit();
                })
                .catch(function() { form.submit(); });
        });
    }

    // Show more button
    var showMoreBtn = document.getElementById('focus-show-more');
    if (showMoreBtn) {
        showMoreBtn.addEventListener('click', function() {
            var hidden = document.querySelectorAll('.focus-hidden-item.hidden');
            hidden.forEach(function(el) { el.classList.remove('hidden'); });
            document.getElementById('focus-show-more-wrap').style.display = 'none';
        });
    }

    // Domain group collapse/expand
    document.querySelectorAll('.focus-domain-header').forEach(function(header) {
        var key = 'focus-domain-' + header.dataset.domainKey;
        var tbody = document.querySelector('tbody.focus-drag-group[data-domain-key="' + header.dataset.domainKey + '"]');
        var chevron = header.querySelector('.focus-domain-chevron');
        // Restore saved state
        if (localStorage.getItem(key) === 'true') {
            tbody.style.display = 'none';
            chevron.style.transform = 'rotate(0deg)';
        } else {
            chevron.style.transform = 'rotate(90deg)';
        }
        header.addEventListener('click', function() {
            var hidden = tbody.style.display === 'none';
            tbody.style.display = hidden ? '' : 'none';
            chevron.style.transform = hidden ? 'rotate(90deg)' : 'rotate(0deg)';
            localStorage.setItem(key, !hidden);
        });
    });

    // Renumber rows within each domain group
    function renumberFocusRows() {
        document.querySelectorAll('.focus-drag-group').forEach(function(tbody) {
            var rows = tbody.querySelectorAll('.focus-drag-row');
            rows.forEach(function(row, i) {
                var numCell = row.querySelector('.focus-row-num');
                if (numCell) numCell.textContent = i + 1;
            });
        });
    }

    // Drag-and-drop reorder within domain groups
    var dragRow = null;
    var dragGroup = null;

    document.querySelectorAll('.focus-drag-row').forEach(function(row) {
        row.addEventListener('dragstart', function(e) {
            dragRow = row;
            dragGroup = row.closest('.focus-drag-group');
            row.classList.add('dragging');
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('text/plain', row.dataset.id);
        });

        row.addEventListener('dragend', function() {
            row.classList.remove('dragging');
            document.querySelectorAll('.focus-drag-row.drag-over').forEach(function(el) {
                el.classList.remove('drag-over');
            });
            // Collect all IDs across all groups in DOM order and submit
            if (dragRow) {
                var allIds = [];
                document.querySelectorAll('#focus-table .focus-drag-row').forEach(function(r) {
                    allIds.push(r.dataset.id);
                });
                document.getElementById('focus-reorder-ids').value = allIds.join(',');
                document.getElementById('focus-reorder-form').submit();
            }
            dragRow = null;
            dragGroup = null;
        });

        row.addEventListener('dragover', function(e) {
            e.preventDefault();
            if (!dragRow || row === dragRow) return;
            // Constrain to same domain group
            if (row.closest('.focus-drag-group') !== dragGroup) return;
            e.dataTransfer.dropEffect = 'move';
            document.querySelectorAll('.focus-drag-row.drag-over').forEach(function(el) {
                el.classList.remove('drag-over');
            });
            row.classList.add('drag-over');
        });

        row.addEventListener('dragleave', function() {
            row.classList.remove('drag-over');
        });

        row.addEventListener('drop', function(e) {
            e.preventDefault();
            if (!dragRow || row === dragRow) return;
            if (row.closest('.focus-drag-group') !== dragGroup) return;
            row.classList.remove('drag-over');
            // Insert dragged row before or after target based on position
            var tbody = dragGroup;
            var rows = Array.from(tbody.querySelectorAll('.focus-drag-row'));
            var dragIdx = rows.indexOf(dragRow);
            var targetIdx = rows.indexOf(row);
            if (dragIdx < targetIdx) {
                tbody.insertBefore(dragRow, row.nextSibling);
            } else {
                tbody.insertBefore(dragRow, row);
            }
            renumberFocusRows();
        });
    });
})();
</script>
{% endblock %}