'use client';
import React, {useState} from 'react';
import {characterCategories, CharacterProps} from '@/lib/models/Character';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import CollapsableArea from '@/components/CollapsableArea';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faChevronRight, faPlus, faUser} from '@fortawesome/free-solid-svg-icons';
import {SelectBoxProps} from '@/shared/interface';
import {useTranslations} from 'next-intl';

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={faPlus}
                    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 (
                        <CollapsableArea
                            key={category.value}
                            title={t(category.label)}
                            icon={faUser}
                        >
                            <div className="space-y-2 p-2">
                                {categoryCharacters.map(function (char: CharacterProps): React.JSX.Element {
                                    return (
                                        <div
                                            key={char.id}
                                            onClick={function (): void {
                                                onCharacterClick(char);
                                            }}
                                            className="group flex items-center p-4 bg-secondary/30 rounded-xl border-l-4 border-primary border border-secondary/50 cursor-pointer hover:bg-secondary hover:shadow-md hover:scale-102 transition-all duration-200 hover:border-primary/50"
                                        >
                                            <div className="w-14 h-14 rounded-full border-2 border-primary overflow-hidden bg-secondary shadow-md group-hover:scale-110 transition-transform">
                                                {char.image ? (
                                                    <img
                                                        src={char.image}
                                                        alt={char.name}
                                                        className="w-full h-full object-cover"
                                                    />
                                                ) : (
                                                    <div className="w-full h-full flex items-center justify-center bg-primary/10 text-primary font-bold text-lg">
                                                        {char.name?.charAt(0)?.toUpperCase() || '?'}
                                                    </div>
                                                )}
                                            </div>

                                            <div className="ml-4 flex-1">
                                                <div className="text-text-primary font-bold text-base group-hover:text-primary transition-colors">
                                                    {char.name || t('characterList.unknown')}
                                                </div>
                                                <div className="text-text-secondary text-sm mt-0.5">
                                                    {char.lastName || t('characterList.noLastName')}
                                                </div>
                                            </div>

                                            <div className="w-28 px-3">
                                                <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 className="w-8 flex justify-center">
                                                <FontAwesomeIcon
                                                    icon={faChevronRight}
                                                    className="text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-4 h-4"
                                                />
                                            </div>
                                        </div>
                                    );
                                })}
                            </div>
                        </CollapsableArea>
                    );
                })}

                {filteredCharacters.length === 0 && (
                    <div className="flex flex-col items-center justify-center py-12 text-center">
                        <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                            <FontAwesomeIcon icon={faUser} className="text-primary w-10 h-10"/>
                        </div>
                        <h3 className="text-text-primary font-semibold text-lg mb-2">
                            {t('characterList.noCharacters')}
                        </h3>
                        <p className="text-muted text-sm max-w-xs">
                            {t('characterList.noCharactersDescription')}
                        </p>
                    </div>
                )}
            </div>
        </div>
    );
}
