'use client'
import React, {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faPlus, faShare, faToggleOn, IconDefinition} from "@fortawesome/free-solid-svg-icons";
import {WorldContext} from '@/context/WorldContext';
import {BookContext} from "@/context/BookContext";
import {AlertContext} from "@/context/AlertContext";
import {SelectBoxProps} from "@/shared/interface";
import System from "@/lib/models/System";
import {elementSections, WorldListResponse, WorldProps} from "@/lib/models/World";
import {SessionContext} from "@/context/SessionContext";
import InputField from "@/components/form/InputField";
import TextInput from '@/components/form/TextInput';
import TexteAreaInput from "@/components/form/TexteAreaInput";
import WorldElementComponent from './WorldElement';
import SelectBox from "@/components/form/SelectBox";
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 ToggleSwitch from "@/components/form/ToggleSwitch";
import {SeriesWorldProps, SeriesWorldListItem} from "@/lib/models/Series";
import SeriesImportSelector from "@/components/form/SeriesImportSelector";
import SyncFieldWrapper from "@/components/form/SyncFieldWrapper";

export interface ElementSection {
    title: string;
    section: keyof WorldProps;
    icon: IconDefinition;
}

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

export function WorldSetting(props: WorldSettingProps, 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 {errorMessage, successMessage} = useContext(AlertContext);
    const {session} = useContext(SessionContext);
    const {book, setBook} = useContext(BookContext);

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

    const [worlds, setWorlds] = useState<WorldProps[]>([]);
    const [seriesWorlds, setSeriesWorlds] = useState<SeriesWorldProps[]>([]);
    const [newWorldName, setNewWorldName] = useState<string>('');
    const [selectedWorldIndex, setSelectedWorldIndex] = useState<number>(0);
    const [worldsSelector, setWorldsSelector] = useState<SelectBoxProps[]>([]);
    const [showAddNewWorld, setShowAddNewWorld] = useState<boolean>(false);
    const [toolEnabled, setToolEnabled] = useState<boolean>(isSeriesMode ? true : (book?.tools?.worlds ?? false));
    const bookSeriesId: string | null = book?.seriesId || null;

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

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

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

    async function getSeriesWorlds(): Promise<void> {
        if (!bookSeriesId || isCurrentlyOffline()) return;
        try {
            const response: SeriesWorldProps[] = await System.authGetQueryToServer<SeriesWorldProps[]>('series/world/list', session.accessToken, lang, {
                seriesid: bookSeriesId
            });
            if (response) {
                setSeriesWorlds(response);
            }
        } catch (e: unknown) {
            if (e instanceof Error) {
                console.error('Error loading series worlds:', e.message);
            }
        }
    }

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

    async function getWorlds(): Promise<void> {
        try {
            if (isSeriesMode) {
                // Series mode: server only (series are not local)
                const response: SeriesWorldProps[] = await System.authGetQueryToServer<SeriesWorldProps[]>('series/world/list', session.accessToken, lang, {
                    seriesid: currentEntityId
                });
                if (response) {
                    const mappedWorlds: WorldProps[] = response.map((world: SeriesWorldProps): WorldProps => ({
                        id: world.id,
                        name: world.name,
                        history: world.history || '',
                        politics: world.politics || '',
                        economy: world.economy || '',
                        religion: world.religion || '',
                        languages: world.languages || '',
                        laws: world.laws || [],
                        biomes: world.biomes || [],
                        issues: world.issues || [],
                        customs: world.customs || [],
                        kingdoms: world.kingdoms || [],
                        climate: world.climate || [],
                        resources: world.resources || [],
                        wildlife: world.wildlife || [],
                        arts: world.arts || [],
                        ethnicGroups: world.ethnicGroups || [],
                        socialClasses: world.socialClasses || [],
                        importantCharacters: world.importantCharacters || [],
                    }));
                    setWorlds(mappedWorlds);
                    const formattedWorlds: SelectBoxProps[] = response.map((world: SeriesWorldProps): SelectBoxProps => ({
                        label: world.name,
                        value: world.id,
                    }));
                    setWorldsSelector(formattedWorlds);
                }
            } else {
                // Book mode: dual offline/online logic
                let response: WorldListResponse;
                if (isCurrentlyOffline() || book?.localBook) {
                    response = await window.electron.invoke<WorldListResponse>('db:book:worlds:get', {bookid: currentEntityId});
                } else {
                    response = await System.authGetQueryToServer<WorldListResponse>('book/worlds', session.accessToken, lang, {
                        bookid: currentEntityId,
                    });
                }
                if (response) {
                    setWorlds(response.worlds);
                    setToolEnabled(response.enabled);
                    if (setBook && book) {
                        setBook({
                            ...book, tools: {
                                characters: book.tools?.characters ?? false,
                                worlds: response.enabled,
                                locations: book.tools?.locations ?? false,
                                spells: book.tools?.spells ?? false
                            }
                        });
                    }
                    const formattedWorlds: SelectBoxProps[] = response.worlds.map(
                        (world: WorldProps): SelectBoxProps => ({
                            label: world.name,
                            value: world.id.toString(),
                        }),
                    );
                    setWorldsSelector(formattedWorlds);
                }
            }
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t("worldSetting.unknownError"))
            }
        }
    }

    async function handleAddNewWorld(): Promise<void> {
        if (newWorldName.trim() === '') {
            errorMessage(t("worldSetting.newWorldNameError"));
            return;
        }
        try {
            let newWorldId: string;
            if (isSeriesMode) {
                // Series mode: server only
                newWorldId = await System.authPostToServer<string>(
                    'series/world/add',
                    {
                        seriesId: currentEntityId,
                        name: newWorldName,
                    },
                    session.accessToken,
                    lang
                );
                if (!newWorldId) {
                    errorMessage(t("worldSetting.addWorldError"));
                    return;
                }
            } else if (isCurrentlyOffline() || book?.localBook) {
                // Book mode: offline/local
                newWorldId = await window.electron.invoke<string>('db:book:world:add', {
                    worldName: newWorldName,
                    bookId: currentEntityId,
                });
                if (!newWorldId) {
                    errorMessage(t("worldSetting.addWorldError"));
                    return;
                }
            } else {
                // Book mode: online
                newWorldId = await System.authPostToServer<string>('book/world/add', {
                    worldName: newWorldName,
                    bookId: currentEntityId,
                }, session.accessToken, lang);
                if (!newWorldId) {
                    errorMessage(t("worldSetting.addWorldError"));
                    return;
                }
                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
                    addToQueue('db:book:world:add', {
                        worldName: newWorldName,
                        worldId: newWorldId,
                        bookId: currentEntityId,
                    });
                }
            }
            const newWorld: WorldProps = {
                id: newWorldId,
                name: newWorldName,
                history: '',
                politics: '',
                economy: '',
                religion: '',
                languages: '',
                laws: [],
                biomes: [],
                issues: [],
                customs: [],
                kingdoms: [],
                climate: [],
                resources: [],
                wildlife: [],
                arts: [],
                ethnicGroups: [],
                socialClasses: [],
                importantCharacters: [],
            };
            setWorlds([...worlds, newWorld]);
            setWorldsSelector([
                ...worldsSelector,
                {label: newWorldName, value: newWorldId.toString()},
            ]);
            setNewWorldName('');
            setShowAddNewWorld(false);
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t("worldSetting.unknownError"))
            }
        }
    }

    async function handleUpdateWorld(): Promise<void> {
        if (worlds.length === 0) return;
        try {
            const currentWorld: WorldProps = worlds[selectedWorldIndex];
            let response: boolean;

            if (isSeriesMode) {
                // Series mode: server only
                response = await System.authPatchToServer<boolean>('series/world/update', {
                    worldId: currentWorld.id,
                    name: currentWorld.name,
                    history: currentWorld.history,
                    politics: currentWorld.politics,
                    economy: currentWorld.economy,
                    religion: currentWorld.religion,
                    languages: currentWorld.languages,
                }, session.accessToken, lang);
            } else if (isCurrentlyOffline() || book?.localBook) {
                // Book mode: offline/local
                response = await window.electron.invoke<boolean>('db:book:world:update', {
                    world: currentWorld,
                    bookId: currentEntityId,
                });
            } else {
                // Book mode: online
                response = await System.authPatchToServer<boolean>('book/world/update', {
                    world: currentWorld,
                    bookId: currentEntityId,
                }, session.accessToken, lang);
                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
                    addToQueue('db:book:world:update', {
                        world: currentWorld,
                        bookId: currentEntityId,
                    });
                }
            }

            if (!response) {
                errorMessage(t("worldSetting.updateWorldError"));
                return;
            }
            successMessage(t("worldSetting.updateWorldSuccess"));
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t("worldSetting.unknownError"))
            }
        }
    }

    function handleWorldSelect(worldId: string): void {
        const index: number = worlds.findIndex((world: WorldProps): boolean => world.id === worldId);
        if (index !== -1) {
            setSelectedWorldIndex(index);
        }
    }

    function handleInputChange(value: string, field: keyof WorldProps) {
        const updatedWorlds = [...worlds] as WorldProps[];
        (updatedWorlds[selectedWorldIndex][field] as string) = value;
        setWorlds(updatedWorlds);
    }

    async function handleExportToSeries(): Promise<void> {
        if (isCurrentlyOffline()) return;
        const selectedWorld: WorldProps | undefined = worlds[selectedWorldIndex];
        if (!selectedWorld || !bookSeriesId) return;

        try {
            const seriesWorldId: string = await System.authPostToServer<string>('series/world/add', {
                seriesId: bookSeriesId,
                world: {
                    name: selectedWorld.name,
                    history: selectedWorld.history || null,
                    politics: selectedWorld.politics || null,
                    economy: selectedWorld.economy || null,
                    religion: selectedWorld.religion || null,
                    languages: selectedWorld.languages || null,
                }
            }, session.accessToken, lang);

            if (seriesWorldId) {
                const updateResponse: boolean = await System.authPostToServer<boolean>('book/world/update', {
                    world: {
                        ...selectedWorld,
                        seriesWorldId: seriesWorldId
                    },
                }, session.accessToken, lang);

                if (updateResponse) {
                    const updatedWorlds: WorldProps[] = [...worlds];
                    updatedWorlds[selectedWorldIndex] = {...selectedWorld, seriesWorldId: seriesWorldId};
                    setWorlds(updatedWorlds);
                    await getSeriesWorlds();
                    successMessage(t("worldSetting.exportSuccess"));
                }
            }
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            }
        }
    }

    async function handleImportFromSeries(seriesWorldId: string): Promise<void> {
        if (isCurrentlyOffline()) return;
        const seriesWorld: SeriesWorldListItem | undefined = seriesWorlds.find((w) => w.id === seriesWorldId);
        if (!seriesWorld) return;

        try {
            const worldId: string = await System.authPostToServer<string>('book/world/add', {
                worldName: seriesWorld.name,
                bookId: currentEntityId,
                seriesWorldId: seriesWorldId,
            }, session.accessToken, lang);

            if (!worldId) {
                errorMessage(t("worldSetting.importError"));
                return;
            }

            // Sync to local if book is synced
            if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
                addToQueue('db:book:world:add', {
                    worldName: seriesWorld.name,
                    worldId: worldId,
                    bookId: currentEntityId,
                });
            }

            const newWorld: WorldProps = {
                id: worldId,
                name: seriesWorld.name,
                history: seriesWorld.history || '',
                politics: seriesWorld.politics || '',
                economy: seriesWorld.economy || '',
                religion: seriesWorld.religion || '',
                languages: seriesWorld.languages || '',
                laws: [],
                biomes: [],
                issues: [],
                customs: [],
                kingdoms: [],
                climate: [],
                resources: [],
                wildlife: [],
                arts: [],
                ethnicGroups: [],
                socialClasses: [],
                importantCharacters: [],
                seriesWorldId: seriesWorldId,
            };
            setWorlds([...worlds, newWorld]);
            setWorldsSelector([
                ...worldsSelector,
                {label: seriesWorld.name, value: worldId},
            ]);
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            }
        }
    }

    function getSeriesWorldForCurrentWorld(): SeriesWorldProps | null {
        const currentWorld: WorldProps = worlds[selectedWorldIndex];
        if (!currentWorld?.seriesWorldId) return null;
        return seriesWorlds.find((world: SeriesWorldListItem): boolean => world.id === currentWorld.seriesWorldId) || null;
    }

    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('worldSetting.enableTool')}
                        input={
                            <ToggleSwitch
                                checked={toolEnabled}
                                onChange={async (checked: boolean): Promise<void> => handleToggleTool(checked)}
                            />
                        }
                    />
                    <p className="text-muted text-sm mt-2">
                        {t('worldSetting.enableToolDescription')}
                    </p>
                </div>
            )}
            {(toolEnabled || isSeriesMode) && (
                <>
                    {!isSeriesMode && bookSeriesId && !isCurrentlyOffline() &&
                        seriesWorlds.filter((seriesWorld: SeriesWorldProps): boolean => !worlds.some((world: WorldProps): boolean => world.seriesWorldId === seriesWorld.id)).length > 0 && (
                            <SeriesImportSelector
                                availableItems={seriesWorlds
                                    .filter((seriesWorld: SeriesWorldProps): boolean => !worlds.some((world: WorldProps): boolean => world.seriesWorldId === seriesWorld.id))
                                    .map((seriesWorld: SeriesWorldProps) => ({id: seriesWorld.id, name: seriesWorld.name}))}
                                onImport={handleImportFromSeries}
                                placeholder={t("seriesImport.selectElement")}
                                label={t("seriesImport.importFromSeries")}
                            />
                        )}
                    <div
                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-lg">
                        <div className="grid grid-cols-1 gap-4 mb-4">
                            <InputField
                                fieldName={t("worldSetting.selectWorld")}
                                input={
                                    <SelectBox
                                        onChangeCallBack={(e) => handleWorldSelect(e.target.value)}
                                        data={worldsSelector.length > 0 ? worldsSelector : [{
                                            label: t("worldSetting.noWorldAvailable"),
                                            value: '0'
                                        }]}
                                        defaultValue={worlds[selectedWorldIndex]?.id.toString() || '0'}
                                        placeholder={t("worldSetting.selectWorldPlaceholder")}
                                    />
                                }
                                actionIcon={faPlus}
                                actionLabel={t("worldSetting.addWorldLabel")}
                                action={async () => setShowAddNewWorld(!showAddNewWorld)}
                            />

                            {showAddNewWorld && (
                                <InputField
                                    input={
                                        <TextInput
                                            value={newWorldName}
                                            setValue={(e: ChangeEvent<HTMLInputElement>) => setNewWorldName(e.target.value)}
                                            placeholder={t("worldSetting.newWorldPlaceholder")}
                                        />
                                    }
                                    actionIcon={faPlus}
                                    actionLabel={t("worldSetting.createWorldLabel")}
                                    addButtonCallBack={handleAddNewWorld}
                                />
                            )}
                            {!isSeriesMode && bookSeriesId && !isCurrentlyOffline() && worlds[selectedWorldIndex] && !worlds[selectedWorldIndex].seriesWorldId && (
                                <button
                                    onClick={handleExportToSeries}
                                    className="flex items-center gap-2 px-4 py-2 bg-blue-500/90 hover:bg-blue-500 rounded-xl border border-blue-600 shadow-md hover:shadow-lg transition-all duration-200"
                                >
                                    <FontAwesomeIcon icon={faShare} className="w-4 h-4 text-text-primary"/>
                                    <span className="text-text-primary font-medium">{t("worldSetting.exportToSeries")}</span>
                                </button>
                            )}
                        </div>
                    </div>

                    {worlds.length > 0 && worlds[selectedWorldIndex] ? (
                        <WorldContext.Provider value={{worlds, setWorlds, selectedWorldIndex, isSeriesMode}}>
                            <div
                                className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-lg">
                                <div className="mb-4">
                                    <InputField
                                        fieldName={t("worldSetting.worldName")}
                                        input={
                                            <SyncFieldWrapper
                                                seriesElementId={worlds[selectedWorldIndex].seriesWorldId}
                                                seriesValue={getSeriesWorldForCurrentWorld()?.name || ''}
                                                currentValue={worlds[selectedWorldIndex].name}
                                                bookElementId={worlds[selectedWorldIndex].id}
                                                field="name"
                                                elementType="world"
                                                onDownload={() => {
                                                    const seriesWorld = getSeriesWorldForCurrentWorld();
                                                    if (seriesWorld) {
                                                        const updatedWorlds: WorldProps[] = [...worlds];
                                                        updatedWorlds[selectedWorldIndex].name = seriesWorld.name;
                                                        setWorlds(updatedWorlds);
                                                    }
                                                }}
                                                onSyncComplete={getSeriesWorlds}
                                            >
                                                <TextInput
                                                    value={worlds[selectedWorldIndex].name}
                                                    setValue={(e: ChangeEvent<HTMLInputElement>) => {
                                                        const updatedWorlds: WorldProps[] = [...worlds];
                                                        updatedWorlds[selectedWorldIndex].name = e.target.value
                                                        setWorlds(updatedWorlds);
                                                    }}
                                                    placeholder={t("worldSetting.worldNamePlaceholder")}
                                                />
                                            </SyncFieldWrapper>
                                        }
                                    />
                                </div>
                                <InputField
                                    fieldName={t("worldSetting.worldHistory")}
                                    input={
                                        <SyncFieldWrapper
                                            seriesElementId={worlds[selectedWorldIndex].seriesWorldId}
                                            seriesValue={getSeriesWorldForCurrentWorld()?.history || ''}
                                            currentValue={worlds[selectedWorldIndex].history || ''}
                                            bookElementId={worlds[selectedWorldIndex].id}
                                            field="history"
                                            elementType="world"
                                            onDownload={() => {
                                                const seriesWorld = getSeriesWorldForCurrentWorld();
                                                if (seriesWorld) handleInputChange(seriesWorld.history || '', 'history');
                                            }}
                                            onSyncComplete={getSeriesWorlds}
                                        >
                                            <TexteAreaInput
                                                value={worlds[selectedWorldIndex].history || ''}
                                                setValue={(e) => handleInputChange(e.target.value, 'history')}
                                                placeholder={t("worldSetting.worldHistoryPlaceholder")}
                                            />
                                        </SyncFieldWrapper>
                                    }
                                />
                            </div>

                            <div
                                className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                    <InputField
                                        fieldName={t("worldSetting.politics")}
                                        input={
                                            <SyncFieldWrapper
                                                seriesElementId={worlds[selectedWorldIndex].seriesWorldId}
                                                seriesValue={getSeriesWorldForCurrentWorld()?.politics || ''}
                                                currentValue={worlds[selectedWorldIndex].politics || ''}
                                                bookElementId={worlds[selectedWorldIndex].id}
                                                field="politics"
                                                elementType="world"
                                                onDownload={() => {
                                                    const seriesWorld = getSeriesWorldForCurrentWorld();
                                                    if (seriesWorld) handleInputChange(seriesWorld.politics || '', 'politics');
                                                }}
                                                onSyncComplete={getSeriesWorlds}
                                            >
                                                <TexteAreaInput
                                                    value={worlds[selectedWorldIndex].politics || ''}
                                                    setValue={(e) => handleInputChange(e.target.value, 'politics')}
                                                    placeholder={t("worldSetting.politicsPlaceholder")}
                                                />
                                            </SyncFieldWrapper>
                                        }
                                    />
                                    <InputField
                                        fieldName={t("worldSetting.economy")}
                                        input={
                                            <SyncFieldWrapper
                                                seriesElementId={worlds[selectedWorldIndex].seriesWorldId}
                                                seriesValue={getSeriesWorldForCurrentWorld()?.economy || ''}
                                                currentValue={worlds[selectedWorldIndex].economy || ''}
                                                bookElementId={worlds[selectedWorldIndex].id}
                                                field="economy"
                                                elementType="world"
                                                onDownload={() => {
                                                    const seriesWorld = getSeriesWorldForCurrentWorld();
                                                    if (seriesWorld) handleInputChange(seriesWorld.economy || '', 'economy');
                                                }}
                                                onSyncComplete={getSeriesWorlds}
                                            >
                                                <TexteAreaInput
                                                    value={worlds[selectedWorldIndex].economy || ''}
                                                    setValue={(e) => handleInputChange(e.target.value, 'economy')}
                                                    placeholder={t("worldSetting.economyPlaceholder")}
                                                />
                                            </SyncFieldWrapper>
                                        }
                                    />
                                </div>
                            </div>

                            <div
                                className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                    <InputField
                                        fieldName={t("worldSetting.religion")}
                                        input={
                                            <SyncFieldWrapper
                                                seriesElementId={worlds[selectedWorldIndex].seriesWorldId}
                                                seriesValue={getSeriesWorldForCurrentWorld()?.religion || ''}
                                                currentValue={worlds[selectedWorldIndex].religion || ''}
                                                bookElementId={worlds[selectedWorldIndex].id}
                                                field="religion"
                                                elementType="world"
                                                onDownload={() => {
                                                    const seriesWorld = getSeriesWorldForCurrentWorld();
                                                    if (seriesWorld) handleInputChange(seriesWorld.religion || '', 'religion');
                                                }}
                                                onSyncComplete={getSeriesWorlds}
                                            >
                                                <TexteAreaInput
                                                    value={worlds[selectedWorldIndex].religion || ''}
                                                    setValue={(e) => handleInputChange(e.target.value, 'religion')}
                                                    placeholder={t("worldSetting.religionPlaceholder")}
                                                />
                                            </SyncFieldWrapper>
                                        }
                                    />
                                    <InputField
                                        fieldName={t("worldSetting.languages")}
                                        input={
                                            <SyncFieldWrapper
                                                seriesElementId={worlds[selectedWorldIndex].seriesWorldId}
                                                seriesValue={getSeriesWorldForCurrentWorld()?.languages || ''}
                                                currentValue={worlds[selectedWorldIndex].languages || ''}
                                                bookElementId={worlds[selectedWorldIndex].id}
                                                field="languages"
                                                elementType="world"
                                                onDownload={() => {
                                                    const seriesWorld = getSeriesWorldForCurrentWorld();
                                                    if (seriesWorld) handleInputChange(seriesWorld.languages || '', 'languages');
                                                }}
                                                onSyncComplete={getSeriesWorlds}
                                            >
                                                <TexteAreaInput
                                                    value={worlds[selectedWorldIndex].languages || ''}
                                                    setValue={(e) => handleInputChange(e.target.value, 'languages')}
                                                    placeholder={t("worldSetting.languagesPlaceholder")}
                                                />
                                            </SyncFieldWrapper>
                                        }
                                    />
                                </div>
                            </div>

                            {elementSections.map((section, index) => (
                                <div key={index}
                                     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={section.icon} className="mr-2 w-5 h-5"/>
                                        {section.title}
                                        <span
                                            className="ml-2 text-sm bg-dark-background text-text-secondary py-0.5 px-2 rounded-full">
                                            {worlds[selectedWorldIndex][section.section]?.length || 0}
                                        </span>
                                    </h3>
                                    <WorldElementComponent
                                        sectionLabel={section.title}
                                        sectionType={section.section}
                                    />
                                </div>
                            ))}
                        </WorldContext.Provider>
                    ) : (
                        <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("worldSetting.noWorldAvailable")}</p>
                        </div>
                    )}
                </>
            )}
        </div>
    );
}

export default forwardRef(WorldSetting);