{% extends "base.html" %}
{% from "components/ui.html" import page_header, breadcrumb_nav, button, filter_badge %}

{% block content %}
{% set breadcrumbs = [
    {'text': _('Time Tracking')},
    {'text': _('Log Time') if not is_duplicate else _('Duplicate Entry')}
] %}

{{ page_header(
    icon_class='fas fa-clock',
    title_text=_('Duplicate Time Entry') if is_duplicate else _('Log Time Manually'),
    subtitle_text=_('Create a copy of a previous entry with new times') if is_duplicate else _('Create a new time entry'),
    breadcrumbs=breadcrumbs,
    actions_html=None
) }}

{% if is_duplicate and original_entry %}
<div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6 max-w-3xl mx-auto">
    <div class="flex items-start gap-3">
        <i class="fas fa-info-circle text-blue-600 dark:text-blue-400 mt-1"></i>
        <div>
            <p class="text-sm text-blue-800 dark:text-blue-200">
                <strong>{{ _('Duplicating entry:') }}</strong> 
                {% if original_entry.project %}
                    {{ original_entry.project.name }}{% if original_entry.task %} - {{ original_entry.task.name }}{% endif %}
                {% elif original_entry.client %}
                    {{ original_entry.client.name }} <span class="text-xs text-gray-500">({{ _('Direct') }})</span>
                {% endif %}
            </p>
            <p class="text-xs text-blue-600 dark:text-blue-300 mt-1">
                {{ _('Original:') }} {{ original_entry.start_time|user_datetime('%Y-%m-%d %H:%M') }} {{ _('to') }} {{ original_entry.end_time|user_datetime('%Y-%m-%d %H:%M') if original_entry.end_time else _('N/A') }} ({{ original_entry.duration_formatted }})
            </p>
        </div>
    </div>
</div>
{% endif %}

<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow max-w-3xl mx-auto">
    <form method="POST" action="{{ url_for('timer.manual_entry') }}" autocomplete="off" novalidate data-validate-form id="manualEntryForm">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="project_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Project') }}</label>
                    <select name="project_id" id="project_id" class="form-input">
                        <option value="">{{ _('Select a project (optional)') }}</option>
                        {% for project in projects %}
                        <option value="{{ project.id }}" {% if selected_project_id == project.id %}selected{% endif %}>{{ project.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label for="client_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Client') }}</label>
                    <select name="client_id" id="client_id" class="form-input">
                        <option value="">{{ _('Select a client (optional)') }}</option>
                        {% for client in clients %}
                        <option value="{{ client.id }}" {% if selected_client_id == client.id %}selected{% endif %}>{{ 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 class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="task_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Task (optional)') }}</label>
                    <select name="task_id" id="task_id" class="form-input" data-selected-task-id="{{ selected_task_id or '' }}" {% if not selected_project_id %}disabled{% endif %}>
                        <option value="">{{ _('No task') }}</option>
                    </select>
                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark mt-1">{{ _('Tasks load after selecting a project') }}</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="start_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Start Date') }}</label>
                    <input type="date" name="start_date" id="start_date" required class="form-input" value="{{ prefill_start_date or '' }}">
                </div>
                <div>
                    <label for="start_time" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Start Time') }}</label>
                    <input type="time" name="start_time" id="start_time" required class="form-input" value="{{ prefill_start_time or '' }}">
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="end_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('End Date') }}</label>
                    <input type="date" name="end_date" id="end_date" required class="form-input" value="{{ prefill_end_date or '' }}">
                </div>
                <div>
                    <label for="end_time" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('End Time') }}</label>
                    <input type="time" name="end_time" id="end_time" required class="form-input" value="{{ prefill_end_time or '' }}">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="md:col-span-2">
                    <label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Notes') }}</label>
                    <textarea name="notes" id="notes" rows="4" class="form-input" placeholder="{{ _('What did you work on?') }}">{{ prefill_notes or '' }}</textarea>
                </div>
                <div class="space-y-4">
                    <div>
                        <label for="tags" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Tags') }}</label>
                        <input type="text" name="tags" id="tags" class="form-input" placeholder="{{ _('tag1, tag2') }}" value="{{ prefill_tags or '' }}">
                    </div>
                    <div class="flex items-center gap-3">
                        <input type="checkbox" id="billable" name="billable" class="h-5 w-5 rounded border-gray-300 text-primary focus:ring-0" {% if prefill_billable is not defined or prefill_billable %}checked{% endif %}>
                        <label for="billable" class="text-sm text-gray-700 dark:text-gray-300">{{ _('Billable') }}</label>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-8 border-t border-border-light dark:border-border-dark pt-6 flex justify-end gap-3">
            <button type="reset" class="px-4 py-2 rounded-lg border border-border-light dark:border-border-dark text-text-light dark:text-text-dark hover:bg-background-light dark:hover:bg-background-dark">{{ _('Clear') }}</button>
            <button type="submit" class="bg-primary text-white px-4 py-2 rounded-lg">{{ _('Log Time') }}</button>
        </div>
    </form>
</div>
<script>
document.addEventListener('DOMContentLoaded', async function(){
    // Default values for date/time to now
    const today = new Date().toISOString().split('T')[0];
    const now = new Date();
    const hh = String(now.getHours()).padStart(2,'0');
    const mm = String(now.getMinutes()).padStart(2,'0');
    const startDate = document.getElementById('start_date');
    const endDate = document.getElementById('end_date');
    const startTime = document.getElementById('start_time');
    const endTime = document.getElementById('end_time');
    if (startDate && !startDate.value) startDate.value = today;
    if (endDate && !endDate.value) endDate.value = today;
    if (startTime && !startTime.value) startTime.value = `${hh}:${mm}`;
    if (endTime && !endTime.value) endTime.value = `${hh}:${mm}`;

    // Dynamic task loading when a project is chosen
    const projectSelect = document.getElementById('project_id');
    const clientSelect = document.getElementById('client_id');
    const taskSelect = document.getElementById('task_id');
    const noTaskText = '{{ _('No task') }}';
    const failedToLoadTasksText = '{{ _('Failed to load tasks') }}';
    
    // Function to ensure only one of project or client is selected
    function syncProjectClientSelection() {
        if (!projectSelect || !clientSelect) return;
        projectSelect.addEventListener('change', function() {
            if (this.value) {
                clientSelect.value = '';
            }
            loadTasks(this.value);
        });
        clientSelect.addEventListener('change', function() {
            if (this.value) {
                projectSelect.value = '';
                if (taskSelect) {
                    taskSelect.innerHTML = '<option value="">' + noTaskText + '</option>';
                    taskSelect.disabled = true;
                }
            }
        });
    }
    
    async function loadTasks(projectId){
        if (!taskSelect) return;
        if (!projectId){
            taskSelect.innerHTML = '<option value="">' + noTaskText + '</option>';
            taskSelect.disabled = true;
            return;
        }
        try{
            const resp = await fetch(`/api/tasks?project_id=${projectId}`);
            if (!resp.ok) throw new Error(failedToLoadTasksText);
            const data = await resp.json();
            const tasks = Array.isArray(data.tasks) ? data.tasks : [];
            taskSelect.innerHTML = '<option value="">' + noTaskText + '</option>';
            tasks.forEach(t => {
                const opt = document.createElement('option');
                opt.value = String(t.id);
                opt.textContent = t.name;
                taskSelect.appendChild(opt);
            });
            const pre = taskSelect.getAttribute('data-selected-task-id');
            if (pre){
                const found = Array.from(taskSelect.options).some(o => o.value === pre);
                if (found) taskSelect.value = pre;
                taskSelect.setAttribute('data-selected-task-id','');
            }
            taskSelect.disabled = false;
        }catch(e){
            taskSelect.innerHTML = '<option value="">' + noTaskText + '</option>';
            taskSelect.disabled = true;
        }
    }
    
    syncProjectClientSelection();
    if (projectSelect){
        if (projectSelect.value){ loadTasks(projectSelect.value); }
    }
    
    // Form validation: ensure either project or client is selected and validate time range
    // Use capture phase to run before other handlers
    const form = document.getElementById('manualEntryForm');
    if (form) {
        // Store original button state to restore if needed
        const submitBtn = form.querySelector('button[type="submit"]');
        let originalButtonHTML = submitBtn ? submitBtn.innerHTML : null;
        
        form.addEventListener('submit', function(e) {
            // Validate project or client selection
            const projectVal = projectSelect ? projectSelect.value : '';
            const clientVal = clientSelect ? clientSelect.value : '';
            if (!projectVal && !clientVal) {
                e.preventDefault();
                e.stopImmediatePropagation(); // Stop other handlers from running
                
                // Ensure button state is preserved
                if (submitBtn && originalButtonHTML) {
                    submitBtn.innerHTML = originalButtonHTML;
                    submitBtn.disabled = false;
                }
                
                        // Show error message using toast notification
                        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);
                        }
                        // After showing error, ensure button is still in correct state
                        if (submitBtn && originalButtonHTML) {
                            submitBtn.innerHTML = originalButtonHTML;
                            submitBtn.disabled = false;
                        }
                return false;
            }
            
            // Validate time range before submission
            const startDate = document.getElementById('start_date');
            const startTime = document.getElementById('start_time');
            const endDate = document.getElementById('end_date');
            const endTime = document.getElementById('end_time');
            
            if (startDate && startTime && endDate && endTime && 
                startDate.value && startTime.value && endDate.value && endTime.value) {
                const start = new Date(`${startDate.value}T${startTime.value}:00`);
                const end = new Date(`${endDate.value}T${endTime.value}:00`);
                
                if (!isNaN(start.getTime()) && !isNaN(end.getTime())) {
                    if (end <= start) {
                        e.preventDefault();
                        e.stopImmediatePropagation(); // Stop other handlers from running
                        
                        // Ensure button state is preserved
                        if (submitBtn && originalButtonHTML) {
                            submitBtn.innerHTML = originalButtonHTML;
                            submitBtn.disabled = false;
                        }
                        
                        // Show error message using toast notification
                        const errorMsg = '{{ _("End time must be after start time") }}';
                        if (window.toastManager && typeof window.toastManager.error === 'function') {
                            window.toastManager.error(errorMsg, '{{ _("Error") }}', 5000);
                        } else {
                            alert(errorMsg);
                        }
                        // After showing error, ensure button is still in correct state
                        if (submitBtn && originalButtonHTML) {
                            submitBtn.innerHTML = originalButtonHTML;
                            submitBtn.disabled = false;
                        }
                        return false;
                    }
                }
            }
        }, true); // Use capture phase to run before other handlers
    }

    // Apply Time Entry Template if provided via sessionStorage or query param
    // Skip template application when duplicating an entry to preserve the original entry's task
    const isDuplicating = {{ 'true' if is_duplicate else 'false' }};
    if (!isDuplicating) {
        try {
            let tpl = null;
            const raw = sessionStorage.getItem('activeTemplate');
            if (raw) {
                try { tpl = JSON.parse(raw); } catch(_) { tpl = null; }
            }
            if (!tpl) {
                const params = new URLSearchParams(window.location.search);
                const tplId = params.get('template');
                if (tplId) {
                    try {
                        const resp = await fetch(`/api/templates/${tplId}`);
                        if (resp.ok) tpl = await resp.json();
                    } catch(_) {}
                }
            }
            if (tpl && typeof tpl === 'object') {
                // Preselect project and task
                if (tpl.project_id && projectSelect) {
                    projectSelect.value = String(tpl.project_id);
                    if (clientSelect) clientSelect.value = '';
                    // Preselect task after load
                    if (taskSelect) {
                        taskSelect.setAttribute('data-selected-task-id', tpl.task_id ? String(tpl.task_id) : '');
                    }
                    await loadTasks(projectSelect.value);
                }

            // Notes, tags, billable
            const notes = document.getElementById('notes');
            const tagsInput = document.getElementById('tags');
            const billable = document.getElementById('billable');
            if (notes && tpl.default_notes) notes.value = tpl.default_notes;
            if (tagsInput && tpl.tags) tagsInput.value = tpl.tags;
            if (billable != null && typeof tpl.billable === 'boolean') billable.checked = !!tpl.billable;

            // Duration → set end time relative to start if provided
            const minutes = (() => {
                if (typeof tpl.default_duration_minutes === 'number') return tpl.default_duration_minutes;
                if (typeof tpl.default_duration === 'number') return Math.round(tpl.default_duration * 60);
                return 0;
            })();
            if (minutes > 0) {
                const sd = document.getElementById('start_date');
                const st = document.getElementById('start_time');
                const ed = document.getElementById('end_date');
                const et = document.getElementById('end_time');
                if (sd && st && ed && et && sd.value && st.value) {
                    const start = new Date(`${sd.value}T${st.value}:00`);
                    if (!isNaN(start.getTime())) {
                        const end = new Date(start.getTime() + minutes * 60000);
                        const yyyy = end.getFullYear();
                        const mm = String(end.getMonth() + 1).padStart(2,'0');
                        const dd = String(end.getDate()).padStart(2,'0');
                        const hh = String(end.getHours()).padStart(2,'0');
                        const mi = String(end.getMinutes()).padStart(2,'0');
                        ed.value = `${yyyy}-${mm}-${dd}`;
                        et.value = `${hh}:${mi}`;
                    }
                }
            }

                // Clear after applying so it does not persist
                try { sessionStorage.removeItem('activeTemplate'); } catch(_) {}
            }
        } catch(_) {}
    }
});
</script>
{% endblock %}