{% extends "base.html" %}
{% from 'components/_macros.html' import status_badge, empty_state %}

{% block content %}
<script>
    // Pre-render Jinja2 data for Alpine.js
    window.workflowsData = {
        executionIds: {{ executions | map(attribute='execution_id') | list | tojson | safe }},
        executionCount: {{ executions | length }},
        allExecutions: {{ executions | tojson | safe }}
    };
</script>

<div
    x-data="{
        selectedExecutions: [],
        currentExecutionId: null,
        currentExecution: null,
        loading: false,
        filterWorkflow: '',
        allExecutions: window.workflowsData.allExecutions,
        pollInterval: null,

        init() {
            const hash = window.location.hash.slice(1);
            if (hash) {
                this.selectExecution(hash);
            } else {
                const firstExecution = this.$el.querySelector('[data-execution-id]');
                if (firstExecution) {
                    this.selectExecution(firstExecution.dataset.executionId);
                }
            }

            // Start polling for updates
            this.startPolling();

            // Pause polling when tab is hidden to save resources
            document.addEventListener('visibilitychange', () => {
                if (document.hidden) {
                    this.stopPolling();
                } else {
                    this.startPolling();
                }
            });
        },

        startPolling() {
            // Poll immediately
            this.fetchExecutions();

            // Then poll every 0.5 seconds
            this.pollInterval = setInterval(() => {
                this.fetchExecutions();
            }, 500);
        },

        stopPolling() {
            if (this.pollInterval) {
                clearInterval(this.pollInterval);
                this.pollInterval = null;
            }
        },

        async fetchExecutions() {
            try {
                const response = await fetch('/api/executions?limit=100');
                if (!response.ok) return;

                const executions = await response.json();
                this.allExecutions = executions;

                // Refresh current execution details if one is selected
                if (this.currentExecutionId) {
                    const currentExists = executions.find(
                        ex => ex.execution_id === this.currentExecutionId
                    );
                    if (currentExists) {
                        // Refresh details view
                        this.selectExecution(this.currentExecutionId);
                    }
                }
            } catch (error) {
                // Silently fail - will retry on next poll
                console.error('Poll error:', error);
            }
        },

        get uniqueWorkflowNames() {
            const names = [...new Set(this.allExecutions.map(ex => ex.workflow_name))];
            return names.sort();
        },

        get filteredExecutions() {
            if (!this.filterWorkflow) {
                return this.allExecutions;
            }
            return this.allExecutions.filter(ex => ex.workflow_name === this.filterWorkflow);
        },

        get hasSelectedExecutions() {
            return this.selectedExecutions.length > 0;
        },

        get allSelected() {
            return this.selectedExecutions.length === this.filteredExecutions.length;
        },

        toggleSelectAll() {
            if (this.allSelected) {
                this.selectedExecutions = [];
            } else {
                this.selectedExecutions = this.filteredExecutions.map(ex => ex.execution_id);
            }
        },

        async selectExecution(executionId) {
            if (this.currentExecutionId === executionId) return;

            this.currentExecutionId = executionId;
            this.loading = true;

            // Update URL hash
            window.location.hash = executionId;

            try {
                const response = await fetch(`/api/executions/${executionId}`);
                if (!response.ok) throw new Error('Failed to fetch execution');

                this.currentExecution = await response.json();
            } catch (error) {
                console.error('Error loading execution:', error);
                this.currentExecution = { error: error.message };
            } finally {
                this.loading = false;
            }
        },

        async timeTravel(workflowName, stepName) {
            if (!confirm(`Resume workflow from step '${stepName}'?`)) return;

            try {
                const response = await fetch(`/workflows/${workflowName}/resume?step_name=${stepName}`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: '{}'
                });

                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

                const data = await response.json();
                alert(`✓ New execution created!\\nExecution ID: ${data.execution_id}\\nStatus: ${data.status}`);

                // Reload page to show new execution
                window.location.reload();
            } catch (error) {
                alert(`Time travel failed: ${error.message}`);
            }
        },

        async deleteSelected() {
            if (this.selectedExecutions.length === 0) return;

            const confirmed = confirm(`Are you sure you want to delete ${this.selectedExecutions.length} execution(s)? This cannot be undone.`);
            if (!confirmed) return;

            try {
                const response = await fetch('/api/executions', {
                    method: 'DELETE',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(this.selectedExecutions)
                });

                if (response.ok) {
                    const result = await response.json();
                    alert(result.message);
                    window.location.reload();
                } else {
                    const error = await response.json();
                    alert('Error: ' + error.detail);
                }
            } catch (error) {
                alert('Failed to delete executions: ' + error);
            }
        }
    }"
    class="flex flex-col h-[calc(100vh-120px)] -mx-5 -my-5"
>
    <!-- Fixed Headers Row -->
    <div class="flex border-b border-terminal-border flex-shrink-0">
        <!-- Runs Header -->
        <div class="w-1/4 min-w-[300px] px-5 py-4 bg-terminal-bg-light border-r border-terminal-border">
            <h2 class="text-lg font-semibold mb-2.5 text-terminal-text">Runs</h2>
            {% if executions %}
            <div class="flex gap-2.5 items-center justify-between">
                <div class="flex gap-2.5 items-center">
                    <label class="flex items-center gap-1.5 cursor-pointer text-xs text-terminal-text-dim select-none hover:text-terminal-text-bright transition-smooth">
                        <input
                            type="checkbox"
                            class="cursor-pointer w-3.5 h-3.5 accent-slate-400"
                            x-model="allSelected"
                            @change="toggleSelectAll()"
                        >
                        <span>All</span>
                    </label>
                    <button
                        @click="deleteSelected()"
                        :disabled="!hasSelectedExecutions"
                        class="px-3 py-1.5 bg-status-error text-white text-xs rounded hover:bg-status-error/80 transition-smooth disabled:bg-terminal-bg-light disabled:cursor-not-allowed disabled:opacity-50 disabled:text-terminal-text-muted"
                    >
                        🗑️
                    </button>
                </div>
                <select
                    x-model="filterWorkflow"
                    class="px-2.5 py-1.5 bg-terminal-bg border border-terminal-border rounded text-xs text-terminal-text focus:outline-none focus:border-accent-blue transition-smooth"
                >
                    <option value="">All Workflows</option>
                    <template x-for="workflow in uniqueWorkflowNames" :key="workflow">
                        <option :value="workflow" x-text="workflow.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())"></option>
                    </template>
                </select>
            </div>
            {% endif %}
        </div>
        <!-- Execution Details Header -->
        <div class="flex-1 px-5 py-4 bg-terminal-bg">
            <!-- Row 1: Workflow Name | Status -->
            <div class="flex items-center justify-between mb-2">
                <h2 x-show="currentExecution" x-cloak class="text-lg font-semibold text-terminal-text" x-text="currentExecution?.workflow_name.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())"></h2>
                <div x-show="!currentExecution" class="text-lg font-semibold text-terminal-text">Execution Details</div>
                <span
                    x-show="currentExecution?.status"
                    x-cloak
                    class="px-2.5 py-1 rounded text-xs font-medium"
                    :class="{
                        'bg-status-success/10 text-status-success border border-status-success/30': currentExecution?.status === 'completed',
                        'bg-status-running/10 text-status-running border border-status-running/30': currentExecution?.status === 'running',
                        'bg-status-error/10 text-status-error border border-status-error/30': currentExecution?.status === 'failed',
                        'bg-status-pending/10 text-status-pending border border-status-pending/30': currentExecution?.status === 'pending'
                    }"
                    x-text="currentExecution?.status ? currentExecution.status.charAt(0).toUpperCase() + currentExecution.status.slice(1) : ''"
                ></span>
            </div>
            <!-- Row 2: Started Time | Execution ID -->
            <div x-show="currentExecution" x-cloak class="flex items-center justify-between text-xs text-terminal-text-dim font-mono">
                <span x-text="currentExecution?.started_at ? currentExecution.started_at.split('T')[1].split('.')[0] : ''"></span>
                <span x-text="currentExecution?.execution_id"></span>
            </div>
        </div>
    </div>

    <!-- Scrollable Content Row -->
    <div class="flex flex-1 overflow-hidden">
        <!-- Left Sidebar: Execution List -->
        <div class="w-1/4 min-w-[300px] border-r border-terminal-border bg-terminal-bg-dark overflow-y-auto p-2">
        {% if executions %}
            <template x-for="execution in filteredExecutions" :key="execution.execution_id">
                <div
                    class="flex gap-3 p-3 mb-1 bg-terminal-bg-dark border border-elegant rounded cursor-pointer transition-smooth hover:bg-terminal-bg-hover"
                    :class="{ '!border-terminal-text elevation-1 !bg-terminal-bg-lighter': currentExecutionId === execution.execution_id }"
                    :data-execution-id="execution.execution_id"
                    @click="selectExecution(execution.execution_id)"
                >
                    <input
                        type="checkbox"
                        class="flex-shrink-0 w-4 h-4 mt-0.5 cursor-pointer accent-slate-400"
                        @click.stop
                        x-model="selectedExecutions"
                        :value="execution.execution_id"
                    >
                    <div class="flex-1 min-w-0">
                        <div class="flex justify-between items-center gap-2 mb-1">
                            <span class="font-medium text-sm text-terminal-text truncate" x-text="execution.workflow_name.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())"></span>
                            <span
                                class="px-2 py-0.5 rounded text-xs font-medium"
                                :class="{
                                    'bg-status-success/10 text-status-success border border-status-success/30': execution.status === 'completed',
                                    'bg-status-running/10 text-status-running border border-status-running/30': execution.status === 'running',
                                    'bg-status-error/10 text-status-error border border-status-error/30': execution.status === 'failed',
                                    'bg-status-pending/10 text-status-pending border border-status-pending/30': execution.status === 'pending'
                                }"
                                x-text="execution.status ? execution.status.charAt(0).toUpperCase() + execution.status.slice(1) : ''"
                            ></span>
                        </div>
                        <div class="flex justify-between items-center gap-2 text-xs text-terminal-text-dim font-mono">
                            <span class="flex-shrink-0" x-show="execution.started_at" x-text="execution.started_at.includes('T') ? execution.started_at.split('T')[1].split('.')[0] : (execution.started_at.includes(' ') ? execution.started_at.split(' ')[1].substring(0, 8) : execution.started_at)"></span>
                            <span class="truncate" x-text="execution.execution_id"></span>
                        </div>
                    </div>
                </div>
            </template>
            <div x-show="filteredExecutions.length === 0" class="px-5 py-10 text-center text-terminal-text-dim">
                <p class="mb-2.5">No executions match filter</p>
            </div>
        {% else %}
            <div class="px-5 py-10 text-center text-terminal-text-dim">
                <p class="mb-2.5">No executions yet</p>
                <a href="/docs" class="text-sm text-terminal-text hover:text-terminal-text-bright transition-smooth">Run from FastAPI</a>
            </div>
        {% endif %}
        </div>

        <!-- Right Panel: Execution Details -->
        <div class="flex-1 overflow-y-auto p-5 bg-terminal-bg">
        <!-- Loading State -->
        <div x-show="loading" x-cloak class="flex items-center justify-center h-full">
            <div class="text-terminal-text-dim">Loading...</div>
        </div>

        <!-- Empty State -->
        <div x-show="!currentExecution && !loading" x-cloak>
            {{ empty_state('Select an execution to view details', 'Click on any run from the left sidebar') }}
        </div>

        <!-- Execution Details (shown even if there's an error) -->
        <div x-show="currentExecution && !loading" x-cloak>

            <!-- Inputs Section -->
            <div class="mb-6">
                <h3 class="text-base font-semibold mb-2.5 text-terminal-text">Inputs</h3>
                <pre class="bg-terminal-bg-light p-4 rounded border-elegant overflow-x-auto font-mono text-sm text-terminal-text-bright" x-text="JSON.stringify(currentExecution?.inputs, null, 2)"></pre>
            </div>

            <!-- Outputs Section -->
            <div class="mb-6">
                <h3 class="text-base font-semibold mb-2.5 text-terminal-text">Outputs</h3>
                <!-- Show error in outputs if execution failed -->
                <div x-show="currentExecution?.error && !currentExecution?.outputs" class="bg-status-error/5 p-4 rounded border border-status-error/40">
                    <div class="flex items-start gap-2 text-status-error">
                        <span class="text-lg">💥</span>
                        <div>
                            <strong class="block mb-1 text-sm font-semibold">Error</strong>
                            <pre class="text-xs font-mono whitespace-pre-wrap" x-text="currentExecution?.error"></pre>
                        </div>
                    </div>
                </div>
                <!-- Show normal outputs if available -->
                <pre x-show="currentExecution?.outputs" class="bg-terminal-bg-light p-4 rounded border-elegant overflow-x-auto font-mono text-sm text-terminal-text-bright" x-text="JSON.stringify(currentExecution?.outputs, null, 2)"></pre>
            </div>

            <!-- Step Execution History -->
            <div>
                <h3 class="text-base font-semibold mb-2.5 text-terminal-text">Step Execution History</h3>
                <div class="flex flex-col gap-3">
                    <template x-for="(step, index) in currentExecution?.step_executions || []" :key="index">
                        <div :class="step.error ? 'border-status-error/40 bg-status-error/5' : 'border-elegant bg-terminal-bg-light'" class="border rounded p-4">
                            <div class="flex items-center justify-between mb-3">
                                <div class="flex-1">
                                    <h4 class="text-sm font-medium text-terminal-text">
                                        <span x-text="step.step_name"></span>
                                        <span x-show="step.error">❌</span>
                                    </h4>
                                    <span class="text-xs text-terminal-text-dim" x-text="step.timestamp"></span>
                                </div>
                                <button
                                    x-show="!step.error"
                                    @click="timeTravel(currentExecution.workflow_name, step.step_name)"
                                    class="flex-shrink-0 px-4 py-2 bg-accent-blue text-terminal-bg text-xs font-semibold rounded hover:opacity-80 transition-smooth whitespace-nowrap"
                                >
                                    Run from step
                                </button>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                <div>
                                    <h5 class="text-xs font-medium text-terminal-text-dim mb-1.5">Inputs:</h5>
                                    <pre class="bg-terminal-bg-dark p-2.5 rounded border-elegant text-xs font-mono overflow-x-auto text-terminal-text-bright" x-text="JSON.stringify(step.inputs, null, 2)"></pre>
                                </div>
                                <div>
                                    <h5 class="text-xs font-medium text-terminal-text-dim mb-1.5">Outputs:</h5>
                                    <div x-show="step.error" class="bg-status-error/10 p-2.5 rounded border-l-2 border-status-error text-xs text-status-error">
                                        <strong>❌ Error:</strong> <span x-text="step.error"></span>
                                    </div>
                                    <pre x-show="!step.error" class="bg-terminal-bg-dark p-2.5 rounded border-elegant text-xs font-mono overflow-x-auto text-terminal-text-bright" x-text="JSON.stringify(step.outputs, null, 2)"></pre>
                                </div>
                            </div>
                        </div>
                    </template>

                    <!-- No steps message -->
                    <p x-show="!currentExecution?.step_executions?.length" class="text-center text-terminal-text-dim py-8 text-sm">
                        No steps executed yet
                    </p>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>
{% endblock %}