'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 {faMapMarkerAlt, faPlus, faTrash} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from 'next-intl';

interface LocationSettingsEditProps {
    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;
}

/**
 * LocationSettingsEdit - Vue édition pour BookSetting/SerieSetting
 * Permet d'éditer les éléments et sous-éléments
 * PAS de scroll interne (géré par parent)
 */
export default function LocationSettingsEdit({
    section,
    newElementNames,
    newSubElementNames,
    onAddElement,
    onAddSubElement,
    onRemoveElement,
    onRemoveSubElement,
    onUpdateElement,
    onUpdateSubElement,
    onNewElementNameChange,
    onNewSubElementNameChange,
}: LocationSettingsEditProps): React.JSX.Element {
    const t = useTranslations();

    return (
        <div className="space-y-4 px-2 pb-4">
            {/* Header de la section */}
            <div className="flex items-center gap-3 mb-4">
                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                    <FontAwesomeIcon icon={faMapMarkerAlt} className="text-primary w-6 h-6"/>
                </div>
                <div>
                    <h2 className="text-text-primary font-bold text-xl">{section.name}</h2>
                </div>
            </div>

            {/* Éléments existants */}
            {section.elements.map(function (element: Element, elementIndex: number): React.JSX.Element {
                return (
                    <div key={element.id} className="bg-secondary/30 rounded-xl p-4 border border-secondary/50">
                        <div className="mb-3">
                            <InputField
                                fieldName={t("locationComponent.elementName")}
                                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>

                        <TexteAreaInput
                            value={element.description}
                            setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                onUpdateElement(section.id, elementIndex, 'description', e.target.value);
                            }}
                            placeholder={t("locationComponent.elementDescriptionPlaceholder")}
                        />

                        {/* Sous-éléments */}
                        <div className="mt-4 pt-4 border-t border-secondary/50">
                            {element.subElements.length > 0 && (
                                <h4 className="text-sm italic text-text-secondary mb-3">
                                    {t("locationComponent.subElementsHeading")}
                                </h4>
                            )}

                            {element.subElements.map(function (subElement: SubElement, subElementIndex: number): React.JSX.Element {
                                return (
                                    <div key={subElement.id} className="bg-dark-background rounded-lg p-3 mb-3">
                                        <div className="mb-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>
                                        <TexteAreaInput
                                            value={subElement.description}
                                            setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                                onUpdateSubElement(section.id, elementIndex, subElementIndex, 'description', e.target.value);
                                            }}
                                            placeholder={t("locationComponent.subElementDescriptionPlaceholder")}
                                        />
                                    </div>
                                );
                            })}

                            {/* Ajouter sous-élément */}
                            <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 */}
            <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30">
                <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}
                    actionLabel={t("locationComponent.addElement")}
                    addButtonCallBack={function (): Promise<void> {
                        return onAddElement(section.id);
                    }}
                />
            </div>
        </div>
    );
}
