<!-- [DEF:TaskHistory:Component] -->
<!--
@SEMANTICS: task, history, list, status, monitoring
@PURPOSE: Displays a list of recent tasks with their status and allows selecting them for viewing logs.
@LAYER: UI
@RELATION: USES -> frontend/src/lib/stores.js
@RELATION: USES -> frontend/src/lib/api.js (inferred)
-->
<script>
    import { onMount, onDestroy } from 'svelte';
    import { selectedTask } from '../lib/stores.js';
    
    let tasks = [];
    let loading = true;
    let error = "";
    let interval;
    
    async function fetchTasks() {
        try {
            const res = await fetch('/api/tasks?limit=10');
            if (!res.ok) throw new Error('Failed to fetch tasks');
            tasks = await res.json();

            // [DEBUG] Check for tasks requiring attention
            tasks.forEach(t => {
                if (t.status === 'AWAITING_MAPPING' || t.status === 'AWAITING_INPUT') {
                    console.log(`[TaskHistory] Task ${t.id} is in state ${t.status}. Input required: ${t.input_required}`);
                }
            });
            
            // Update selected task if it exists in the list (for status updates)
            if ($selectedTask) {
                const updatedTask = tasks.find(t => t.id === $selectedTask.id);
                if (updatedTask && updatedTask.status !== $selectedTask.status) {
                    selectedTask.set(updatedTask);
                }
            }
        } catch (e) {
            error = e.message;
        } finally {
            loading = false;
        }
    }
    
    async function clearTasks(status = null) {
        if (!confirm('Are you sure you want to clear tasks?')) return;
        try {
            let url = '/api/tasks';
            const params = new URLSearchParams();
            if (status) params.append('status', status);
            
            const res = await fetch(`${url}?${params.toString()}`, { method: 'DELETE' });
            if (!res.ok) throw new Error('Failed to clear tasks');
            
            await fetchTasks();
        } catch (e) {
            error = e.message;
        }
    }

    async function selectTask(task) {
        try {
            // Fetch the full task details (including logs) before setting it as selected
            const res = await fetch(`/api/tasks/${task.id}`);
            if (res.ok) {
                const fullTask = await res.json();
                selectedTask.set(fullTask);
            } else {
                // Fallback to the list version if fetch fails
                selectedTask.set(task);
            }
        } catch (e) {
            console.error("Failed to fetch full task details:", e);
            selectedTask.set(task);
        }
    }
    
    function getStatusColor(status) {
        switch (status) {
            case 'SUCCESS': return 'bg-green-100 text-green-800';
            case 'FAILED': return 'bg-red-100 text-red-800';
            case 'RUNNING': return 'bg-blue-100 text-blue-800';
            case 'AWAITING_INPUT': return 'bg-orange-100 text-orange-800';
            case 'AWAITING_MAPPING': return 'bg-yellow-100 text-yellow-800';
            default: return 'bg-gray-100 text-gray-800';
        }
    }
    
    onMount(() => {
        fetchTasks();
        interval = setInterval(fetchTasks, 5000); // Poll every 5s
    });
    
    onDestroy(() => {
        clearInterval(interval);
    });
</script>

<div class="bg-white shadow overflow-hidden sm:rounded-lg mb-8">
    <div class="px-4 py-5 sm:px-6 flex justify-between items-center">
        <h3 class="text-lg leading-6 font-medium text-gray-900">
            Recent Tasks
        </h3>
        <div class="flex space-x-4 items-center">
            <div class="relative inline-block text-left group">
                <button class="text-sm text-red-600 hover:text-red-900 focus:outline-none flex items-center py-2">
                    Clear Tasks
                    <svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                </button>
                <!-- Added a transparent bridge to prevent menu closing when moving cursor -->
                <div class="absolute h-2 w-full top-full left-0"></div>
                <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden group-hover:block z-50">
                    <div class="py-1">
                        <button on:click={() => clearTasks()} class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Clear All Non-Running</button>
                        <button on:click={() => clearTasks('FAILED')} class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Clear Failed</button>
                        <button on:click={() => clearTasks('AWAITING_INPUT')} class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Clear Awaiting Input</button>
                    </div>
                </div>
            </div>
            <button
                on:click={fetchTasks}
                class="text-sm text-indigo-600 hover:text-indigo-900 focus:outline-none"
            >
                Refresh
            </button>
        </div>
    </div>
    
    {#if loading && tasks.length === 0}
        <div class="p-4 text-center text-gray-500">Loading tasks...</div>
    {:else if error}
        <div class="p-4 text-center text-red-500">{error}</div>
    {:else if tasks.length === 0}
        <div class="p-4 text-center text-gray-500">No recent tasks found.</div>
    {:else}
        <ul class="divide-y divide-gray-200">
            {#each tasks as task}
                <li>
                    <button 
                        class="w-full text-left block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
                        class:bg-indigo-50={$selectedTask && $selectedTask.id === task.id}
                        on:click={() => selectTask(task)}
                    >
                        <div class="px-4 py-4 sm:px-6">
                            <div class="flex items-center justify-between">
                                <p class="text-sm font-medium text-indigo-600 truncate">
                                    {task.plugin_id}
                                    <span class="text-gray-500 text-xs ml-2">({task.id.slice(0, 8)})</span>
                                </p>
                                <div class="ml-2 flex-shrink-0 flex">
                                    <p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {getStatusColor(task.status)}">
                                        {task.status}
                                    </p>
                                </div>
                            </div>
                            <div class="mt-2 sm:flex sm:justify-between">
                                <div class="sm:flex">
                                    <p class="flex items-center text-sm text-gray-500">
                                        {#if task.params.from_env && task.params.to_env}
                                            {task.params.from_env} &rarr; {task.params.to_env}
                                        {:else}
                                            Params: {Object.keys(task.params).length} keys
                                        {/if}
                                    </p>
                                </div>
                                <div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                                    <p>
                                        Started: {new Date(task.started_at || task.created_at || Date.now()).toLocaleString()}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </button>
                </li>
            {/each}
        </ul>
    {/if}
</div>
<!-- [/DEF:TaskHistory] -->