'use client';
import React, {ChangeEvent} from 'react';
import {LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import TexteAreaInput from '@/components/form/TexteAreaInput';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faMapPin, faPlus} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from 'next-intl';

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-secondary/20 rounded-lg p-3 border border-secondary/30">
                        <div className="flex items-center gap-2 mb-2">
                            <FontAwesomeIcon icon={faMapPin} className="text-primary w-3 h-3"/>
                            <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">
                            <TexteAreaInput
                                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/30 space-y-2">
                                {element.subElements.map(function (subElement: SubElement, subElementIndex: number): React.JSX.Element {
                                    return (
                                        <div key={subElement.id} className="bg-dark-background/50 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={faPlus}
                                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={faPlus}
                addButtonCallBack={function (): Promise<void> {
                    return onAddElement(section.id);
                }}
            />
        </div>
    );
}