ERitors-Scribe-Desktop/app/page.tsx

'use client';
import {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 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 {NextIntlClientProvider, useTranslations} from "next-intl";
import {LangContext} from "@/context/LangContext";
import {AIUsageContext} from "@/context/AIUsageContext";
import OfflineProvider from "@/context/OfflineProvider";
import OfflineContext, {OfflineMode} from "@/context/OfflineContext";
import OfflinePinSetup from "@/components/offline/OfflinePinSetup";
import OfflinePinVerify from "@/components/offline/OfflinePinVerify";
import {SyncedBook, BookSyncCompare, compareBookSyncs} from "@/lib/models/SyncedBook";
import {BooksSyncContext} from "@/context/BooksSyncContext";
import useSyncBooks from "@/hooks/useSyncBooks";
import {LocalSyncQueueContext, LocalSyncOperation} from "@/context/SyncQueueContext";

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

function AutoSyncOnReconnect() {
    const {offlineMode} = useContext(OfflineContext);
    const {syncAllToServer, refreshBooks, booksToSyncToServer} = useSyncBooks();
    const [pendingSync, setPendingSync] = useState<boolean>(false);

    useEffect((): void => {
        if (!offlineMode.isOffline) {
            setPendingSync(true);
            refreshBooks();
        }
    }, [offlineMode.isOffline]);

    useEffect((): void => {
        if (pendingSync && booksToSyncToServer.length > 0) {
            syncAllToServer();
            setPendingSync(false);
        }
    }, [booksToSyncToServer, pendingSync]);

    return null;
}

function ScribeContent() {
    const t = useTranslations();
    const {lang: locale} = useContext(LangContext);
    const {errorMessage} = useContext(AlertContext);
    const {initializeDatabase, setOfflineMode, isCurrentlyOffline, offlineMode} = useContext(OfflineContext);
    const editor: Editor | null = useEditor({
        extensions: [
            StarterKit,
            Underline,
            TextAlign.configure({
                types: ['heading', 'paragraph'],
            }),
        ],
        injectCSS: false,
        immediatelyRender: false,
        shouldRerenderOnTransaction: true,
    });
    
    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 [serverSyncedBooks, setServerSyncedBooks] = useState<SyncedBook[]>([]);
    const [localSyncedBooks, setLocalSyncedBooks] = useState<SyncedBook[]>([]);
    const [bookSyncDiffsFromServer, setBookSyncDiffsFromServer] = useState<BookSyncCompare[]>([]);
    const [bookSyncDiffsToServer, setBookSyncDiffsToServer] = useState<BookSyncCompare[]>([]);
    const [serverOnlyBooks, setServerOnlyBooks] = useState<SyncedBook[]>([]);
    const [localOnlyBooks, setLocalOnlyBooks] = useState<SyncedBook[]>([]);

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

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

    const [isTermsAccepted, setIsTermsAccepted] = useState<boolean>(false);
    const [homeStepsGuide, setHomeStepsGuide] = useState<boolean>(false);
    const [showPinSetup, setShowPinSetup] = useState<boolean>(false);
    const [showPinVerify, setShowPinVerify] = useState<boolean>(false);

    const [localSyncQueue, setLocalSyncQueue] = useState<LocalSyncOperation[]>([]);
    const [isQueueProcessing, setIsQueueProcessing] = useState<boolean>(false);


    function addToLocalSyncQueue(channel: string, data: Record<string, unknown>): void {
        const operation: LocalSyncOperation = {
            id: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
            channel,
            data,
            timestamp: Date.now(),
        };
        setLocalSyncQueue((prev: LocalSyncOperation[]): LocalSyncOperation[] => [...prev, operation]);
    }

    useEffect((): void => {
        if (localSyncQueue.length === 0 || isQueueProcessing) {
            return;
        }

        async function processQueue(): Promise<void> {
            setIsQueueProcessing(true);

            const queueCopy: LocalSyncOperation[] = [...localSyncQueue];

            for (const operation of queueCopy) {
                try {
                    await window.electron.invoke(operation.channel, operation.data);
                    setLocalSyncQueue((prev: LocalSyncOperation[]): LocalSyncOperation[] =>
                        prev.filter((op: LocalSyncOperation): boolean => op.id !== operation.id)
                    );
                } catch (error) {
                    console.error(`[LocalSyncQueue] Failed to process operation ${operation.channel}:`, error);
                }
            }

            setIsQueueProcessing(false);
        }

        processQueue().then();
    }, [localSyncQueue, isQueueProcessing]);

    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) {
            getBooks().then()
            setIsTermsAccepted(session.user?.termsAccepted ?? false);
            setHomeStepsGuide(User.guideTourDone(session.user?.guideTour ?? [], 'home-basic'));
            setIsLoading(false);
        }
    }, [session]);
    
    useEffect((): void => {
        if (session.isConnected) {
            if (currentBook) {
                getLastChapter().then();
            } else {
                getBooks().then();
            }
        }
    }, [currentBook]);
    
    useEffect((): void => {
        const diffsFromServer: BookSyncCompare[] = [];
        const diffsToServer: BookSyncCompare[] = [];

        serverSyncedBooks.forEach((serverBook: SyncedBook): void => {
            const localBook: SyncedBook | undefined = localSyncedBooks.find((book: SyncedBook): boolean => book.id === serverBook.id);
            if (!localBook) {
                return;
            }

            const diff: BookSyncCompare | null = compareBookSyncs(serverBook, localBook);
            if (diff) {
                diffsFromServer.push(diff);
            }
        });

        localSyncedBooks.forEach((localBook: SyncedBook): void => {
            const serverBook: SyncedBook | undefined = serverSyncedBooks.find((book: SyncedBook): boolean => book.id === localBook.id);
            if (!serverBook) {
                return;
            }

            const diff: BookSyncCompare | null = compareBookSyncs(localBook, serverBook);
            if (diff) {
                diffsToServer.push(diff);
            }
        });
        
        setBookSyncDiffsFromServer(diffsFromServer);
        setBookSyncDiffsToServer(diffsToServer);
        setServerOnlyBooks(serverSyncedBooks.filter((serverBook: SyncedBook):boolean => !localSyncedBooks.find((localBook: SyncedBook):boolean => localBook.id === serverBook.id)))
        setLocalOnlyBooks(localSyncedBooks.filter((localBook: SyncedBook):boolean => !serverSyncedBooks.find((serverBook: SyncedBook):boolean => serverBook.id === localBook.id)))
    }, [localSyncedBooks, serverSyncedBooks]);

    
    async function getBooks(): Promise<void> {
        try {
            let localBooksResponse: SyncedBook[] = [];
            let serverBooksResponse: SyncedBook[] = [];

            if (!isCurrentlyOffline()){
                if (offlineMode.isDatabaseInitialized) {
                    localBooksResponse = await window.electron.invoke<SyncedBook[]>('db:books:synced');
                }
                serverBooksResponse = await System.authGetQueryToServer<SyncedBook[]>('books/synced', session.accessToken, locale);
            } else {
                if (offlineMode.isDatabaseInitialized) {
                    localBooksResponse = await window.electron.invoke<SyncedBook[]>('db:books:synced');
                }
            }

            setServerSyncedBooks(serverBooksResponse);
            setLocalSyncedBooks(localBooksResponse);
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t("homePage.errors.fetchBooksError"));
            }
        }
    }
    
    useEffect(():void => {
        async function checkPinSetup() {
            if (session.isConnected && window.electron) {
                try {
                    const offlineStatus = await window.electron.offlineModeGet();

                    if (!offlineStatus.hasPin) {
                        setTimeout(():void => {
                            setShowPinSetup(true);
                        }, 2000);
                    }
                } catch (e:unknown) {
                    if (e instanceof Error) {
                        errorMessage(e.message);
                    } else {
                        errorMessage('Unknown error occurred while checking offline mode')
                    }
                }
            }
        }

        checkPinSetup().then();
        
    }, [session.isConnected]);
    
    async function handlePinVerifySuccess(userId: string): Promise<void> {
        try {
            if (window.electron) {
                const storedToken: string | null = await window.electron.getToken();
                const encryptionKey:string|null = await window.electron.getUserEncryptionKey(userId);

                if (encryptionKey) {
                    await window.electron.dbInitialize(userId, encryptionKey);
                    setOfflineMode(prev => ({...prev, isDatabaseInitialized: true}));

                    const localUser:UserProps = await window.electron.invoke('db:user:info');
                    if (localUser && localUser.id) {
                        setSession({
                            isConnected: true,
                            user: localUser,
                            accessToken: storedToken || '',
                        });
                        setShowPinVerify(false);
                        setCurrentCredits(localUser.creditsBalance || 0);
                        setAmountSpent(localUser.aiUsage || 0);
                    } else {
                        errorMessage(t("homePage.errors.localDataError"));
                    }
                } else {
                    errorMessage(t("homePage.errors.encryptionKeyError"));
                }
            }
        } catch (error) {
            console.error('[OfflinePin] Error initializing offline mode:', error);
            errorMessage(t("homePage.errors.offlineModeError"));
        }
    }

    async function handleHomeTour(): Promise<void> {
        try {
            if (!isCurrentlyOffline()) {
                const response: boolean = await System.authPostToServer<boolean>('logs/tour', {
                        plateforme: 'desktop',
                        tour: 'home-basic'
                    },
                    session.accessToken,
                    locale
                );
                if (response) {
                    setSession(User.setNewGuideTour(session, 'home-basic'));
                    setHomeStepsGuide(false);
                }
            } else {
                const completedGuides = JSON.parse(localStorage.getItem('completedGuides') || '[]');
                if (!completedGuides.includes('home-basic')) {
                    completedGuides.push('home-basic');
                    localStorage.setItem('completedGuides', JSON.stringify(completedGuides));
                }
                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> {
        let token: string | null = null;

        if (typeof window !== 'undefined' && window.electron) {
            try {
                token = await window.electron.getToken();
            } catch (e) {
                console.error('Error getting token from electron:', e);
            }
        }

        if (token) {
            try {
                const user: UserProps = await System.authGetQueryToServer<UserProps>('user/infos', token, locale);
                if (!user) {
                    errorMessage(t("homePage.errors.userNotFound"));
                    if (window.electron) {
                        await window.electron.removeToken();
                        window.electron.logout();
                    }
                    return;
                }
                
                if (window.electron && user.id) {
                    try {
                        const initResult = await window.electron.initUser(user.id);
                        if (!initResult.success) {
                            errorMessage(initResult.error || t("homePage.errors.offlineInitError"));
                            return;
                        }
                        try {
                            const offlineStatus = await window.electron.offlineModeGet();
                            if (!offlineStatus.hasPin) {
                                setTimeout(():void => {
                                    setShowPinSetup(true);
                                }, 2000);
                            }
                        } catch (error) {
                            console.error('[Page] Error checking offline mode:', error);
                        }
                    } catch (error) {
                        console.error('[Page] Error initializing user:', error);
                    }
                }
                if (window.electron && user.id) {
                    try {
                        const dbInitialized:boolean = await initializeDatabase(user.id);
                        if (dbInitialized) {
                            try {
                                await window.electron.invoke('db:user:sync', {
                                    userId: user.id,
                                    firstName: user.name,
                                    lastName: user.lastName,
                                    username: user.username,
                                    email: user.email
                                });
                            } catch (syncError) {
                                errorMessage(t("homePage.errors.syncError"));
                            }
                        } else {
                            console.error('[Page] Database initialization failed');
                            errorMessage(t("homePage.errors.dbInitError"));
                        }
                    } catch (error) {
                        errorMessage(t("homePage.errors.syncError"));
                    }
                }
                setSession({
                    isConnected: true,
                    user: user,
                    accessToken: token,
                });
                console.log(user)
                setCurrentCredits(user.creditsBalance)
                setAmountSpent(user.aiUsage)
            } catch (e: unknown) {
                if (window.electron) {
                    try {
                        const offlineStatus = await window.electron.offlineModeGet();
                        
                        if (offlineStatus.hasPin && offlineStatus.lastUserId) {
                            setOfflineMode((prev:OfflineMode):OfflineMode => ({...prev, isOffline: true, isNetworkOnline: false}));
                            setShowPinVerify(true);
                            setIsLoading(false);
                            return;
                        } else {
                            if (window.electron) {
                                await window.electron.removeToken();
                                window.electron.logout();
                            }
                        }
                    } catch (offlineError) {
                        errorMessage(t("homePage.errors.offlineError"));
                    }
                }
                
                if (e instanceof Error) {
                    errorMessage(e.message);
                } else {
                    errorMessage(t("homePage.errors.authenticationError"));
                }
            }
        } else {
            if (window.electron) {
                try {
                    const offlineStatus = await window.electron.offlineModeGet();

                    if (offlineStatus.hasPin && offlineStatus.lastUserId) {
                        setOfflineMode(prev => ({...prev, isOffline: true, isNetworkOnline: false}));
                        setShowPinVerify(true);
                        setIsLoading(false);
                        return;
                    }
                } catch (error) {
                    errorMessage(t("homePage.errors.authenticationError"));
                }
                window.electron.logout();
            }
        }
    }
    
    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 {
                let response: ChapterProps | null
                if (isCurrentlyOffline()){
                    if (!offlineMode.isDatabaseInitialized) {
                        setCurrentChapter(undefined);
                        return;
                    }
                    response = await window.electron.invoke('db:chapter:last', currentBook?.bookId)
                } else {
                    if (currentBook?.localBook) {
                        if (!offlineMode.isDatabaseInitialized) {
                            setCurrentChapter(undefined);
                            return;
                        }
                        response = await window.electron.invoke('db:chapter:last', currentBook?.bookId)
                    } else {
                        response = 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">
                        <img src="/eritors-favicon-white.png" alt="ERitors Logo" style={{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}}>
            <LocalSyncQueueContext.Provider value={{
                queue: localSyncQueue,
                setQueue: setLocalSyncQueue,
                addToQueue: addToLocalSyncQueue,
                isProcessing: isQueueProcessing,
            }}>
                <BooksSyncContext.Provider value={{serverSyncedBooks, localSyncedBooks, booksToSyncFromServer:bookSyncDiffsFromServer, booksToSyncToServer:bookSyncDiffsToServer, setServerSyncedBooks, setLocalSyncedBooks, setServerOnlyBooks, setLocalOnlyBooks, serverOnlyBooks, localOnlyBooks}}>
                    <AutoSyncOnReconnect/>
                    <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 && !isCurrentlyOffline() &&
                                <GuideTour stepId={0} steps={homeSteps} onComplete={handleHomeTour}
                                           onClose={(): void => setHomeStepsGuide(false)}/>
                            }
                            {
                                !isTermsAccepted && !isCurrentlyOffline() && <TermsOfUse onAccept={handleTermsAcceptance}/>
                            }
                            {
                                showPinSetup && window.electron && (
                                    <OfflinePinSetup
                                        showOnFirstLogin={true}
                                        onClose={():void => setShowPinSetup(false)}
                                        onSuccess={():void => {
                                            setShowPinSetup(false);
                                        }}
                                    />
                                )
                            }
                            {
                                showPinVerify && window.electron && (
                                    <OfflinePinVerify
                                        onSuccess={handlePinVerifySuccess}
                                        onCancel={():void => {
                                            //window.electron.logout();
                                        }}
                                    />
                                )
                            }
                            </AIUsageContext.Provider>
                        </ChapterContext.Provider>
                    </BookContext.Provider>
                </BooksSyncContext.Provider>
            </LocalSyncQueueContext.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}>
                <OfflineProvider>
                    <AlertProvider>
                        <ScribeContent/>
                    </AlertProvider>
                </OfflineProvider>
            </NextIntlClientProvider>
        </LangContext.Provider>
    );
}