'use client'
import React, {lazy, Suspense, useContext, useRef} from 'react';
import {useTranslations} from '@/lib/i18n';
import SectionHeader from "@/components/ui/SectionHeader";
import IconButton from "@/components/ui/IconButton";
import {Save} from 'lucide-react';
import PulseLoader from '@/components/ui/PulseLoader';
import {SeriesContext, SeriesContextProps} from '@/context/SeriesContext';
import {SettingRef} from "@/lib/types/settings";

// 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');
});

interface SeriesSettingOptionProps {
    setting: string;
}

// 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}: SeriesContextProps = useContext<SeriesContextProps>(SeriesContext);
    const settingRef: React.RefObject<SettingRef | null> = 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-darkest-background pt-6 pb-4">
                <SectionHeader
                    title={renderTitle()}
                    actions={showSaveButton ? (
                        <IconButton icon={Save} variant="primary" onClick={handleSaveClick}/>
                    ) : undefined}
                />
            </div>
            <div className="mb-6">
                <Suspense fallback={<PulseLoader/>}>
                    {setting === 'basic-information' && <BasicSeriesInformation ref={settingRef}/>}
                    {setting === 'books' && <SeriesBooksManager ref={settingRef}/>}
                    {setting === 'worlds' && (
                        <WorldSettings entityType="series" entityId={seriesId}/>
                    )}
                    {setting === 'locations' && (
                        <LocationSettings entityType="series" entityId={seriesId}/>
                    )}
                    {setting === 'characters' && (
                        <CharacterSettings entityType="series" entityId={seriesId}/>
                    )}
                    {setting === 'spells' && (
                        <SpellSettings entityType="series" entityId={seriesId}/>
                    )}
                    {!['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>
    );
}