'use client';
import React, {useState} from 'react';
import {SpellListItem, SpellTagProps} from '@/lib/types/spell';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import SpellTagChip from '@/components/book/settings/spells/SpellTagChip';
import {Plus, Tag, Wand2} from 'lucide-react';
import EntityListItem from '@/components/ui/EntityListItem';
import AvatarIcon from '@/components/ui/AvatarIcon';
import {useTranslations} from '@/lib/i18n';
import IconContainer from '@/components/ui/IconContainer';
import {dynamicBorderLeft} from '@/lib/utils/dynamicStyles';

interface SpellEditorListProps {
    spells: SpellListItem[];
    tags: SpellTagProps[];
    onSpellClick: (spell: SpellListItem) => void;
    onAddSpell: () => void;
    onManageTags: () => void;
}

/**
 * SpellEditorList - Liste compacte pour ComposerRightBar
 * Mêmes fonctionnalités que SpellSettingsList, layout condensé
 */
export default function SpellEditorList({
                                            spells,
                                            tags,
                                            onSpellClick,
                                            onAddSpell,
                                            onManageTags,
                                        }: SpellEditorListProps): React.JSX.Element {
    const t = useTranslations();
    const [searchQuery, setSearchQuery] = useState<string>('');
    const [selectedTagId, setSelectedTagId] = useState<string | null>(null);
    
    function getFilteredSpells(): SpellListItem[] {
        return spells.filter(function (spell: SpellListItem): boolean {
            const matchesSearch: boolean = spell.name.toLowerCase().includes(searchQuery.toLowerCase());
            const matchesTag: boolean = selectedTagId === null || spell.tags.some(function (tag: SpellTagProps): boolean {
                return tag.id === selectedTagId;
            });
            return matchesSearch && matchesTag;
        });
    }
    
    const filteredSpells: SpellListItem[] = getFilteredSpells();
    
    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('spellList.search')}
                        />
                    }
                    actionIcon={Plus}
                    actionLabel={t('spellList.add')}
                    addButtonCallBack={async function (): Promise<void> {
                        onAddSpell();
                    }}
                />
            </div>
            
            {/* Tag filter + manage button */}
            <div className="px-2 flex items-center gap-2 flex-wrap">
                <button
                    onClick={function (): void {
                        setSelectedTagId(null);
                    }}
                    className={`px-2 py-1 text-xs rounded-full transition-colors ${
                        selectedTagId === null
                            ? 'bg-primary text-text-primary'
                            : 'bg-secondary text-text-secondary hover:bg-secondary'
                    }`}
                >
                    {t('spellList.allTags')}
                </button>
                {tags.slice(0, 4).map(function (tag: SpellTagProps): React.JSX.Element {
                    return (
                        <button
                            key={tag.id}
                            onClick={function (): void {
                                setSelectedTagId(tag.id === selectedTagId ? null : tag.id);
                            }}
                            className={`px-2 py-1 text-xs rounded-full transition-colors ${
                                selectedTagId === tag.id
                                    ? 'bg-primary text-text-primary'
                                    : 'bg-secondary text-text-secondary hover:bg-secondary'
                            } ${selectedTagId !== tag.id && tag.color ? dynamicBorderLeft(tag.color) : ''}`}
                        >
                            {tag.name}
                        </button>
                    );
                })}
                <button
                    onClick={onManageTags}
                    className="px-2 py-1 text-xs rounded-full bg-secondary text-text-secondary hover:bg-secondary transition-colors flex items-center gap-1"
                >
                    <Tag className="w-3 h-3" strokeWidth={1.75}/>
                    {t('spellList.manageTags')}
                </button>
            </div>
            
            <div className="px-2 space-y-2">
                {filteredSpells.length === 0 ? (
                    <div className="flex flex-col items-center justify-center py-8 text-center">
                        <IconContainer icon={Wand2} size="lg" shape="circle"/>
                        <h3 className="text-text-primary font-semibold text-base mb-1">
                            {t('spellList.noSpells')}
                        </h3>
                        <p className="text-muted text-sm max-w-xs">
                            {t('spellList.noSpellsDescription')}
                        </p>
                    </div>
                ) : (
                    filteredSpells.map(function (spell: SpellListItem): React.JSX.Element {
                        return (
                            <EntityListItem
                                key={spell.id}
                                size="sm"
                                onClick={function (): void {
                                    onSpellClick(spell);
                                }}
                                avatar={<AvatarIcon size="sm" icon={Wand2}/>}
                                title={spell.name}
                                subtitle={spell.description}
                                extra={spell.tags.length > 0 ? (
                                    <div className="flex flex-wrap gap-1">
                                        {spell.tags.slice(0, 2).map(function (tag: SpellTagProps): React.JSX.Element {
                                            return <SpellTagChip key={tag.id} tag={tag} size="sm"/>;
                                        })}
                                        {spell.tags.length > 2 && (
                                            <span
                                                className="text-muted text-xs px-1.5 py-0.5 bg-secondary rounded-full">
                                                +{spell.tags.length - 2}
                                            </span>
                                        )}
                                    </div>
                                ) : undefined}
                            />
                        );
                    })
                )}
            </div>
        </div>
    );
}
