{% extends "layout.html" %}
{% block content %}
<div style="max-width: 800px; margin: auto;">
    
    <!-- Top Header -->
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
        <h2 style="margin: 0;">Tasks</h2>
        <button class="btn" onclick="openTaskModal()">+ New Task</button>
    </div>

    <!-- Search Bar -->
    <div style="margin-bottom: 1.5rem;">
        <input type="text" id="taskSearchInput" placeholder="Search tasks..." onkeyup="applyFilters()" 
               style="background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%23999%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: 10px center; background-size: 16px; padding-left: 36px;">
    </div>

    <!-- Filters -->
    <div style="border-bottom: 1px solid var(--border-dim); margin-bottom: 2rem; padding-bottom: 0.5rem; display: flex; gap: 20px;">
        <div class="filter-tab active" id="filter-open" onclick="setFilter('open')" data-filter="open" style="cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text-primary);">
            Open
        </div>
        <div class="filter-tab" id="filter-today" onclick="setFilter('today')" data-filter="today" style="cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text-secondary);">
            Due Today
        </div>
        <div class="filter-tab" id="filter-completed" onclick="setFilter('completed')" data-filter="completed" style="cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text-secondary);">
            Completed
        </div>
    </div>

    <!-- Grouped Lists -->
    <div id="tasks-container">
        {% for act in activities %}
            {% set act_tasks = [] %}
            <!-- Poor man's filtering in Jinja: iterate all tasks to find matches -->
            {% for t in tasks %}
                {% if t.activity_id|string == act._id|string %}
                    {% if act_tasks.append(t) %}{% endif %}
                {% endif %}
            {% endfor %}

            <div class="task-group">
                <div style="display: flex; align-items: center; padding: 10px 0;">
                    <span style="width: 8px; height: 8px; border-radius: 50%; background: {{ act.color }}; margin-right: 10px;"></span>
                    <h3 style="margin: 0; font-size: 1rem; color: var(--text-primary);">{{ act.name }}</h3>
                    <button onclick="openTaskModal('{{ act._id }}')" 
                            style="background: none; border: none; cursor: pointer; color: var(--text-secondary); margin-left: 8px; font-size: 1.1rem; padding: 0 5px;"
                            title="Add task to {{ act.name }}">+</button>
                </div>

                <!-- Always render the UL, just empty if no tasks initially -->
                <ul style="list-style: none; padding: 0; margin-top: 0;">
                    {% for task in act_tasks %}
                        <!-- Inline Task Row -->
                        <li class="task-item-row" 
                            data-due-date="{{ task.due_date.strftime('%Y-%m-%d') if task.due_date else '' }}"
                            data-status="{{ task.status }}"
                            style="padding: 8px 0; border-bottom: 1px solid var(--border-dim); display: flex; justify-content: space-between; align-items: center;">
                            
                            <div style="display: flex; align-items: center; gap: 10px; overflow: hidden;">
                                <a href="{{ url_for('task_detail', task_id=task._id) }}" class="task-name-link" style="text-decoration: none; color: var(--text-primary); font-weight: 500; {% if task.status == 'completed' %}text-decoration: line-through; color: var(--text-secondary);{% endif %}">
                                    {{ task.name }}
                                </a>
                                {% if task.due_date %}
                                    <span style="font-size: 0.75rem; color: var(--text-secondary); background: var(--bg-input); padding: 2px 6px; border-radius: 4px;">
                                        {{ task.due_date.strftime('%d. %b %H:%M') }}
                                    </span>
                                {% endif %}
                            </div>
                            
                            <div style="display: flex; gap: 10px;">
                                <form action="{{ url_for('toggle_timer', activity_id=task.activity_id) }}" method="POST" style="margin: 0;">
                                    <input type="hidden" name="note" value="{{ task.name }}">
                                    <button type="submit" title="Start Timer" style="background: none; border: 1px solid var(--border-dim); cursor: pointer; border-radius: 4px; padding: 2px 6px; color: var(--text-secondary); font-size: 0.8rem;">
                                        ▶
                                    </button>
                                </form>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endfor %}

        <!-- Tasks without Activity -->
        {% set no_act_tasks = [] %}
        {% for t in tasks %}
            {% if not t.activity_id %}
                {% if no_act_tasks.append(t) %}{% endif %}
            {% endif %}
        {% endfor %}

        {% if no_act_tasks %}
        <div class="task-group">
            <div style="display: flex; align-items: center; padding: 10px 0;">
                <span style="width: 8px; height: 8px; border-radius: 50%; background: #ccc; margin-right: 10px;"></span>
                <h3 style="margin: 0; font-size: 1rem; color: var(--text-primary);">Inbox / No Activity</h3>
                <button onclick="openTaskModal('')" style="background: none; border: none; cursor: pointer; color: var(--text-secondary); margin-left: 8px; font-size: 1.1rem; padding: 0 5px;">+</button>
            </div>
            <ul style="list-style: none; padding: 0; margin-top: 0;">
                {% for task in no_act_tasks %}
                    <!-- Inline Task Row -->
                    <li class="task-item-row" 
                        data-due-date="{{ task.due_date.strftime('%Y-%m-%d') if task.due_date else '' }}"
                        data-status="{{ task.status }}"
                        style="padding: 8px 0; border-bottom: 1px solid var(--border-dim); display: flex; justify-content: space-between; align-items: center;">
                        
                        <div style="display: flex; align-items: center; gap: 10px; overflow: hidden;">
                            <a href="{{ url_for('task_detail', task_id=task._id) }}" style="text-decoration: none; color: var(--text-primary); font-weight: 500; {% if task.status == 'completed' %}text-decoration: line-through; color: var(--text-secondary);{% endif %}">
                                {{ task.name }}
                            </a>
                            {% if task.due_date %}
                                <span style="font-size: 0.75rem; color: var(--text-secondary); background: var(--bg-input); padding: 2px 6px; border-radius: 4px;">
                                    {{ task.due_date.strftime('%d. %b %H:%M') }}
                                </span>
                            {% endif %}
                        </div>
                        
                        <div style="display: flex; gap: 10px;">
                            <!-- No start button usually here if no activity linked -->
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    </div>

    <!-- Templates Toggle (Kept minimal) -->
    {% if templates %}
    <div style="margin-top: 3rem; border-top: 1px solid var(--border-dim); padding-top: 1rem;">
        <details>
            <summary style="cursor: pointer; color: var(--text-secondary); font-size: 0.9rem; font-weight: 500;">Manage Auto-Added Templates</summary>
            <div class="card" style="margin-top: 1rem; background: #fafafa;">
                <ul style="padding-left: 20px; margin: 0;">
                {% for t in templates %}
                    <li style="margin-bottom: 5px;">
                        <strong>{{ t.name }}</strong> 
                        <span style="color: #666; font-size: 0.8rem;">(on {{ t.activity_name|default('Unknown') }})</span>
                        <a href="{{ url_for('task_detail', task_id=t._id) }}" style="font-size: 0.8rem; margin-left: 10px;">Edit</a>
                    </li>
                {% endfor %}
                </ul>
            </div>
        </details>
    </div>
    {% endif %}

</div>

<!-- Modal for New Task -->
<div id="taskModal" class="modal-backdrop">
    <div class="modal-card">
        <h3 style="margin-bottom: 1.5rem;">Create New Task</h3>
        <form action="{{ url_for('create_task') }}" method="POST">
            <label>Task Name</label>
            <input type="text" name="name" id="modalInputName" required placeholder="What needs to be done?" autocomplete="off">
            
            <label>Activity</label>
            <select name="activity_id" id="modalSelectActivity">
                <option value="">-- No Activity --</option>
                {% for act in activities %}
                <option value="{{ act._id }}">{{ act.name }}</option>
                {% endfor %}
            </select>
            
            <label>Due Date</label>
            <input type="datetime-local" name="due_date">
            
            <div style="margin-bottom: 1.5rem; display: flex; align-items: start; gap: 10px; margin-top: 1.5rem;">
                <input type="checkbox" id="is_template" name="is_template" value="1" style="width: auto; margin-top: 4px;">
                <label for="is_template" style="margin-top: 0; text-transform: none; font-weight: 400; line-height: 1.4;">
                    <strong>Save as Template?</strong><br>
                    <small>Auto-add this task every time the selected activity starts.</small>
                </label>
            </div>
            
            <div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 2rem;">
                <button type="button" class="btn" style="background: transparent; color: var(--text-secondary); border: 1px solid var(--border-dim);" onclick="closeTaskModal()">Cancel</button>
                <button type="submit" class="btn">Create Task</button>
            </div>
        </form>
    </div>
</div>

<!-- Scripts removed dead macros -->
<script>
    function openTaskModal(activityId) {
        const modal = document.getElementById('taskModal');
        const select = document.getElementById('modalSelectActivity');
        const nameInput = document.getElementById('modalInputName');
        
        if (activityId !== undefined) {
            select.value = activityId;
        } else {
            select.value = "";
        }
        
        modal.classList.add('show');
        nameInput.focus();
    }

    function closeTaskModal() {
        document.getElementById('taskModal').classList.remove('show');
    }

    // Close on backdrop click
    document.getElementById('taskModal').addEventListener('click', function(e) {
        if (e.target === this) closeTaskModal();
    });

    // Filtering Logic
    let currentFilterType = 'open';

    function setFilter(type) {
        currentFilterType = type;
        
        document.querySelectorAll('.filter-tab').forEach(el => {
            el.style.color = 'var(--text-secondary)';
            el.classList.remove('active');
        });
        document.getElementById('filter-' + type).style.color = 'var(--text-primary)';
        document.getElementById('filter-' + type).classList.add('active');
        
        applyFilters();
    }
    
    function applyFilters() {
        const searchVal = document.getElementById('taskSearchInput').value.toLowerCase();
        const taskItems = document.querySelectorAll('.task-item-row');
        const today = new Date().toISOString().split('T')[0];

        taskItems.forEach(item => {
            const status = item.getAttribute('data-status');
            const dateStr = item.getAttribute('data-due-date');
            const name = item.querySelector('.task-name-link').innerText.toLowerCase();
            
            let show = false;
            
            // 1. Check Tabs
            if (currentFilterType === 'open') {
                if (status !== 'completed') show = true;
            } else if (currentFilterType === 'today') {
                if (status !== 'completed' && dateStr && dateStr.startsWith(today)) show = true;
            } else if (currentFilterType === 'completed') {
                if (status === 'completed') show = true;
            }
            
            // 2. Check Search
            if (show && searchVal) {
                if (!name.includes(searchVal)) show = false;
            }
            
            item.style.display = show ? 'flex' : 'none';
        });
    }
    
    // Initialize filter
    setFilter('open');
</script>

{% endblock %}