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

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={faPlus}
                    actionLabel={t('locationComponent.addSectionLabel')}
                    addButtonCallBack={async function (): Promise<void> {
                        onAddSection();
                    }}
                />
            </div>

            <div className="px-2 space-y-2">
                {filteredSections.length === 0 ? (
                    <div className="flex flex-col items-center justify-center py-8 text-center">
                        <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-3">
                            <FontAwesomeIcon icon={faMapMarkerAlt} className="text-primary w-8 h-8"/>
                        </div>
                        <h3 className="text-text-primary font-semibold text-base mb-1">
                            {t('locationComponent.noSectionAvailable')}
                        </h3>
                        <p className="text-muted text-sm max-w-xs">
                            {t('locationComponent.noSectionDescription')}
                        </p>
                    </div>
                ) : (
                    filteredSections.map(function (section: LocationProps, index: number): React.JSX.Element {
                        return (
                            <div
                                key={section.id}
                                onClick={function (): void { onSectionClick(section, index); }}
                                className="group flex items-center p-3 bg-secondary/30 rounded-lg border-l-4 border-primary border border-secondary/50 cursor-pointer hover:bg-secondary hover:shadow-md transition-all duration-200 hover:border-primary/50"
                            >
                                <div className="w-10 h-10 rounded-full border-2 border-primary overflow-hidden bg-secondary shadow-sm group-hover:scale-110 transition-transform flex items-center justify-center">
                                    <FontAwesomeIcon icon={faMapMarkerAlt} className="text-primary w-5 h-5"/>
                                </div>

                                <div className="ml-3 flex-1 min-w-0">
                                    <div className="text-text-primary font-semibold text-sm group-hover:text-primary transition-colors truncate">
                                        {section.name}
                                    </div>
                                    <div className="text-muted text-xs truncate">
                                        {t('locationComponent.elementsCount', {count: countTotalElements(section)})}
                                    </div>
                                </div>

                                <div className="w-6 flex justify-center">
                                    <FontAwesomeIcon
                                        icon={faChevronRight}
                                        className="text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-3 h-3"
                                    />
                                </div>
                            </div>
                        );
                    })
                )}
            </div>
        </div>
    );
}
