'use client';
import React, {ChangeEvent, Dispatch, SetStateAction} from 'react';
import {WorldProps, elementSections, ElementSection} from '@/lib/models/World';
import {SeriesWorldProps} from '@/lib/models/Series';
import {WorldContext} from '@/context/WorldContext';
import CollapsableArea from '@/components/CollapsableArea';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import TexteAreaInput from '@/components/form/TexteAreaInput';
import SyncFieldWrapper from '@/components/form/SyncFieldWrapper';
import WorldElementComponent from '@/components/book/settings/world/WorldElement';
import {faBook, faGlobe, faLandmark} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {useTranslations} from 'next-intl';

interface WorldSettingsEditProps {
    world: WorldProps;
    worlds: WorldProps[];
    selectedWorldIndex: number;
    setWorlds: Dispatch<SetStateAction<WorldProps[]>>;
    onWorldFieldChange: (field: keyof WorldProps, value: string) => void;
    seriesWorld?: SeriesWorldProps | null;
    isSeriesMode: boolean;
    onSyncComplete?: () => void;
}

/**
 * WorldSettingsEdit - Vue édition pour BookSetting/SerieSetting
 * Tous les champs avec SyncFieldWrapper
 * PAS de scroll interne (géré par parent)
 */
export default function WorldSettingsEdit({
    world,
    worlds,
    selectedWorldIndex,
    setWorlds,
    onWorldFieldChange,
    seriesWorld,
    isSeriesMode,
    onSyncComplete,
}: WorldSettingsEditProps): React.JSX.Element {
    const t = useTranslations();

    return (
        <WorldContext.Provider value={{worlds, setWorlds, selectedWorldIndex, isSeriesMode}}>
            <div className="space-y-4 px-2 pb-4">
                {/* Informations de base */}
                <CollapsableArea title={t('worldSetting.basicInfo')} icon={faGlobe}>
                    <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
                        <InputField
                            fieldName={t("worldSetting.worldName")}
                            input={
                                <SyncFieldWrapper
                                    seriesElementId={world.seriesWorldId}
                                    seriesValue={seriesWorld?.name || ''}
                                    currentValue={world.name}
                                    bookElementId={world.id}
                                    field="name"
                                    elementType="world"
                                    onDownload={function (): void {
                                        if (seriesWorld) {
                                            const updatedWorlds: WorldProps[] = [...worlds];
                                            updatedWorlds[selectedWorldIndex].name = seriesWorld.name;
                                            setWorlds(updatedWorlds);
                                        }
                                    }}
                                    onSyncComplete={onSyncComplete}
                                >
                                    <TextInput
                                        value={world.name}
                                        setValue={function (e: ChangeEvent<HTMLInputElement>): void {
                                            const updatedWorlds: WorldProps[] = [...worlds];
                                            updatedWorlds[selectedWorldIndex].name = e.target.value;
                                            setWorlds(updatedWorlds);
                                        }}
                                        placeholder={t("worldSetting.worldNamePlaceholder")}
                                    />
                                </SyncFieldWrapper>
                            }
                        />

                        <InputField
                            fieldName={t("worldSetting.worldHistory")}
                            input={
                                <SyncFieldWrapper
                                    seriesElementId={world.seriesWorldId}
                                    seriesValue={seriesWorld?.history || ''}
                                    currentValue={world.history || ''}
                                    bookElementId={world.id}
                                    field="history"
                                    elementType="world"
                                    onDownload={function (): void {
                                        if (seriesWorld) onWorldFieldChange('history', seriesWorld.history || '');
                                    }}
                                    onSyncComplete={onSyncComplete}
                                >
                                    <TexteAreaInput
                                        value={world.history || ''}
                                        setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                            onWorldFieldChange('history', e.target.value);
                                        }}
                                        placeholder={t("worldSetting.worldHistoryPlaceholder")}
                                    />
                                </SyncFieldWrapper>
                            }
                        />
                    </div>
                </CollapsableArea>

                {/* Politique et économie */}
                <CollapsableArea title={t('worldSetting.politicsEconomy')} icon={faLandmark}>
                    <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
                        <InputField
                            fieldName={t("worldSetting.politics")}
                            input={
                                <SyncFieldWrapper
                                    seriesElementId={world.seriesWorldId}
                                    seriesValue={seriesWorld?.politics || ''}
                                    currentValue={world.politics || ''}
                                    bookElementId={world.id}
                                    field="politics"
                                    elementType="world"
                                    onDownload={function (): void {
                                        if (seriesWorld) onWorldFieldChange('politics', seriesWorld.politics || '');
                                    }}
                                    onSyncComplete={onSyncComplete}
                                >
                                    <TexteAreaInput
                                        value={world.politics || ''}
                                        setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                            onWorldFieldChange('politics', e.target.value);
                                        }}
                                        placeholder={t("worldSetting.politicsPlaceholder")}
                                    />
                                </SyncFieldWrapper>
                            }
                        />

                        <InputField
                            fieldName={t("worldSetting.economy")}
                            input={
                                <SyncFieldWrapper
                                    seriesElementId={world.seriesWorldId}
                                    seriesValue={seriesWorld?.economy || ''}
                                    currentValue={world.economy || ''}
                                    bookElementId={world.id}
                                    field="economy"
                                    elementType="world"
                                    onDownload={function (): void {
                                        if (seriesWorld) onWorldFieldChange('economy', seriesWorld.economy || '');
                                    }}
                                    onSyncComplete={onSyncComplete}
                                >
                                    <TexteAreaInput
                                        value={world.economy || ''}
                                        setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                            onWorldFieldChange('economy', e.target.value);
                                        }}
                                        placeholder={t("worldSetting.economyPlaceholder")}
                                    />
                                </SyncFieldWrapper>
                            }
                        />
                    </div>
                </CollapsableArea>

                {/* Religion et langues */}
                <CollapsableArea title={t('worldSetting.cultureLanguages')} icon={faBook}>
                    <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
                        <InputField
                            fieldName={t("worldSetting.religion")}
                            input={
                                <SyncFieldWrapper
                                    seriesElementId={world.seriesWorldId}
                                    seriesValue={seriesWorld?.religion || ''}
                                    currentValue={world.religion || ''}
                                    bookElementId={world.id}
                                    field="religion"
                                    elementType="world"
                                    onDownload={function (): void {
                                        if (seriesWorld) onWorldFieldChange('religion', seriesWorld.religion || '');
                                    }}
                                    onSyncComplete={onSyncComplete}
                                >
                                    <TexteAreaInput
                                        value={world.religion || ''}
                                        setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                            onWorldFieldChange('religion', e.target.value);
                                        }}
                                        placeholder={t("worldSetting.religionPlaceholder")}
                                    />
                                </SyncFieldWrapper>
                            }
                        />

                        <InputField
                            fieldName={t("worldSetting.languages")}
                            input={
                                <SyncFieldWrapper
                                    seriesElementId={world.seriesWorldId}
                                    seriesValue={seriesWorld?.languages || ''}
                                    currentValue={world.languages || ''}
                                    bookElementId={world.id}
                                    field="languages"
                                    elementType="world"
                                    onDownload={function (): void {
                                        if (seriesWorld) onWorldFieldChange('languages', seriesWorld.languages || '');
                                    }}
                                    onSyncComplete={onSyncComplete}
                                >
                                    <TexteAreaInput
                                        value={world.languages || ''}
                                        setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                            onWorldFieldChange('languages', e.target.value);
                                        }}
                                        placeholder={t("worldSetting.languagesPlaceholder")}
                                    />
                                </SyncFieldWrapper>
                            }
                        />
                    </div>
                </CollapsableArea>

                {/* Sections d'éléments */}
                {elementSections.map(function (section: ElementSection): React.JSX.Element {
                    return (
                        <CollapsableArea key={section.section} title={section.title} icon={section.icon}>
                            <div className="p-4 bg-secondary/20 rounded-xl border border-secondary/30">
                                <WorldElementComponent
                                    sectionLabel={section.title}
                                    sectionType={section.section}
                                />
                            </div>
                        </CollapsableArea>
                    );
                })}
            </div>
        </WorldContext.Provider>
    );
}
