"use client";

import { useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
import { createPortal } from "react-dom";
// Loaded dynamically inside the component to prevent render-blocking

import type { Entity } from "@/uhm/api/entities";
import type { Wiki } from "@/uhm/api/wikis";

type TocItem = {
    id: string;
    level: number;
    text: string;
};

type Props = {
    entity: Entity | null;
    wiki: Wiki | null;
    isLoading: boolean;
    error?: string | null;
    onClose: () => void;
    onWikiLinkRequest: (request: { slug: string; rect: DOMRect }) => void;
    onWikiLinkEntitySelectionRequest?: (request: { slug: string; rect: DOMRect }) => void;
    sidebarWidth?: number;
    onSidebarWidthChange?: (width: number) => void;
    maxDragWidth?: number;
    compactHeader?: boolean;
    sidebarHeight?: number;
    onSidebarHeightChange?: (height: number) => void;
};

function escapeHtml(input: string): string {
    return input
        .replaceAll("&", "&")
        .replaceAll("<", "&lt;")
        .replaceAll(">", "&gt;")
        .replaceAll("\"", "&quot;")
        .replaceAll("'", "&#39;");
}

function normalizeWikiContentToHtml(raw: string | null | undefined): string {
    let value = String(raw || "").trim();
    if (!value.length) return "";

    // Replace non-breaking spaces to allow text wrap
    value = value.replaceAll("&nbsp;", " ").replaceAll("\u00a0", " ");

    if (value[0] === "<") return value;

    return `<p>${escapeHtml(value).replace(/\n/g, "<br/>")}</p>`;
}

function slugifyHeading(raw: string): string {
    const input = String(raw || "").trim();
    if (!input.length) return "";
    return input
        .toLowerCase()
        .replace(/đ/g, "d")
        .normalize("NFKD")
        .replace(/[\u0300-\u036f]/g, "")
        .replace(/[^a-z0-9]+/g, "-")
        .replace(/^-+/, "")
        .replace(/-+$/, "")
        .slice(0, 80);
}

function isExternalHref(href: string): boolean {
    const h = href.trim().toLowerCase();
    return (
        h.startsWith("http://") ||
        h.startsWith("https://") ||
        h.startsWith("mailto:") ||
        h.startsWith("tel:") ||
        h.startsWith("sms:")
    );
}

function extractWikiSlugFromHref(href: string): string {
    const raw = String(href || "").trim();
    if (!raw.length || raw === "__missing__") return "";
    if (raw.startsWith("#wiki:")) return raw.slice("#wiki:".length).trim();
    if (raw.startsWith("#")) return "";

    const isAbsoluteUrl = /^[a-z][a-z\d+.-]*:/i.test(raw);
    const baseOrigin = typeof window !== "undefined" ? window.location.origin : "http://localhost";
    if (isAbsoluteUrl) {
        try {
            const url = new URL(raw, baseOrigin);
            if (typeof window !== "undefined" && url.origin !== window.location.origin) return "";
            const path = url.pathname.replace(/\/+$/, "");
            if (!path.startsWith("/wiki/")) return "";
            return decodeWikiSlug(path.slice("/wiki/".length));
        } catch {
            return "";
        }
    }

    const match = raw.match(/^([^?#]+)([?#].*)?$/);
    let slug = String(match?.[1] || "").replace(/^\/+/, "").replace(/\/+$/, "").trim();
    if (slug.startsWith("wiki/")) {
        slug = slug.slice("wiki/".length).trim();
    }
    return decodeWikiSlug(slug);
}

function decodeWikiSlug(slug: string): string {
    try {
        return decodeURIComponent(slug).trim();
    } catch {
        return slug.trim();
    }
}

function prepareWikiHtml(inputHtml: string): { html: string; toc: TocItem[] } {
    const parser = new DOMParser();
    const doc = parser.parseFromString(inputHtml, "text/html");

    for (const el of Array.from(doc.querySelectorAll("script"))) el.remove();

    for (const a of Array.from(doc.querySelectorAll("a[href]"))) {
        const href = String(a.getAttribute("href") || "").trim();
        if (!href.length) continue;
        if (href === "__missing__") continue;
        const slugPart = extractWikiSlugFromHref(href);
        if (slugPart.length) {
            a.setAttribute("href", `#wiki:${slugPart}`);
            a.setAttribute("data-wiki-slug", slugPart);
            a.setAttribute("target", "_self");
            continue;
        }

        if (isExternalHref(href)) {
            a.setAttribute("target", "_blank");
            a.setAttribute("rel", "noopener noreferrer");
        }
    }

    const toc: TocItem[] = [];
    const seen = new Map<string, number>();
    const headings = Array.from(doc.body.querySelectorAll("h1,h2,h3,h4,h5,h6"));
    for (const h of headings) {
        const text = String(h.textContent || "").trim();
        if (!text.length) continue;

        const level = Number(String(h.tagName || "").replace(/^H/i, "")) || 1;
        const existingId = String(h.getAttribute("id") || "").trim();
        if (existingId) {
            toc.push({ id: existingId, level, text });
            continue;
        }

        const base = slugifyHeading(text) || "heading";
        const nextCount = (seen.get(base) || 0) + 1;
        seen.set(base, nextCount);
        const id = nextCount === 1 ? base : `${base}-${nextCount}`;

        h.setAttribute("id", id);
        toc.push({ id, level, text });
    }

    return { html: doc.body.innerHTML, toc };
}

function PublicWikiSidebar({
    entity,
    wiki,
    isLoading,
    error,
    onClose,
    onWikiLinkRequest,
    onWikiLinkEntitySelectionRequest,
    sidebarWidth,
    onSidebarWidthChange,
    maxDragWidth,
    compactHeader = false,
    sidebarHeight,
    onSidebarHeightChange,
}: Props) {
    const contentRootRef = useRef<HTMLDivElement | null>(null);
    const tocContainerRef = useRef<HTMLDivElement | null>(null);
    const [wikiLinkMenu, setWikiLinkMenu] = useState<{
        slug: string;
        rect: DOMRect;
        top: number;
        left: number;
    } | null>(null);

    useEffect(() => {
        import("react-quill-new/dist/quill.snow.css");
    }, []);

    const [localWidth, setLocalWidth] = useState<number>(() => {
        if (typeof window !== "undefined") {
            const saved = localStorage.getItem("public-wiki-sidebar-width");
            if (saved) {
                const parsed = parseInt(saved, 10);
                if (!isNaN(parsed) && parsed >= 320 && parsed <= 800) {
                    return parsed;
                }
            }
        }
        return 420;
    });

    const width = sidebarWidth ?? localWidth;
    const setWidth = onSidebarWidthChange ?? setLocalWidth;
    const maxDragWidthLimit = maxDragWidth ?? 800;

    const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
        event.preventDefault();
        const startX = event.clientX;
        const startWidth = width;

        // Tạo đường ghost ảo chỉ vị trí kéo thay vì kích hoạt re-render liên tục
        const ghost = document.createElement("div");
        ghost.style.position = "fixed";
        ghost.style.top = "0";
        ghost.style.bottom = "0";
        ghost.style.width = "4px";
        ghost.style.backgroundColor = "#38bdf8";
        ghost.style.boxShadow = "0 0 12px rgba(56, 189, 248, 0.8)";
        ghost.style.zIndex = "99999";
        ghost.style.cursor = "col-resize";
        ghost.style.pointerEvents = "none";
        ghost.style.left = `${startX}px`;
        document.body.appendChild(ghost);

        const onMove = (e: PointerEvent) => {
            ghost.style.left = `${e.clientX}px`;
        };

        const onUp = (e: PointerEvent) => {
            window.removeEventListener("pointermove", onMove);
            window.removeEventListener("pointerup", onUp);
            if (ghost.parentNode) {
                ghost.parentNode.removeChild(ghost);
            }
            const deltaX = e.clientX - startX;
            const nextWidth = Math.max(320, Math.min(maxDragWidthLimit, startWidth - deltaX));
            setWidth(nextWidth);
            if (typeof window !== "undefined") {
                localStorage.setItem("public-wiki-sidebar-width", String(nextWidth));
            }
        };

        window.addEventListener("pointermove", onMove);
        window.addEventListener("pointerup", onUp);
    };



    const [activeHeadingId, setActiveHeadingId] = useState<string | null>(null);
    const processedWiki = useMemo(() => {
        if (!wiki) return { html: "", toc: [] as TocItem[] };

        const html = normalizeWikiContentToHtml(wiki.content ?? "");
        try {
            return prepareWikiHtml(html);
        } catch (err) {
            console.error("Failed to process sidebar wiki HTML", err);
            return { html, toc: [] as TocItem[] };
        }
    }, [wiki]);
    const renderHtml = processedWiki.html;
    const toc = processedWiki.toc;
    const effectiveActiveHeadingId = toc.some((item) => item.id === activeHeadingId)
        ? activeHeadingId
        : (toc[0]?.id ?? null);

    useLayoutEffect(() => {
        const firstHeadingId = toc[0]?.id ?? null;
        setActiveHeadingId(firstHeadingId);

        const scrollContainer = contentRootRef.current?.parentElement;
        scrollContainer?.scrollTo({ top: 0, behavior: "auto" });
        tocContainerRef.current?.scrollTo({ left: 0, behavior: "auto" });
    }, [wiki?.id, wiki?.slug, renderHtml, toc]);

    useEffect(() => {
        if (!toc.length) return;
        const root = contentRootRef.current;
        if (!root) return;

        const headings = toc
            .map((item) => root.querySelector<HTMLElement>(`#${CSS.escape(item.id)}`))
            .filter((item): item is HTMLElement => Boolean(item));
        if (!headings.length) return;

        const scrollContainer = root.parentElement;
        const updateActiveHeading = () => {
            const containerRect = scrollContainer?.getBoundingClientRect();
            const topBoundary = (containerRect?.top ?? 0) + (containerRect?.height ?? window.innerHeight) * 0.18;
            const bottomBoundary = (containerRect?.top ?? 0) + (containerRect?.height ?? window.innerHeight) * 0.82;
            const visibleHeadings = headings
                .map((heading) => ({ heading, rect: heading.getBoundingClientRect() }))
                .filter(({ rect }) => rect.bottom >= topBoundary && rect.top <= bottomBoundary)
                .sort((a, b) => {
                    const aDistance = Math.abs(a.rect.top - topBoundary);
                    const bDistance = Math.abs(b.rect.top - topBoundary);
                    return aDistance - bDistance;
                });
            const nextHeading = visibleHeadings[0]?.heading || headings[0];
            if (nextHeading?.id) setActiveHeadingId(nextHeading.id);
        };

        const observer = new IntersectionObserver(
            updateActiveHeading,
            { root: scrollContainer || null, rootMargin: "-18% 0px -70% 0px", threshold: [0, 1] }
        );

        for (const heading of headings) observer.observe(heading);
        scrollContainer?.addEventListener("scroll", updateActiveHeading, { passive: true });
        return () => {
            observer.disconnect();
            scrollContainer?.removeEventListener("scroll", updateActiveHeading);
        };
    }, [toc]);

    useEffect(() => {
        const container = tocContainerRef.current;
        if (!container) return;

        const handleWheel = (e: WheelEvent) => {
            if (e.deltaY !== 0) {
                e.preventDefault();
                container.scrollLeft += e.deltaY;
            }
        };

        container.addEventListener("wheel", handleWheel, { passive: false });
        return () => {
            container.removeEventListener("wheel", handleWheel);
        };
    }, [toc]);

    useEffect(() => {
        const root = contentRootRef.current;
        if (!root) return;

        const handleClick = (event: MouseEvent) => {
            const target = event.target as HTMLElement | null;
            const link = target?.closest?.("a[data-wiki-slug]") as HTMLAnchorElement | null;
            const fallbackLink = target?.closest?.("a[href]") as HTMLAnchorElement | null;
            const sourceLink = link || fallbackLink;
            if (!sourceLink) return;

            const slug = String(
                sourceLink.getAttribute("data-wiki-slug") ||
                extractWikiSlugFromHref(sourceLink.getAttribute("href") || "")
            ).trim();
            if (!slug.length) return;

            event.preventDefault();
            onWikiLinkRequest({ slug, rect: sourceLink.getBoundingClientRect() });
        };

        root.addEventListener("click", handleClick);
        return () => root.removeEventListener("click", handleClick);
    }, [onWikiLinkRequest, renderHtml]);

    useEffect(() => {
        const root = contentRootRef.current;
        if (!root) return;

        const handleContextMenu = (event: MouseEvent) => {
            const target = event.target as HTMLElement | null;
            const link = target?.closest?.("a[data-wiki-slug]") as HTMLAnchorElement | null;
            const fallbackLink = target?.closest?.("a[href]") as HTMLAnchorElement | null;
            const sourceLink = link || fallbackLink;
            if (!sourceLink) return;

            const slug = String(
                sourceLink.getAttribute("data-wiki-slug") ||
                extractWikiSlugFromHref(sourceLink.getAttribute("href") || "")
            ).trim();
            if (!slug.length) return;

            event.preventDefault();
            setWikiLinkMenu({
                slug,
                rect: sourceLink.getBoundingClientRect(),
                ...computeContextMenuPosition(event.clientX, event.clientY, 220, 88),
            });
        };

        root.addEventListener("contextmenu", handleContextMenu, true);
        return () => root.removeEventListener("contextmenu", handleContextMenu, true);
    }, [renderHtml]);

    useEffect(() => {
        if (!wikiLinkMenu) return;

        const handlePointerDown = (event: PointerEvent) => {
            const target = event.target as HTMLElement | null;
            if (target?.closest?.("[data-wiki-link-context-menu='true']")) return;
            setWikiLinkMenu(null);
        };
        const handleKeyDown = (event: KeyboardEvent) => {
            if (event.key === "Escape") setWikiLinkMenu(null);
        };
        const closeMenu = () => setWikiLinkMenu(null);

        window.addEventListener("pointerdown", handlePointerDown);
        window.addEventListener("keydown", handleKeyDown);
        window.addEventListener("resize", closeMenu);
        window.addEventListener("scroll", closeMenu, true);
        return () => {
            window.removeEventListener("pointerdown", handlePointerDown);
            window.removeEventListener("keydown", handleKeyDown);
            window.removeEventListener("resize", closeMenu);
            window.removeEventListener("scroll", closeMenu, true);
        };
    }, [wikiLinkMenu]);

    const handleOpenStandaloneWiki = (slug: string) => {
        if (typeof window === "undefined") return;
        const url = `/wiki/${encodeURIComponent(slug)}`;
        const nextWindow = window.open(url, "_blank", "noopener,noreferrer");
        if (nextWindow) nextWindow.opener = null;
    };

    const isExpanded = useMemo(() => {
        if (typeof window === "undefined") return false;
        const fullHeight = Math.round(window.innerHeight * 0.70);
        return (sidebarHeight || 400) >= fullHeight;
    }, [sidebarHeight]);

    const handleHeightToggle = () => {
        if (typeof window === "undefined") return;
        const halfHeight = Math.round(window.innerHeight * 0.45);
        const fullHeight = Math.round(window.innerHeight * 0.85);
        const currentHeight = sidebarHeight || 400;

        const nextHeight = Math.abs(currentHeight - halfHeight) < Math.abs(currentHeight - fullHeight)
            ? fullHeight
            : halfHeight;

        if (onSidebarHeightChange) {
            onSidebarHeightChange(nextHeight);
        }
    };

    const [isMobileOrTablet, setIsMobileOrTablet] = useState(false);
    useEffect(() => {
        const checkDevice = () => setIsMobileOrTablet(window.innerWidth < 1024);
        checkDevice();
        window.addEventListener("resize", checkDevice);
        return () => window.removeEventListener("resize", checkDevice);
    }, []);

    return (
        <div
            style={{
                width: isMobileOrTablet ? "100%" : `${width}px`,
                maxWidth: "100%",
                display: "flex",
                flexDirection: "column",
                height: "100%",
                minHeight: 0,
                overflow: "hidden",
                borderRadius: isMobileOrTablet ? "24px 24px 0 0" : 20,
                border: isMobileOrTablet ? "1px solid rgba(148, 163, 184, 0.22)" : "1px solid rgba(148, 163, 184, 0.22)",
                borderBottom: isMobileOrTablet ? "none" : "1px solid rgba(148, 163, 184, 0.22)",
                borderLeft: isMobileOrTablet ? "none" : "1px solid rgba(148, 163, 184, 0.22)",
                borderRight: isMobileOrTablet ? "none" : "1px solid rgba(148, 163, 184, 0.22)",
                background: "linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.85))",
                boxShadow: "0 20px 48px rgba(2, 6, 23, 0.45)",
                backdropFilter: "blur(12px)",
                position: "relative",
            }}
        >
            {/* Grab Handle for bottom sheet on mobile */}
            {isMobileOrTablet ? (
                <div
                    onClick={handleHeightToggle}
                    style={{
                        width: "100%",
                        height: 28,
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        cursor: "pointer",
                        zIndex: 60,
                        userSelect: "none",
                        flexShrink: 0,
                        gap: 8,
                    }}
                >
                    <div
                        style={{
                            width: 36,
                            height: 4,
                            borderRadius: 2,
                            backgroundColor: "rgba(255, 255, 255, 0.3)",
                        }}
                    />
                    <svg
                        width="12"
                        height="12"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="rgba(255, 255, 255, 0.5)"
                        strokeWidth="3"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        style={{
                            transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
                            transition: "transform 0.3s ease",
                        }}
                    >
                        <polyline points="18 15 12 9 6 15" />
                    </svg>
                </div>
            ) : null}

            {/* Drag Handle on the left edge */}
            <div
                onPointerDown={handlePointerDown}
                style={{
                    position: "absolute",
                    left: 0,
                    top: 0,
                    bottom: 0,
                    width: 6,
                    cursor: "col-resize",
                    zIndex: 50,
                    userSelect: "none",
                }}
                className="group hidden lg:block"
                title="Kéo để chỉnh kích thước"
            >
                {/* Visual drag line overlay */}
                <div
                    style={{
                        position: "absolute",
                        left: 2,
                        top: 0,
                        bottom: 0,
                        width: 2,
                        background: "transparent",
                        transition: "background-color 0.2s",
                    }}
                    className="group-hover:bg-sky-500/50 group-active:bg-sky-500"
                />
            </div>
            <div
                style={{
                    borderBottom: "1px solid rgba(148, 163, 184, 0.15)",
                    padding: "16px",
                }}
            >
                <div style={{ display: "flex", alignItems: "start", justifyContent: "space-between", gap: 12 }}>
                    <div style={{ minWidth: 0, flex: 1 }}>
                        {compactHeader ? null : (
                            <div
                                style={{
                                    fontSize: 10,
                                    textTransform: "uppercase",
                                    letterSpacing: "1.2px",
                                    fontWeight: 900,
                                    color: "#94a3b8",
                                }}
                            >
                                Wiki
                            </div>
                        )}
                        <div
                            style={{
                                marginTop: compactHeader ? 0 : 4,
                                fontSize: 18,
                                fontWeight: 700,
                                lineHeight: 1.3,
                                color: "#f8fafc",
                            }}
                        >
                            {wiki?.title?.trim() || entity?.name?.trim() || "Wiki"}
                        </div>
                    </div>

                    <button
                        type="button"
                        onClick={onClose}
                        style={{
                            display: "inline-flex",
                            height: 28,
                            width: 28,
                            alignItems: "center",
                            justifyContent: "center",
                            borderRadius: "50%",
                            border: "1px solid rgba(148, 163, 184, 0.25)",
                            background: "rgba(30, 41, 59, 0.4)",
                            color: "#94a3b8",
                            cursor: "pointer",
                            fontSize: 12,
                            transition: "all 0.2s",
                            outline: "none",
                        }}
                        className="hover:bg-slate-700/50 hover:text-slate-100"
                        aria-label="Đóng khung wiki"
                    >
                        x
                    </button>
                </div>
            </div>

            {toc.length ? (
                <div
                    style={{
                        borderBottom: "1px solid rgba(148, 163, 184, 0.15)",
                        padding: "8px 12px",
                    }}
                >
                    <div
                        ref={tocContainerRef}
                        className="uhm-public-wiki-toc-list"
                        style={{
                            display: "flex",
                            gap: 8,
                            overflowX: "auto",
                            paddingBottom: 4,
                        }}
                    >
                        {toc.slice(0, 8).map((item) => {
                            const isActive = effectiveActiveHeadingId === item.id;
                            return (
                                <a
                                    key={item.id}
                                    href={`#${item.id}`}
                                    onClick={(e) => {
                                        e.preventDefault();
                                        setActiveHeadingId(item.id);
                                        const root = contentRootRef.current;
                                        if (root) {
                                            const targetElement = root.querySelector(`#${CSS.escape(item.id)}`) as HTMLElement | null;
                                            const scrollContainer = root.parentElement;
                                            if (targetElement && scrollContainer) {
                                                const containerTop = scrollContainer.getBoundingClientRect().top;
                                                const targetTop = targetElement.getBoundingClientRect().top;
                                                const scrollOffset = targetTop - containerTop + scrollContainer.scrollTop;
                                                scrollContainer.scrollTo({
                                                    top: scrollOffset - 12,
                                                    behavior: "smooth"
                                                });
                                            }
                                        }
                                    }}
                                    style={{
                                        flexShrink: 0,
                                        borderRadius: 9999,
                                        padding: "4px 10px",
                                        fontSize: 11,
                                        fontWeight: 650,
                                        textDecoration: "none",
                                        transition: "all 0.2s",
                                        background: isActive
                                            ? "rgba(56, 189, 248, 0.15)"
                                            : "rgba(30, 41, 59, 0.4)",
                                        color: isActive ? "#38bdf8" : "#94a3b8",
                                        border: isActive
                                            ? "1px solid rgba(56, 189, 248, 0.3)"
                                            : "1px solid rgba(148, 163, 184, 0.1)",
                                    }}
                                    className={isActive ? "" : "hover:bg-slate-700/40 hover:text-slate-200"}
                                >
                                    {item.text}
                                </a>
                            );
                        })}
                    </div>
                </div>
            ) : null}

            <div
                className="uhm-public-wiki-sidebar-content"
                style={{
                    minHeight: 0,
                    flex: 1,
                    overflowY: "auto",
                }}
            >
                {isLoading && !wiki ? (
                    <div style={{ display: "flex", flexDirection: "column", gap: 12, padding: 16 }}>
                        <div
                            style={{ height: 16, width: 110, borderRadius: 4, background: "rgba(148, 163, 184, 0.15)" }}
                            className="animate-pulse"
                        />
                        <div
                            style={{ height: 16, width: "100%", borderRadius: 4, background: "rgba(148, 163, 184, 0.15)" }}
                            className="animate-pulse"
                        />
                        <div
                            style={{ height: 16, width: "80%", borderRadius: 4, background: "rgba(148, 163, 184, 0.15)" }}
                            className="animate-pulse"
                        />
                    </div>
                ) : error ? (
                    <div style={{ padding: 16, fontSize: 14, color: "#f87171" }}>
                        {error}
                    </div>
                ) : wiki ? (
                    <div style={{ position: "relative", minHeight: "100%" }}>
                        {isLoading ? (
                            <div
                                aria-hidden="true"
                                style={{
                                    position: "sticky",
                                    top: 0,
                                    left: 0,
                                    right: 0,
                                    height: 2,
                                    zIndex: 2,
                                    overflow: "hidden",
                                    background: "rgba(56, 189, 248, 0.08)",
                                }}
                            >
                                <div
                                    className="uhm-wiki-sidebar-loading-bar"
                                    style={{
                                        height: "100%",
                                        width: "42%",
                                        background: "linear-gradient(90deg, transparent, #38bdf8, transparent)",
                                    }}
                                />
                            </div>
                        ) : null}
                        <div
                            ref={contentRootRef}
                            className="uhm-wiki-sidebar-view ql-editor"
                            style={{ fontSize: 14, color: "#cbd5e1" }}
                            dangerouslySetInnerHTML={{ __html: renderHtml }}
                        />
                    </div>
                ) : (
                    <div style={{ padding: 16, fontSize: 14, color: "#94a3b8" }}>
                        Entity này chưa có wiki liên kết.
                    </div>
                )}
            </div>

            {wikiLinkMenu && typeof document !== "undefined"
                ? createPortal(
                    <div
                        data-wiki-link-context-menu="true"
                        style={{
                            position: "fixed",
                            top: wikiLinkMenu.top,
                            left: wikiLinkMenu.left,
                            zIndex: 100000,
                            width: 220,
                            overflow: "hidden",
                            borderRadius: 10,
                            border: "1px solid rgba(148, 163, 184, 0.28)",
                            background: "rgba(15, 23, 42, 0.98)",
                            boxShadow: "0 18px 42px rgba(2, 6, 23, 0.48)",
                            color: "#e2e8f0",
                            padding: 6,
                        }}
                    >
                        <button
                            type="button"
                            onClick={() => {
                                handleOpenStandaloneWiki(wikiLinkMenu.slug);
                                setWikiLinkMenu(null);
                            }}
                            style={wikiLinkMenuButtonStyle}
                            className="hover:bg-sky-500/15 hover:text-sky-100"
                        >
                            Mở wiki riêng
                        </button>
                        <button
                            type="button"
                            onClick={() => {
                                const request = { slug: wikiLinkMenu.slug, rect: wikiLinkMenu.rect };
                                if (onWikiLinkEntitySelectionRequest) {
                                    onWikiLinkEntitySelectionRequest(request);
                                } else {
                                    onWikiLinkRequest(request);
                                }
                                setWikiLinkMenu(null);
                            }}
                            style={wikiLinkMenuButtonStyle}
                            className="hover:bg-sky-500/15 hover:text-sky-100"
                        >
                            Mở bảng chọn entity
                        </button>
                    </div>,
                    document.body
                )
                : null}

            <style jsx global>{`
                .uhm-public-wiki-sidebar-content::-webkit-scrollbar {
                    width: 6px;
                }
                .uhm-public-wiki-sidebar-content::-webkit-scrollbar-track {
                    background: transparent;
                }
                .uhm-public-wiki-sidebar-content::-webkit-scrollbar-thumb {
                    background: rgba(148, 163, 184, 0.22);
                    border-radius: 3px;
                }
                .uhm-public-wiki-sidebar-content::-webkit-scrollbar-thumb:hover {
                    background: rgba(148, 163, 184, 0.4);
                }
                .uhm-public-wiki-toc-list::-webkit-scrollbar {
                    height: 4px;
                }
                .uhm-public-wiki-toc-list::-webkit-scrollbar-track {
                    background: transparent;
                }
                .uhm-public-wiki-toc-list::-webkit-scrollbar-thumb {
                    background: rgba(148, 163, 184, 0.22);
                    border-radius: 2px;
                }
                .uhm-public-wiki-toc-list::-webkit-scrollbar-thumb:hover {
                    background: rgba(148, 163, 184, 0.4);
                }
                @keyframes uhm-wiki-sidebar-loading-bar {
                    from {
                        transform: translateX(-120%);
                    }
                    to {
                        transform: translateX(260%);
                    }
                }
                .uhm-wiki-sidebar-loading-bar {
                    animation: uhm-wiki-sidebar-loading-bar 1.1s ease-in-out infinite;
                }
                .uhm-wiki-sidebar-view.ql-editor {
                    height: auto;
                    overflow-y: visible;
                    padding: 18px 18px 22px;
                    line-height: 1.6;
                    font-size: 14.5px;
                    word-wrap: break-word;
                    word-break: break-word;
                    overflow-wrap: break-word;
                    color: #cbd5e1 !important;
                }
                .uhm-wiki-sidebar-view.ql-editor p {
                    margin: 0 0 0.75em;
                }
                .uhm-wiki-sidebar-view.ql-editor h1 {
                    margin: 1.15em 0 0.6em;
                    font-size: 1.6em;
                    font-weight: 800;
                    line-height: 1.2;
                    color: #f8fafc !important;
                }
                .uhm-wiki-sidebar-view.ql-editor h2 {
                    margin: 1.05em 0 0.55em;
                    font-size: 1.3em;
                    font-weight: 800;
                    line-height: 1.25;
                    color: #f8fafc !important;
                }
                .uhm-wiki-sidebar-view.ql-editor h3,
                .uhm-wiki-sidebar-view.ql-editor h4,
                .uhm-wiki-sidebar-view.ql-editor h5,
                .uhm-wiki-sidebar-view.ql-editor h6 {
                    margin: 0.95em 0 0.45em;
                    font-size: 1.05em;
                    font-weight: 700;
                    line-height: 1.3;
                    color: #f8fafc !important;
                }
                .uhm-wiki-sidebar-view.ql-editor ul,
                .uhm-wiki-sidebar-view.ql-editor ol {
                    margin: 0 0 0.75em;
                    padding-left: 1.5em;
                }
                .uhm-wiki-sidebar-view.ql-editor blockquote {
                    margin: 0 0 0.75em;
                    padding-left: 12px;
                    border-left: 3px solid rgba(148, 163, 184, 0.4);
                    color: rgba(203, 213, 225, 0.95);
                }
                .uhm-wiki-sidebar-view.ql-editor pre {
                    margin: 0 0 0.75em;
                    padding: 12px 14px;
                    border: 1px solid rgba(148, 163, 184, 0.22);
                    border-radius: 10px;
                    background: rgba(15, 23, 42, 0.4);
                    overflow-x: auto;
                    white-space: pre-wrap;
                    word-break: break-all;
                    color: #cbd5e1;
                }
                 .uhm-wiki-sidebar-view.ql-editor img {
                     max-width: 100%;
                     height: auto;
                     border-radius: 8px;
                     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
                 }
                 .uhm-wiki-sidebar-view.ql-editor img[style*="float: left"],
                 .uhm-wiki-sidebar-view.ql-editor img.ql-align-left {
                     float: left !important;
                     margin: 4px 14px 14px 0px !important;
                     display: inline !important;
                 }
                 .uhm-wiki-sidebar-view.ql-editor img[style*="float: right"],
                 .uhm-wiki-sidebar-view.ql-editor img.ql-align-right {
                     float: right !important;
                     margin: 4px 0px 14px 14px !important;
                     display: inline !important;
                 }
                 .uhm-wiki-sidebar-view.ql-editor img[style*="display: block"],
                 .uhm-wiki-sidebar-view.ql-editor img.ql-align-center {
                     display: block !important;
                     margin: 1.25em auto !important;
                 }
                .uhm-wiki-sidebar-view.ql-editor a {
                    text-decoration: underline;
                    text-underline-offset: 2px;
                }
                .uhm-wiki-sidebar-view.ql-editor a[href]:not([href=""]):not([href="__missing__"]) {
                    color: #38bdf8 !important;
                    transition: color 0.15s ease;
                }
                .uhm-wiki-sidebar-view.ql-editor a[href]:not([href=""]):not([href="__missing__"]):hover {
                    color: #7dd3fc !important;
                }
                .uhm-wiki-sidebar-view.ql-editor a[href="__missing__"] {
                    cursor: default;
                    pointer-events: none;
                }
                .uhm-wiki-sidebar-view.ql-editor a:not([href]),
                .uhm-wiki-sidebar-view.ql-editor a[href=""],
                .uhm-wiki-sidebar-view.ql-editor a[href="__missing__"] {
                    color: #f87171 !important;
                }
                @media (max-width: 640px) {
                    .uhm-wiki-sidebar-view.ql-editor {
                        padding: 14px 14px 20px;
                        font-size: 13.5px;
                    }
                    .uhm-wiki-sidebar-view.ql-editor h1 {
                        font-size: 1.4em;
                    }
                    .uhm-wiki-sidebar-view.ql-editor h2 {
                        font-size: 1.2em;
                    }
                }
            `}</style>
        </div>
    );
}

const wikiLinkMenuButtonStyle = {
    display: "block",
    width: "100%",
    border: 0,
    borderRadius: 7,
    background: "transparent",
    padding: "9px 10px",
    color: "inherit",
    cursor: "pointer",
    fontSize: 13,
    fontWeight: 700,
    lineHeight: "18px",
    textAlign: "left" as const,
};

function computeContextMenuPosition(clientX: number, clientY: number, width: number, height: number) {
    const margin = 8;
    const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1440;
    const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 900;
    return {
        left: Math.max(margin, Math.min(clientX, viewportWidth - width - margin)),
        top: Math.max(margin, Math.min(clientY, viewportHeight - height - margin)),
    };
}

export default memo(PublicWikiSidebar);