import { type FC, useRef, useCallback, useState } from 'react';
import HTMLFlipBook from 'react-pageflip';
import { type PageData } from '../types';
import BookPage from './BookPage';
import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';

type BookViewerProps = {
    pages: PageData[];
};

interface PageFlipAPI {
    flipNext: () => void;
    flipPrev: () => void;
}

interface FlipBookInstance {
    pageFlip: () => PageFlipAPI | undefined;
}

interface FlipEvent {
    data: number;
}

/**
 * کامپوننت اصلی کتابخوان با استفاده از react-pageflip
 * این کامپوننت از HTMLFlipBook استفاده می‌کند که یک wrapper برای PageFlip است
 * از HTML برای رندر صفحات استفاده می‌شود (نه Canvas) برای سازگاری با Konva در آینده
 */
const BookViewer: FC<BookViewerProps> = ({ pages }) => {
    const bookRef = useRef<FlipBookInstance | null>(null);
    const [currentPage, setCurrentPage] = useState(0);

    const handlePageFlip = useCallback((e: FlipEvent) => {
        const pageNum = e.data;
        setCurrentPage(pageNum);
    }, []);

    const goToNextPage = useCallback(() => {
        bookRef.current?.pageFlip()?.flipNext();
    }, []);

    const goToPrevPage = useCallback(() => {
        bookRef.current?.pageFlip()?.flipPrev();
    }, []);

    return (
        <div className="flex flex-col items-center gap-4 md:gap-6 w-full h-full" dir="rtl">
            {/* نمایش کتاب */}
            <div className="relative w-full flex justify-center flex-1 items-center">
                {/* Border و Shadow عمودی در وسط کتاب */}
                <div
                    className="absolute inset-y-0 left-1/2 -translate-x-1/2 w-px border-r border-gray-300 pointer-events-none z-50"
                    style={{
                        boxShadow: '-5px 0 15px rgba(0, 0, 0, 0.15), 5px 0 15px rgba(0, 0, 0, 0.15)'
                    }}
                />
                <HTMLFlipBook
                    ref={bookRef}
                    width={794}
                    height={1123}
                    size="stretch"
                    minWidth={315}
                    minHeight={400}
                    maxWidth={1000}
                    maxHeight={1533}
                    drawShadow={true}
                    flippingTime={800}
                    usePortrait={true}
                    startPage={0}
                    autoSize={true}
                    maxShadowOpacity={0.5}
                    showCover={true}
                    mobileScrollSupport={true}
                    clickEventForward={true}
                    useMouseEvents={true}
                    swipeDistance={30}
                    startZIndex={1}
                    showPageCorners={true}
                    disableFlipByClick={false}
                    className="flipbook-container mx-auto"
                    style={{
                        direction: 'rtl',
                    }}
                    onFlip={handlePageFlip}
                >
                    {pages.map((page) => (
                        <BookPage key={page.id} page={page} />
                    ))}
                </HTMLFlipBook>
            </div>

            {/* کنترل‌های ناوبری */}
            <div className="flex items-center gap-3 md:gap-6 bg-white rounded-full px-4 md:px-6 py-2 md:py-3 shadow-lg">
                {/* دکمه صفحه بعد (در RTL، صفحه سمت چپ) */}
                <button
                    onClick={goToNextPage}
                    disabled={currentPage <= 0}
                    className="p-2 md:p-2 rounded-full hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed transition-all"
                    aria-label="صفحه بعد"
                >
                    <ArrowLeft2 size={20} className="text-gray-700 md:w-6 md:h-6" />
                </button>

                {/* شماره صفحه */}
                <div className="flex items-center gap-2 min-w-[100px] md:min-w-[120px] justify-center">
                    <span className="text-xs md:text-sm text-gray-600">
                        صفحه {currentPage + 1} از {pages.length}
                    </span>
                </div>

                {/* دکمه صفحه قبل (در RTL، صفحه سمت راست) */}
                <button
                    onClick={goToPrevPage}
                    disabled={currentPage >= pages.length - 1}
                    className="p-2 md:p-2 rounded-full hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed transition-all"
                    aria-label="صفحه قبل"
                >
                    <ArrowRight2 size={20} className="text-gray-700 md:w-6 md:h-6" />
                </button>
            </div>
        </div>
    );
};

export default BookViewer;