'use client';
import React, {useCallback, useContext, useMemo, useState} from 'react';
import {useSpells, UseSpellsConfig} from '@/hooks/settings/useSpells';
import {useTranslations} from '@/lib/i18n';
import {SpellEditState, SpellListItem} from '@/lib/types/spell';
import {SeriesSpellListItem} from '@/lib/types/series';
import {BookContext, BookContextProps} from '@/context/BookContext';
import PulseLoader from '@/components/ui/PulseLoader';

import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
import SeriesImportSelector from '@/components/form/SeriesImportSelector';
import AlertBox from '@/components/ui/AlertBox';
import SpellTagManager from '@/components/book/settings/spells/SpellTagManager';

import SpellEditorList from './SpellEditorList';
import SpellEditorDetail from './SpellEditorDetail';
import SpellEditorEdit from './SpellEditorEdit';

/**
 * SpellEditor - Orchestrateur pour ComposerRightBar
 * Mêmes fonctionnalités que SpellSettings, layout condensé
 */
export default function SpellEditor(): React.JSX.Element {
    const t = useTranslations();
    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
    const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
    
    const config: UseSpellsConfig = useMemo(function (): UseSpellsConfig {
        return {
            entityType: 'book',
            entityId: book?.bookId || '',
        };
    }, [book?.bookId]);
    
    const {
        spells,
        seriesSpells,
        tags,
        selectedSpell,
        selectedSeriesSpell,
        toolEnabled,
        isLoading,
        bookSeriesId,
        showTagManager,
        viewMode,
        saveSpell,
        deleteSpell,
        updateSpellField,
        toggleTool,
        importFromSeries,
        exportToSeries,
        setSelectedSpell,
        setShowTagManager,
        enterDetailMode,
        enterEditMode,
        exitEditMode,
        backToList,
        addNewSpell,
        createTag,
        updateTag,
        deleteTag,
        handleSyncComplete,
    } = useSpells(config);
    
    const availableSeriesSpells = useMemo(function (): SeriesSpellListItem[] {
        return seriesSpells.filter(function (ss: SeriesSpellListItem): boolean {
            return !spells.some(function (s: SpellListItem): boolean {
                return s.seriesSpellId === ss.id;
            });
        });
    }, [seriesSpells, spells]);
    
    const handleSpellChange = useCallback(function (key: keyof SpellEditState, value: string | string[] | null): void {
        updateSpellField(key, value);
    }, [updateSpellField]);
    
    async function handleSave(): Promise<void> {
        await exitEditMode(true);
    }
    
    function handleCancel(): void {
        exitEditMode(false);
    }
    
    async function handleDelete(): Promise<void> {
        if (selectedSpell?.id) {
            await deleteSpell(selectedSpell.id);
            setShowDeleteConfirm(false);
            backToList();
        }
    }
    
    if (isLoading) {
        return <PulseLoader size="sm"/>;
    }
    
    const isNew: boolean = selectedSpell?.id === null;
    const canExport: boolean = Boolean(bookSeriesId && selectedSpell?.id && !selectedSpell.seriesSpellId);
    
    return (
        <div className="flex flex-col h-full">
            <ToolDetailHeader
                title={showTagManager ? t('spellTagManager.title') : (selectedSpell?.name || '')}
                defaultTitle={showTagManager ? t('spellTagManager.title') : t('spellDetail.newSpell')}
                viewMode={showTagManager ? 'detail' : viewMode}
                isNew={isNew}
                onBack={showTagManager ? function (): void {
                    setShowTagManager(false);
                } : backToList}
                onEdit={showTagManager ? undefined : enterEditMode}
                onSave={handleSave}
                onCancel={handleCancel}
                onDelete={showTagManager ? undefined : function (): void {
                    setShowDeleteConfirm(true);
                }}
                onExport={canExport && !showTagManager ? exportToSeries : undefined}
                showExport={canExport && !showTagManager}
                showDelete={!showTagManager && Boolean(selectedSpell?.id)}
            />
            
            <div className="flex-1 overflow-y-auto">
                {showTagManager && (
                    <SpellTagManager
                        tags={tags}
                        onCreateTag={createTag}
                        onUpdateTag={updateTag}
                        onDeleteTag={deleteTag}
                    />
                )}
                
                {!showTagManager && viewMode === 'list' && (
                    <div className="space-y-3 p-2">
                        {/* Import from series */}
                        {bookSeriesId && availableSeriesSpells.length > 0 && (
                            <SeriesImportSelector
                                availableItems={availableSeriesSpells.map(function (ss: SeriesSpellListItem) {
                                    return {
                                        id: ss.id,
                                        name: ss.name
                                    };
                                })}
                                onImport={importFromSeries}
                                placeholder={t('seriesImport.selectElement')}
                                label={t('seriesImport.importFromSeries')}
                            />
                        )}
                        
                        <SpellEditorList
                            spells={spells}
                            tags={tags}
                            onSpellClick={enterDetailMode}
                            onAddSpell={addNewSpell}
                            onManageTags={function (): void {
                                setShowTagManager(true);
                            }}
                        />
                    </div>
                )}
                
                {!showTagManager && viewMode === 'detail' && selectedSpell && (
                    <div className="p-4">
                        <SpellEditorDetail
                            spell={selectedSpell}
                            availableTags={tags}
                            seriesSpell={selectedSeriesSpell}
                        />
                    </div>
                )}
                
                {!showTagManager && viewMode === 'edit' && selectedSpell && (
                    <div className="p-4">
                        <SpellEditorEdit
                            spell={selectedSpell}
                            availableTags={tags}
                            onSpellChange={handleSpellChange}
                            onCreateTag={createTag}
                            seriesSpell={selectedSeriesSpell}
                            onSyncComplete={handleSyncComplete}
                        />
                    </div>
                )}
            </div>
            
            {showDeleteConfirm && selectedSpell?.id && (
                <AlertBox
                    title={t('spellDetail.deleteTitle')}
                    message={t('spellDetail.deleteMessage', {name: selectedSpell.name})}
                    type="danger"
                    confirmText={t('common.delete')}
                    cancelText={t('common.cancel')}
                    onConfirm={handleDelete}
                    onCancel={function (): void {
                        setShowDeleteConfirm(false);
                    }}
                />
            )}
            
        </div>
    );
}