<!-- [DEF:Settings:Component] -->
<!--
@SEMANTICS: settings, ui, configuration
@PURPOSE:   The main settings page for the application, allowing management of environments and global settings.
@LAYER:     UI
@RELATION:  CALLS -> api.js
@RELATION:  USES -> stores.js

@PROPS: None
@EVENTS: None
@INVARIANT: Settings changes must be saved to the backend.
-->
<script>
    // [SECTION: IMPORTS]
    import { onMount } from 'svelte';
    import { getSettings, updateGlobalSettings, getEnvironments, addEnvironment, updateEnvironment, deleteEnvironment, testEnvironmentConnection, updateEnvironmentSchedule } from '../lib/api';
    import { addToast } from '../lib/toasts';
    import { t } from '../lib/i18n';
    // [/SECTION]

    let settings = {
        environments: [],
        settings: {
            default_environment_id: null,
            logging: {
                level: 'INFO',
                file_path: 'logs/app.log',
                max_bytes: 10485760,
                backup_count: 5,
                enable_belief_state: true
            }
        }
    };

    let newEnv = {
        id: '',
        name: '',
        url: '',
        username: '',
        password: '',
        is_default: false,
        backup_schedule: {
            enabled: false,
            cron_expression: '0 0 * * *'
        }
    };

    let editingEnvId = null;

    // [DEF:loadSettings:Function]
    /**
     * @purpose Loads settings from the backend.
     * @pre Component mounted or refresh requested.
     * @post settings object is populated with backend data.
     */
    async function loadSettings() {
        try {
            console.log("[Settings.loadSettings][Action] Loading settings.");
            const data = await getSettings();
            settings = data;
            console.log("[Settings.loadSettings][Coherence:OK] Settings loaded.");
        } catch (error) {
            console.error("[Settings.loadSettings][Coherence:Failed] Failed to load settings:", error);
            addToast($t.settings?.load_failed, 'error');
        }
    }
    // [/DEF:loadSettings:Function]

    // [DEF:handleSaveGlobal:Function]
    /**
     * @purpose Saves global settings to the backend.
     * @pre settings.settings contains valid configuration.
     * @post Backend global settings are updated.
     */
    async function handleSaveGlobal() {
        try {
            console.log("[Settings.handleSaveGlobal][Action] Saving global settings.");
            await updateGlobalSettings(settings.settings);
            addToast($t.settings?.save_success, 'success');
            console.log("[Settings.handleSaveGlobal][Coherence:OK] Global settings saved.");
        } catch (error) {
            console.error("[Settings.handleSaveGlobal][Coherence:Failed] Failed to save global settings:", error);
            addToast($t.settings?.save_failed, 'error');
        }
    }
    // [/DEF:handleSaveGlobal:Function]

    // [DEF:handleAddOrUpdateEnv:Function]
    /**
     * @purpose Adds or updates an environment.
     * @pre newEnv contains valid environment details.
     * @post Environment list is updated on backend and reloaded locally.
     */
    async function handleAddOrUpdateEnv() {
        try {
            console.log(`[Settings.handleAddOrUpdateEnv][Action] ${editingEnvId ? 'Updating' : 'Adding'} environment.`);
            if (editingEnvId) {
                await updateEnvironment(editingEnvId, newEnv);
                addToast($t.settings?.env_updated, 'success');
            } else {
                await addEnvironment(newEnv);
                addToast($t.settings?.env_added, 'success');
            }
            resetEnvForm();
            await loadSettings();
            console.log("[Settings.handleAddOrUpdateEnv][Coherence:OK] Environment saved.");
        } catch (error) {
            console.error("[Settings.handleAddOrUpdateEnv][Coherence:Failed] Failed to save environment:", error);
            addToast($t.settings?.env_save_failed, 'error');
        }
    }
    // [/DEF:handleAddOrUpdateEnv:Function]

    // [DEF:handleDeleteEnv:Function]
    /**
     * @purpose Deletes an environment.
     * @pre id of environment to delete is provided.
     * @post Environment is removed from backend and list is reloaded.
     * @param {string} id - The ID of the environment to delete.
     */
    async function handleDeleteEnv(id) {
        if (confirm($t.settings?.env_delete_confirm)) {
            try {
                console.log(`[Settings.handleDeleteEnv][Action] Deleting environment: ${id}`);
                await deleteEnvironment(id);
                addToast($t.settings?.env_deleted, 'success');
                await loadSettings();
                console.log("[Settings.handleDeleteEnv][Coherence:OK] Environment deleted.");
            } catch (error) {
                console.error("[Settings.handleDeleteEnv][Coherence:Failed] Failed to delete environment:", error);
                addToast($t.settings?.env_delete_failed, 'error');
            }
        }
    }
    // [/DEF:handleDeleteEnv:Function]

    // [DEF:handleTestEnv:Function]
    /**
     * @purpose Tests the connection to an environment.
     * @pre Environment ID is valid.
     * @post Connection test result is displayed via toast.
     * @param {string} id - The ID of the environment to test.
     */
    async function handleTestEnv(id) {
        try {
            console.log(`[Settings.handleTestEnv][Action] Testing environment: ${id}`);
            const result = await testEnvironmentConnection(id);
            if (result.status === 'success') {
                addToast($t.settings?.connection_success, 'success');
                console.log("[Settings.handleTestEnv][Coherence:OK] Connection successful.");
            } else {
                addToast($t.settings?.connection_failed?.replace('{error}', result.message || ''), 'error');
                console.log("[Settings.handleTestEnv][Coherence:Failed] Connection failed.");
            }
        } catch (error) {
            console.error("[Settings.handleTestEnv][Coherence:Failed] Error testing connection:", error);
            addToast($t.settings?.connection_test_failed, 'error');
        }
    }
    // [/DEF:handleTestEnv:Function]

    // [DEF:editEnv:Function]
    /**
     * @purpose Sets the form to edit an existing environment.
     * @pre env object is provided.
     * @post newEnv is populated with env data and editingEnvId is set.
     * @param {Object} env - The environment object to edit.
     */
    function editEnv(env) {
        newEnv = { ...env };
        editingEnvId = env.id;
    }
    // [/DEF:editEnv:Function]

    // [DEF:resetEnvForm:Function]
    /**
     * @purpose Resets the environment form.
     * @pre None.
     * @post newEnv is reset to initial state and editingEnvId is cleared.
     */
    function resetEnvForm() {
        newEnv = {
            id: '',
            name: '',
            url: '',
            username: '',
            password: '',
            is_default: false,
            backup_schedule: {
                enabled: false,
                cron_expression: '0 0 * * *'
            }
        };
        editingEnvId = null;
    }
    // [/DEF:resetEnvForm:Function]

    onMount(loadSettings);
</script>

<!-- [SECTION: TEMPLATE] -->
<div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-6">{$t.settings?.title}</h1>

    <section class="mb-8 bg-white p-6 rounded shadow">
        <h2 class="text-xl font-semibold mb-4">{$t.settings?.global_title}</h2>

        <h3 class="text-lg font-medium mb-4 mt-6">{$t.settings?.logging}</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label for="log_level" class="block text-sm font-medium text-gray-700">{$t.settings?.log_level}</label>
                <select id="log_level" bind:value={settings.settings.logging.level} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
                    <option value="DEBUG">DEBUG</option>
                    <option value="INFO">INFO</option>
                    <option value="WARNING">WARNING</option>
                    <option value="ERROR">ERROR</option>
                    <option value="CRITICAL">CRITICAL</option>
                </select>
            </div>
            <div>
                <label for="log_file_path" class="block text-sm font-medium text-gray-700">{$t.settings?.log_file_path}</label>
                <input type="text" id="log_file_path" bind:value={settings.settings.logging.file_path} placeholder={$t.settings?.log_file_path_placeholder} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
            </div>
            <div>
                <label for="log_max_bytes" class="block text-sm font-medium text-gray-700">{$t.settings?.max_file_size_mb}</label>
                <input type="number" id="log_max_bytes" bind:value={settings.settings.logging.max_bytes} min="1" step="1" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
            </div>
            <div>
                <label for="log_backup_count" class="block text-sm font-medium text-gray-700">{$t.settings?.backup_count}</label>
                <input type="number" id="log_backup_count" bind:value={settings.settings.logging.backup_count} min="1" step="1" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
            </div>
            <div class="md:col-span-2">
                <label class="flex items-center">
                    <input type="checkbox" id="enable_belief_state" bind:checked={settings.settings.logging.enable_belief_state} class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
                    <span class="ml-2 block text-sm text-gray-900">{$t.settings?.enable_belief_state}</span>
                </label>
            </div>
        </div>

        <button onclick={handleSaveGlobal} class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-max mt-4">
            {$t.settings?.save_global_settings}
        </button>
    </section>

    <section class="mb-8 bg-white p-6 rounded shadow">
        <h2 class="text-xl font-semibold mb-4">{$t.settings?.env_title}</h2>

        {#if settings.environments.length === 0}
            <div class="mb-4 p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700">
                <p class="font-bold">{$t.settings?.warning}</p>
                <p>{$t.settings?.env_warning}</p>
            </div>
        {/if}
        
        <div class="mb-6 overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.settings?.name}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.settings?.env_url}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.settings?.username}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.settings?.default}</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.settings?.env_actions}</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {#each settings.environments as env}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">{env.name}</td>
                            <td class="px-6 py-4 whitespace-nowrap">{env.url}</td>
                            <td class="px-6 py-4 whitespace-nowrap">{env.username}</td>
                            <td class="px-6 py-4 whitespace-nowrap">{env.is_default ? $t.common?.yes : $t.common?.no}</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <button onclick={() => handleTestEnv(env.id)} class="text-green-600 hover:text-green-900 mr-4">{$t.settings?.env_test}</button>
                                <button onclick={() => editEnv(env)} class="text-indigo-600 hover:text-indigo-900 mr-4">{$t.common?.edit}</button>
                                <button onclick={() => handleDeleteEnv(env.id)} class="text-red-600 hover:text-red-900">{$t.common?.delete}</button>
                            </td>
                        </tr>
                    {/each}
                </tbody>
            </table>
        </div>

        <div class="bg-gray-50 p-4 rounded">
            <h3 class="text-lg font-medium mb-4">{editingEnvId ? $t.settings?.env_edit : $t.settings?.env_add}</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="env_id" class="block text-sm font-medium text-gray-700">{$t.common?.id}</label>
                    <input type="text" id="env_id" bind:value={newEnv.id} disabled={!!editingEnvId} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
                </div>
                <div>
                    <label for="env_name" class="block text-sm font-medium text-gray-700">{$t.settings?.name}</label>
                    <input type="text" id="env_name" bind:value={newEnv.name} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
                </div>
                <div>
                    <label for="env_url" class="block text-sm font-medium text-gray-700">{$t.settings?.env_url}</label>
                    <input type="text" id="env_url" bind:value={newEnv.url} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
                </div>
                <div>
                    <label for="env_user" class="block text-sm font-medium text-gray-700">{$t.settings?.username}</label>
                    <input type="text" id="env_user" bind:value={newEnv.username} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
                </div>
                <div>
                    <label for="env_pass" class="block text-sm font-medium text-gray-700">{$t.settings?.password}</label>
                    <input type="password" id="env_pass" bind:value={newEnv.password} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
                </div>
                <div class="flex items-center">
                    <input type="checkbox" id="env_default" bind:checked={newEnv.is_default} class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
                    <label for="env_default" class="ml-2 block text-sm text-gray-900">{$t.settings?.env_default}</label>
                </div>
            </div>

            <h3 class="text-lg font-medium mb-4 mt-6">{$t.settings?.backup_schedule}</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="flex items-center">
                    <input type="checkbox" id="backup_enabled" bind:checked={newEnv.backup_schedule.enabled} class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
                    <label for="backup_enabled" class="ml-2 block text-sm text-gray-900">{$t.settings?.enable_auto_backups}</label>
                </div>
                <div>
                    <label for="cron_expression" class="block text-sm font-medium text-gray-700">{$t.settings?.cron_expression}</label>
                    <input type="text" id="cron_expression" bind:value={newEnv.backup_schedule.cron_expression} placeholder={$t.settings?.cron_placeholder} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
                    <p class="text-xs text-gray-500 mt-1">{$t.settings?.cron_example}</p>
                </div>
            </div>

            <div class="mt-6 flex gap-2">
                <button onclick={handleAddOrUpdateEnv} class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
                    {editingEnvId ? $t.settings?.env_update : $t.settings?.env_add}
                </button>
                {#if editingEnvId}
                    <button onclick={resetEnvForm} class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
                        {$t.common?.cancel}
                    </button>
                {/if}
            </div>
        </div>
    </section>
</div>
<!-- [/SECTION] -->

<!-- [/DEF:Settings:Component] -->
