'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 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 {useTranslations} from 'next-intl';

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

/**
 * WorldEditorEdit - Version sidebar édition
 * Mêmes fonctionnalités que WorldSettingsEdit, layout linéaire
 * SyncFieldWrapper pour tous les champs
 */
export default function WorldEditorEdit({
    world,
    worlds,
    selectedWorldIndex,
    setWorlds,
    onWorldFieldChange,
    seriesWorld,
    onSyncComplete,
}: WorldEditorEditProps): React.JSX.Element {
    const t = useTranslations();

    return (
        <WorldContext.Provider value={{worlds, setWorlds, selectedWorldIndex, isSeriesMode: false}}>
            <div className="space-y-4">
                {/* Informations de base */}
                <div className="border-b border-secondary/30 pb-3">
                    <h4 className="text-text-primary font-medium text-sm mb-3">{t('worldSetting.basicInfo')}</h4>
                    <div className="space-y-3">
                        <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>
                </div>

                {/* Politique et économie */}
                <div className="border-b border-secondary/30 pb-3">
                    <h4 className="text-text-primary font-medium text-sm mb-3">{t('worldSetting.politicsEconomy')}</h4>
                    <div className="space-y-3">
                        <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>
                </div>

                {/* Religion et langues */}
                <div className="border-b border-secondary/30 pb-3">
                    <h4 className="text-text-primary font-medium text-sm mb-3">{t('worldSetting.cultureLanguages')}</h4>
                    <div className="space-y-3">
                        <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>
                </div>

                {/* Sections d'éléments */}
                {elementSections.map(function (section: ElementSection): React.JSX.Element {
                    return (
                        <div key={section.section} className="border-b border-secondary/30 pb-3 last:border-b-0">
                            <h4 className="text-text-primary font-medium text-sm mb-3">{section.title}</h4>
                            <WorldElementComponent
                                sectionLabel={section.title}
                                sectionType={section.section}
                            />
                        </div>
                    );
                })}
            </div>
        </WorldContext.Provider>
    );
}
