'use client';
import React, {useState} from 'react';
import {CharacterProps} from '@/lib/types/character';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import {Plus, User} 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 CharacterEditorListProps {
    characters: CharacterProps[];
    onCharacterClick: (character: CharacterProps) => void;
    onAddCharacter: () => void;
}

/**
 * CharacterEditorList - Liste des personnages pour ComposerRightBar
 * Version compacte sans groupage par catégorie
 * PAS de scroll interne (géré par parent ComposerRightBar)
 */
export default function CharacterEditorList({
                                                characters,
                                                onCharacterClick,
                                                onAddCharacter,
                                            }: CharacterEditorListProps): 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-3">
            <div className="px-2">
                <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 space-y-2">
                {filteredCharacters.length === 0 ? (
                    <EmptyState icon={User} title={t('characterList.noCharacters')}
                                description={t('characterList.noCharactersDescription')}/>
                ) : (
                    filteredCharacters.map(function (char: CharacterProps): React.JSX.Element {
                        return (
                            <EntityListItem
                                key={char.id}
                                size="sm"
                                onClick={function (): void {
                                    onCharacterClick(char);
                                }}
                                avatar={<AvatarIcon size="sm" image={char.image}
                                                    initial={char.name?.charAt(0)?.toUpperCase() || '?'}
                                                    alt={char.name}/>}
                                title={char.name || t('characterList.unknown')}
                                subtitle={char.title || char.role || t('characterList.noRole')}
                            />
                        );
                    })
                )}
            </div>
        </div>
    );
}
