import React from "react";
import NavigationButtons from "@/components/NavigationButtons";
import ChapterRenderer from "@/components/ChapterContentRenderer";
import { Chapter } from "@/lib/types";
import { fetchChapterByBookId, fetchGlossaryByBookId } from "@/lib/api";
import { markdownToHtml } from "@/lib/utils";
export type paramsType = Promise<{ bookId: string; chapterId: string }>;

export const metadata = {
    title: 'Null Translation Group',
    description: 'This is the chapter page default description',
};

// Dynamic page component
export default async function ChapterPage(props: { params: paramsType}) {
    const { bookId, chapterId } = await props.params;

    let chapters: Chapter[];
    try{
        chapters = await fetchChapterByBookId(bookId, chapterId);
    }
    catch (error) {
        console.error(error);
        return (    
                <div className="prose dark:prose-invert mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg mt-4">
                    <div dangerouslySetInnerHTML={{ __html: '<center><h1> Chapter not found !</h1></center>' }}></div>
                <NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={""} nextChapter={""} />
                </div>
        )
    }
    const glossary_data = await fetchGlossaryByBookId(bookId);
    const english_glossary = glossary_data.english_english;
    const sorted_chapters:Chapter[] = chapters.sort((a, b) => a.number - b.number);
    const current_chapter = sorted_chapters.find((chapter) => chapter.documentId === chapterId) || null;
    const next_chapter = current_chapter ? sorted_chapters.find((chapter) => chapter.number === current_chapter.number + 1 && new Date(chapter.release_datetime).getTime() <= new Date().getTime())?.documentId || "" : "";
    const prev_chapter = current_chapter ? sorted_chapters.find((chapter) => chapter.number === current_chapter.number - 1 && new Date(chapter.release_datetime).getTime() <= new Date().getTime())?.documentId || "" : "";
    const chapter_content_html = current_chapter ? await markdownToHtml(current_chapter.content) : "";
    if(current_chapter === null){
        return (    
                <div className="prose dark:prose-invert mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg mt-4">
                    <div dangerouslySetInnerHTML={{ __html: '<NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter} /><center><NavigationButtons /><h1> Chapter not found !</h1></center>' }}></div>
                <NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={""} nextChapter={""} />
                </div>
        )
    }

    return (
            <div className="prose dark:prose-invert mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg mt-4">
            <NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter} />
                <div className="pt-4"></div>
                <ChapterRenderer content={chapter_content_html} glossary={english_glossary} />
                <NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter}/>
            </div>
    );
}