{% extends "base.html" %}
{% from "components/cards.html" import info_card, stat_card %}
{% from "components/ui.html" import confirm_dialog %}

{% block content %}
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
    <div>
        <h1 class="text-2xl font-bold">{{ _('Dashboard') }}</h1>
        <p class="text-text-muted-light dark:text-text-muted-dark">{{ _("Here's a quick overview of your work.") }}</p>
    </div>
    <div class="text-sm text-text-muted-light dark:text-text-muted-dark mt-2 md:mt-0">
        <i class="fas fa-tachometer-alt"></i> / {{ _('Dashboard') }}
    </div>
    </div>

<!-- Key Stats with Sparklines -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow-md dashboard-widget" id="todayHours">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-label text-text-muted-light dark:text-text-muted-dark">Today's Hours</h3>
            <i class="fas fa-clock text-primary"></i>
        </div>
        <div class="flex items-baseline gap-2 mb-4">
            <span class="text-h1 text-text-light dark:text-text-dark stat-value" id="todayHoursValue">{{ "%.2f"|format(today_hours) }}</span> <span class="text-body-sm text-text-muted-light dark:text-text-muted-dark">hours</span>
        </div>
        <div class="sparkline-container" data-sparkline='[2.5, 3.2, 2.8, 3.5, 4.1, 3.9, 4.2]' data-color="#3b82f6" id="sparkline-today"></div>
    </div>
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow-md dashboard-widget" id="weekHours">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-label text-text-muted-light dark:text-text-muted-dark">Week's Hours</h3>
            <i class="fas fa-calendar-week text-green-600"></i>
        </div>
        <div class="flex items-baseline gap-2 mb-4">
            <span class="text-h1 text-text-light dark:text-text-dark stat-value" id="weekHoursValue">{{ "%.2f"|format(week_hours) }}</span> <span class="text-body-sm text-text-muted-light dark:text-text-muted-dark">hours</span>
        </div>
        <div class="sparkline-container" data-sparkline='[18.5, 20.2, 22.8, 24.5, 26.1, 28.9, 30.2]' data-color="#10b981" id="sparkline-week"></div>
    </div>
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow-md dashboard-widget" id="monthHours">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-label text-text-muted-light dark:text-text-muted-dark">Month's Hours</h3>
            <i class="fas fa-calendar-alt text-purple-600"></i>
        </div>
        <div class="flex items-baseline gap-2 mb-4">
            <span class="text-h1 text-text-light dark:text-text-dark stat-value" id="monthHoursValue">{{ "%.2f"|format(month_hours) }}</span> <span class="text-body-sm text-text-muted-light dark:text-text-muted-dark">hours</span>
        </div>
        <div class="sparkline-container" data-sparkline='[120.5, 135.2, 148.8, 162.5, 176.1, 188.9, 202.2]' data-color="#8b5cf6" id="sparkline-month"></div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Left Column: Active Timer & Recent Entries -->
    <div class="lg:col-span-2 space-y-6">
        <!-- Active Timer -->
        <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow-md dashboard-widget animated-card">
            <div class="flex items-center justify-between mb-2">
                <h2 class="text-lg font-semibold">{{ _('Timer') }}</h2>
                {% if not active_timer %}
                <button type="button" id="openStartTimer" class="bg-primary text-white px-4 py-2 rounded-lg btn-press shadow-md transition-smooth">{{ _('Start Timer') }}</button>
                {% endif %}
            </div>
            {% if active_timer %}
                <div class="flex justify-between items-center">
                    <div>
                        <p class="font-semibold">
                            {% if active_timer.project %}
                                {{ active_timer.project.name }}
                            {% elif active_timer.client %}
                                {{ active_timer.client.name }} <span class="text-xs text-gray-500">({{ _('Direct') }})</span>
                            {% else %}
                                {{ _('No project') }}
                            {% endif %}
                        </p>
                        <p class="text-sm text-text-muted-light dark:text-text-muted-dark">
                            {{ _('Started at') }} {{ active_timer.start_time|user_time('%I:%M %p') }}
                        </p>
                    </div>
                    <form action="{{ url_for('timer.stop_timer') }}" method="POST" class="inline">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button type="submit" class="bg-red-500 text-white px-4 py-2 rounded-lg btn-press shadow-md transition-smooth action-danger">{{ _('Stop Timer') }}</button>
                    </form>
                </div>
            {% else %}
                <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('No active timer.') }}</p>
            {% endif %}
        </div>

        <!-- Recent Entries -->
        <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow-md dashboard-widget animated-card">
            <h2 class="text-lg font-semibold mb-4">Recent Entries</h2>
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead class="border-b border-border-light dark:border-border-dark">
                        <tr>
                            <th class="p-4">{{ _('Source') }}</th>
                            <th class="p-4">{{ _('Task') }}</th>
                            <th class="p-4">{{ _('Notes') }}</th>
                            <th class="p-4">{{ _('Tags') }}</th>
                            <th class="p-4">{{ _('Duration') }}</th>
                            <th class="p-4">{{ _('Date') }}</th>
                            <th class="p-4">{{ _('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for entry in recent_entries %}
                        <tr class="border-b border-border-light dark:border-border-dark">
                            <td class="p-4">
                                {% if entry.project %}
                                    <a href="{{ url_for('projects.view_project', project_id=entry.project.id) }}" class="text-primary hover:text-primary-dark hover:underline">
                                        {{ entry.project.name }}
                                    </a>
                                {% elif entry.client %}
                                    <a href="{{ url_for('clients.view_client', client_id=entry.client.id) }}" class="text-primary hover:text-primary-dark hover:underline">
                                        {{ entry.client.name }} <span class="text-xs text-gray-500">({{ _('Direct') }})</span>
                                    </a>
                                {% else %}
                                    {{ _('N/A') }}
                                {% endif %}
                            </td>
                            <td class="p-4">{{ entry.task.name if entry.task else '-' }}</td>
                            <td class="p-4">{% if entry.notes %}<span title="{{ entry.notes }}">{{ entry.notes[:60] }}{% if entry.notes|length > 60 %}...{% endif %}</span>{% else %}-{% endif %}</td>
                            <td class="p-4">{{ entry.tags or '-' }}</td>
                            <td class="p-4">{{ entry.duration_formatted }}</td>
                            <td class="p-4">{{ entry.start_time|user_datetime('%Y-%m-%d %H:%M') }}</td>
                            <td class="p-4">
                                <div class="flex gap-2">
                                    <a href="{{ url_for('timer.resume_timer', timer_id=entry.id) }}" class="text-green-600 hover:text-green-800" title="{{ _('Resume - Start a new timer with same properties') }}">
                                        <i class="fas fa-play"></i>
                                    </a>
                                    <a href="{{ url_for('timer.edit_timer', timer_id=entry.id) }}" class="text-primary hover:text-primary-dark" title="{{ _('Edit entry') }}">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="{{ url_for('timer.duplicate_timer', timer_id=entry.id) }}" class="text-blue-600 hover:text-blue-800" title="{{ _('Duplicate entry') }}">
                                        <i class="fas fa-copy"></i>
                                    </a>
                                    {% if current_user.is_admin or entry.user_id == current_user.id %}
                                    <form id="confirmDeleteEntry-{{ entry.id }}-form" method="POST" action="{{ url_for('timer.delete_timer', timer_id=entry.id) }}" class="hidden">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    </form>
                                    <button type="button" class="text-red-600 hover:text-red-800" title="{{ _('Delete entry') }}" onclick="document.getElementById('confirmDeleteEntry-{{ entry.id }}').classList.remove('hidden')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="7" class="p-4 text-center text-text-muted-light dark:text-text-muted-dark">{{ _('No recent entries found.') }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Right Column: Real Insights -->
    <div class="space-y-6">
        <!-- Weekly Goal Widget -->
        {% if settings and settings.ui_allow_weekly_goals and current_user.ui_show_weekly_goals %}
            {% if current_week_goal %}
            <div class="bg-gradient-to-br from-blue-500 to-purple-600 p-6 rounded-lg shadow-lg dashboard-widget animated-card text-white">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold">
                        <i class="fas fa-bullseye mr-2"></i>
                        {{ _('Weekly Goal') }}
                    </h2>
                    <a href="{{ url_for('weekly_goals.index') }}" class="text-white hover:text-gray-200 transition">
                        <i class="fas fa-external-link-alt"></i>
                    </a>
                </div>
                <div class="mb-4">
                    <div class="flex justify-between text-sm mb-2 opacity-90">
                        <span>{{ current_week_goal.actual_hours }}h / {{ current_week_goal.target_hours }}h</span>
                        <span>{{ current_week_goal.progress_percentage }}%</span>
                    </div>
                    <div class="w-full bg-white bg-opacity-30 rounded-full h-3">
                        <div class="bg-white rounded-full h-3 transition-all duration-300" 
                             style="width: {{ current_week_goal.progress_percentage }}%"></div>
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-3 text-sm">
                    <div class="bg-white bg-opacity-20 rounded p-2">
                        <div class="opacity-90 text-xs">{{ _('Remaining') }}</div>
                        <div class="font-semibold">{{ current_week_goal.remaining_hours }}h</div>
                    </div>
                    <div class="bg-white bg-opacity-20 rounded p-2">
                        <div class="opacity-90 text-xs">{{ _('Days Left') }}</div>
                        <div class="font-semibold">{{ current_week_goal.days_remaining }}</div>
                    </div>
                </div>
                {% if current_week_goal.days_remaining > 0 and current_week_goal.remaining_hours > 0 %}
                <div class="mt-3 text-sm opacity-90">
                    <i class="fas fa-info-circle mr-1"></i>
                    {{ _('Need') }} {{ current_week_goal.average_hours_per_day }}h/day {{ _('to reach goal') }}
                </div>
                {% endif %}
            </div>
            {% else %}
            <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow animated-card border-2 border-dashed border-gray-300 dark:border-gray-600">
                <div class="text-center">
                    <i class="fas fa-bullseye text-4xl text-gray-400 mb-3"></i>
                    <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                        {{ _('No Weekly Goal') }}
                    </h3>
                    <p class="text-xs text-gray-600 dark:text-gray-400 mb-4">
                        {{ _('Set a weekly time goal to track your progress') }}
                    </p>
                    <a href="{{ url_for('weekly_goals.create') }}" 
                       class="inline-block bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition">
                        <i class="fas fa-plus mr-2"></i> {{ _('Create Goal') }}
                    </a>
                </div>
            </div>
            {% endif %}
        {% endif %}

        <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow-md dashboard-widget animated-card">
            <h2 class="text-h3 text-text-light dark:text-text-dark mb-4">{{ _('Top Projects (30 days)') }}</h2>
            <ul class="space-y-3">
                {% for item in top_projects %}
                <li class="flex items-center justify-between">
                    <div>
                        <div class="font-medium">{{ item.project.name }}</div>
                        <div class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Billable') }}: {{ '%.1f'|format(item.billable_hours) }}h</div>
                    </div>
                    <div class="text-right font-semibold">{{ '%.1f'|format(item.hours) }}h</div>
                </li>
                {% else %}
                <li class="text-text-muted-light dark:text-text-muted-dark">{{ _('No activity in the last 30 days.') }}</li>
                {% endfor %}
            </ul>
        </div>

        <!-- Activity Timeline Widget -->
        <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow-md dashboard-widget">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-h3 text-text-light dark:text-text-dark">{{ _('Recent Activity') }}</h2>
                <span class="real-time-indicator">
                    <span>Live</span>
                </span>
            </div>
            <div id="activityTimeline" class="activity-timeline">
                {% if recent_activities %}
                    {% for activity in recent_activities %}
                        <div class="activity-timeline-item">
                            <div class="flex items-start gap-3">
                                <div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                                    <i class="fas fa-circle text-sm text-blue-600 dark:text-blue-400"></i>
                                </div>
                                <div class="flex-1">
                                    <p class="text-sm text-text-light dark:text-text-dark">{{ activity.description or 'Activity' }}</p>
                                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ activity.created_at|local_datetime_short }}</p>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="text-center py-8 text-text-muted-light dark:text-text-muted-dark">
                        <i class="fas fa-inbox text-4xl mb-4 opacity-50"></i>
                        <p>No recent activity</p>
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- BuyMeACoffee Widget -->
        <div class="bg-gradient-to-br from-amber-500 via-orange-500 to-amber-600 p-6 rounded-lg shadow-lg dashboard-widget animated-card text-white">
            <div class="flex items-start justify-between mb-3">
                <div class="flex-1">
                    <h2 class="text-lg font-semibold mb-1">
                        <i class="fas fa-mug-saucer mr-2"></i>
                        {{ _('Support TimeTracker') }}
                    </h2>
                    <p class="text-sm opacity-90 mb-4">
                        {{ _('Enjoying TimeTracker? Consider buying me a coffee to support continued development!') }}
                    </p>
                </div>
            </div>
            <a href="https://buymeacoffee.com/DryTrix" 
               target="_blank" 
               rel="noopener noreferrer"
               class="inline-flex items-center justify-center w-full bg-white text-amber-600 px-4 py-3 rounded-lg font-semibold hover:bg-amber-50 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                <i class="fas fa-mug-saucer mr-2"></i>
                {{ _('Buy me a coffee') }}
                <i class="fas fa-external-link-alt ml-2 text-xs"></i>
            </a>
        </div>
    </div>
    <!-- Delete Entry Confirmation Dialogs -->
    {% for entry in recent_entries %}
    {% if current_user.is_admin or entry.user_id == current_user.id %}
    {{ confirm_dialog(
        'confirmDeleteEntry-' ~ entry.id,
        'Delete Time Entry',
        'Are you sure you want to delete this time entry? This action cannot be undone.',
        'Delete',
        'Cancel',
        'danger'
    ) }}
    {% endif %}
    {% endfor %}

    <!-- Start Timer Modal -->
    <div id="startTimerModal" class="fixed inset-0 z-50 hidden">
        <div class="absolute inset-0 bg-black/50" data-overlay></div>
        <div class="relative max-w-lg mx-auto mt-24 bg-card-light dark:bg-card-dark text-text-light dark:text-text-dark rounded-lg shadow-lg">
            <div class="p-4 border-b border-border-light dark:border-border-dark flex items-center justify-between">
                <div class="text-lg font-semibold">{{ _('Start Timer') }}</div>
                <button type="button" data-close class="px-2 py-1 text-sm hover:bg-background-light dark:hover:bg-background-dark rounded">{{ _('Close') }}</button>
            </div>
            <form method="POST" action="{{ url_for('timer.start_timer') }}" class="p-4">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="startTimerProject" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Project') }}</label>
                            <select id="startTimerProject" name="project_id" class="form-input">
                                <option value="">{{ _('Select a project (optional)') }}</option>
                                {% for project in active_projects %}
                                <option value="{{ project.id }}">{{ project.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div>
                            <label for="startTimerClient" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Client') }}</label>
                            <select id="startTimerClient" name="client_id" class="form-input">
                                <option value="">{{ _('Select a client (optional)') }}</option>
                                {% for client in active_clients %}
                                <option value="{{ client.id }}">{{ client.name }}</option>
                                {% endfor %}
                            </select>
                            <p class="text-xs text-text-muted-light dark:text-text-muted-dark mt-1">
                                {{ _('Select either a project or a client') }}
                            </p>
                        </div>
                    </div>
                    <div>
                        <label for="startTimerTask" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Task (optional)') }}</label>
                        <div class="relative">
                            <input 
                                type="text" 
                                id="startTimerTask" 
                                name="task_name" 
                                list="startTimerTaskList" 
                                autocomplete="off"
                                class="form-input w-full"
                                placeholder="{{ _('Select existing task or type new task name') }}"
                            />
                            <input type="hidden" id="startTimerTaskId" name="task_id" value="" />
                            <datalist id="startTimerTaskList">
                                <!-- Options will be populated dynamically via JavaScript -->
                            </datalist>
                        </div>
                        <p class="text-xs text-text-muted-light dark:text-text-muted-dark mt-1">
                            {{ _('Select an existing task or type a new task name to create it') }}
                        </p>
                    </div>
                    <div>
                        <label for="startTimerNotes" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Notes (optional)') }}</label>
                        <textarea id="startTimerNotes" name="notes" rows="3" class="form-input" placeholder="{{ _('What are you working on?') }}"></textarea>
                    </div>
                    {% if templates %}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('Or use a template') }}</label>
                        <div class="space-y-2">
                            {% for template in templates %}
                            <button type="button" 
                                    onclick="applyTemplate({{ template.id }})"
                                    class="w-full text-left p-3 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                                <div class="flex items-center justify-between">
                                    <div class="flex-1">
                                        <div class="font-medium text-sm">{{ template.name }}</div>
                                        {% if template.project %}
                                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                            <i class="fas fa-folder"></i> {{ template.project.name }}
                                            {% if template.task %} → {{ template.task.name }}{% endif %}
                                        </div>
                                        {% endif %}
                                    </div>
                                    <i class="fas fa-chevron-right text-gray-400"></i>
                                </div>
                            </button>
                            {% endfor %}
                            <a href="{{ url_for('time_entry_templates.list_templates') }}" 
                               class="block text-center text-sm text-blue-600 dark:text-blue-400 hover:underline pt-2">
                                {{ _('View all templates') }} →
                            </a>
                        </div>
                    </div>
                    {% endif %}
                </div>
                <div class="mt-6 flex justify-end">
                    <button type="submit" class="bg-primary text-white px-4 py-2 rounded-lg">{{ _('Start') }}</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}


{% block scripts_extra %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        try {
            if (typeof anime !== 'undefined') {
                anime({
                    targets: '.animated-card',
                    translateY: [20, 0],
                    opacity: [0, 1],
                    delay: (window.anime && anime.stagger) ? anime.stagger(100) : undefined,
                    duration: 500,
                    easing: 'easeOutQuad'
                });
            }
        } catch(e) { /* no-op if animation lib missing */ }

        const modal = document.getElementById('startTimerModal');
        // Open via event delegation to avoid missed binding
        document.addEventListener('click', (e) => {
            const btn = e.target.closest('#openStartTimer');
            if (btn && modal) {
                e.preventDefault();
                modal.classList.remove('hidden');
            }
        });
        if (modal) {
            modal.querySelector('[data-close]')?.addEventListener('click', () => modal.classList.add('hidden'));
            modal.addEventListener('click', (e) => { if (e.target === modal || e.target.hasAttribute('data-overlay')) modal.classList.add('hidden'); });

            const projectSelect = document.getElementById('startTimerProject');
            const clientSelect = document.getElementById('startTimerClient');
            const taskInput = document.getElementById('startTimerTask');
            const taskInputId = document.getElementById('startTimerTaskId');
            const taskDatalist = document.getElementById('startTimerTaskList');
            let availableTasks = []; // Store tasks for matching

            async function loadTasksForProject(pid, preserveTaskId = false) {
                if (!taskInput || !taskDatalist) return;
                
                // Preserve current task_id if requested
                const preservedTaskId = preserveTaskId && taskInputId ? taskInputId.value : null;
                const preservedTaskName = preserveTaskId && taskInput ? taskInput.value : null;
                
                // Clear datalist and task input
                taskDatalist.innerHTML = '';
                taskInput.value = '';
                taskInputId.value = '';
                availableTasks = [];
                
                if (!pid) {
                    taskInput.disabled = false;
                    return;
                }
                
                try {
                    const res = await fetch(`/api/projects/${pid}/tasks`, { credentials: 'same-origin' });
                    const data = await res.json();
                    if (data && data.tasks) {
                        availableTasks = data.tasks;
                        data.tasks.forEach(t => {
                            const opt = document.createElement('option');
                            opt.value = t.name;
                            opt.dataset.taskId = t.id;
                            taskDatalist.appendChild(opt);
                        });
                    }
                    
                    // Restore preserved values if requested
                    if (preserveTaskId && preservedTaskId) {
                        taskInputId.value = preservedTaskId;
                        if (preservedTaskName) {
                            taskInput.value = preservedTaskName;
                        }
                    }
                    
                    taskInput.disabled = false;
                } catch (err) {
                    console.error('Failed to load tasks', err);
                    taskInput.disabled = true;
                }
            }

            // Handle task input change to detect selection vs typing
            if (taskInput) {
                taskInput.addEventListener('input', () => {
                    const inputValue = taskInput.value.trim();
                    // Try to find matching task
                    const matchedTask = availableTasks.find(t => t.name === inputValue);
                    if (matchedTask) {
                        taskInputId.value = matchedTask.id;
                    } else {
                        // Clear task_id if no match (new task name)
                        taskInputId.value = '';
                    }
                });
                
                // Also handle selection from datalist
                taskInput.addEventListener('change', () => {
                    const inputValue = taskInput.value.trim();
                    const matchedTask = availableTasks.find(t => t.name === inputValue);
                    if (matchedTask) {
                        taskInputId.value = matchedTask.id;
                    } else {
                        taskInputId.value = '';
                    }
                });
            }

            if (projectSelect && clientSelect && taskInput) {
                projectSelect.addEventListener('change', () => {
                    const pid = projectSelect.value;
                    if (pid) {
                        clientSelect.value = '';
                    }
                    loadTasksForProject(pid);
                });

                clientSelect.addEventListener('change', () => {
                    const cid = clientSelect.value;
                    if (cid) {
                        projectSelect.value = '';
                        taskInput.value = '';
                        taskInputId.value = '';
                        taskDatalist.innerHTML = '';
                        availableTasks = [];
                        taskInput.disabled = true;
                    } else {
                        taskInput.disabled = false;
                    }
                });
            }
            
            // Form validation: ensure either project or client is selected
            const startTimerForm = modal ? modal.querySelector('form') : null;
            if (startTimerForm) {
                // Store original button state to restore if needed
                const submitBtn = startTimerForm.querySelector('button[type="submit"]');
                let originalButtonHTML = submitBtn ? submitBtn.innerHTML : null;
                
                startTimerForm.addEventListener('submit', async function(e) {
                    e.preventDefault();
                    
                    // Validate project or client selection
                    const projectVal = projectSelect ? projectSelect.value : '';
                    const clientVal = clientSelect ? clientSelect.value : '';
                    if (!projectVal && !clientVal) {
                        const errorMsg = '{{ _("Please select either a project or a client") }}';
                        if (window.toastManager && typeof window.toastManager.error === 'function') {
                            window.toastManager.error(errorMsg, '{{ _("Error") }}', 5000);
                        } else {
                            alert(errorMsg);
                        }
                        return false;
                    }
                    
                    // Handle new task creation if needed
                    const taskName = taskInput ? taskInput.value.trim() : '';
                    const taskId = taskInputId ? taskInputId.value : '';
                    
                    // If task name is provided but no task_id, create the task first
                    if (taskName && !taskId && projectVal) {
                        try {
                            // Disable submit button
                            if (submitBtn) {
                                submitBtn.disabled = true;
                                if (originalButtonHTML) {
                                    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>{{ _("Creating task...") }}';
                                }
                            }
                            
                            // Create task via AJAX
                            const csrfToken = startTimerForm.querySelector('input[name="csrf_token"]')?.value;
                            const createTaskRes = await fetch('/api/tasks/create', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-Requested-With': 'XMLHttpRequest',
                                    'X-CSRFToken': csrfToken || ''
                                },
                                credentials: 'same-origin',
                                body: JSON.stringify({
                                    name: taskName,
                                    project_id: parseInt(projectVal)
                                })
                            });
                            
                            if (!createTaskRes.ok) {
                                const errorData = await createTaskRes.json().catch(() => ({}));
                                throw new Error(errorData.error || 'Failed to create task');
                            }
                            
                            const taskData = await createTaskRes.json();
                            // Set the task_id in the hidden field BEFORE reloading
                            if (taskInputId && taskData.id) {
                                taskInputId.value = taskData.id;
                                // Also update the input to show the created task name
                                if (taskInput) {
                                    taskInput.value = taskData.name;
                                }
                            }
                            
                            // Reload tasks list to include the new task, preserving the task_id
                            await loadTasksForProject(projectVal, preserveTaskId=true);
                            
                        } catch (error) {
                            console.error('Failed to create task:', error);
                            const errorMsg = '{{ _("Failed to create task: ") }}' + (error.message || error);
                            if (window.toastManager && typeof window.toastManager.error === 'function') {
                                window.toastManager.error(errorMsg, '{{ _("Error") }}', 5000);
                            } else {
                                alert(errorMsg);
                            }
                            // Restore button state
                            if (submitBtn && originalButtonHTML) {
                                submitBtn.innerHTML = originalButtonHTML;
                                submitBtn.disabled = false;
                            }
                            return false;
                        }
                    }
                    
                    // Ensure task_id is set if we have a task name that matches an existing task
                    if (taskName && !taskInputId.value) {
                        const matchedTask = availableTasks.find(t => t.name === taskName);
                        if (matchedTask && taskInputId) {
                            taskInputId.value = matchedTask.id;
                        }
                    }
                    
                    // Restore button state
                    if (submitBtn && originalButtonHTML) {
                        submitBtn.innerHTML = originalButtonHTML;
                        submitBtn.disabled = false;
                    }
                    
                    // Debug: Log form data before submission
                    if (taskInputId && taskInputId.value) {
                        console.log('Submitting form with task_id:', taskInputId.value);
                    }
                    
                    // Now submit the form normally
                    startTimerForm.submit();
                }, true); // Use capture phase to run before other handlers
            }
        }
        
        // Template application function
        window.applyTemplate = async function(templateId) {
            try {
                const response = await fetch(`/api/templates/${templateId}`, { credentials: 'same-origin' });
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}`);
                }
                const template = await response.json();
                
                // Get form elements (re-select to avoid scope issues)
                const projectSelect = document.getElementById('startTimerProject');
                const taskInput = document.getElementById('startTimerTask');
                const taskInputId = document.getElementById('startTimerTaskId');
                const notesField = document.getElementById('startTimerNotes');
                
                if (!projectSelect || !taskInput || !notesField) {
                    throw new Error('Form elements not found');
                }
                
                // Apply template values to form
                if (template.project_id) {
                    projectSelect.value = template.project_id;
                    // Trigger change event to load tasks
                    projectSelect.dispatchEvent(new Event('change'));
                    
                    // Wait a bit for tasks to load, then select task
                    setTimeout(() => {
                        if (template.task_id && taskInputId) {
                            taskInputId.value = template.task_id;
                            // Find task name from loaded tasks
                            const taskDatalist = document.getElementById('startTimerTaskList');
                            if (taskDatalist) {
                                const matchingOption = Array.from(taskDatalist.options).find(
                                    opt => opt.dataset.taskId === String(template.task_id)
                                );
                                if (matchingOption) {
                                    taskInput.value = matchingOption.value;
                                }
                            }
                        }
                    }, 300);
                }
                if (template.default_notes) {
                    notesField.value = template.default_notes;
                }
                
                // Mark template as used
                fetch(`/api/templates/${templateId}/use`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': '{{ csrf_token() }}'
                    }
                }).catch(() => {});  // Silently fail if marking fails
                
            } catch (error) {
                console.error('Error applying template:', error);
                alert('Failed to apply template. Please try again.');
            }
        };
    });
</script>
{% endblock %}