<!-- [DEF:DebugTool:Component] -->
<!--
@SEMANTICS: debug, tool, api, structure
@PURPOSE: UI component for system diagnostics and debugging API responses.
@LAYER: UI
@RELATION: USES -> frontend/src/services/toolsService.js
-->
<script>
    // [SECTION: IMPORTS]
    import { onMount } from 'svelte';
    import { api } from '../../lib/api.js';
    import { runTask, getTaskStatus } from '../../services/toolsService.js';
    import { selectedTask } from '../../lib/stores.js';
    import { addToast } from '../../lib/toasts.js';
    import { t } from '../../lib/i18n';
    // [/SECTION]

    let envs = [];
    let action = 'test-db-api';
    let selectedEnv = '';
    let datasetId = '';
    let sourceEnv = '';
    let targetEnv = '';
    let isRunning = false;
    let results = null;
    let pollInterval;

    // [DEF:fetchEnvironments:Function]
    /**
     * @purpose Fetches available environments.
     * @pre     API is available.
     * @post    envs variable is populated.
     * @returns {Promise<void>}
     */
    async function fetchEnvironments() {
        try {
            envs = await api.getEnvironmentsList();
        } catch (e) {
            addToast($t.debug?.fetch_env_failed || 'Failed to fetch environments', 'error');
        }
    }
    // [/DEF:fetchEnvironments:Function]

    // [DEF:handleRunDebug:Function]
    /**
     * @purpose Triggers the debug task.
     * @pre     Required fields are selected.
     * @post    Task is started and polling begins.
     * @returns {Promise<void>}
     */
    async function handleRunDebug() {
        isRunning = true;
        results = null;
        try {
            let params = { action };
            if (action === 'test-db-api') {
                if (!sourceEnv || !targetEnv) {
                    addToast($t.debug?.source_target_required || 'Source and Target environments are required', 'warning');
                    isRunning = false;
                    return;
                }
                const sEnv = envs.find(e => e.id === sourceEnv);
                const tEnv = envs.find(e => e.id === targetEnv);
                params.source_env = sEnv.name;
                params.target_env = tEnv.name;
            } else {
                if (!selectedEnv || !datasetId) {
                    addToast($t.debug?.env_dataset_required || 'Environment and Dataset ID are required', 'warning');
                    isRunning = false;
                    return;
                }
                const env = envs.find(e => e.id === selectedEnv);
                params.env = env.name;
                params.dataset_id = parseInt(datasetId);
            }

            const task = await runTask('system-debug', params);
            selectedTask.set(task);
            startPolling(task.id);
        } catch (e) {
            isRunning = false;
            addToast(e.message, 'error');
        }
    }
    // [/DEF:handleRunDebug:Function]

    // [DEF:startPolling:Function]
    /**
     * @purpose Polls for task completion.
     * @pre     Task ID is valid.
     * @post    Polls until success/failure.
     * @param   {string} taskId - ID of the task.
     * @returns {void}
     */
    function startPolling(taskId) {
        if (pollInterval) clearInterval(pollInterval);
        pollInterval = setInterval(async () => {
            try {
                const task = await getTaskStatus(taskId);
                selectedTask.set(task);
                if (task.status === 'SUCCESS') {
                    clearInterval(pollInterval);
                    isRunning = false;
                    results = task.result;
                    addToast($t.debug?.completed || 'Debug task completed', 'success');
                } else if (task.status === 'FAILED') {
                    clearInterval(pollInterval);
                    isRunning = false;
                    addToast($t.debug?.failed || 'Debug task failed', 'error');
                }
            } catch (e) {
                clearInterval(pollInterval);
                isRunning = false;
            }
        }, 2000);
    }
    // [/DEF:startPolling:Function]

    onMount(fetchEnvironments);
</script>

<div class="space-y-6">
    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
        <h3 class="text-lg font-medium text-gray-900 mb-4">{$t.debug?.title || 'System Diagnostics'}</h3>
        
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700">{$t.debug?.action || 'Debug Action'}</label>
            <select bind:value={action} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                <option value="test-db-api">{$t.debug?.test_db_api || 'Test Database API (Compare Envs)'}</option>
                <option value="get-dataset-structure">{$t.debug?.get_dataset_structure || 'Get Dataset Structure (JSON)'}</option>
            </select>
        </div>

        {#if action === 'test-db-api'}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="src-env" class="block text-sm font-medium text-gray-700">{$t.migration?.source_env || 'Source Environment'}</label>
                    <select id="src-env" bind:value={sourceEnv} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        <option value="" disabled>{$t.debug?.select_source || '-- Select Source --'}</option>
                        {#each envs as env}
                            <option value={env.id}>{env.name}</option>
                        {/each}
                    </select>
                </div>
                <div>
                    <label for="tgt-env" class="block text-sm font-medium text-gray-700">{$t.migration?.target_env || 'Target Environment'}</label>
                    <select id="tgt-env" bind:value={targetEnv} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        <option value="" disabled>{$t.debug?.select_target || '-- Select Target --'}</option>
                        {#each envs as env}
                            <option value={env.id}>{env.name}</option>
                        {/each}
                    </select>
                </div>
            </div>
        {:else}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="debug-env" class="block text-sm font-medium text-gray-700">{$t.dashboard?.environment || 'Environment'}</label>
                    <select id="debug-env" bind:value={selectedEnv} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        <option value="" disabled>{$t.common?.choose_environment || '-- Select Environment --'}</option>
                        {#each envs as env}
                            <option value={env.id}>{env.name}</option>
                        {/each}
                    </select>
                </div>
                <div>
                    <label for="debug-ds-id" class="block text-sm font-medium text-gray-700">{$t.mapper?.dataset_id || 'Dataset ID'}</label>
                    <input type="number" id="debug-ds-id" bind:value={datasetId} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
                </div>
            </div>
        {/if}

        <div class="mt-4 flex justify-end">
            <button on:click={handleRunDebug} disabled={isRunning} class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50">
                {isRunning ? ($t.dashboard?.running || 'Running...') : ($t.debug?.run || 'Run Diagnostics')}
            </button>
        </div>
    </div>

    {#if results}
        <div class="bg-white shadow overflow-hidden sm:rounded-md border border-gray-200">
            <div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">{$t.debug?.output || 'Debug Output'}</h3>
            </div>
            <div class="p-4">
                <pre class="text-xs text-gray-600 bg-gray-900 text-green-400 p-4 rounded-md overflow-x-auto h-96">{JSON.stringify(results, null, 2)}</pre>
            </div>
        </div>
    {/if}
</div>
<!-- [/DEF:DebugTool:Component] -->
