'use client';
import React, {ChangeEvent, useState} from 'react';
import {WorldProps} from '@/lib/models/World';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faChevronRight, faGlobe, faPlus} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from 'next-intl';

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="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-lg">
                <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={faPlus}
                        actionLabel={t('worldSetting.createWorldLabel')}
                        addButtonCallBack={onAddWorld}
                    />
                </div>
            </div>

            {/* Liste des mondes cliquables */}
            <div className="space-y-2 px-2">
                {filteredWorlds.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={faGlobe} className="text-primary w-10 h-10"/>
                        </div>
                        <h3 className="text-text-primary font-semibold text-lg mb-2">
                            {t('worldSetting.noWorldAvailable')}
                        </h3>
                        <p className="text-muted text-sm max-w-xs">
                            {t('worldSetting.noWorldDescription')}
                        </p>
                    </div>
                ) : (
                    filteredWorlds.map(function (world: WorldProps): React.JSX.Element {
                        return (
                            <div
                                key={world.id}
                                onClick={function (): void { onWorldClick(world.id); }}
                                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-12 h-12 rounded-full border-2 border-primary overflow-hidden bg-secondary shadow-md group-hover:scale-110 transition-transform flex items-center justify-center">
                                    <FontAwesomeIcon icon={faGlobe} className="text-primary w-6 h-6"/>
                                </div>

                                <div className="ml-4 flex-1 min-w-0">
                                    <div className="text-text-primary font-bold text-base group-hover:text-primary transition-colors">
                                        {world.name}
                                    </div>
                                    {world.history && (
                                        <div className="text-text-secondary text-sm mt-0.5 truncate">
                                            {world.history.substring(0, 60)}{world.history.length > 60 ? '...' : ''}
                                        </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>
        </div>
    );
}
