{% extends "layout.html" %}
{% block content %}
    <!-- Active Timer Section -->
    {% if current_entry %}
    <div class="card active-section">
        <h3 style="text-align: center; color: {{ current_entry.activity_color }}">
            Currently Tracking: {{ current_entry.activity_name }}
        </h3>
        
        {% if current_entry.note %}
            <p style="text-align: center; color: #666; font-style: italic;">"{{ current_entry.note }}"</p>
        {% endif %}

        <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>Tasks related to {{ current_entry.activity_name }}:</h4>
            {% for task in tasks %}
                <div style="margin-bottom: 5px;">
                    <input type="checkbox" id="task_{{ task._id }}" 
                           onchange="completeTask('{{ task.name }}', '{{ current_entry._id }}', this)">
                    <label for="task_{{ task._id }}">{{ task.name }}</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>

        <script>
            // Timer Logic
            const startTime = new Date("{{ current_entry.start_time }}").getTime();
            
            function updateTimer() {
                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);
                
                document.getElementById("timer").innerHTML = 
                    (hours < 10 ? "0" + hours : hours) + ":" +
                    (minutes < 10 ? "0" + minutes : minutes) + ":" +
                    (seconds < 10 ? "0" + seconds : seconds);
            }
            setInterval(updateTimer, 1000);
            updateTimer(); // run immediately

            // AJAX for Tasks
            function completeTask(name, entryId, checkbox) {
                if(!checkbox.checked) return; // Only track completion for now
                
                const formData = new FormData();
                formData.append('task_name', name);
                formData.append('entry_id', entryId);

                fetch('/complete_task', { method: 'POST', body: formData })
                .then(r => r.json())
                .then(data => {
                    checkbox.disabled = true; // Prevent double logging
                    checkbox.parentElement.style.textDecoration = "line-through";
                });
            }
        </script>
    </div>
    {% endif %}

    <!-- Start Activity Section -->
    <div class="activity-grid">
        {% for act in activities %}
            <!-- Clicking opens a small modal or submits form directly. Let's do a form with a prompt for note -->
            <div class="activity-card" 
                 style="background-color: {{ act.color }}"
                 onclick="startActivity('{{ act._id }}', '{{ act.name }}')">
                <span>{{ act.name }}</span>
            </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 -->
    <form id="startForm" method="POST" style="display:none;">
        <input type="hidden" name="note" id="startNote">
    </form>

    <script>
        function startActivity(id, name) {
            let note = prompt("Start " + name + "?\nAdd a note (optional):");
            if (note === null) return; // Cancelled
            
            let form = document.getElementById('startForm');
            form.action = "/toggle_timer/" + id;
            document.getElementById('startNote').value = note;
            form.submit();
        }
    </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">
            <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 (comma separated)</label>
            <input type="text" name="tasks" placeholder="e.g. Laundry, Dishes, Trash">
            
            <button type="submit" class="btn">Create</button>
            <button type="button" class="btn" style="background: #7f8c8d" onclick="this.parentElement.parentElement.style.display='none'">Cancel</button>
        </form>
    </div>
{% endblock %}