'use client'
import {faMapMarkerAlt, faPlus, faShare, faToggleOn, faTrash} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import React, {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
import {SessionContext} from "@/context/SessionContext";
import {AlertContext} from "@/context/AlertContext";
import {BookContext} from "@/context/BookContext";
import System from '@/lib/models/System';
import InputField from "@/components/form/InputField";
import TextInput from '@/components/form/TextInput';
import TexteAreaInput from "@/components/form/TexteAreaInput";
import {useTranslations} from "next-intl";
import {LangContext, LangContextProps} from "@/context/LangContext";
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
import {SyncedBook} from "@/lib/models/SyncedBook";
import {SeriesContext, SeriesContextProps} from "@/context/SeriesContext";
import {SeriesSyncContext, SeriesSyncContextProps} from "@/context/SeriesSyncContext";
import {SyncedSeries} from "@/lib/models/SyncedSeries";
import ToggleSwitch from "@/components/form/ToggleSwitch";
import {SeriesLocationElement, SeriesLocationItem, SeriesLocationSubElement} from "@/lib/models/Series";
import SeriesImportSelector from "@/components/form/SeriesImportSelector";
import * as tauri from '@/lib/tauri';

interface SubElement {
    id: string;
    name: string;
    description: string;
}

interface Element {
    id: string;
    name: string;
    description: string;
    subElements: SubElement[];
}

interface LocationProps {
    id: string;
    name: string;
    elements: Element[];
    seriesLocationId?: string | null;
}

interface LocationListResponse {
    locations: LocationProps[];
    enabled: boolean;
}

interface LocationComponentProps {
    showToggle?: boolean;
    entityType?: 'book' | 'series';
    entityId?: string;
}

export function LocationComponent(props: LocationComponentProps, ref: React.Ref<{ handleSave: () => Promise<void> }>) {
    const {showToggle = true, entityType = 'book', entityId} = props;
    const t = useTranslations();
    const {lang} = useContext<LangContextProps>(LangContext);
    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
    const {session} = useContext(SessionContext);
    const {successMessage, errorMessage} = useContext(AlertContext);
    const {book, setBook} = useContext(BookContext);
    const {seriesId, localSeries} = useContext<SeriesContextProps>(SeriesContext);
    const {localSyncedSeries} = useContext<SeriesSyncContextProps>(SeriesSyncContext);

    const currentEntityId: string = entityId || book?.bookId || '';
    const isSeriesMode: boolean = entityType === 'series';
    const token: string = session.accessToken;

    const [sections, setSections] = useState<LocationProps[]>([]);
    const [seriesLocations, setSeriesLocations] = useState<SeriesLocationItem[]>([]);
    const [newSectionName, setNewSectionName] = useState<string>('');
    const [newElementNames, setNewElementNames] = useState<{ [key: string]: string }>({});
    const [newSubElementNames, setNewSubElementNames] = useState<{ [key: string]: string }>({});
    const [toolEnabled, setToolEnabled] = useState<boolean>(isSeriesMode ? true : (book?.tools?.locations ?? false));
    const bookSeriesId: string | null = book?.seriesId || null;

    useImperativeHandle(ref, function () {
        return {
            handleSave: handleSave,
        };
    });

    useEffect((): void => {
        if (currentEntityId) {
            getAllLocations().then();
        }
    }, [currentEntityId]);

    useEffect((): void => {
        if (bookSeriesId && !isSeriesMode) {
            getSeriesLocations().then();
        }
    }, [bookSeriesId]);

    async function getSeriesLocations(): Promise<void> {
        if (!bookSeriesId) return;
        try {
            const response: SeriesLocationItem[] = await System.authGetQueryToServer<SeriesLocationItem[]>(
                'series/location/list',
                token,
                lang,
                {seriesid: bookSeriesId}
            );
            if (response) {
                setSeriesLocations(response);
            }
        } catch (e: unknown) {
            if (e instanceof Error) {
                console.error('Error loading series locations:', e.message);
            }
        }
    }

    async function handleToggleTool(enabled: boolean): Promise<void> {
        if (isSeriesMode) return;
        try {
            let response: boolean;
            if (isCurrentlyOffline() || book?.localBook) {
                response = await tauri.updateBookToolSetting(currentEntityId, 'locations', enabled);
            } else {
                response = await System.authPatchToServer<boolean>('book/tool-setting', {
                    bookId: currentEntityId,
                    toolName: 'locations',
                    enabled: enabled
                }, token, lang);
                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
                    addToQueue('update_book_tool_setting', {data: {
                        bookId: currentEntityId,
                        toolName: 'locations',
                        enabled: enabled
                    }});
                }
            }
            if (response && setBook && book) {
                setToolEnabled(enabled);
                setBook({
                    ...book, tools: {
                        characters: book.tools?.characters ?? false,
                        worlds: book.tools?.worlds ?? false,
                        spells: book.tools?.spells ?? false,
                        locations: enabled
                    }
                });
            }
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            }
        }
    }

    async function getAllLocations(): Promise<void> {
        try {
            if (isSeriesMode) {
                let response: SeriesLocationItem[];
                if (isCurrentlyOffline() || localSeries) {
                    response = await tauri.getSeriesLocationList(currentEntityId) as SeriesLocationItem[];
                } else {
                    response = await System.authGetQueryToServer<SeriesLocationItem[]>(
                        'series/location/list',
                        token,
                        lang,
                        {seriesid: currentEntityId}
                    );
                }
                if (response) {
                    const mappedLocations: LocationProps[] = response.map((loc: SeriesLocationItem): LocationProps => ({
                        id: loc.id,
                        name: loc.name,
                        elements: loc.elements.map((elem: SeriesLocationElement) => ({
                            id: elem.id,
                            name: elem.name,
                            description: elem.description,
                            subElements: elem.subElements.map((sub: SeriesLocationSubElement) => ({
                                id: sub.id,
                                name: sub.name,
                                description: sub.description,
                            })),
                        })),
                    }));
                    setSections(mappedLocations);
                }
            } else {
                let response: LocationListResponse;
                if (isCurrentlyOffline() || book?.localBook) {
                    response = await tauri.getAllLocations(currentEntityId, true) as LocationListResponse;
                } else {
                    response = await System.authGetQueryToServer<LocationListResponse>(`location/all`, token, lang, {
                        bookid: currentEntityId,
                    });
                }
                if (response) {
                    setSections(response.locations);
                    setToolEnabled(response.enabled);
                    if (setBook && book) {
                        setBook({
                            ...book, tools: {
                                characters: book.tools?.characters ?? false,
                                worlds: book.tools?.worlds ?? false,
                                spells: book.tools?.spells ?? false,
                                locations: response.enabled
                            }
                        });
                    }
                }
            }
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('locationComponent.errorUnknownFetchLocations'));
            }
        }
    }

    async function handleAddSection(): Promise<void> {
        if (!newSectionName.trim()) {
            errorMessage(t('locationComponent.errorSectionNameEmpty'))
            return
        }
        try {
            let sectionId: string;
            if (isSeriesMode) {
                const addData = {
                    seriesId: currentEntityId,
                    name: newSectionName,
                };
                if (isCurrentlyOffline() || localSeries) {
                    sectionId = await tauri.addSeriesLocationSection(addData);
                } else {
                    sectionId = await System.authPostToServer<string>(
                        'series/location/section/add',
                        addData,
                        token,
                        lang
                    );
                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
                        addToQueue('add_series_location_section', {data: addData});
                    }
                }
                if (!sectionId) {
                    errorMessage(t('locationComponent.errorUnknownAddSection'));
                    return;
                }
            } else if (isCurrentlyOffline() || book?.localBook) {
                sectionId = await tauri.addLocationSection(newSectionName, currentEntityId);
            } else {
                sectionId = await System.authPostToServer<string>(`location/section/add`, {
                    bookId: currentEntityId,
                    locationName: newSectionName,
                }, token, lang);

                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
                    addToQueue('add_location_section', {data: {
                        bookId: currentEntityId,
                        sectionId,
                        locationName: newSectionName,
                    }});
                }
            }
            if (!sectionId) {
                errorMessage(t('locationComponent.errorUnknownAddSection'));
                return;
            }
            const newLocation: LocationProps = {
                id: sectionId,
                name: newSectionName,
                elements: [],
            };
            setSections([...sections, newLocation]);
            setNewSectionName('');
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('locationComponent.errorUnknownAddSection'));
            }
        }
    }

    async function handleAddElement(sectionId: string): Promise<void> {
        if (!newElementNames[sectionId]?.trim()) {
            errorMessage(t('locationComponent.errorElementNameEmpty'))
            return
        }
        try {
            let elementId: string;
            if (isSeriesMode) {
                const addData = {
                    locationId: sectionId,
                    name: newElementNames[sectionId],
                };
                if (isCurrentlyOffline() || localSeries) {
                    elementId = await tauri.addSeriesLocationElement(addData);
                } else {
                    elementId = await System.authPostToServer<string>(
                        'series/location/element/add',
                        addData,
                        token,
                        lang
                    );
                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
                        addToQueue('add_series_location_element', {data: addData});
                    }
                }
                if (!elementId) {
                    errorMessage(t('locationComponent.errorUnknownAddElement'));
                    return;
                }
            } else if (isCurrentlyOffline() || book?.localBook) {
                elementId = await tauri.addLocationElement(sectionId, newElementNames[sectionId]);
            } else {
                elementId = await System.authPostToServer<string>(`location/element/add`, {
                        bookId: currentEntityId,
                        locationId: sectionId,
                        elementName: newElementNames[sectionId],
                    },
                    token, lang);

                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
                    addToQueue('add_location_element', {data: {
                        bookId: currentEntityId,
                        locationId: sectionId,
                        elementId,
                        elementName: newElementNames[sectionId],
                    }});
                }
            }
            if (!elementId) {
                errorMessage(t('locationComponent.errorUnknownAddElement'));
                return;
            }
            const updatedSections: LocationProps[] = [...sections];
            const sectionIndex: number = updatedSections.findIndex(
                (section: LocationProps): boolean => section.id === sectionId,
            );
            updatedSections[sectionIndex].elements.push({
                id: elementId,
                name: newElementNames[sectionId],
                description: '',
                subElements: [],
            });
            setSections(updatedSections);
            setNewElementNames({...newElementNames, [sectionId]: ''});
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('locationComponent.errorUnknownAddElement'));
            }
        }
    }

    function handleElementChange(
        sectionId: string,
        elementIndex: number,
        field: keyof Element,
        value: string,
    ): void {
        const updatedSections: LocationProps[] = [...sections];
        const sectionIndex: number = updatedSections.findIndex(
            (section: LocationProps): boolean => section.id === sectionId,
        );
        // @ts-ignore
        updatedSections[sectionIndex].elements[elementIndex][field] = value;
        setSections(updatedSections);
    }

    async function handleAddSubElement(
        sectionId: string,
        elementIndex: number,
    ): Promise<void> {
        if (!newSubElementNames[elementIndex]?.trim()) {
            errorMessage(t('locationComponent.errorSubElementNameEmpty'))
            return
        }
        const sectionIndex: number = sections.findIndex(
            (section: LocationProps): boolean => section.id === sectionId,
        );
        try {
            let subElementId: string;
            const elementId = sections[sectionIndex].elements[elementIndex].id;
            if (isSeriesMode) {
                const addData = {
                    elementId: elementId,
                    name: newSubElementNames[elementIndex],
                };
                if (isCurrentlyOffline() || localSeries) {
                    subElementId = await tauri.addSeriesLocationSubElement(addData);
                } else {
                    subElementId = await System.authPostToServer<string>(
                        'series/location/sub-element/add',
                        addData,
                        token,
                        lang
                    );
                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
                        addToQueue('add_series_location_sub_element', {data: addData});
                    }
                }
                if (!subElementId) {
                    errorMessage(t('locationComponent.errorUnknownAddSubElement'));
                    return;
                }
            } else if (isCurrentlyOffline() || book?.localBook) {
                subElementId = await tauri.addLocationSubElement(elementId, newSubElementNames[elementIndex]);
            } else {
                subElementId = await System.authPostToServer<string>(`location/sub-element/add`, {
                    elementId: elementId,
                    subElementName: newSubElementNames[elementIndex],
                }, token, lang);

                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
                    addToQueue('add_location_sub_element', {data: {
                        elementId: elementId,
                        subElementId,
                        subElementName: newSubElementNames[elementIndex],
                    }});
                }
            }
            if (!subElementId) {
                errorMessage(t('locationComponent.errorUnknownAddSubElement'));
                return;
            }
            const updatedSections: LocationProps[] = [...sections];
            updatedSections[sectionIndex].elements[elementIndex].subElements.push({
                id: subElementId,
                name: newSubElementNames[elementIndex],
                description: '',
            });
            setSections(updatedSections);
            setNewSubElementNames({...newSubElementNames, [elementIndex]: ''});
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('locationComponent.errorUnknownAddSubElement'));
            }
        }
    }

    function handleSubElementChange(
        sectionId: string,
        elementIndex: number,
        subElementIndex: number,
        field: keyof SubElement,
        value: string,
    ): void {
        const updatedSections: LocationProps[] = [...sections];
        const sectionIndex: number = updatedSections.findIndex(
            (section: LocationProps): boolean => section.id === sectionId,
        );
        updatedSections[sectionIndex].elements[elementIndex].subElements[
            subElementIndex
            ][field] = value;
        setSections(updatedSections);
    }

    async function handleRemoveElement(
        sectionId: string,
        elementIndex: number,
    ): Promise<void> {
        try {
            let response: boolean;
            const elementId = sections.find((section: LocationProps): boolean => section.id === sectionId)
                ?.elements[elementIndex].id;
            const deletedAt: number = System.timeStampInSeconds();
            if (isSeriesMode) {
                const deleteData = {elementId: elementId, deletedAt};
                if (isCurrentlyOffline() || localSeries) {
                    response = await tauri.deleteSeriesLocationElement(deleteData.elementId!, deleteData.deletedAt);
                } else {
                    response = await System.authDeleteToServer<boolean>('series/location/element/delete', deleteData, token, lang);
                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
                        addToQueue('delete_series_location_element', {data: deleteData});
                    }
                }
            } else if (isCurrentlyOffline() || book?.localBook) {
                response = await tauri.deleteLocationElement(elementId!, currentEntityId, deletedAt);
            } else {
                response = await System.authDeleteToServer<boolean>(`location/element/delete`, {
                    elementId: elementId, bookId: currentEntityId, deletedAt,
                }, token, lang);

                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
                    addToQueue('delete_location_element', {data: {
                        elementId: elementId, bookId: currentEntityId, deletedAt,
                    }});
                }
            }
            if (!response) {
                errorMessage(t('locationComponent.errorUnknownDeleteElement'));
                return;
            }
            const updatedSections: LocationProps[] = [...sections];
            const sectionIndex: number = updatedSections.findIndex((section: LocationProps): boolean => section.id === sectionId,);
            updatedSections[sectionIndex].elements.splice(elementIndex, 1);
            setSections(updatedSections);
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('locationComponent.errorUnknownDeleteElement'));
            }
        }
    }

    async function handleRemoveSubElement(
        sectionId: string,
        elementIndex: number,
        subElementIndex: number,
    ): Promise<void> {
        try {
            let response: boolean;
            const subElementId = sections.find((section: LocationProps): boolean => section.id === sectionId)?.elements[elementIndex].subElements[subElementIndex].id;
            const deletedAt: number = System.timeStampInSeconds();
            if (isSeriesMode) {
                const deleteData = {subElementId: subElementId, deletedAt};
                if (isCurrentlyOffline() || localSeries) {
                    response = await tauri.deleteSeriesLocationSubElement(deleteData.subElementId!, deleteData.deletedAt);
                } else {
                    response = await System.authDeleteToServer<boolean>('series/location/sub-element/delete', deleteData, token, lang);
                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
                        addToQueue('delete_series_location_sub_element', {data: deleteData});
                    }
                }
            } else if (isCurrentlyOffline() || book?.localBook) {
                response = await tauri.deleteLocationSubElement(subElementId!, currentEntityId, deletedAt);
            } else {
                response = await System.authDeleteToServer<boolean>(`location/sub-element/delete`, {
                    subElementId: subElementId, bookId: currentEntityId, deletedAt,
                }, token, lang);

                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
                    addToQueue('delete_location_sub_element', {data: {
                        subElementId: subElementId, bookId: currentEntityId, deletedAt,
                    }});
                }
            }
            if (!response) {
                errorMessage(t('locationComponent.errorUnknownDeleteSubElement'));
                return;
            }
            const updatedSections: LocationProps[] = [...sections];
            const sectionIndex: number = updatedSections.findIndex((section: LocationProps): boolean => section.id === sectionId,);
            updatedSections[sectionIndex].elements[elementIndex].subElements.splice(subElementIndex, 1,);
            setSections(updatedSections);
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('locationComponent.errorUnknownDeleteSubElement'));
            }
        }
    }

    async function handleRemoveSection(sectionId: string): Promise<void> {
        try {
            let response: boolean;
            const deletedAt: number = System.timeStampInSeconds();
            if (isSeriesMode) {
                const deleteData = {locationId: sectionId, deletedAt};
                if (isCurrentlyOffline() || localSeries) {
                    response = await tauri.deleteSeriesLocation(deleteData.locationId, deleteData.deletedAt);
                } else {
                    response = await System.authDeleteToServer<boolean>('series/location/delete', deleteData, token, lang);
                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
                        addToQueue('delete_series_location', {data: deleteData});
                    }
                }
            } else if (isCurrentlyOffline() || book?.localBook) {
                response = await tauri.deleteLocationSection(sectionId, currentEntityId, deletedAt);
            } else {
                response = await System.authDeleteToServer<boolean>(`location/delete`, {
                    locationId: sectionId, bookId: currentEntityId, deletedAt,
                }, token, lang);

                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
                    addToQueue('delete_location_section', {data: {
                        locationId: sectionId, bookId: currentEntityId, deletedAt,
                    }});
                }
            }
            if (!response) {
                errorMessage(t('locationComponent.errorUnknownDeleteSection'));
                return;
            }
            const updatedSections: LocationProps[] = sections.filter((section: LocationProps): boolean => section.id !== sectionId,);
            setSections(updatedSections);
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('locationComponent.errorUnknownDeleteSection'));
            }
        }
    }

    async function handleSave(): Promise<void> {
        try {
            let response: boolean;
            if (isCurrentlyOffline() || book?.localBook) {
                response = await tauri.updateLocations(sections) as boolean;
            } else {
                response = await System.authPostToServer<boolean>(`location/update`, {
                    locations: sections,
                }, token, lang);

                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
                    addToQueue('update_locations', {data: {
                        locations: sections,
                    }});
                }
            }
            if (!response) {
                errorMessage(t('locationComponent.errorUnknownSave'));
                return;
            }
            successMessage(t('locationComponent.successSave'));
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('locationComponent.errorUnknownSave'));
            }
        }
    }

    async function handleExportToSeries(section: LocationProps): Promise<void> {
        if (!bookSeriesId) return;

        try {
            const seriesLocationId: string = await System.authPostToServer<string>('series/location/section/add', {
                seriesId: bookSeriesId,
                name: section.name,
            }, token, lang);

            if (seriesLocationId) {
                const updateResponse: boolean = await System.authPostToServer<boolean>('location/section/update', {
                    sectionId: section.id,
                    sectionName: section.name,
                    seriesLocationId: seriesLocationId,
                }, token, lang);

                if (updateResponse) {
                    setSections(sections.map((s: LocationProps): LocationProps =>
                        s.id === section.id ? {...s, seriesLocationId: seriesLocationId} : s
                    ));
                    await getSeriesLocations();
                    successMessage(t("locationComponent.exportSuccess"));
                }
            }
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            }
        }
    }

    async function handleImportFromSeries(seriesLocationId: string): Promise<void> {
        const seriesLocation: SeriesLocationItem | undefined = seriesLocations.find((location: SeriesLocationItem): boolean => location.id === seriesLocationId);
        if (!seriesLocation) return;

        try {
            const sectionId: string = await System.authPostToServer<string>('location/section/add', {
                bookId: currentEntityId,
                locationName: seriesLocation.name,
                seriesLocationId: seriesLocationId,
            }, token, lang);

            if (!sectionId) {
                errorMessage(t('locationComponent.importError'));
                return;
            }

            const importedElements: Element[] = [];

            for (const seriesElement of seriesLocation.elements) {
                const elementId: string = await System.authPostToServer<string>('location/element/add', {
                    bookId: currentEntityId,
                    locationId: sectionId,
                    elementName: seriesElement.name,
                }, token, lang);

                if (!elementId) continue;

                const importedSubElements: SubElement[] = [];

                for (const seriesSubElement of seriesElement.subElements) {
                    const subElementId: string = await System.authPostToServer<string>('location/sub-element/add', {
                        elementId: elementId,
                        subElementName: seriesSubElement.name,
                    }, token, lang);

                    if (subElementId) {
                        importedSubElements.push({
                            id: subElementId,
                            name: seriesSubElement.name,
                            description: seriesSubElement.description,
                        });
                    }
                }

                importedElements.push({
                    id: elementId,
                    name: seriesElement.name,
                    description: seriesElement.description,
                    subElements: importedSubElements,
                });
            }

            const newLocation: LocationProps = {
                id: sectionId,
                name: seriesLocation.name,
                elements: importedElements,
                seriesLocationId: seriesLocationId,
            };
            setSections([...sections, newLocation]);
            successMessage(t('locationComponent.importSuccess'));
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            }
        }
    }

    return (
        <div className="space-y-6">
            {showToggle && !isSeriesMode && (
                <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
                    <InputField
                        icon={faToggleOn}
                        fieldName={t('locationComponent.enableTool')}
                        input={
                            <ToggleSwitch
                                checked={toolEnabled}
                                onChange={async (checked: boolean): Promise<void> => handleToggleTool(checked)}
                            />
                        }
                    />
                    <p className="text-muted text-sm mt-2">
                        {t('locationComponent.enableToolDescription')}
                    </p>
                </div>
            )}
            {(toolEnabled || isSeriesMode) && (
                <>
                    {!isSeriesMode && bookSeriesId &&
                        seriesLocations.filter((seriesLocation: SeriesLocationItem): boolean => !sections.some((section: LocationProps): boolean => section.seriesLocationId === seriesLocation.id)).length > 0 && (
                            <SeriesImportSelector
                                availableItems={seriesLocations
                                    .filter((seriesLocation: SeriesLocationItem): boolean => !sections.some((section: LocationProps): boolean => section.seriesLocationId === seriesLocation.id))
                                    .map((seriesLocation: SeriesLocationItem) => ({id: seriesLocation.id, name: seriesLocation.name}))}
                                onImport={handleImportFromSeries}
                                placeholder={t("seriesImport.selectElement")}
                                label={t("seriesImport.importFromSeries")}
                            />
                        )}
                    <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
                        <div className="grid grid-cols-1 gap-4 mb-4">
                            <InputField
                                input={
                                    <TextInput
                                        value={newSectionName}
                                        setValue={(e: ChangeEvent<HTMLInputElement>) => setNewSectionName(e.target.value)}
                                        placeholder={t("locationComponent.newSectionPlaceholder")}
                                    />
                                }
                                actionIcon={faPlus}
                                actionLabel={t("locationComponent.addSectionLabel")}
                                addButtonCallBack={handleAddSection}
                            />
                        </div>
                    </div>

                    {sections.length > 0 ? (
                        sections.map((section: LocationProps) => (
                            <div key={section.id}
                                 className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
                                <h3 className="text-lg font-semibold text-text-primary mb-4 flex items-center">
                                    <FontAwesomeIcon icon={faMapMarkerAlt} className="mr-2 w-5 h-5"/>
                                    {section.name}
                                    <span
                                        className="ml-2 text-sm bg-dark-background text-text-secondary py-0.5 px-2 rounded-full">
                                        {section.elements.length || 0}
                                    </span>
                                    <div className="ml-auto flex items-center gap-2">
                                        {!isSeriesMode && bookSeriesId && !section.seriesLocationId && (
                                            <button
                                                onClick={(): Promise<void> => handleExportToSeries(section)}
                                                title={t("locationComponent.exportToSeries")}
                                                className="bg-blue-500/90 text-text-primary rounded-full p-1.5 hover:bg-blue-500 transition-colors shadow-md"
                                            >
                                                <FontAwesomeIcon icon={faShare} className={'w-5 h-5'}/>
                                            </button>
                                        )}
                                        <button onClick={(): Promise<void> => handleRemoveSection(section.id)}
                                                className="bg-dark-background text-text-primary rounded-full p-1.5 hover:bg-secondary transition-colors shadow-md">
                                            <FontAwesomeIcon icon={faTrash} className={'w-5 h-5'}/>
                                        </button>
                                    </div>
                                </h3>
                                <div className="space-y-4">
                                    {section.elements.length > 0 ? (
                                        section.elements.map((element, elementIndex) => (
                                            <div key={element.id}
                                                 className="bg-dark-background rounded-lg p-3 border-l-4 border-primary">
                                                <div className="mb-2">
                                                    <InputField
                                                        input={
                                                            <TextInput
                                                                value={element.name}
                                                                setValue={(e: ChangeEvent<HTMLInputElement>) =>
                                                                    handleElementChange(section.id, elementIndex, 'name', e.target.value)
                                                                }
                                                                placeholder={t("locationComponent.elementNamePlaceholder")}
                                                            />
                                                        }
                                                        removeButtonCallBack={(): Promise<void> => handleRemoveElement(section.id, elementIndex)}
                                                    />
                                                </div>
                                                <TexteAreaInput
                                                    value={element.description}
                                                    setValue={(e: React.ChangeEvent<HTMLTextAreaElement>): void => handleElementChange(section.id, elementIndex, 'description', e.target.value)}
                                                    placeholder={t("locationComponent.elementDescriptionPlaceholder")}
                                                />

                                                <div className="mt-4 pt-4 border-t border-secondary/50">
                                                    {element.subElements.length > 0 && (
                                                        <h4 className="text-sm italic text-text-secondary mb-3">{t("locationComponent.subElementsHeading")}</h4>
                                                    )}

                                                    {element.subElements.map((subElement: SubElement, subElementIndex: number) => (
                                                        <div key={subElement.id}
                                                             className="bg-darkest-background rounded-lg p-3 mb-3">
                                                            <div className="mb-2">
                                                                <InputField
                                                                    input={
                                                                        <TextInput
                                                                            value={subElement.name}
                                                                            setValue={(e: ChangeEvent<HTMLInputElement>): void =>
                                                                                handleSubElementChange(section.id, elementIndex, subElementIndex, 'name', e.target.value)
                                                                            }
                                                                            placeholder={t("locationComponent.subElementNamePlaceholder")}
                                                                        />
                                                                    }
                                                                    removeButtonCallBack={(): Promise<void> => handleRemoveSubElement(section.id, elementIndex, subElementIndex)}
                                                                />
                                                            </div>
                                                            <TexteAreaInput
                                                                value={subElement.description}
                                                                setValue={(e) =>
                                                                    handleSubElementChange(section.id, elementIndex, subElementIndex, 'description', e.target.value)
                                                                }
                                                                placeholder={t("locationComponent.subElementDescriptionPlaceholder")}
                                                            />
                                                        </div>
                                                    ))}

                                                    <InputField
                                                        input={
                                                            <TextInput
                                                                value={newSubElementNames[elementIndex] || ''}
                                                                setValue={(e: ChangeEvent<HTMLInputElement>) =>
                                                                    setNewSubElementNames({
                                                                        ...newSubElementNames,
                                                                        [elementIndex]: e.target.value
                                                                    })
                                                                }
                                                                placeholder={t("locationComponent.newSubElementPlaceholder")}
                                                            />
                                                        }
                                                        addButtonCallBack={(): Promise<void> => handleAddSubElement(section.id, elementIndex)}
                                                    />
                                                </div>
                                            </div>
                                        ))
                                    ) : (
                                        <div className="text-center py-4 text-text-secondary italic">
                                            {t("locationComponent.noElementAvailable")}
                                        </div>
                                    )}

                                    <InputField
                                        input={
                                            <TextInput
                                                value={newElementNames[section.id] || ''}
                                                setValue={(e: ChangeEvent<HTMLInputElement>) =>
                                                    setNewElementNames({...newElementNames, [section.id]: e.target.value})
                                                }
                                                placeholder={t("locationComponent.newElementPlaceholder")}
                                            />
                                        }
                                        addButtonCallBack={(): Promise<void> => handleAddElement(section.id)}
                                    />
                                </div>
                            </div>
                        ))
                    ) : (
                        <div
                            className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-8 border border-secondary/50 text-center">
                            <p className="text-text-secondary mb-4">{t("locationComponent.noSectionAvailable")}</p>
                        </div>
                    )}
                </>
            )}
        </div>
    );
}

export default forwardRef(LocationComponent);