<script lang="ts">
    import {
        Card,
        CardHeader,
        CardBody,
        Button,
        FormGroup,
        Label,
        Input,
        InputGroup,
        InputGroupText,
    } from "@sveltestrap/sveltestrap";

    import { getForecast } from "$lib/prediction";
    import type { FlightParameters, ProfileName } from "$lib/types";
    import { PROFILE_MAP } from "$lib/types";
    import { FlightParametersStore, writeLocalStorage } from "$lib/stores";

    let isCollapsed = false;
    let selectedProfile: ProfileName = "Normal";
    let startPoint = "Custom";

    let element: HTMLDivElement | null = null;

    const now = new Date();
    let startDate = now.toISOString().split("T")[0]; // YYYY-MM-DD
    let startTime = now.toISOString().split("T")[1].split(".")[0]; // HH:MM:SS

    let inputLat = $FlightParametersStore.launch_latitude.toString();
    let inputLng = $FlightParametersStore.launch_longitude.toString();

    $: $FlightParametersStore = {
        ...$FlightParametersStore,
        profile: PROFILE_MAP[selectedProfile],
    };

    const handleGetPrediction = async () => {
        console.log("Fetching prediction with parameters:", $FlightParametersStore);
        console.log(startDate, startTime);

        $FlightParametersStore.launch_datetime = `${startDate}T${startTime}Z`;
        writeLocalStorage<FlightParameters>("flightParameters", $FlightParametersStore);

        try {
            const response = await getForecast($FlightParametersStore);
            console.log(response);
            // TODO: Notify other components of the new prediction.
            // const dispatch = createEventDispatcher();
            // dispatch('newPrediction', response);
        } catch (error) {
            console.error("Error fetching forecast:", error);
            // TODO: Display a user-friendly error message in the UI.
        }
    };

    export let handleClickSelectOnMap = () => {
        console.log("Select on map clicked");
    }

    const applyCoordinatesFromInput = () => {
        const lat = parseFloat(inputLat);
        const lng = parseFloat(inputLng);

        if (!isNaN(lat) && !isNaN(lng)) {
            $FlightParametersStore.launch_latitude = lat;
            $FlightParametersStore.launch_longitude = lng;
            console.log(
                "Updated position:",
                $FlightParametersStore.launch_latitude,
                $FlightParametersStore.launch_longitude,
            );
        } else {
            console.error("Invalid coordinate input");
            // TODO: Show a validation error to the user.
        }
    };

    /**
     * Updates the launch coordinates.
     * @param {number} lat The new latitude.
     * @param {number} lng The new longitude.
     */
    export const updateLaunchPosition = (lat: number, lng: number) => {
        $FlightParametersStore.launch_latitude = lat;
        $FlightParametersStore.launch_longitude = lng;
        console.log("Launch position updated:", lat, lng);
        inputLat = lat.toFixed(6).toString();
        inputLng = lng.toFixed(6).toString();
    };

    export const getElement = () => {
        return element;
    };

    export const getSelectedProfile = () => {
        return selectedProfile;
    };

    export const selectProfile = (profile: ProfileName) => {
        selectedProfile = profile;
        $FlightParametersStore.profile = PROFILE_MAP[selectedProfile];
        console.log("Selected profile:", selectedProfile);
    };
    
    export const collapsePanel = () => {
        isCollapsed = true;
    };

    export const expandPanel = () => {
        isCollapsed = false;
    };

    export const togglePanel = () => {
        isCollapsed = !isCollapsed;
    };

</script>
<Card>
    <CardHeader
        class="bg-primary text-white d-flex justify-content-between align-items-center card-header p-1 px-3"
        style="cursor:pointer;"
    >
        <button
            type="button"
            class="d-flex w-100 justify-content-between align-items-center bg-transparent border-0 p-0"
            style="width:100%;"
            aria-label="Свернуть/развернуть параметры прогнозирования"
            on:click={() => (isCollapsed = !isCollapsed)}
        >
            <b class="card-title mb-0 text-white p-0">Параметры прогнозирования</b>
            <Button class="p-0" size="sm" color="primary" on:click={() => (isCollapsed = !isCollapsed)}>
                {#if isCollapsed}
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        fill="currentColor"
                        class="bi bi-caret-left-fill"
                        viewBox="0 0 16 16"
                    >
                        <path
                            d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"
                        />
                    </svg>
                {:else}
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        fill="currentColor"
                        class="bi bi-caret-down"
                        viewBox="0 0 16 16"
                    >
                        <path
                            d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"
                        />
                    </svg>
                {/if}
            </Button>
        </button>
    </CardHeader>
    {#if !isCollapsed}
        <CardBody>
            <FormGroup spacing="mb-2">
                <Label for="flightProfile" class="form-label">Профиль полета:</Label>
                <InputGroup size="sm">
                    <Input type="select" id="flightProfile" bind:value={selectedProfile}>
                        <optgroup label="Стандартные профили">
                            {#each Object.keys(PROFILE_MAP) as profileName}
                                <option value={profileName}>{profileName}</option>
                            {/each}
                        </optgroup>
                        <optgroup label="Пользовательские профили">
                            <option>Custom</option>
                        </optgroup>
                    </Input>
                    <Button
                        color="secondary"
                        size="sm"
                        title="Edit profile"
                        disabled={selectedProfile !== "Custom"}
                    >
                        <span>Редакт.</span>
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="14"
                            height="14"
                            fill="currentColor"
                            class="bi bi-gear-fill"
                            viewBox="0 0 16 16"
                        >
                            <path
                                d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413-1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"
                            />
                        </svg>
                    </Button>
                </InputGroup>
            </FormGroup>

            <FormGroup spacing="mb-2">
                <Label for="startPoint" class="form-label">Точка старта:</Label>
                <InputGroup size="sm">
                    <Input type="select" id="startPoint" bind:value={startPoint}>
                        <option>Custom</option>
                        <option>Preset 1</option>
                        <option>Preset 2</option>
                    </Input>
                    <Button
                        color="secondary"
                        title="Edit Saved Locations"
                        on:click={() => console.log("Not implemented yet")}
                    >
                        <span>Редакт.</span>
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="16"
                            height="16"
                            fill="currentColor"
                            class="bi bi-journal-bookmark-fill"
                            viewBox="0 0 16 16"
                        >
                            <path
                                fill-rule="evenodd"
                                d="M6 1h6v7a.5.5 0 0 1-.757.429L9 7.083 6.757 8.43A.5.5 0 0 1 6 8z"
                            />
                            <path
                                d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2"
                            />
                            <path
                                d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z"
                            />
                        </svg>
                    </Button>
                </InputGroup>
            </FormGroup>

            <FormGroup spacing="mb-2">
                <Label for="latitude" class="form-label">Широта/Долгота:</Label>
                <InputGroup size="sm">
                    <Input id="latitude" type="text" bind:value={inputLat} placeholder="Latitude" />
                    <InputGroupText>/</InputGroupText>
                    <Input id="longitude" type="text" bind:value={inputLng} placeholder="Longitude" />
                    <Button color="success" size="sm" on:click={applyCoordinatesFromInput} title="Apply Coordinates"
                        >✓</Button
                    >
                </InputGroup>
            </FormGroup>

            <FormGroup spacing="mb-2">
                <Button
                    color="outline-secondary"
                    size="sm"
                    class="w-100"
                    on:click={ handleClickSelectOnMap }>Указать на карте</Button
                >
            </FormGroup>

            <FormGroup spacing="mb-2">
                <Label for="startHeight" class="form-label">Высота точки старта:</Label>
                <Input
                    type="number"
                    id="startHeight"
                    class="form-control-sm"
                    bind:value={$FlightParametersStore.launch_altitude}
                />
            </FormGroup>

            <div class="mb-2 d-flex gap-2">
                <FormGroup class="flex-fill w-50" spacing="mb-0">
                    <Label for="startTime" class="form-label">Время старта (UTC):</Label>
                    <Input type="time" id="startTime" class="form-control-sm" bind:value={startTime} step="1" />
                </FormGroup>
                <FormGroup class="flex-fill w-50" spacing="mb-0">
                    <Label for="startDate" class="form-label">Дата старта:</Label>
                    <Input type="date" id="startDate" class="form-control-sm" bind:value={startDate} />
                </FormGroup>
            </div>

            <div class="mb-2 d-flex gap-2">
                <FormGroup class="flex-fill w-50" spacing="mb-0">
                    <Label for="ascentRate" class="form-label">Скорость подъема (м/с):</Label>
                    <Input
                        type="number"
                        id="ascentRate"
                        class="form-control-sm"
                        bind:value={$FlightParametersStore.ascent_rate}
                    />
                </FormGroup>
                <FormGroup class="flex-fill w-50" spacing="mb-0">
                    <Label for="descentRate" class="form-label">Скорость спуска (м/с):</Label>
                    <Input
                        type="number"
                        id="descentRate"
                        class="form-control-sm"
                        bind:value={$FlightParametersStore.descent_rate}
                    />
                </FormGroup>
            </div>

            <FormGroup spacing="mb-2">
                <Label for="burstAltitude" class="form-label">Высота разрыва (м):</Label>
                <Input
                    type="number"
                    id="burstAltitude"
                    class="form-control-sm"
                    bind:value={$FlightParametersStore.burst_altitude}
                />
            </FormGroup>

            <div class="d-grid gap-1">
                <Button color="outline-secondary" size="sm">Показать график высоты</Button>
                <Button size="sm" color="primary" on:click={handleGetPrediction}>Выполнить прогнозирование</Button>
            </div>
        </CardBody>
    {/if}
</Card>
