import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { Head, Link, router } from '@inertiajs/react';
import AppLayout from '@/Layouts/AppLayout.jsx';
import { ChevronFirst, ChevronLast, Rows3 } from 'lucide-react';
import { Tooltip, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip';

import { throttle } from 'lodash';

import { BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
import { Button } from '@/components/ui/button';
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import PrimaryButton from '@/components/PrimaryButton';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { TooltipContent } from '@/components/ui/tooltip';

export default function Read({ auth, comic, chapter, chapters }) {

    const validReadingModes = ['rtl', 'utd'];

    const [readingMode, setReadingMode] = useState('rtl'); // rtl, utd
    const [isInvertClickingZone, setIsInvertClickingZone] = useState(false);
    const [isTwoPagesPerScreen, setIsTwoPagePerScreen] = useState(false); // TODO

    const [currentImage, setCurrentImage] = useState(1);
    const [divDimensions, setDivDimensions] = useState([0, 0]);

    const ref = useRef();
    const windowSize = useWindowSize();

    const getLocalStorageReadingMode = () => {
        if (window.localStorage.getItem('readingMode') !== null && validReadingModes.includes(window.localStorage.getItem('readingMode'))) {
            return window.localStorage.getItem('readingMode');
        }

        return "rtl";
    }

    const getLocalStorageIsInvertClickingZone = () => {
        if (window.localStorage.getItem('invertClickingZone') !== null && window.localStorage.getItem('invertClickingZone')) {
            return window.localStorage.getItem('invertClickingZone') === 'true';
        }

        return false;
    }

    const getLocalStorageIsTwoPagePerScreen = () => {
        if (window.localStorage.getItem('twoPagesPerScreen') !== null && window.localStorage.getItem('twoPagesPerScreen')) {
            return window.localStorage.getItem('twoPagesPerScreen') === 'true';
        }

        return false;
    }

    function useWindowSize() {
        const [size, setSize] = useState([0, 0]);
        useLayoutEffect(() => {
            function updateSize() {
                setSize([window.innerWidth, window.innerHeight]);
            }

            window.addEventListener('resize', updateSize);
            updateSize();
            return () => window.removeEventListener('resize', updateSize);
        }, []);

        return size;
    }

    const toggleReadingMode = (e) => {
        if (e) {
            window.localStorage.setItem('readingMode', 'utd');
            setReadingMode('utd');
        } else {
            window.localStorage.setItem('readingMode', 'rtl');
            setReadingMode('rtl');
        }
    }

    const toggleInvertClickingZone = (e) => {
        if (e) {
            window.localStorage.setItem('invertClickingZone', true);
            setIsInvertClickingZone(true);
        } else {
            window.localStorage.setItem('invertClickingZone', false);
            setIsInvertClickingZone(false);
        }
    }

    const toggleTwoPagesPerScreen = (e) => {
        if (e) {
            window.localStorage.setItem('twoPagesPerScreen', true);
            setIsTwoPagePerScreen(true);
        } else {
            window.localStorage.setItem('twoPagesPerScreen', false);
            setIsTwoPagePerScreen(false);
        }
    }

    const imageSelectOnChangeHandler = (e) => {
        document.getElementById(`image-${e - 1}`)?.scrollIntoView();
        setCurrentImage(e);
    }

    const chapterSelectOnChangeHandler = (e) => {
        router.visit(route('comics.read', {
            pathword: comic.comic.path_word,
            uuid: e
        }));
    }

    const setViewPort = (e) => {
        //console.log(e.target.childNodes);
        //console.log(e.target.naturalHeight);
    }

    const ImageForComic = (img) => {
        const imgRef = useRef();

        let imgStyles = {};

        if (divDimensions[1] > divDimensions[0] && readingMode === 'utd') {
            imgStyles = { width: '100%' };
        } else if (divDimensions[0] > divDimensions[1] && readingMode === 'utd') {
            imgStyles = { width: '50%' };
        } else if (readingMode === 'rtl') {
            imgStyles = { width: '100%', height: 'calc(100dvh - 90px)', objectFit: 'contain' };
        }

        const handleImageClick = (e) => {
            if (readingMode === "utd") return;

            const bounds = imgRef.current.getBoundingClientRect();
            const percentage = (e.pageX - bounds.left) / imgRef.current.offsetWidth;

            const prevHandler = () => {
                if (img.innerKey === 0 && chapter.chapter.prev) {
                    router.visit(route('comics.read', [comic.comic.path_word, chapter.chapter.prev]));
                } else {
                    document.getElementById(`image-${ img.innerKey - 1 }`)?.scrollIntoView();
                }
            }

            const nextHandler = () => {
                if (img.innerKey >= chapter.sorted.length - 1 && chapter.chapter.next) {
                    router.visit(route('comics.read', [comic.comic.path_word, chapter.chapter.next]));
                } else {
                    document.getElementById(`image-${ img.innerKey + 1 }`)?.scrollIntoView();
                }
            }

            // InvertClickingZone
            if (percentage < 0.45 || percentage > 0.55) {
                (percentage < 0.45) ^ isInvertClickingZone ? prevHandler() : nextHandler();
            }
        };

        return (
            <div className="basis-full">
                <img alt={ comic.comic.name } className={` m-auto comic-img `} id={ `image-${ img.innerKey }` }
                     onClick={ handleImageClick } ref={ imgRef }
                     src={ `/image/${ btoa(img.url) }` } style={ imgStyles } />
            </div>
        );
    }

    const Toolbar = () => {
        return (
            <>
                <Dialog>
                    <DialogTrigger asChild>
                        <Button variant="ghost">
                             { currentImage } / { chapter.sorted.length }
                        </Button>
                    </DialogTrigger>
                    <DialogContent className="max-w-[600px]">
                        <DialogHeader>
                            <DialogTitle>Options</DialogTitle>
                            <DialogDescription>

                            </DialogDescription>
                        </DialogHeader>
                        <div className="space-y-4">
                            <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
                                <div className="space-y-0.5">
                                    <label>Reading Mode</label>
                                    <p>Turn on for UTD mode</p>
                                </div>
                                <Switch defaultChecked={ (readingMode === "utd") }
                                        onCheckedChange={ (e) => toggleReadingMode(e) } />
                            </div>
                        </div>
                        <div className="space-y-4">
                            <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
                                <div className="space-y-0.5">
                                    <label>Flip clicking zone</label>
                                    <p>Turn on for clicking image on right side to previous one</p>
                                </div>
                                <Switch defaultChecked={ (isInvertClickingZone) }
                                        onCheckedChange={ (e) => toggleInvertClickingZone(!isInvertClickingZone) } />
                            </div>
                        </div>
                        <div className="space-y-4">
                            <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
                                <div className="space-y-0.5">
                                    <label>Two images per screen TODO</label>
                                    <p>Only applicable to RTL mode</p>
                                </div>
                                <Switch defaultChecked={ (isTwoPagesPerScreen) }
                                        onCheckedChange={ (e) => toggleTwoPagesPerScreen(e) } />
                            </div>
                        </div>
                        <div className="space-y-4">
                            <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
                                <div className="space-y-0.5">
                                    <label>Jump to Chapter</label>
                                </div>
                                <Select onValueChange={ (e) => chapterSelectOnChangeHandler(e) } defaultValue={ chapter.chapter.uuid }>
                                    <SelectTrigger className="w-[50%]">
                                        <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent position="popper" sideOffset={ -100 }>
                                        { chapters.map(c => (
                                            <SelectItem key={ c.chapter_uuid } value={ c.chapter_uuid }>
                                                { c.name }
                                            </SelectItem>
                                        ) ) }
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>
                        <div className="space-y-4">
                            <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
                                <div className="space-y-0.5">
                                    <label>Jump to Page</label>
                                </div>
                                <Select onValueChange={ (e) => imageSelectOnChangeHandler(e) } defaultValue={ currentImage }>
                                    <SelectTrigger className="w-[50%]">
                                        <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent position="popper" sideOffset={ -100 }>
                                        { chapter.sorted.map((img, i) => (
                                            <SelectItem key={ i + 1 } value={ i + 1 }>
                                                { i + 1 } / { chapter.sorted.length }
                                            </SelectItem>
                                        ) ) }
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>
                        <DialogFooter>
                            <DialogClose asChild>
                                <PrimaryButton>Done</PrimaryButton>
                            </DialogClose>
                        </DialogFooter>
                    </DialogContent>
                </Dialog>

                { chapter.chapter.prev && (
                    <TooltipProvider>
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <Button variant="link" size="icon" asChild>
                                    <Link href={ route('comics.read', [comic.comic.path_word, chapter.chapter.prev]) }>
                                        <ChevronFirst />
                                    </Link>
                                </Button>
                            </TooltipTrigger>
                            <TooltipContent>
                                <p>Previous Chapter</p>
                            </TooltipContent>
                        </Tooltip>
                    </TooltipProvider>
                ) }

                <TooltipProvider>
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button variant="link" size="icon" asChild>
                                <Link href={ route('comics.chapters', [comic.comic.path_word]) }>
                                    <Rows3 />
                                </Link>
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>
                            <p>TOC</p>
                        </TooltipContent>
                    </Tooltip>
                </TooltipProvider>

                { chapter.chapter.next && (
                    <TooltipProvider>
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <Button variant="link" size="icon" asChild>
                                    <Link href={ route('comics.read', [comic.comic.path_word, chapter.chapter.next]) }>
                                        <ChevronLast />
                                    </Link>
                                </Button>
                            </TooltipTrigger>
                            <TooltipContent>
                                <p>Next Chapter</p>
                            </TooltipContent>
                        </Tooltip>
                    </TooltipProvider>
                ) }
            </>
        );
    }

    useEffect(() => {
        setDivDimensions([ref.current.clientWidth, ref.current.clientHeight]);
    }, [windowSize]);

    useEffect(() => {
        setReadingMode(getLocalStorageReadingMode());
        setIsInvertClickingZone(getLocalStorageIsInvertClickingZone());
        setIsTwoPagePerScreen(getLocalStorageIsTwoPagePerScreen());

        if (!ref.current) return;

        const handleScroll = () => {
            const containerScrollTop = ref.current.scrollTop; // Current scroll position of the container
            const images = ref.current.querySelectorAll("img"); // Get all images

            let visibleImageIndex = 0;

            // Determine which image is visible based on scroll position
            images.forEach((image, i) => {
                const imageTop = image.offsetTop; // Distance from top of the container
                const imageBottom = imageTop + image.offsetHeight;

                // Check if the image is in the visible area
                if (containerScrollTop + 76 >= imageTop && containerScrollTop < imageBottom) { // Magic number 76
                    visibleImageIndex = i;
                }
            });

            // Update the current image index
            setCurrentImage(visibleImageIndex + 1);
        };

        const throttledHandleScroll = throttle(handleScroll, 1000); // Throttle for performance
        ref.current.addEventListener("scroll", throttledHandleScroll);

        return () => {
            if (ref.current) {
                ref.current.removeEventListener("scroll", throttledHandleScroll);
            }
        };
    }, []);

    return (
        <AppLayout auth={ auth } header={
            <>
                <BreadcrumbSeparator className="hidden lg:block"/>
                <BreadcrumbItem className="hidden lg:block">
                    <BreadcrumbLink asChild>
                        <Link href={ route('comics.chapters', [comic.comic.path_word]) }>
                            { comic.comic.name }
                        </Link>
                    </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator className="hidden lg:block" />
                <BreadcrumbItem>
                    <BreadcrumbPage>{ chapter.chapter.name }</BreadcrumbPage>
                </BreadcrumbItem>
            </>
        } toolbar={ <Toolbar /> }>
            <Head>
                <title>{ chapter.chapter.name.concat(" - ", comic.comic.name) }</title>
            </Head>
            <div className="p-3 pt-1 pb-1 flex flex-wrap justify-center" id="mvp" ref={ ref } scroll-region="true"
                 style={{ overflowAnchor: "none", height: "calc(100dvh - 90px)", overflowY: "scroll" }}>
                { chapter.sorted.map((img, j) => <ImageForComic key={ j } innerKey={ j } { ...img } />) }
            </div>
        </AppLayout>
    );
}