{% extends "layout.html" %}
{% block content %}
    <!-- Active Timer Section -->
    <div class="card active-section" id="activeSection" style="{% if not current_entry %}display:none;{% endif %}">
        <h3 id="activeName" style="text-align: center; color: {{ current_entry.activity_color if current_entry else '#333' }}">
            Currently Tracking: {{ current_entry.activity_name if current_entry else '' }}
        </h3>
        
        <div id="activeSubcatContainer" style="text-align: center; {% if not current_entry or not current_entry.subcategory %}display:none;{% endif %} margin: 0 auto 10px; display: table;">
            <div id="activeSubcatDisplay" style="background: #eee; padding: 2px 10px; border-radius: 10px;">
                {{ current_entry.subcategory if current_entry else '' }}
            </div>
        </div>
        
        <p id="activeNote" style="text-align: center; color: #666; font-style: italic; {% if not current_entry or not current_entry.note %}display:none;{% endif %}">
            "{{ current_entry.note if current_entry else '' }}"
        </p>

        <div class="timer-display" id="timer">00:00:00</div>
        
        <!-- Tasks for current activity -->
        {% if tasks %}
        <div style="margin: 1rem 0; padding: 1rem; background: rgba(255,255,255,0.7); border-radius: 5px;">
            <h4>Active Tasks:</h4>
            {% for task in tasks %}
                <div style="margin-bottom: 5px; display: flex; align-items: center;">
                    <input type="checkbox" id="task_{{ task._id }}" 
                           {% if task.status == 'completed' %}checked{% endif %}
                           onchange="toggleTask('{{ task._id }}', this)">
                    <label for="task_{{ task._id }}" style="margin-left: 10px; flex-grow: 1; {% if task.status == 'completed' %}text-decoration: line-through;{% endif %}">
                        <a href="{{ url_for('task_detail', task_id=task._id) }}">{{ task.name }}</a>
                    </label>
                </div>
            {% endfor %}
        </div>
        {% endif %}

        <form action="{{ url_for('stop_timer') }}" method="POST" style="text-align: center;">
            <button type="submit" class="btn btn-danger" style="font-size: 1.2rem; width: 100%;">Stop Activity</button>
        </form>
    </div>

    <!-- Script for Timer -->
    <script>
        let startTime = {% if current_entry %}{{ current_entry.start_time.timestamp() * 1000 }}{% else %}null{% endif %};
        let timerInterval;

        function updateTimer() {
            if (!startTime) return;
            const now = new Date().getTime();
            const diff = now - startTime;
            
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
            
            const timerEl = document.getElementById("timer");
            if (timerEl) {
                timerEl.innerHTML = 
                    (hours < 10 ? "0" + hours : hours) + ":" +
                    (minutes < 10 ? "0" + minutes : minutes) + ":" +
                    (seconds < 10 ? "0" + seconds : seconds);
            }
        }

        if (startTime) {
            timerInterval = setInterval(updateTimer, 1000);
            updateTimer(); 
        }
    </script>
    <!-- End Script -->


    <!-- Start Activity Section -->
    <div class="activity-grid" style="margin-top: 2rem;">
        {% for act in activities %}
            <div style="position: relative;">
                <div class="activity-card" 
                     style="background-color: {{ act.color }}"
                     data-name="{{ act.name }}"
                     data-id="{{ act._id }}"
                     data-color="{{ act.color }}"
                     data-subcategories='{{ act.subcategories|default([])|tojson }}'
                     onclick="startActivityImmediate(this)">
                    <span>{{ act.name }}</span>
                </div>
                <!-- Small Edit Link -->
                <a href="{{ url_for('edit_activity', activity_id=act._id) }}" 
                   style="position: absolute; top: 5px; right: 5px; color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.8rem; padding: 5px;"
                   title="Edit Activity">
                    Edit
                </a>
            </div>
        {% endfor %}
        
        <!-- Add New Button -->
        <div class="activity-card" style="background-color: #95a5a6; color: white;" onclick="document.getElementById('newActivityForm').style.display='block'">
            <span>+ New Activity</span>
        </div>
    </div>

    <!-- Hidden Form for Starting Activity with Note -->
    
    <!-- Custom Start Modal -->
    <div id="startModal" style="display:none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center;">
        <div class="card" style="width: 90%; max-width: 400px;">
            <h3 id="modalTitle">Activity Started</h3>
            
            <form id="startForm" action="{{ url_for('update_active_entry') }}" method="POST">
                
                <div id="subcategoryContainer" style="display: none; margin-bottom: 1rem;">
                    <label>Subcategory / Context</label>
                    <select name="subcategory" id="modalSubcatSelect" style="width: 100%; padding: 0.5rem;">
                        <option value="">-- None --</option>
                    </select>
                </div>

                <label>Note (Optional)</label>
                <input type="text" name="note" placeholder="What are you working on?" autocomplete="off">
                
                <div style="margin-top: 1rem; display: flex; justify-content: space-between;">
                    <!-- Cancel just closes modal, timer keeps running -->
                    <button type="button" class="btn" style="background: #95a5a6;" onclick="document.getElementById('startModal').style.display='none'">Skip</button>
                    <button type="submit" class="btn" style="background: #27ae60;">Update Details</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function startActivityImmediate(element) {
            const id = element.getAttribute('data-id');
            const name = element.getAttribute('data-name');
            const color = element.getAttribute('data-color');
            const subcats = JSON.parse(element.getAttribute('data-subcategories') || '[]');
            
            // 1. Start Background Timer
            fetch('/start_timer_bg/' + id, { method: 'POST' })
            .then(res => res.json())
            .then(data => {
                if(data.status === 'success') {
                    // 2. Start Local Timer UI
                    startTime = new Date(data.start_time).getTime();
                    clearInterval(timerInterval);
                    timerInterval = setInterval(updateTimer, 1000);
                    updateTimer();

                    // Update UI State
                    document.getElementById('activeSection').style.display = 'block';
                    document.getElementById('activeName').innerText = "Currently Tracking: " + name;
                    document.getElementById('activeName').style.color = color;
                    
                    // Reset Note/Subcat display
                    document.getElementById('activeNote').style.display = 'none';
                    document.getElementById('activeSubcatContainer').style.display = 'none';

                    // 3. Open Modal for Details
                    openDetailsModal(name, subcats);
                }
            });
        }

        function openDetailsModal(name, subcats) {
            document.getElementById('modalTitle').innerText = name + " Started";
            
            // Setup Subcategories
            const subcatContainer = document.getElementById('subcategoryContainer');
            const select = document.getElementById('modalSubcatSelect');
            select.innerHTML = '<option value="">-- None --</option>'; 
            
            if (subcats && subcats.length > 0) {
                subcatContainer.style.display = 'block';
                subcats.forEach(sc => {
                    const opt = document.createElement('option');
                    opt.value = sc;
                    opt.innerText = sc;
                    select.appendChild(opt);
                });
            } else {
                subcatContainer.style.display = 'none';
            }
            
            // Show Modal
            document.getElementById('startModal').style.display = 'flex';
            document.querySelector('#startForm input[name="note"]').focus();
        }
    </script>

    <!-- Create Activity Form -->
    <div id="newActivityForm" class="card" style="display:none; margin-top: 2rem;">
        <h3>Create New Activity Category</h3>
        <form action="{{ url_for('add_activity') }}" method="POST" onsubmit="prepareTasksList()">
            <label>Name</label>
            <input type="text" name="name" required placeholder="e.g. Household">
            
            <label>Color</label>
            <input type="color" name="color" value="#3498db" style="width:100%; height:40px; border:none;">
            
            <label>Default Tasks (Template)</label>
            <p style="font-size: 0.8rem; color: var(--text-secondary); margin-top: -10px;">
                These tasks will be created automatically every time you start this activity.
            </p>
            
            <div style="display: flex; gap: 5px; margin-bottom: 10px;">
                <input type="text" id="newTaskInput" placeholder="Add task name..." style="margin-bottom: 0;">
                <button type="button" class="btn" style="background: #27ae60;" onclick="addNewTask()">Add</button>
            </div>

            <ul id="newTasksListDisplay" style="list-style: none; padding: 0; margin-bottom: 1rem;">
                <!-- Items will be injected here -->
            </ul>
            
            <input type="hidden" name="tasks_list_data" id="tasksListData">
            
            <div style="margin-top: 1rem;">
                <button type="submit" class="btn">Create</button>
                <button type="button" class="btn" style="background: var(--text-secondary)" onclick="document.getElementById('newActivityForm').style.display='none'">Cancel</button>
            </div>
        </form>
    </div>

    <script>
        // Existing timer scripts...
        // ...existing code...

        // New Task List Logic for Activity Creation
        let newActivityTasks = [];
        
        function addNewTask() {
            const input = document.getElementById('newTaskInput');
            const val = input.value.trim();
            if (val) {
                newActivityTasks.push(val);
                input.value = '';
                renderNewActivityTasks();
            }
        }

        function removeNewTask(index) {
            newActivityTasks.splice(index, 1);
            renderNewActivityTasks();
        }

        function renderNewActivityTasks() {
            const list = document.getElementById('newTasksListDisplay');
            list.innerHTML = '';
            newActivityTasks.forEach((item, index) => {
                const li = document.createElement('li');
                li.style.background = '#f7f7f5';
                li.style.border = '1px solid var(--border-dim)';
                li.style.margin = '5px 0';
                li.style.padding = '8px';
                li.style.borderRadius = '4px';
                li.style.display = 'flex';
                li.style.justifyContent = 'space-between';
                li.style.alignItems = 'center';
                li.style.fontSize = '0.9rem';
                
                li.innerHTML = `
                    <span>${item}</span>
                    <span onclick="removeNewTask(${index})" style="cursor: pointer; color: var(--danger-color); font-weight: bold; padding: 0 5px;">&times;</span>
                `;
                list.appendChild(li);
            });
        }

        function prepareTasksList() {
            document.getElementById('tasksListData').value = newActivityTasks.join(',');
        }
    </script>
{% endblock %}