'use client'
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {
    faFeather,
    faGlobe,
    faHatWizard,
    faInfoCircle,
    faMapMarkerAlt,
    faUsers
} from "@fortawesome/free-solid-svg-icons";
import React, {lazy, Suspense, useContext, useEffect, useState} from "react";
import {BookContext} from "@/context/BookContext";
import {PanelComponent} from "@/lib/models/Editor";
import PanelHeader from "@/components/PanelHeader";
import AboutEditors from "@/components/rightbar/AboutERitors";
import {faDiscord, faFacebook} from "@fortawesome/free-brands-svg-icons";
import QuillSense from "@/components/quillsense/QuillSenseComponent";
import {useTranslations} from "next-intl";
import {faSpinner} from "@fortawesome/free-solid-svg-icons";
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
import * as tauri from '@/lib/tauri';

// Lazy loaded Editor components
const WorldEditor = lazy(function () {
    return import('@/components/book/settings/world/editor/WorldEditor');
});
const LocationEditor = lazy(function () {
    return import('@/components/book/settings/locations/editor/LocationEditor');
});
const CharacterEditor = lazy(function () {
    return import('@/components/book/settings/characters/editor/CharacterEditor');
});
const SpellEditor = lazy(function () {
    return import('@/components/book/settings/spells/editor/SpellEditor');
});

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 PanelContentProps {
    currentPanelId: number | undefined;
}

function PanelContent({currentPanelId}: PanelContentProps): React.JSX.Element {
    return (
        <Suspense fallback={<LoadingSpinner/>}>
            {currentPanelId === 1 && <QuillSense/>}
            {currentPanelId === 2 && <WorldEditor/>}
            {currentPanelId === 3 && <LocationEditor/>}
            {currentPanelId === 4 && <CharacterEditor/>}
            {currentPanelId === 5 && <SpellEditor/>}
        </Suspense>
    );
}

interface PanelHeaderProps {
    currentPanel: PanelComponent | undefined;
    onClose: () => Promise<void>;
}

function EditorPanelHeader({currentPanel, onClose}: PanelHeaderProps): React.JSX.Element {
    return (
        <PanelHeader
            title={currentPanel?.title ?? ''}
            description={currentPanel?.description ?? ''}
            badge={currentPanel?.badge ?? ''}
            icon={currentPanel?.icon}
            callBackAction={onClose}
        />
    );
}

export default function ComposerRightBar(): React.JSX.Element {
    const {book} = useContext(BookContext);
    const t = useTranslations();
    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);

    const [panelHidden, setPanelHidden] = useState<boolean>(false);
    const [currentPanel, setCurrentPanel] = useState<PanelComponent | undefined>();
    const [showAbout, setShowAbout] = useState<boolean>(false);

    function togglePanel(component: PanelComponent): void {
        if (panelHidden) {
            if (currentPanel?.id === component.id) {
                setPanelHidden(!panelHidden);
                return;
            }
        } else {
            setPanelHidden(true);
        }
    }

    const editorComponents: PanelComponent[] = [
        {
            id: 1,
            title: t("composerRightBar.editorComponents.quillSense.title"),
            description: t("composerRightBar.editorComponents.quillSense.description"),
            badge: t("composerRightBar.editorComponents.quillSense.badge"),
            icon: faFeather
        },
        {
            id: 2,
            title: t("composerRightBar.editorComponents.worlds.title"),
            description: t("composerRightBar.editorComponents.worlds.description"),
            badge: t("composerRightBar.editorComponents.worlds.badge"),
            icon: faGlobe
        },
        {
            id: 3,
            title: t("composerRightBar.editorComponents.locations.title"),
            description: t("composerRightBar.editorComponents.locations.description"),
            badge: t("composerRightBar.editorComponents.locations.badge"),
            icon: faMapMarkerAlt
        },
        {
            id: 4,
            title: t("composerRightBar.editorComponents.characters.title"),
            description: t("composerRightBar.editorComponents.characters.description"),
            badge: t("composerRightBar.editorComponents.characters.badge"),
            icon: faUsers
        },
        {
            id: 5,
            title: t("composerRightBar.editorComponents.spells.title"),
            description: t("composerRightBar.editorComponents.spells.description"),
            badge: t("composerRightBar.editorComponents.spells.badge"),
            icon: faHatWizard
        },
    ];

    const homeComponents: PanelComponent[] = [
        {
            id: 1,
            title: t("composerRightBar.homeComponents.about.title"),
            description: t("composerRightBar.homeComponents.about.description"),
            badge: t("composerRightBar.homeComponents.about.badge"),
            icon: faInfoCircle,
            action: function (): void {
                setShowAbout(true);
            }
        },
        {
            id: 2,
            title: t("composerRightBar.homeComponents.facebook.title"),
            description: t("composerRightBar.homeComponents.facebook.description"),
            badge: t("composerRightBar.homeComponents.facebook.badge"),
            icon: faFacebook,
            action: function (): Promise<void> {
                return tauri.openExternal('https://www.facebook.com/profile.php?id=61562628720878');
            }
        },
        {
            id: 3,
            title: t("composerRightBar.homeComponents.discord.title"),
            description: t("composerRightBar.homeComponents.discord.description"),
            badge: t("composerRightBar.homeComponents.discord.badge"),
            icon: faDiscord,
            action: function (): Promise<void> {
                return tauri.openExternal('https://discord.gg/CHXRPvmaXm');
            }
        }
    ];

    function disabled(componentId: number): boolean {
        return book === null;
    }

    useEffect(function (): void {
        if (!book) {
            setCurrentPanel(undefined);
            setPanelHidden(false);
        }
    }, [book]);

    async function handleClosePanel(): Promise<void> {
        setPanelHidden(!panelHidden);
    }

    return (
        <div id="right-panel-container" className="flex transition-all duration-300">
            {panelHidden && (
                <div id="right-panel"
                     className="bg-tertiary/95 backdrop-blur-sm border-l border-secondary/50 min-w-[450px] max-w-[450px] h-full transition-all duration-300 overflow-hidden shadow-2xl">
                    <div className="flex flex-col h-full">
                        <EditorPanelHeader
                            currentPanel={currentPanel}
                            onClose={handleClosePanel}
                        />
                        <div className="flex-grow overflow-auto">
                            <PanelContent currentPanelId={currentPanel?.id}/>
                        </div>
                    </div>
                </div>
            )}
            <div className="bg-tertiary border-l border-secondary/50 p-3 flex flex-col space-y-3 shadow-xl">
                {book ? editorComponents.filter(function (component: PanelComponent): boolean {
                    // Masquer QuillSense (id=1) si offline, livre local ou desactive pour ce livre
                    if (component.id === 1) {
                        if (isCurrentlyOffline() || book?.localBook) {
                            return false;
                        }
                        if (book.quillsenseEnabled === false) {
                            return false;
                        }
                    }
                    // Masquer Worlds (id=2) si desactive pour ce livre
                    if (component.id === 2 && !book?.tools?.worlds) {
                        return false;
                    }
                    // Masquer Locations (id=3) si desactive pour ce livre
                    if (component.id === 3 && !book?.tools?.locations) {
                        return false;
                    }
                    // Masquer Characters (id=4) si desactive pour ce livre
                    if (component.id === 4 && !book?.tools?.characters) {
                        return false;
                    }
                    // Masquer Spells (id=5) si desactive pour ce livre
                    if (component.id === 5 && !book?.tools?.spells) {
                        return false;
                    }
                    return true;
                }).map(function (component: PanelComponent) {
                    return (
                        <button
                            key={component.id}
                            disabled={disabled(component.id)}
                            onClick={function (): void {
                                togglePanel(component);
                                setCurrentPanel(component);
                            }}
                            className={`group relative p-3 rounded-xl transition-all duration-200 ${
                                disabled(component.id)
                                    ? 'bg-secondary/10 text-muted cursor-not-allowed opacity-40'
                                    : panelHidden && currentPanel?.id === component.id
                                        ? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105'
                                        : 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md hover:scale-105'
                            }`}
                            title={component.title}
                        >
                            <FontAwesomeIcon icon={component.icon}
                                             className="w-4 h-4 transition-transform duration-200 group-hover:scale-110"/>
                            {panelHidden && currentPanel?.id === component.id && (
                                <div className="absolute -left-1 top-1/2 -translate-y-1/2 w-1 h-8 bg-primary rounded-r-full"></div>
                            )}
                        </button>
                    );
                }) : homeComponents.map(function (component: PanelComponent) {
                    return (
                        <button
                            key={component.id}
                            onClick={component.action ?? function (): void {}}
                            className={`group relative p-3 rounded-xl transition-all duration-200 ${panelHidden && currentPanel?.id === component.id
                                ? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105'
                                : 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md hover:scale-105'}`}
                            title={component.title}
                        >
                            <FontAwesomeIcon icon={component.icon}
                                             className="w-4 h-4 transition-transform duration-200 group-hover:scale-110"/>
                        </button>
                    );
                })}
            </div>
            {showAbout && <AboutEditors onClose={function (): void {
                setShowAbout(false);
            }}/>}
        </div>
    );
}