'use client';
import React, {useState} 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 EmptyState from '@/components/ui/EmptyState';
import EntityListItem from '@/components/ui/EntityListItem';
import AvatarIcon from '@/components/ui/AvatarIcon';
import {useTranslations} from '@/lib/i18n';

interface LocationEditorListProps {
    sections: LocationProps[];
    onSectionClick: (section: LocationProps, index: number) => void;
    onAddSection: () => void;
}

/**
 * LocationEditorList - Liste des sections pour ComposerRightBar
 * Version compacte avec liste cliquable (même pattern que CharacterEditorList)
 * PAS de scroll interne (géré par parent ComposerRightBar)
 */
export default function LocationEditorList({
                                               sections,
                                               onSectionClick,
                                               onAddSection,
                                           }: LocationEditorListProps): React.JSX.Element {
    const t = useTranslations();
    const [searchQuery, setSearchQuery] = useState<string>('');
    
    function getFilteredSections(): LocationProps[] {
        return sections.filter(function (section: LocationProps): boolean {
            return section.name.toLowerCase().includes(searchQuery.toLowerCase());
        });
    }
    
    function countTotalElements(section: LocationProps): number {
        let count: number = section.elements.length;
        section.elements.forEach(function (element: Element): void {
            count += element.subElements.length;
        });
        return count;
    }
    
    const filteredSections: LocationProps[] = getFilteredSections();
    
    return (
        <div className="space-y-3">
            <div className="px-2">
                <InputField
                    input={
                        <TextInput
                            value={searchQuery}
                            setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
                                setSearchQuery(e.target.value);
                            }}
                            placeholder={t('locationComponent.search')}
                        />
                    }
                    actionIcon={Plus}
                    actionLabel={t('locationComponent.addSectionLabel')}
                    addButtonCallBack={async function (): Promise<void> {
                        onAddSection();
                    }}
                />
            </div>
            
            <div className="px-2 space-y-2">
                {filteredSections.length === 0 ? (
                    <EmptyState icon={MapPin} title={t('locationComponent.noSectionAvailable')}
                                description={t('locationComponent.noSectionDescription')}/>
                ) : (
                    filteredSections.map(function (section: LocationProps, index: number): React.JSX.Element {
                        return (
                            <EntityListItem
                                key={section.id}
                                size="sm"
                                onClick={function (): void {
                                    onSectionClick(section, index);
                                }}
                                avatar={<AvatarIcon size="sm" icon={MapPin}/>}
                                title={section.name}
                                subtitle={t('locationComponent.elementsCount', {count: countTotalElements(section)})}
                            />
                        );
                    })
                )}
            </div>
        </div>
    );
}
