ERitors-Scribe-Desktop/components/book/settings/locations/editor/LocationEditor.tsx

'use client';
import React, {useCallback, useContext, useMemo, useState} from 'react';
import {LocationProps, useLocations, UseLocationsConfig} from '@/hooks/settings/useLocations';
import {useTranslations} from '@/lib/i18n';
import {Plus} from 'lucide-react';
import PulseLoader from '@/components/ui/PulseLoader';
import {BookContext, BookContextProps} from '@/context/BookContext';
import {SeriesLocationItem} from '@/lib/types/series';
import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
import AlertBox from '@/components/ui/AlertBox';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import SeriesImportSelector from '@/components/form/SeriesImportSelector';

import LocationEditorList from './LocationEditorList';
import LocationEditorDetail from './LocationEditorDetail';
import LocationEditorEdit from './LocationEditorEdit';

/**
 * LocationEditor - Orchestrateur pour ComposerRightBar
 * Mêmes fonctionnalités que LocationSettings, layout condensé
 * Inclut: toggle tool, import from series, export to series
 */
export default function LocationEditor(): React.JSX.Element {
    const t = useTranslations();
    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
    const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
    const [showAddForm, setShowAddForm] = useState<boolean>(false);
    
    const config: UseLocationsConfig = useMemo(function (): UseLocationsConfig {
        return {
            entityType: 'book',
            entityId: book?.bookId || '',
        };
    }, [book?.bookId]);
    
    const {
        sections,
        seriesLocations,
        toolEnabled,
        isLoading,
        bookSeriesId,
        newSectionName,
        newElementNames,
        newSubElementNames,
        viewMode,
        selectedSectionIndex,
        addSection,
        addElement,
        addSubElement,
        removeSection,
        removeElement,
        removeSubElement,
        updateElement,
        updateSubElement,
        saveLocations,
        toggleTool,
        importFromSeries,
        exportToSeries,
        setNewSectionName,
        setNewElementNames,
        setNewSubElementNames,
        enterDetailMode,
        enterEditMode,
        exitEditMode,
        backToList,
    } = useLocations(config);
    
    const availableSeriesLocations = useMemo(function (): SeriesLocationItem[] {
        return seriesLocations.filter(function (sl: SeriesLocationItem): boolean {
            return !sections.some(function (s: LocationProps): boolean {
                return s.seriesLocationId === sl.id;
            });
        });
    }, [seriesLocations, sections]);
    
    // Wrapper pour convertir LocationProps en index
    const handleSectionClick = useCallback(function (section: LocationProps, index: number): void {
        enterDetailMode(index);
    }, [enterDetailMode]);
    
    // Gestion de l'ajout
    async function handleAddSection(): Promise<void> {
        if (newSectionName.trim()) {
            await addSection();
            setShowAddForm(false);
        } else {
            setShowAddForm(true);
        }
    }
    
    async function handleSave(): Promise<void> {
        await exitEditMode(true);
    }
    
    function handleCancel(): void {
        exitEditMode(false);
    }
    
    async function handleDelete(): Promise<void> {
        if (selectedSectionIndex >= 0 && sections[selectedSectionIndex]) {
            await removeSection(sections[selectedSectionIndex].id);
            setShowDeleteConfirm(false);
            backToList();
        }
    }
    
    if (isLoading) {
        return <PulseLoader size="sm"/>;
    }
    
    const selectedSection: LocationProps | undefined = sections[selectedSectionIndex];
    const canExport: boolean = Boolean(bookSeriesId && selectedSection && !selectedSection.seriesLocationId);
    
    return (
        <div className="flex flex-col h-full">
            <ToolDetailHeader
                title={selectedSection?.name || ''}
                defaultTitle={t('locationComponent.newSection')}
                viewMode={viewMode}
                isNew={false}
                onBack={backToList}
                onEdit={enterEditMode}
                onSave={handleSave}
                onCancel={handleCancel}
                onDelete={function (): void {
                    setShowDeleteConfirm(true);
                }}
                onExport={canExport ? function (): Promise<void> {
                    return exportToSeries(selectedSection!);
                } : undefined}
                showExport={canExport}
                showDelete={Boolean(selectedSection)}
            />
            
            <div className="flex-1 overflow-y-auto">
                {viewMode === 'list' && (
                    <div className="space-y-3 p-2">
                        {/* Import from series */}
                        {bookSeriesId && availableSeriesLocations.length > 0 && (
                            <SeriesImportSelector
                                availableItems={availableSeriesLocations.map(function (sl: SeriesLocationItem) {
                                    return {id: sl.id, name: sl.name};
                                })}
                                onImport={importFromSeries}
                                placeholder={t('seriesImport.selectElement')}
                                label={t('seriesImport.importFromSeries')}
                            />
                        )}
                        
                        {showAddForm && (
                            <div className="px-2">
                                <InputField
                                    input={
                                        <TextInput
                                            value={newSectionName}
                                            setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
                                                setNewSectionName(e.target.value);
                                            }}
                                            placeholder={t('locationComponent.newSectionPlaceholder')}
                                        />
                                    }
                                    actionIcon={Plus}
                                    actionLabel={t('locationComponent.addSectionLabel')}
                                    addButtonCallBack={async function (): Promise<void> {
                                        await addSection();
                                        setShowAddForm(false);
                                    }}
                                />
                            </div>
                        )}
                        
                        <LocationEditorList
                            sections={sections}
                            onSectionClick={handleSectionClick}
                            onAddSection={handleAddSection}
                        />
                    </div>
                )}
                
                {viewMode === 'detail' && selectedSection && (
                    <div className="p-4">
                        <LocationEditorDetail section={selectedSection}/>
                    </div>
                )}
                
                {viewMode === 'edit' && selectedSection && (
                    <div className="p-4">
                        <LocationEditorEdit
                            section={selectedSection}
                            newElementNames={newElementNames}
                            newSubElementNames={newSubElementNames}
                            onAddElement={addElement}
                            onAddSubElement={addSubElement}
                            onRemoveElement={removeElement}
                            onRemoveSubElement={removeSubElement}
                            onUpdateElement={updateElement}
                            onUpdateSubElement={updateSubElement}
                            onNewElementNameChange={function (sectionId: string, name: string): void {
                                setNewElementNames({...newElementNames, [sectionId]: name});
                            }}
                            onNewSubElementNameChange={function (elementIndex: number, name: string): void {
                                setNewSubElementNames({...newSubElementNames, [elementIndex]: name});
                            }}
                        />
                    </div>
                )}
            </div>
            
            {showDeleteConfirm && selectedSection && (
                <AlertBox
                    title={t('locationComponent.deleteTitle')}
                    message={t('locationComponent.deleteMessage', {name: selectedSection.name})}
                    type="danger"
                    confirmText={t('common.delete')}
                    cancelText={t('common.cancel')}
                    onConfirm={handleDelete}
                    onCancel={function (): void {
                        setShowDeleteConfirm(false);
                    }}
                />
            )}
        </div>
    );
}