<script>
    import { plugins as pluginsStore, selectedPlugin, selectedTask } from '../lib/stores.js';
    import TaskRunner from '../components/TaskRunner.svelte';
    import DynamicForm from '../components/DynamicForm.svelte';
    import { api } from '../lib/api.js';
    import { get } from 'svelte/store';
    import { goto } from '$app/navigation';
    import { t } from '$lib/i18n';
    import { Button, Card, PageHeader } from '$lib/ui';

    /** @type {import('./$types').PageData} */
    export let data;

    // Sync store with loaded data if needed, or just use data.plugins directly
    $: if (data.plugins) {
        pluginsStore.set(data.plugins);
    }

    // [DEF:selectPlugin:Function]
    /* @PURPOSE: Handles plugin selection and navigation.
       @PRE: plugin object must be provided.
       @POST: Navigates to migration or sets selectedPlugin store.
    */
    function selectPlugin(plugin) {
        console.log(`[Dashboard][Action] Selecting plugin: ${plugin.id}`);
        if (plugin.id === 'superset-migration') {
            goto('/migration');
        } else if (plugin.id === 'git-integration') {
            goto('/git');
        } else {
            selectedPlugin.set(plugin);
        }
    }
    // [/DEF:selectPlugin:Function]

    // [DEF:handleFormSubmit:Function]
    /* @PURPOSE: Handles task creation from dynamic form submission.
       @PRE: event.detail must contain task parameters.
       @POST: Task is created via API and selectedTask store is updated.
    */
    async function handleFormSubmit(event) {
        console.log("[App.handleFormSubmit][Action] Handling form submission for task creation.");
        const params = event.detail;
        try {
            const plugin = get(selectedPlugin);
            const task = await api.createTask(plugin.id, params);
            selectedTask.set(task);
            selectedPlugin.set(null);
            console.log(`[App.handleFormSubmit][Coherence:OK] Task created id=${task.id}`);
        } catch (error) {
            console.error(`[App.handleFormSubmit][Coherence:Failed] Task creation failed error=${error}`);
        }
    }
    // [/DEF:handleFormSubmit:Function]
</script>

<div class="container mx-auto p-4">
    {#if $selectedTask}
        <TaskRunner />
        <div class="mt-4">
            <Button variant="primary" on:click={() => selectedTask.set(null)}>
                {$t.common.cancel}
            </Button>
        </div>
    {:else if $selectedPlugin}
        <PageHeader title={$selectedPlugin.name} />
        <Card>
            <DynamicForm schema={$selectedPlugin.schema} on:submit={handleFormSubmit} />
        </Card>
        <div class="mt-4">
            <Button variant="secondary" on:click={() => selectedPlugin.set(null)}>
                {$t.common.cancel}
            </Button>
        </div>
    {:else}
        <PageHeader title={$t.nav.dashboard} />
        
        {#if data.error}
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                {data.error}
            </div>
        {/if}

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {#each data.plugins as plugin}
                <div
                    on:click={() => selectPlugin(plugin)}
                    role="button"
                    tabindex="0"
                    on:keydown={(e) => e.key === 'Enter' && selectPlugin(plugin)}
                    class="cursor-pointer transition-transform hover:scale-[1.02]"
                >
                    <Card title={plugin.name}>
                        <p class="text-gray-600 mb-4">{plugin.description}</p>
                        <span class="text-xs font-mono text-gray-400 bg-gray-50 px-2 py-1 rounded">v{plugin.version}</span>
                    </Card>
                </div>
            {/each}
        </div>
    {/if}
</div>
