'use client'
import React, {lazy, Suspense, 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';

// Lazy loaded components - avec ref (anciens)
const BasicInformationSetting = lazy(function () {
    return import('./BasicInformationSetting');
});
const GuideLineSetting = lazy(function () {
    return import('./guide-line/GuideLineSetting');
});
const StorySetting = lazy(function () {
    return import('./story/StorySetting');
});
const QuillSenseSetting = lazy(function () {
    return import('./quillsense/QuillSenseSetting');
});

// Lazy loaded components - sans ref (nouveaux avec leur propre header)
const WorldSettings = lazy(function () {
    return import('./world/settings/WorldSettings');
});
const LocationSettings = lazy(function () {
    return import('./locations/settings/LocationSettings');
});
const CharacterSettings = lazy(function () {
    return import('./characters/settings/CharacterSettings');
});
const SpellSettings = lazy(function () {
    return import('./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 BookSettingOptionProps {
    setting: string;
}

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

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

export default function BookSettingOption({setting}: BookSettingOptionProps): React.JSX.Element {
    const t = useTranslations();
    const settingRef = useRef<SettingRef>(null);

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

    function renderTitle(): string {
        switch (setting) {
            case 'basic-information':
                return t("bookSettingOption.basicInformation");
            case 'guide-line':
                return t("bookSettingOption.guideLine");
            case 'story':
                return t("bookSettingOption.storyPlan");
            case 'quillsense':
                return t("bookSettingOption.quillsense");
            case 'world':
                return t("bookSettingOption.manageWorlds");
            case 'locations':
                return t("bookSettingOption.yourLocations");
            case 'characters':
                return t("bookSettingOption.characters");
            case 'spells':
                return t("bookSettingOption.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="BI"
                    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' && <BasicInformationSetting ref={settingRef}/>}
                    {setting === 'guide-line' && <GuideLineSetting ref={settingRef}/>}
                    {setting === 'story' && <StorySetting ref={settingRef}/>}
                    {setting === 'quillsense' && <QuillSenseSetting ref={settingRef}/>}
                    {(setting === 'world' || setting === 'worlds') && (
                        <WorldSettings entityType="book" showToggle={true}/>
                    )}
                    {setting === 'locations' && (
                        <LocationSettings entityType="book" showToggle={true}/>
                    )}
                    {setting === 'characters' && (
                        <CharacterSettings entityType="book" showToggle={true}/>
                    )}
                    {setting === 'spells' && (
                        <SpellSettings entityType="book" showToggle={true}/>
                    )}
                    {!['basic-information', 'guide-line', 'story', 'world', 'worlds', 'locations', 'characters', 'spells', 'quillsense'].includes(setting) && (
                        <div className="text-text-secondary py-4 text-center">
                            {t("bookSettingOption.notAvailable")}
                        </div>
                    )}
                </Suspense>
            </div>
        </div>
    );
}