ERitors-Scribe-Desktop/components/book/settings/locations/editor/LocationEditorEdit.tsx

'use client';
import React, {ChangeEvent} from 'react';
import {Element, LocationProps, SubElement} from '@/hooks/settings/useLocations';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import TextAreaInput from '@/components/form/TextAreaInput';
import {MapPin, Plus} from 'lucide-react';
import {useTranslations} from '@/lib/i18n';

interface LocationEditorEditProps {
    section: LocationProps;
    newElementNames: { [key: string]: string };
    newSubElementNames: { [key: string]: string };
    onAddElement: (sectionId: string) => Promise<void>;
    onAddSubElement: (sectionId: string, elementIndex: number) => Promise<void>;
    onRemoveElement: (sectionId: string, elementIndex: number) => Promise<void>;
    onRemoveSubElement: (sectionId: string, elementIndex: number, subElementIndex: number) => Promise<void>;
    onUpdateElement: (sectionId: string, elementIndex: number, field: keyof Element, value: string) => void;
    onUpdateSubElement: (sectionId: string, elementIndex: number, subElementIndex: number, field: keyof SubElement, value: string) => void;
    onNewElementNameChange: (sectionId: string, name: string) => void;
    onNewSubElementNameChange: (elementIndex: number, name: string) => void;
}

/**
 * LocationEditorEdit - Version sidebar édition
 * Layout linéaire simple, champs empilés verticalement
 * PAS de CollapsableArea, PAS de grids
 */
export default function LocationEditorEdit({
                                               section,
                                               newElementNames,
                                               newSubElementNames,
                                               onAddElement,
                                               onAddSubElement,
                                               onRemoveElement,
                                               onRemoveSubElement,
                                               onUpdateElement,
                                               onUpdateSubElement,
                                               onNewElementNameChange,
                                               onNewSubElementNameChange,
                                           }: LocationEditorEditProps): React.JSX.Element {
    const t = useTranslations();
    
    return (
        <div className="space-y-4">
            <h3 className="text-text-primary font-semibold text-base">{section.name}</h3>
            
            {/* Éléments existants */}
            {section.elements.map(function (element: Element, elementIndex: number): React.JSX.Element {
                return (
                    <div key={element.id} className="bg-tertiary rounded-lg p-3 border border-secondary">
                        <div className="flex items-center gap-2 mb-2">
                            <MapPin className="text-primary w-3 h-3" strokeWidth={1.75}/>
                            <span className="text-text-secondary text-xs">{t('locationComponent.element')}</span>
                        </div>
                        
                        <InputField
                            input={
                                <TextInput
                                    value={element.name}
                                    setValue={function (e: ChangeEvent<HTMLInputElement>): void {
                                        onUpdateElement(section.id, elementIndex, 'name', e.target.value);
                                    }}
                                    placeholder={t('locationComponent.elementNamePlaceholder')}
                                />
                            }
                            removeButtonCallBack={function (): Promise<void> {
                                return onRemoveElement(section.id, elementIndex);
                            }}
                        />
                        
                        <div className="mt-2">
                            <TextAreaInput
                                value={element.description}
                                setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                    onUpdateElement(section.id, elementIndex, 'description', e.target.value);
                                }}
                                placeholder={t('locationComponent.elementDescriptionPlaceholder')}
                            />
                        </div>
                        
                        {/* Sous-éléments */}
                        {element.subElements.length > 0 && (
                            <div className="mt-3 pt-3 border-t border-secondary space-y-2">
                                {element.subElements.map(function (subElement: SubElement, subElementIndex: number): React.JSX.Element {
                                    return (
                                        <div key={subElement.id} className="bg-secondary rounded p-2">
                                            <InputField
                                                input={
                                                    <TextInput
                                                        value={subElement.name}
                                                        setValue={function (e: ChangeEvent<HTMLInputElement>): void {
                                                            onUpdateSubElement(section.id, elementIndex, subElementIndex, 'name', e.target.value);
                                                        }}
                                                        placeholder={t('locationComponent.subElementNamePlaceholder')}
                                                    />
                                                }
                                                removeButtonCallBack={function (): Promise<void> {
                                                    return onRemoveSubElement(section.id, elementIndex, subElementIndex);
                                                }}
                                            />
                                        </div>
                                    );
                                })}
                            </div>
                        )}
                        
                        {/* Ajouter sous-élément */}
                        <div className="mt-2">
                            <InputField
                                input={
                                    <TextInput
                                        value={newSubElementNames[elementIndex] || ''}
                                        setValue={function (e: ChangeEvent<HTMLInputElement>): void {
                                            onNewSubElementNameChange(elementIndex, e.target.value);
                                        }}
                                        placeholder={t('locationComponent.newSubElementPlaceholder')}
                                    />
                                }
                                actionIcon={Plus}
                                actionLabel={t('locationComponent.addSubElement')}
                                addButtonCallBack={function (): Promise<void> {
                                    return onAddSubElement(section.id, elementIndex);
                                }}
                            />
                        </div>
                    </div>
                );
            })}
            
            {/* Ajouter élément */}
            <InputField
                fieldName={t('locationComponent.addElement')}
                input={
                    <TextInput
                        value={newElementNames[section.id] || ''}
                        setValue={function (e: ChangeEvent<HTMLInputElement>): void {
                            onNewElementNameChange(section.id, e.target.value);
                        }}
                        placeholder={t('locationComponent.newElementPlaceholder')}
                    />
                }
                actionIcon={Plus}
                addButtonCallBack={function (): Promise<void> {
                    return onAddElement(section.id);
                }}
            />
        </div>
    );
}