'use client';
import React, {ChangeEvent, useState} from 'react';
import {WorldProps} from '@/lib/types/world';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import {Globe, Plus} from 'lucide-react';
import {useTranslations} from '@/lib/i18n';
import EntityListItem from '@/components/ui/EntityListItem';
import EmptyState from '@/components/ui/EmptyState';
import AvatarIcon from '@/components/ui/AvatarIcon';

interface WorldSettingsListProps {
    worlds: WorldProps[];
    onWorldClick: (worldId: string) => void;
    onAddWorld: () => Promise<void>;
    newWorldName: string;
    onNewWorldNameChange: (name: string) => void;
}

/**
 * WorldSettingsList - Liste des mondes pour BookSetting/SerieSetting
 * Liste cliquable avec recherche et formulaire d'ajout
 * PAS de SelectBox, même pattern que CharacterSettingsList
 * PAS de scroll interne (géré par parent)
 */
export default function WorldSettingsList({
                                              worlds,
                                              onWorldClick,
                                              onAddWorld,
                                              newWorldName,
                                              onNewWorldNameChange,
                                          }: WorldSettingsListProps): React.JSX.Element {
    const t = useTranslations();
    const [searchQuery, setSearchQuery] = useState<string>('');
    
    function getFilteredWorlds(): WorldProps[] {
        return worlds.filter(function (world: WorldProps): boolean {
            return world.name.toLowerCase().includes(searchQuery.toLowerCase());
        });
    }
    
    const filteredWorlds: WorldProps[] = getFilteredWorlds();
    
    return (
        <div className="space-y-4">
            {/* Recherche et ajout */}
            <div className="grid grid-cols-1 gap-4">
                    <InputField
                        input={
                            <TextInput
                                value={searchQuery}
                                setValue={function (e: ChangeEvent<HTMLInputElement>): void {
                                    setSearchQuery(e.target.value);
                                }}
                                placeholder={t('worldSetting.search')}
                            />
                        }
                    />

                    <InputField
                        fieldName={t('worldSetting.addWorldLabel')}
                        input={
                            <TextInput
                                value={newWorldName}
                                setValue={function (e: ChangeEvent<HTMLInputElement>): void {
                                    onNewWorldNameChange(e.target.value);
                                }}
                                placeholder={t('worldSetting.newWorldPlaceholder')}
                            />
                        }
                        actionIcon={Plus}
                        actionLabel={t('worldSetting.createWorldLabel')}
                        addButtonCallBack={onAddWorld}
                    />
                </div>
            
            {/* Liste des mondes cliquables */}
            <div className="space-y-2 px-2">
                {filteredWorlds.length === 0 ? (
                    <EmptyState icon={Globe} title={t('worldSetting.noWorldAvailable')}
                                description={t('worldSetting.noWorldDescription')}/>
                ) : (
                    filteredWorlds.map(function (world: WorldProps): React.JSX.Element {
                        return (
                            <EntityListItem
                                key={world.id}
                                onClick={function (): void {
                                    onWorldClick(world.id);
                                }}
                                avatar={<AvatarIcon icon={Globe}/>}
                                title={world.name}
                                subtitle={world.history ? world.history.substring(0, 60) + (world.history.length > 60 ? '...' : '') : null}
                            />
                        );
                    })
                )}
            </div>
        </div>
    );
}
