'use client';
import React, {useCallback, useContext, useMemo, useState} from 'react';
import {useCharacters, UseCharactersConfig} from '@/hooks/settings/useCharacters';
import {useTranslations} from '@/lib/i18n';
import {CharacterProps} from '@/lib/types/character';
import {SeriesCharacterProps} 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 CharacterSettingsList from './CharacterSettingsList';
import CharacterSettingsDetail from './CharacterSettingsDetail';
import CharacterSettingsEdit from './CharacterSettingsEdit';

interface CharacterSettingsProps {
    entityType?: 'book' | 'series';
    entityId?: string;
    toolEnabled?: boolean;
}

/**
 * CharacterSettings - Orchestrateur pour BookSetting/SerieSetting
 * Gère le viewMode (list/detail/edit) et coordonne les sous-composants
 * Inclut: toggle tool, import from series, header avec actions
 */
export default function CharacterSettings({
                                              entityType = 'book',
                                              entityId,
                                              toolEnabled: parentToolEnabled,
                                          }: CharacterSettingsProps): React.JSX.Element {
    const t = useTranslations();
    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
    const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
    
    const resolvedEntityId: string = entityId || book?.bookId || '';
    
    const config: UseCharactersConfig = useMemo(function (): UseCharactersConfig {
        return {
            entityType,
            entityId: resolvedEntityId,
        };
    }, [entityType, resolvedEntityId]);
    
    const {
        characters,
        seriesCharacters,
        selectedCharacter,
        toolEnabled,
        isLoading,
        isSeriesMode,
        bookSeriesId,
        viewMode,
        saveCharacter,
        deleteCharacter,
        updateCharacterField,
        addAttribute,
        removeAttribute,
        toggleTool,
        importFromSeries,
        exportToSeries,
        refreshSeriesCharacters,
        setSelectedCharacter,
        enterDetailMode,
        enterEditMode,
        exitEditMode,
        backToList,
        addNewCharacter,
    } = useCharacters(config);
    
    const availableSeriesCharacters = useMemo(function (): SeriesCharacterProps[] {
        return seriesCharacters.filter(function (sc: SeriesCharacterProps): boolean {
            return !characters.some(function (c: CharacterProps): boolean {
                return c.seriesCharacterId === sc.id;
            });
        });
    }, [seriesCharacters, characters]);
    
    const handleCharacterChange = useCallback(function (key: keyof CharacterProps, value: string | number | null): void {
        updateCharacterField(key, value);
    }, [updateCharacterField]);
    
    async function handleSave(): Promise<void> {
        await exitEditMode(true);
    }
    
    function handleCancel(): void {
        exitEditMode(false);
    }
    
    async function handleDelete(): Promise<void> {
        if (selectedCharacter?.id) {
            await deleteCharacter(selectedCharacter.id);
            setShowDeleteConfirm(false);
            backToList();
        }
    }
    
    function getSeriesCharacterForSelected(): SeriesCharacterProps | null {
        if (!selectedCharacter?.seriesCharacterId) return null;
        return seriesCharacters.find(function (sc: SeriesCharacterProps): boolean {
            return sc.id === selectedCharacter.seriesCharacterId;
        }) || null;
    }
    
    if (isLoading) {
        return <PulseLoader/>;
    }
    
    const isNew: boolean = selectedCharacter?.id === null;
    const canExport: boolean = Boolean(bookSeriesId && selectedCharacter?.id && !selectedCharacter.seriesCharacterId);
    
    return (
        <div className="flex flex-col h-full">
            {/* Header - uniquement pour detail/edit */}
            <ToolDetailHeader
                title={selectedCharacter?.name || ''}
                defaultTitle={t('characterDetail.newCharacter')}
                viewMode={viewMode}
                isNew={isNew}
                onBack={backToList}
                onEdit={enterEditMode}
                onSave={handleSave}
                onCancel={handleCancel}
                onDelete={function (): void {
                    setShowDeleteConfirm(true);
                }}
                onExport={canExport ? exportToSeries : undefined}
                showExport={canExport}
                showDelete={Boolean(selectedCharacter?.id)}
            />
            
            {/* Contenu principal */}
            <div className="flex-1 overflow-y-auto">
                {viewMode === 'list' && (
                    <div className="space-y-5 p-4">
                        {((parentToolEnabled !== undefined ? parentToolEnabled : toolEnabled) || isSeriesMode) && (
                            <>
                                {/* Import from series */}
                                {!isSeriesMode && bookSeriesId && availableSeriesCharacters.length > 0 && (
                                    <SeriesImportSelector
                                        availableItems={availableSeriesCharacters.map(function (sc: SeriesCharacterProps) {
                                            return {
                                                id: sc.id,
                                                name: `${sc.name}${sc.lastName ? ' ' + sc.lastName : ''}`
                                            };
                                        })}
                                        onImport={importFromSeries}
                                        placeholder={t('seriesImport.selectElement')}
                                        label={t('seriesImport.importFromSeries')}
                                    />
                                )}
                                
                                {/* Liste des personnages */}
                                <CharacterSettingsList
                                    characters={characters}
                                    onCharacterClick={enterDetailMode}
                                    onAddCharacter={addNewCharacter}
                                />
                            </>
                        )}
                    </div>
                )}
                
                {viewMode === 'detail' && selectedCharacter && (
                    <div className="p-4">
                        <CharacterSettingsDetail
                            character={selectedCharacter}
                            seriesCharacter={getSeriesCharacterForSelected()}
                        />
                    </div>
                )}
                
                {viewMode === 'edit' && selectedCharacter && (
                    <div className="p-4">
                        <CharacterSettingsEdit
                            character={selectedCharacter}
                            setCharacter={setSelectedCharacter}
                            onCharacterChange={handleCharacterChange}
                            onAddAttribute={addAttribute}
                            onRemoveAttribute={removeAttribute}
                            seriesCharacter={getSeriesCharacterForSelected()}
                            onSyncComplete={refreshSeriesCharacters}
                        />
                    </div>
                )}
            </div>
            
            {/* Modal de confirmation de suppression */}
            {showDeleteConfirm && selectedCharacter?.id && (
                <AlertBox
                    title={t('characterDetail.deleteTitle')}
                    message={t('characterDetail.deleteMessage', {name: selectedCharacter.name})}
                    type="danger"
                    confirmText={t('common.delete')}
                    cancelText={t('common.cancel')}
                    onConfirm={handleDelete}
                    onCancel={function (): void {
                        setShowDeleteConfirm(false);
                    }}
                />
            )}
        </div>
    );
}
