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

interface LocationSettingsListProps {
    sections: LocationProps[];
    newSectionName: string;
    onSectionClick: (sectionIndex: number) => void;
    onAddSection: () => Promise<void>;
    onNewSectionNameChange: (name: string) => void;
}

/**
 * LocationSettingsList - Liste des sections de lieux pour BookSetting/SerieSetting
 * Inclut recherche et bouton d'ajout
 * PAS de scroll interne (géré par parent)
 */
export default function LocationSettingsList({
                                                 sections,
                                                 newSectionName,
                                                 onSectionClick,
                                                 onAddSection,
                                                 onNewSectionNameChange,
                                             }: LocationSettingsListProps): React.JSX.Element {
    const t = useTranslations();
    
    function countTotalElements(section: LocationProps): number {
        let count: number = section.elements.length;
        section.elements.forEach(function (element: Element): void {
            count += element.subElements.length;
        });
        return count;
    }
    
    return (
        <div className="space-y-4">
            <InputField
                input={
                    <TextInput
                        value={newSectionName}
                        setValue={function (e: ChangeEvent<HTMLInputElement>): void {
                            onNewSectionNameChange(e.target.value);
                        }}
                        placeholder={t("locationComponent.newSectionPlaceholder")}
                    />
                }
                actionIcon={Plus}
                actionLabel={t("locationComponent.addSectionLabel")}
                addButtonCallBack={onAddSection}
            />
            
            <div className="space-y-2 px-2">
                {sections.length === 0 ? (
                    <EmptyState icon={MapPin} title={t("locationComponent.noSectionAvailable")}
                                description={t("locationComponent.noSectionDescription")}/>
                ) : (
                    sections.map(function (section: LocationProps, index: number): React.JSX.Element {
                        return (
                            <EntityListItem
                                key={section.id}
                                onClick={function (): void {
                                    onSectionClick(index);
                                }}
                                avatar={<AvatarIcon icon={MapPin}/>}
                                title={section.name}
                                subtitle={t("locationComponent.elementsCount", {count: countTotalElements(section)})}
                            />
                        );
                    })
                )}
            </div>
        </div>
    );
}
