import { useState, useRef, useEffect } from "react";
import { Helmet } from "react-helmet-async";
import { useNavigate } from "react-router-dom";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { ArrowLeft, ChevronDown, ChevronUp, Download } from "lucide-react";
import { relativeTime, getFirstGrapheme } from "@/lib/utils";
import { getFileUrl } from "@/services/api";
import { Document, Page, pdfjs } from "react-pdf";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";
import "react-pdf/dist/esm/Page/TextLayer.css";

// Import the worker as an asset with Vite
import workerSrc from "pdfjs-dist/build/pdf.worker.min.mjs?url";
pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;

// For CMaps (if needed)
const cMapsUrl = "pdfjs-dist/cmaps/";

interface PostDetailProps {
    post: {
        post_id: string;
        mature: boolean;
        title: {
            [key: string]: string;
        };
        description: {
            [key: string]: string;
        };
        creator: {
            [key: string]: string;
        };
        source_site: {
            name: string;
        };
        date: {
            [key: string]: string;
        };
        tags: string[];
        media: Array<{
            type: string;
            mimetype: string;
            hash: string;
        }>;
    };
}

// Media Renderer component to render different media types
const MediaRenderer = ({ item, index, alt }) => {
    const [numPages, setNumPages] = useState(null);
    const [pageNumber, setPageNumber] = useState(1);
    const [pdfError, setPdfError] = useState(false);
    const containerRef = useRef(null);
    const [width, setWidth] = useState(null);

    // Update container width when it changes
    const updateWidth = () => {
        if (containerRef.current) {
            setWidth(containerRef.current.clientWidth);
        }
    };

    // Setup resize listener
    useEffect(() => {
        updateWidth(); // Initial width
        window.addEventListener('resize', updateWidth);
        return () => window.removeEventListener('resize', updateWidth);
    }, []);

    // Event handlers for react-pdf
    const onDocumentLoadSuccess = ({ numPages }) => {
        setNumPages(numPages);
        updateWidth(); // Update width after document loads
    };

    const onDocumentLoadError = (error) => {
        console.error("Error loading PDF:", error);
        setPdfError(true);
    };

    const changePage = (offset) => {
        const newPage = pageNumber + offset;
        if (newPage >= 1 && newPage <= numPages) {
            setPageNumber(newPage);
        }
    };

    switch (item.type) {
        case "image":
            return (
                <img
                    src={getFileUrl(item.hash) || "/placeholder.svg"}
                    alt={alt}
                    className="w-full h-auto rounded-lg object-contain"
                />
            );
        case "video":
            return (
                <video
                    src={getFileUrl(item.hash)}
                    controls
                    className="w-full h-auto rounded-lg object-contain"
                />
            );
        case "pdf":
            return (
                <div className="flex flex-col items-center w-full" ref={containerRef}>
                    {pdfError ? (
                        <div className="flex flex-col items-center justify-center p-8 border-2 border-dashed border-gray-300 rounded-lg">
                            <p className="mb-4 text-gray-500">Unable to display PDF in browser</p>
                            <Button variant="outline" className="flex items-center">
                                <Download className="w-4 h-4 mr-2" />
                                <a href={getFileUrl(item.hash)} download target="_blank" rel="noopener noreferrer">
                                    Download PDF
                                </a>
                            </Button>
                        </div>
                    ) : (
                        <>
                            <div className="w-full overflow-auto border rounded-lg shadow-lg">
                                <Document
                                    file={getFileUrl(item.hash)}
                                    onLoadSuccess={onDocumentLoadSuccess}
                                    onLoadError={onDocumentLoadError}
                                    loading={
                                        <div className="flex justify-center items-center py-12">
                                            <p>Loading PDF...</p>
                                        </div>
                                    }
                                    error={
                                        <div className="flex justify-center items-center py-12">
                                            <p>Error loading PDF</p>
                                        </div>
                                    }
                                    options={{
                                        cMapUrl: cMapsUrl,
                                        cMapPacked: true,
                                    }}
                                >
                                    {width && <Page pageNumber={pageNumber} width={width} />}
                                </Document>
                            </div>
                            {numPages > 0 && (
                                <div className="flex items-center justify-center mt-4 space-x-4">
                                    <Button
                                        variant="outline"
                                        onClick={() => changePage(-1)}
                                        disabled={pageNumber <= 1}
                                    >
                                        Previous
                                    </Button>
                                    <span className="text-sm">
                                        Page {pageNumber} of {numPages}
                                    </span>
                                    <Button
                                        variant="outline"
                                        onClick={() => changePage(1)}
                                        disabled={pageNumber >= numPages}
                                    >
                                        Next
                                    </Button>
                                </div>
                            )}
                        </>
                    )}
                </div>
            );
        default:
            return (
                <div className="flex flex-col items-center justify-center p-8 border-2 border-dashed border-gray-300 rounded-lg">
                    <p className="mb-4 text-gray-500">Unsupported file format</p>
                    <Button variant="outline" className="flex items-center">
                        <Download className="w-4 h-4 mr-2" />
                        <a href={getFileUrl(item.hash)} download target="_blank" rel="noopener noreferrer">
                            Download File
                        </a>
                    </Button>
                </div>
            );
    }
};

export function PostDetail({ post }: PostDetailProps) {
    const navigate = useNavigate();
    const [expanded, setExpanded] = useState(false);

    // Generate page title
    const pageTitle = post.title.content
        ? post.title.content
        : (post.description.content.length > 24
            ? post.description.content.substring(0, 24) + '...'
            : post.description.content);

    return (
        <>
            <Helmet>
                <title>
                    {pageTitle} by {post.creator.name} from {post.source_site.name} | {__SITE_NAME__}
                </title>
            </Helmet>

            {/* Back Button */}
            <div className="max-w-[90rem] mx-auto md:px-8 py-4">
                <Button variant="ghost" onClick={() => navigate(-1)} className="flex items-center">
                    <ArrowLeft className="w-5 h-5 mr-2" />
                    Back
                </Button>
            </div>

            <div className="flex flex-col md:flex-row max-w-[90rem] mx-auto pb-4 md:pb-8 px-4 md:px-8 gap-4 md:gap-8">
                {/* Main Content */}
                <div className="md:w-3/4">
                    {/* Media Section */}
                    <div className="flex flex-col items-center w-full max-w-4xl mx-auto">
                        {post.media.length > 0 && (
                            <div className="w-full">
                                {/* First Media Item */}
                                <div className="mb-4">
                                    <MediaRenderer
                                        item={post.media[0]}
                                        index={0}
                                        alt={`${post.title.content} - media 1`}
                                    />
                                </div>

                                {/* Show All Button (Positioned Below) */}
                                {!expanded && post.media.length > 1 && (
                                    <div className="w-full flex justify-center my-4">
                                        <Button
                                            variant="secondary"
                                            className="px-4 py-2 shadow-lg rounded-lg"
                                            onClick={() => setExpanded(true)}
                                        >
                                            <ChevronDown className="mr-2 h-5 w-5" /> Show All
                                        </Button>
                                    </div>
                                )}

                                {/* Expanded Media List */}
                                {expanded && (
                                    <div className="w-full flex flex-col items-center">
                                        {post.media.slice(1).map((item, index) => (
                                            <div key={index} className="mb-4">
                                                <MediaRenderer
                                                    item={item}
                                                    index={index + 1}
                                                    alt={`${post.title.content} - media ${index + 2}`}
                                                />
                                            </div>
                                        ))}

                                        {/* Close Button */}
                                        <div className="w-full flex justify-center mb-4">
                                            <Button
                                                variant="outline"
                                                className="bg-white text-black px-4 py-2 shadow-lg rounded-lg"
                                                onClick={() => setExpanded(false)}
                                            >
                                                <ChevronUp className="mr-2 h-5 w-5" /> Close
                                            </Button>
                                        </div>
                                    </div>
                                )}
                            </div>
                        )}
                    </div>

                    {/* Post Content */}
                    <div className="bg-white dark:bg-gray-900 p-6 rounded-lg shadow dark:text-gray-100">
                        <h1 className="text-3xl font-bold mb-3">{post.title.content}</h1>
                        <p className="text-lg">{post.description.content}</p>
                    </div>
                </div>

                {/* Sidebar */}
                <div className="md:w-1/4">
                    <div className="bg-white dark:bg-violet-950 p-5 rounded-lg shadow">
                        <div className="flex flex-col items-center mb-5">
                            <div className="flex items-center">
                                <Avatar className="w-12 h-12 mr-4">
                                    {post.creator.avatar && <AvatarImage src={post.creator.avatar + "?t=sm"} />}
                                    <AvatarFallback>{getFirstGrapheme(post.creator.name)}</AvatarFallback>
                                </Avatar>
                                <h3 className="font-semibold text-lg">{post.creator.name}</h3>
                            </div>
                            <div className="flex flex-col mt-4">
                                <p className="text-sm text-gray-500 dark:text-gray-400">
                                    Posted: {relativeTime(post.date.created)}
                                </p>
                                <p className="text-sm text-gray-500 dark:text-gray-400">
                                    Imported: {relativeTime(post.date.imported)}
                                </p>
                                <p className="text-sm text-gray-500 dark:text-gray-400">
                                    Tags: {post.tags.map((tag) => tag).join(", ")}
                                </p>
                                <p className={`text-sm ${post.mature ? 'text-red-500 dark:text-red-400' : 'text-gray-500'} dark:text-gray-400`}>
                                    Mature: {post.mature ? 'Yes' : 'No'}
                                </p>
                            </div>
                            <div className="flex items-center mt-4">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}
