import { useEffect, useMemo } from 'react';
import { useRouter } from 'next/router';
import { Box, Container, Grid, useMediaQuery } from '@mui/material';
import {
  ExtendBook,
  Module,
  Page,
} from '@/components/pages/ph-books/interfaces';
import BookSidebar from '@/components/pages/ph-books/BookSidebar';
import BookNavigateButtons from '@/components/pages/ph-books/BookNavigateButtons';
import BookBreadCrumbs from '@/components/pages/ph-books/BookBreadCrumbs';
import dynamic from 'next/dynamic';
import ModulePageList from '@/components/pages/ph-books/ModulePageList';


const BookContent = dynamic(
  () => import('@/components/pages/ph-books/BookContent'),
  { ssr: false }
);
const CONTENTPADDING = 12;
const NAVBARSIZE = 80;


export default function Book({
  isModulePage,
  book,
  pageContent,
  bookParam,
  moduleData,
}: {
  isModulePage?: boolean;
  book: ExtendBook;
  pageContent?: any;
  bookParam: string;
  moduleData?: any;
}) {
  const router = useRouter();
  const { bookSlug, moduleSlug, pageSlug } = router.query as {
    bookSlug: string;
    moduleSlug: string;
    pageSlug: string;
  };
  const isSmDevice = useMediaQuery('(max-width: 899px)');


  const currentModule = useMemo(
    () =>
      moduleSlug
        ? book?.modules?.find((module: Module) => module.slug === moduleSlug) ||
          null
        : null,
    [book?.modules, moduleSlug]
  );


  const nextPrePageOrModule = useMemo(() => {
    const pages: {
      previous?: Page | Module | null;
      next?: Page | Module | null;
    } = {};
    if (!currentModule?._id || !book?.modules?.length || !moduleSlug) {
      return pages;
    }
    if (pageSlug && currentModule.pages?.length) {
      const currentPageIndex = currentModule.pages.findIndex(
        (it: Page) => it.slug === pageSlug
      );
      if (currentPageIndex !== undefined && currentPageIndex !== -1) {
        if (currentPageIndex === currentModule.pages.length - 1) {
          pages.previous = currentModule.pages[currentPageIndex - 1] || null;
        } else if (currentPageIndex === 0) {
          pages.next = currentModule.pages[currentPageIndex + 1] || null;
          pages.previous = currentModule || null;
          return pages;
        } else {
          pages.previous = currentModule.pages[currentPageIndex - 1] || null;
          pages.next = currentModule.pages[currentPageIndex + 1] || null;
          return pages;
        }
      }
    } else if (!pageSlug && currentModule.pages?.length) {
      const currentModuleIndex = book?.modules.findIndex(
        (module: Module) => module.slug === moduleSlug
      );


      if (currentModuleIndex !== 0) {
        const preModule = book?.modules[currentModuleIndex - 1];
        const prePages = preModule?.pages;
        pages.previous = prePages?.[prePages?.length - 1] || null;
        if (pages.previous) {
          if (pages.previous) {
            //@ts-ignore
            pages.previous.moduleSlug = preModule.slug;
          }
        }
      } else {
        pages.previous = null;
      }
      pages.next = currentModule.pages[0] || null;
      return pages;
    }
    if (pages.previous === undefined || pages.next === undefined) {
      const currentModuleIndex = book?.modules.findIndex(
        (module: Module) => module.slug === moduleSlug
      );
      if (currentModuleIndex !== undefined && currentModuleIndex !== -1) {
        if (pages.next === undefined) {
          const nextModule = book?.modules[currentModuleIndex + 1];
          pages.next = nextModule || null;
        }
        if (pages.previous === undefined) {
          const preModule = book?.modules[currentModuleIndex - 1];
          if (pageSlug) {
            pages.previous = preModule || null;
          } else {
            const prePages = preModule?.pages;
            pages.previous = prePages?.[prePages?.length - 1] || null;


            if (pages.previous) {
              //@ts-ignore
              pages.previous.moduleSlug = preModule.slug;
            }
          }
        }
      }
    }
    return pages;
  }, [currentModule, pageSlug, book?.modules, moduleSlug]);


  // Scroll to content on mobile when pageSlug changes
  useEffect(() => {
    if (isSmDevice && (pageSlug || moduleSlug)) {
      const contentSection = document.getElementById('book__content');
      if (contentSection) {
        contentSection.scrollIntoView({ behavior: 'instant' });
      }
    }
  }, [pageSlug, moduleSlug, isSmDevice]);


  return (
    <>
      <Box
        sx={{
          background: '#010313',
          paddingTop: `${NAVBARSIZE + CONTENTPADDING}px`,
        }}
      >
        <Container maxWidth={false} sx={{ maxWidth: 1400 }}>
          <div>
            <Grid container spacing={3} columns={24}>
              <Grid item md={7} xs={24}>
                <Box
                  sx={{
                    background: '#0D0E1F',
                    p: 1.75,
                    pr: 0.5,
                    border: '1px solid #19192B',
                    borderRadius: '8px',
                    height: {
                      md: `calc(100dvh - ${NAVBARSIZE + CONTENTPADDING * 2}px)`,
                      xs: '60vh',
                    },
                  }}
                >
                  <BookSidebar
                    bookParam={bookParam}
                    book={book}
                    currentModuleSlug={moduleSlug}
                    currentPageSlug={pageSlug}
                  />
                </Box>
              </Grid>
              <Grid item md={17} xs={24}>
                <Box
                  sx={{
                    height: `calc(100dvh - ${NAVBARSIZE + CONTENTPADDING}px)`,
                    display: 'flex',
                    flexDirection: 'column',
                  }}
                >
                  <BookBreadCrumbs book={book} bookParam={bookParam} />


                  <Box sx={{ flex: 1 }}>
                    {isModulePage ? (
                      <ModulePageList
                        bookParam={bookParam}
                        module={currentModule}
                      />
                    ) : (
                      <BookContent bookContent={pageContent} />
                    )}
                  </Box>


                  <BookNavigateButtons
                    bookParam={bookParam}
                    nextPrePageOrModule={nextPrePageOrModule}
                  />
                </Box>
              </Grid>
            </Grid>
          </div>
        </Container>
      </Box>
    </>
  );
}