'use client';
import React, {useState} from 'react';
import {CharacterProps} from '@/lib/types/character';
import {characterCategories} from '@/lib/constants/character';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import Collapse from '@/components/ui/Collapse';
import {Plus, User} from 'lucide-react';
import EntityListItem from '@/components/ui/EntityListItem';
import AvatarIcon from '@/components/ui/AvatarIcon';
import {SelectBoxProps} from '@/components/form/SelectBox';
import {useTranslations} from '@/lib/i18n';
import EmptyState from '@/components/ui/EmptyState';

interface CharacterSettingsListProps {
    characters: CharacterProps[];
    onCharacterClick: (character: CharacterProps) => void;
    onAddCharacter: () => void;
}

/**
 * CharacterSettingsList - Liste des personnages pour BookSetting/SerieSetting
 * Version complète avec groupage par catégorie et sections collapsibles
 * PAS de scroll interne (géré par parent SettingsContainer)
 */
export default function CharacterSettingsList({
                                                  characters,
                                                  onCharacterClick,
                                                  onAddCharacter,
                                              }: CharacterSettingsListProps): React.JSX.Element {
    const t = useTranslations();
    const [searchQuery, setSearchQuery] = useState<string>('');
    
    function getFilteredCharacters(): CharacterProps[] {
        return characters.filter(function (char: CharacterProps): boolean {
            return char.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                (char.lastName?.toLowerCase().includes(searchQuery.toLowerCase()) ?? false);
        });
    }
    
    const filteredCharacters: CharacterProps[] = getFilteredCharacters();
    
    return (
        <div className="space-y-4">
            <div className="px-4 mb-4">
                <InputField
                    input={
                        <TextInput
                            value={searchQuery}
                            setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
                                setSearchQuery(e.target.value);
                            }}
                            placeholder={t('characterList.search')}
                        />
                    }
                    actionIcon={Plus}
                    actionLabel={t('characterList.add')}
                    addButtonCallBack={async function (): Promise<void> {
                        onAddCharacter();
                    }}
                />
            </div>
            
            <div className="px-2">
                {characterCategories.map(function (category: SelectBoxProps): React.JSX.Element | null {
                    const categoryCharacters: CharacterProps[] = filteredCharacters.filter(
                        function (char: CharacterProps): boolean {
                            return char.category === category.value;
                        }
                    );
                    
                    if (categoryCharacters.length === 0) {
                        return null;
                    }
                    
                    return (
                        <Collapse variant="card"
                            key={category.value}
                            title={t(category.label)}
                                  icon={User}
                        >
                            <div className="space-y-2 p-2">
                                {categoryCharacters.map(function (char: CharacterProps): React.JSX.Element {
                                    return (
                                        <EntityListItem
                                            key={char.id}
                                            variant="transparent"
                                            onClick={function (): void {
                                                onCharacterClick(char);
                                            }}
                                            avatar={
                                                <AvatarIcon
                                                    size="lg"
                                                    image={char.image}
                                                    initial={char.name?.charAt(0)?.toUpperCase() || '?'}
                                                    alt={char.name}
                                                />
                                            }
                                            title={char.name || t('characterList.unknown')}
                                            subtitle={char.lastName || t('characterList.noLastName')}
                                            extra={
                                                <div className="w-28">
                                                    <div className="text-primary text-sm font-semibold truncate">
                                                        {char.title || t('characterList.noTitle')}
                                                    </div>
                                                    <div className="text-muted text-xs truncate mt-0.5">
                                                        {char.role || t('characterList.noRole')}
                                                    </div>
                                                </div>
                                            }
                                        />
                                    );
                                })}
                            </div>
                        </Collapse>
                    );
                })}
                
                {filteredCharacters.length === 0 && (
                    <EmptyState icon={User} title={t('characterList.noCharacters')}
                                description={t('characterList.noCharactersDescription')}/>
                )}
            </div>
        </div>
    );
}
