<!-- [DEF:ConnectionForm:Component] -->
<!--
@SEMANTICS: connection, form, settings
@PURPOSE: UI component for creating a new database connection configuration.
@LAYER: UI
@RELATION: USES -> frontend/src/services/connectionService.js
-->
<script>
    // [SECTION: IMPORTS]
    import { createConnection } from '../../services/connectionService.js';
    import { addToast } from '../../lib/toasts.js';
    import { t } from '../../lib/i18n';
    import { Button, Input, Card } from '../../lib/ui';
    // [/SECTION]
    let { onsuccess = () => {} } = $props();

    let name = $state('');
    let type = $state('postgres');
    let host = $state('');
    let port = $state("5432");
    let database = $state('');
    let username = $state('');
    let password = $state('');
    let isSubmitting = $state(false);

    // [DEF:handleSubmit:Function]
    // @PURPOSE: Submits the connection form to the backend.
    // @PRE: All required fields (name, host, database, username, password) must be filled.
    // @POST: A new connection is created via the connection service and the parent success callback is invoked.
    async function handleSubmit() {
        if (!name || !host || !database || !username || !password) {
            addToast($t.connections?.required_fields, 'warning');
            return;
        }

        isSubmitting = true;
        try {
            const newConnection = await createConnection({
                name, type, host, port: Number(port), database, username, password
            });
            addToast($t.connections?.created_success, 'success');
            onsuccess(newConnection);
            resetForm();
        } catch (e) {
            addToast(e.message, 'error');
        } finally {
            isSubmitting = false;
        }
    }
    // [/DEF:handleSubmit:Function]

    // [DEF:resetForm:Function]
    /* @PURPOSE: Resets the connection form fields to their default values.
       @PRE: None.
       @POST: All form input variables are reset.
    */
    function resetForm() {
        name = '';
        host = '';
        port = "5432";
        database = '';
        username = '';
        password = '';
    }
    // [/DEF:resetForm:Function]
</script>

<!-- [SECTION: TEMPLATE] -->
<Card title={$t.connections?.add_new}>
    <form onsubmit={(event) => { event.preventDefault(); handleSubmit(); }} class="space-y-6">
        <Input label={$t.connections?.name} bind:value={name} placeholder={$t.connections?.name_placeholder} />
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Input label={$t.connections?.host} bind:value={host} placeholder={$t.connections?.host_placeholder} />
            <Input label={$t.connections?.port} type="number" bind:value={port} />
        </div>

        <Input label={$t.connections?.db_name} bind:value={database} />

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Input label={$t.connections?.user} bind:value={username} />
            <Input label={$t.connections?.pass} type="password" bind:value={password} />
        </div>

        <div class="flex justify-end pt-2">
            <Button type="submit" disabled={isSubmitting} isLoading={isSubmitting}>
                {$t.connections?.create}
            </Button>
        </div>
    </form>
</Card>
<!-- [/SECTION] -->
<!-- [/DEF:ConnectionForm:Component] -->
