ERitors-Scribe-Desktop/components/series/SeriesSettingOption.tsx

'use client'
import React, {lazy, Suspense, useContext, useRef} from 'react';
import {faPen, faSave} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faSpinner} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from 'next-intl';
import PanelHeader from '@/components/PanelHeader';
import {SeriesContext} from '@/context/SeriesContext';

// Lazy loaded components - avec ref (anciens)
const BasicSeriesInformation = lazy(function () {
    return import('./settings/BasicSeriesInformation');
});
const SeriesBooksManager = lazy(function () {
    return import('./settings/SeriesBooksManager');
});

// Lazy loaded components - sans ref (nouveaux avec leur propre header)
const WorldSettings = lazy(function () {
    return import('@/components/book/settings/world/settings/WorldSettings');
});
const LocationSettings = lazy(function () {
    return import('@/components/book/settings/locations/settings/LocationSettings');
});
const CharacterSettings = lazy(function () {
    return import('@/components/book/settings/characters/settings/CharacterSettings');
});
const SpellSettings = lazy(function () {
    return import('@/components/book/settings/spells/settings/SpellSettings');
});

function LoadingSpinner(): React.JSX.Element {
    return (
        <div className="flex items-center justify-center py-12">
            <FontAwesomeIcon icon={faSpinner} className="w-8 h-8 text-primary animate-spin"/>
        </div>
    );
}

interface SeriesSettingOptionProps {
    setting: string;
}

interface SettingRef {
    handleSave: () => Promise<void>;
}

// Settings qui gèrent leur propre save (pas de bouton save parent)
const selfManagedSettings: string[] = ['characters', 'spells', 'worlds', 'locations'];

export default function SeriesSettingOption({setting}: SeriesSettingOptionProps): React.JSX.Element {
    const t = useTranslations();
    const {seriesId} = useContext(SeriesContext);
    const settingRef = useRef<SettingRef>(null);

    const showSaveButton: boolean = !selfManagedSettings.includes(setting);

    function renderTitle(): string {
        switch (setting) {
            case 'basic-information':
                return t("seriesSettingOption.basicInformation");
            case 'books':
                return t("seriesSettingOption.books");
            case 'characters':
                return t("seriesSettingOption.characters");
            case 'worlds':
                return t("seriesSettingOption.worlds");
            case 'locations':
                return t("seriesSettingOption.locations");
            case 'spells':
                return t("seriesSettingOption.spells");
            default:
                return "";
        }
    }

    async function handleSaveClick(): Promise<void> {
        if (settingRef.current?.handleSave) {
            await settingRef.current.handleSave();
        }
    }

    return (
        <div className="px-6">
            <div className="sticky top-0 z-10 bg-tertiary pt-6 pb-4">
                <PanelHeader
                    icon={faPen}
                    badge="SE"
                    title={renderTitle()}
                    description=""
                    secondActionCallback={showSaveButton ? handleSaveClick : undefined}
                    callBackAction={showSaveButton ? handleSaveClick : undefined}
                    secondActionIcon={showSaveButton ? faSave : undefined}
                />
            </div>
            <div className="bg-secondary/10 rounded-xl p-1 mb-6">
                <Suspense fallback={<LoadingSpinner/>}>
                    {setting === 'basic-information' && <BasicSeriesInformation ref={settingRef}/>}
                    {setting === 'books' && <SeriesBooksManager ref={settingRef}/>}
                    {setting === 'worlds' && (
                        <WorldSettings entityType="series" entityId={seriesId} showToggle={false}/>
                    )}
                    {setting === 'locations' && (
                        <LocationSettings entityType="series" entityId={seriesId} showToggle={false}/>
                    )}
                    {setting === 'characters' && (
                        <CharacterSettings entityType="series" entityId={seriesId} showToggle={false}/>
                    )}
                    {setting === 'spells' && (
                        <SpellSettings entityType="series" entityId={seriesId} showToggle={false}/>
                    )}
                    {!['basic-information', 'books', 'worlds', 'locations', 'characters', 'spells'].includes(setting) && (
                        <div className="text-text-secondary py-4 text-center">
                            {t("bookSettingOption.notAvailable")}
                        </div>
                    )}
                </Suspense>
            </div>
        </div>
    );
}