'use client';
import React, {useContext, useEffect, useState} from 'react';
import {BookContext} from "@/context/BookContext";
import {ChapterProps} from "@/lib/models/Chapter";
import {ChapterContext} from '@/context/ChapterContext';
import {EditorContext} from '@/context/EditorContext'
import {Editor, useEditor} from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Underline from "@tiptap/extension-underline";
import TextAlign from "@tiptap/extension-text-align";
import {AlertContext, AlertProvider} from "@/context/AlertContext";
import System from "@/lib/models/System";
import {SessionContext} from '@/context/SessionContext';
import {SessionProps} from "@/lib/models/Session";
import User, {UserProps} from "@/lib/models/User";
import {BookProps} from "@/lib/models/Book";
import {AppRouterInstance} from "next/dist/shared/lib/app-router-context.shared-runtime";
import {useRouter} from "next/navigation";
import ScribeTopBar from "@/components/ScribeTopBar";
import ScribeControllerBar from "@/components/ScribeControllerBar";
import ScribeLeftBar from "@/components/leftbar/ScribeLeftBar";
import ScribeEditor from "@/components/editor/ScribeEditor";
import ComposerRightBar from "@/components/rightbar/ComposerRightBar";
import ScribeFooterBar from "@/components/ScribeFooterBar";
import GuideTour, {GuideStep} from "@/components/GuideTour";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faBookMedical, faFeather} from "@fortawesome/free-solid-svg-icons";
import TermsOfUse from "@/components/TermsOfUse";
import frMessages from '@/lib/locales/fr.json';
import enMessages from '@/lib/locales/en.json';
import Image from "next/image";
import {NextIntlClientProvider, useTranslations} from "next-intl";
import {LangContext} from "@/context/LangContext";
import {AIUsageContext} from "@/context/AIUsageContext";

const messagesMap = {
    fr: frMessages,
    en: enMessages
};

function ScribeContent() {
    const t = useTranslations();
    const {lang: locale} = useContext(LangContext);
    const {errorMessage, successMessage} = useContext(AlertContext);
    const editor: Editor | null = useEditor({
        extensions: [
            StarterKit,
            Underline,
            TextAlign.configure({
                types: ['heading', 'paragraph'],
            }),
        ],
        injectCSS: false,
        immediatelyRender: false,
    });

    const router: AppRouterInstance = useRouter();
    const [session, setSession] = useState<SessionProps>({user: null, accessToken: '', isConnected: false});
    const [currentChapter, setCurrentChapter] = useState<ChapterProps | undefined>(undefined);
    const [currentBook, setCurrentBook] = useState<BookProps | null>(null);

    const [currentCredits, setCurrentCredits] = useState<number>(160);
    const [amountSpent, setAmountSpent] = useState<number>(session.user?.aiUsage || 0);

    const [isLoading, setIsLoading] = useState<boolean>(true);

    const [sessionAttempts, setSessionAttempts] = useState<number>(0)

    const [isTermsAccepted, setIsTermsAccepted] = useState<boolean>(false);
    const [homeStepsGuide, setHomeStepsGuide] = useState<boolean>(false);
    
    const homeSteps: GuideStep[] = [
        {
            id: 0,
            x: 50,
            y: 50,
            title: t("homePage.guide.welcome", {name: session.user?.name || ''}),
            content: (
                <div>
                    <p>{t("homePage.guide.step0.description1")}</p>
                    <br/>
                    <p>{t("homePage.guide.step0.description2")}</p>
                </div>
            ),
        },
        {
            id: 1, position: 'right',
            targetSelector: `[data-guide="left-panel-container"]`,
            title: t("homePage.guide.step1.title"),
            content: (
                <div>
                    <p className={'flex items-center space-x-2'}>
                        <strong>
                            <FontAwesomeIcon icon={faBookMedical} className={'w-5 h-5'}/> :
                        </strong>
                        {t("homePage.guide.step1.addBook")}
                    </p>
                    <br/>
                    <p><strong><FontAwesomeIcon icon={faFeather}
                                                className={'w-5 h-5'}/> :</strong> {t("homePage.guide.step1.generateStory")}
                    </p>
                </div>
            ),
        },
        {
            id: 2,
            title: t("homePage.guide.step2.title"), position: 'bottom',
            targetSelector: `[data-guide="search-bar"]`,
            content: (
                <div>
                    <p>{t("homePage.guide.step2.description")}</p>
                </div>
            ),
        },
        {
            id: 3,
            title: t("homePage.guide.step3.title"),
            targetSelector: `[data-guide="user-dropdown"]`,
            position: 'auto',
            content: (
                <div>
                    <p>{t("homePage.guide.step3.description")}</p>
                </div>
            ),
        },
        {
            id: 4,
            title: t("homePage.guide.step4.title"),
            content: (
                <div>
                    <p>{t("homePage.guide.step4.description1")}</p>
                    <br/>
                    <p>{t("homePage.guide.step4.description2")}</p>
                </div>
            ),
        },
    ];
    
    useEffect((): void => {
        checkAuthentification().then()
    }, []);
    
    useEffect((): void => {
        if (session.isConnected) {
            setIsTermsAccepted(session.user?.termsAccepted ?? false);
            setHomeStepsGuide(User.guideTourDone(session.user?.guideTour ?? [], 'home-basic'));
            setIsLoading(false);
        } else {
            if (sessionAttempts > 2) {
                router.push('/');
            }
        }
        setSessionAttempts(sessionAttempts + 1);
    }, [session]);
    
    useEffect((): void => {
        if (currentBook) {
            getLastChapter().then();
        }
    }, [currentBook]);
    
    async function handleHomeTour(): Promise<void> {
        try {
            const response: boolean = await System.authPostToServer<boolean>('logs/tour', {
                    plateforme: 'web',
                    tour: 'home-basic'
                },
                session.accessToken,
                locale
            );
            if (response) {
                setSession(User.setNewGuideTour(session, 'home-basic'));
                setHomeStepsGuide(false);
            }
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t("homePage.errors.termsError"));
            }
        }
    }
    
    async function checkAuthentification(): Promise<void> {
        const token: string | null = System.getCookie('token');
        if (token) {
            try {
                const user: UserProps = await System.authGetQueryToServer<UserProps>('user/infos', token, locale);
                if (!user) {
                    errorMessage(t("homePage.errors.userNotFound"));
                }
                setSession({
                    isConnected: true,
                    user: user,
                    accessToken: token,
                });
                setCurrentCredits(user.creditsBalance)
                setAmountSpent(user.aiUsage)
            } catch (e: unknown) {
                if (e instanceof Error) {
                    errorMessage(e.message);
                } else {
                    errorMessage(t("homePage.errors.authenticationError"));
                }
                window.location.href = 'https://eritors.com/login';
            }
        } else {
            window.location.href = 'https://eritors.com/login';
        }
    }
    
    async function handleTermsAcceptance(): Promise<void> {
        try {
            const response: boolean = await System.authPostToServer<boolean>(`user/terms/accept`, {
                version: '2025-07-1'
            }, session.accessToken, locale);
            if (response) {
                setIsTermsAccepted(true);
                setHomeStepsGuide(true);
                const newSession: SessionProps = {
                    ...session,
                    user: {
                        ...session?.user as UserProps,
                        termsAccepted: true
                    }
                }
                setSession(newSession);
            } else {
                errorMessage(t("homePage.errors.termsAcceptError"));
            }
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t("homePage.errors.termsAcceptError"));
            }
        }
    }
    
    async function getLastChapter(): Promise<void> {
        if (session?.accessToken) {
            try {
                const response: ChapterProps | null = await System.authGetQueryToServer<ChapterProps | null>(`chapter/last-chapter`, session.accessToken, locale, {bookid: currentBook?.bookId});
                if (response) {
                    setCurrentChapter(response)
                } else {
                    setCurrentChapter(undefined);
                }
            } catch (e: unknown) {
                if (e instanceof Error) {
                    errorMessage(e.message);
                } else {
                    errorMessage(t("homePage.errors.lastChapterError"));
                }
            }
        }
    }

    if (isLoading) {
        return (
            <div
                className="bg-background text-text-primary h-screen flex flex-col items-center justify-center font-['Lora']">
                <div className="flex flex-col items-center space-y-6">
                    <div className="animate-pulse">
                        <Image src={'/logo.png'} alt="ERitors Logo" width={400} height={400}/>
                    </div>
                    <div className="flex space-x-2">
                        <div className="w-2 h-2 bg-primary rounded-full animate-bounce"></div>
                        <div className="w-2 h-2 bg-primary rounded-full animate-bounce delay-100"></div>
                        <div className="w-2 h-2 bg-primary rounded-full animate-bounce delay-200"></div>
                    </div>
                    <p className="text-text-secondary text-sm">
                        {t("homePage.loading")}
                    </p>
                </div>
            </div>
        )
    }

    return (
        <SessionContext.Provider value={{session: session, setSession: setSession}}>
            <BookContext.Provider value={{book: currentBook, setBook: setCurrentBook}}>
                <ChapterContext.Provider value={{chapter: currentChapter, setChapter: setCurrentChapter}}>
                    <AIUsageContext.Provider value={{
                        totalCredits: currentCredits,
                        setTotalCredits: setCurrentCredits,
                        totalPrice: amountSpent,
                        setTotalPrice: setAmountSpent
                    }}>
                        <div
                            className="bg-background text-text-primary h-screen flex flex-col font-['Lora']">
                            <ScribeTopBar/>
                            <EditorContext.Provider value={{editor: editor}}>
                                <ScribeControllerBar/>
                                <div className="flex-1 flex overflow-hidden">
                                    <ScribeLeftBar/>
                                    <ScribeEditor/>
                                    <ComposerRightBar/>
                                </div>
                                <ScribeFooterBar/>
                            </EditorContext.Provider>
                        </div>
                        {
                            homeStepsGuide &&
                            <GuideTour stepId={0} steps={homeSteps} onComplete={handleHomeTour}
                                       onClose={(): void => setHomeStepsGuide(false)}/>
                        }
                        {
                            !isTermsAccepted && <TermsOfUse onAccept={handleTermsAcceptance}/>
                        }
                    </AIUsageContext.Provider>
                </ChapterContext.Provider>
            </BookContext.Provider>
        </SessionContext.Provider>
    );
}

export default function Scribe() {
    const [locale, setLocale] = useState<'fr' | 'en'>('fr');
    
    useEffect((): void => {
        const lang: "fr" | "en" | null = System.getCookie('lang') as "fr" | "en" | null;
        if (lang) {
            setLocale(lang);
        }
    }, []);
    
    const messages = messagesMap[locale];
    
    return (
        <LangContext.Provider value={{lang: locale, setLang: setLocale}}>
            <NextIntlClientProvider locale={locale} messages={messages}>
                <AlertProvider>
                    <ScribeContent/>
                </AlertProvider>
            </NextIntlClientProvider>
        </LangContext.Provider>
    );
}