import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faBookMedical, faBookOpen, faFeather, faFileImport, faLayerGroup} from "@fortawesome/free-solid-svg-icons";
import React, {useContext, useEffect, useState} from "react";
import {BookContext} from "@/context/BookContext";
import ScribeChapterComponent from "@/components/leftbar/ScribeChapterComponent";
import PanelHeader from "@/components/PanelHeader";
import {PanelComponent} from "@/lib/models/Editor";
import AddNewBookForm from "@/components/book/AddNewBookForm";
import AddNewSeriesForm from "@/components/series/AddNewSeriesForm";
import ShortStoryGenerator from "@/components/ShortStoryGenerator";
import ImportBookForm from "@/components/book/ImportBookForm";
import {SessionContext} from "@/context/SessionContext";
import {useTranslations} from "next-intl";
import OfflineContext from "@/context/OfflineContext";

export default function ScribeLeftBar() {
    const {book} = useContext(BookContext);
    const {session} = useContext(SessionContext);
    const t = useTranslations();
    
    const [panelHidden, setPanelHidden] = useState<boolean>(false);
    
    const [currentPanel, setCurrentPanel] = useState<PanelComponent>();
    
    const [showAddNewBook, setShowAddNewBook] = useState<boolean>(false);
    const [showAddNewSeries, setShowAddNewSeries] = useState<boolean>(false);
    const [showGenerateShortModal, setShowGenerateShortModal] = useState<boolean>(false)
    const [showImportBook, setShowImportBook] = useState<boolean>(false)
    const {isCurrentlyOffline} = useContext(OfflineContext)
    
    const editorComponents: PanelComponent[] = [
        {
            id: 1,
            title: t("scribeLeftBar.editorComponents.structure.title"),
            description: t("scribeLeftBar.editorComponents.structure.description"),
            badge: t("scribeLeftBar.editorComponents.structure.badge"),
            icon: faBookOpen
        }
        /*
        {
            id: 2,
            title: 'Ligne directive',
            icon: faBookmark,
            badge: 'LD',
            description: 'Ligne directrice pour ce chapitre.'
        }, {
            id: 3,
            title: 'Statistique',
            icon: faChartLine,
            badge: 'STATS',
            description: 'Vérification des verbes'
        }*/
    ]
    
    const homeComponents: PanelComponent[] = [
        {
            id: 1,
            title: t("scribeLeftBar.homeComponents.addBook.title"),
            description: t("scribeLeftBar.homeComponents.addBook.description"),
            badge: t("scribeLeftBar.homeComponents.addBook.badge"),
            icon: faBookMedical
        }, {
            id: 2,
            title: t("scribeLeftBar.homeComponents.generateStory.title"),
            icon: faFeather,
            badge: t("scribeLeftBar.homeComponents.generateStory.badge"),
            description: t("scribeLeftBar.homeComponents.generateStory.description")
        }, {
            id: 3,
            title: t("scribeLeftBar.homeComponents.addSeries.title"),
            icon: faLayerGroup,
            badge: t("scribeLeftBar.homeComponents.addSeries.badge"),
            description: t("scribeLeftBar.homeComponents.addSeries.description")
        }, {
            id: 4,
            title: t("scribeLeftBar.homeComponents.importBook.title"),
            icon: faFileImport,
            badge: t("scribeLeftBar.homeComponents.importBook.badge"),
            description: t("scribeLeftBar.homeComponents.importBook.description")
        },
    ]
    
    function togglePanel(component: PanelComponent): void {
        if (panelHidden) {
            if (currentPanel?.id === component.id) {
                setPanelHidden(!panelHidden);
                return;
            }
        } else {
            setPanelHidden(true);
        }
    }
    
    useEffect(():void => {
        if (!book){
            setCurrentPanel(undefined);
            setPanelHidden(false);
            return;
        }
    }, [book]);
    
    return (
        <div id="left-panel-container" data-guide={"left-panel-container"} className="flex transition-all duration-300">
            <div className="bg-tertiary border-r border-secondary/50 p-3 flex flex-col space-y-3 shadow-xl">
                {book ? editorComponents.map(component => (
                    <button
                        key={component.id}
                        onClick={(): void => {
                            togglePanel(component);
                            setCurrentPanel(component);
                        }}
                        title={component.title}
                        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'
                            : 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md'}`}
                    >
                        <FontAwesomeIcon icon={component.icon}
                                         className={'w-4 h-4 transition-transform duration-200'}/>
                        {panelHidden && currentPanel?.id === component.id && (
                            <div
                                className="absolute -right-1 top-1/2 -translate-y-1/2 w-1 h-8 bg-primary rounded-l-full"></div>
                        )}
                    </button>
                )) : (
                    homeComponents
                        .filter((component: PanelComponent): boolean => {
                            // Hide generate story (id: 2) and import book (id: 4) in offline mode (requires server)
                            // Series (id: 3) now has dual logic and works offline
                            if (isCurrentlyOffline() && (component.id === 2 || component.id === 4)) {
                                return false;
                            }
                            return true;
                        })
                        .map((component: PanelComponent) => (
                            <button
                                key={component.id}
                                onClick={() => component.id === 1 ? setShowAddNewBook(true) : component.id === 2 ? setShowGenerateShortModal(true) : component.id === 3 ? setShowAddNewSeries(true) : component.id === 4 ? setShowImportBook(true) : null}
                                title={component.title}
                                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'
                                    : 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md'}`}
                            >
                                <FontAwesomeIcon icon={component.icon}
                                                 className={'w-4 h-4 transition-transform duration-200'}/>
                            </button>
                        ))
                )}
            </div>

            {panelHidden && (
                <div id="left-panel"
                     className="bg-tertiary/95 backdrop-blur-sm border-r border-secondary/50 h-full min-w-[320px] transition-all duration-300 overflow-y-auto shadow-2xl flex flex-col">
                    <PanelHeader title={currentPanel?.title ?? ''} description={``} badge={``}
                                 icon={currentPanel?.icon}
                                 callBackAction={async () => setPanelHidden(!panelHidden)}/>
                    {currentPanel?.id === 1 && (
                        <ScribeChapterComponent/>
                    )}
                </div>
            )}
            {
                showAddNewBook &&
                <AddNewBookForm setCloseForm={setShowAddNewBook}/>
            }
            {
                showAddNewSeries &&
                <AddNewSeriesForm setCloseForm={setShowAddNewSeries}/>
            }
            {
                showGenerateShortModal &&
                <ShortStoryGenerator onClose={() => setShowGenerateShortModal(false)}/>
            }
            {
                showImportBook &&
                <ImportBookForm setCloseForm={setShowImportBook}/>
            }
        </div>
    )
}