"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useRef } from "react";
import { useEditContext } from "../editor/client/editContext";
import { Card } from "../components/ui/card";
import { History, Loader2, FileText, ChevronRight } from "lucide-react";
import { cn } from "../lib/utils";
import { getAbsoluteIconUrl } from "../editor/utils";
export function RecentPages({ onClose }) {
    const editContext = useEditContext();
    const isDark = false;
    const [history, setHistory] = useState();
    const [isLoading, setIsLoading] = useState(false);
    const getItemsRef = useRef(editContext?.itemsRepository?.getItems);
    // Keep the ref updated with the latest getItems function
    useEffect(() => {
        if (editContext?.itemsRepository?.getItems) {
            getItemsRef.current = editContext.itemsRepository.getItems;
        }
    }, [editContext?.itemsRepository?.getItems]);
    const recentPages = editContext?.browseHistory || [];
    useEffect(() => {
        const fetchItems = async () => {
            if (recentPages.length === 0) {
                setHistory([]);
                return;
            }
            const getItems = getItemsRef.current;
            if (!getItems) {
                setHistory([]);
                return;
            }
            setIsLoading(true);
            try {
                const pages = await getItems(recentPages);
                setHistory(pages);
            }
            finally {
                setIsLoading(false);
            }
        };
        fetchItems();
    }, [recentPages]);
    const handlePageLoad = (item) => {
        if (editContext) {
            if (onClose) {
                onClose();
            }
            editContext
                .loadItem({
                id: item.id,
                language: item.language ?? "en",
                version: item.version,
            })
                .then(() => {
                editContext.switchWorkspace("editor");
            });
        }
    };
    return (_jsx(Card, { collapsible: "no", defaultCollapsed: "no", icon: _jsx(History, { className: cn("h-4 w-4", isDark ? "text-purple-400" : "text-purple-600") }), title: _jsx("span", { className: isDark ? "text-slate-200" : "text-slate-900", children: "Recent Pages/Items" }), description: "Quick access to your recently viewed pages", noPadding: true, className: cn("flex flex-col h-full overflow-hidden rounded-xl transition-all duration-1000", isDark
            ? "border-white/5 bg-white/3 shadow-2xl"
            : "border-slate-200 bg-white/70 shadow-xl"), children: _jsx("div", { className: cn("flex-1 flex flex-col min-h-0 border-t", isDark ? "border-white/5" : "border-slate-100"), children: isLoading ? (_jsxs("div", { className: "flex flex-col items-center justify-center p-12 text-center", children: [_jsx(Loader2, { className: "h-6 w-6 animate-spin text-purple-400" }), _jsx("div", { className: "mt-4 text-sm text-slate-500", children: "Loading recent pages..." })] })) : !history || history.length === 0 ? (_jsx("div", { className: "p-12 text-center text-sm text-slate-500", children: "No recent pages found" })) : (_jsx("div", { className: "flex-1 overflow-y-auto min-h-0", children: _jsx("div", { className: "min-w-full inline-block align-middle", children: _jsx("div", { className: "overflow-hidden", children: _jsxs("table", { className: "w-full text-left table-fixed", children: [_jsx("thead", { children: _jsxs("tr", { className: cn("sticky top-0 z-10 text-[10px] font-bold tracking-widest text-slate-500 uppercase", isDark ? "bg-white/2" : "bg-slate-50/50 backdrop-blur-sm"), children: [_jsx("th", { className: "px-4 sm:px-8 py-4 font-semibold w-[52%]", children: "Page / Path" }), _jsx("th", { className: "hidden px-8 py-4 font-semibold md:table-cell w-[20%]", children: "Type" }), _jsx("th", { className: "hidden px-4 py-4 font-semibold md:table-cell w-[8%]", children: "Language" }), _jsx("th", { className: "px-4 sm:px-8 py-4 font-semibold text-center w-[15%]", children: "Status" }), _jsx("th", { className: "w-[5%] px-2 py-4" })] }) }), _jsx("tbody", { className: cn("divide-y", isDark ? "divide-white/5" : "divide-slate-100"), children: history.map((page, index) => (_jsxs("tr", { onClick: () => handlePageLoad(page), className: cn("group cursor-pointer transition-all duration-300", isDark ? "hover:bg-white/5" : "hover:bg-slate-50/80"), children: [_jsx("td", { className: "px-4 sm:px-8 py-5", children: _jsxs("div", { className: "flex items-center gap-4 min-w-0", children: [_jsx("div", { className: cn("flex h-10 w-10 shrink-0 items-center justify-center rounded-xl shadow-sm transition-all duration-300 group-hover:scale-110 group-hover:shadow-lg", isDark
                                                                ? "bg-slate-800 text-purple-400 group-hover:bg-purple-500/20"
                                                                : "bg-slate-100 text-purple-600 group-hover:bg-purple-100"), children: page.icon ? (_jsx("img", { src: getAbsoluteIconUrl(page.icon), alt: page.name || "", className: "h-5 w-5 object-contain" })) : (_jsx(FileText, { className: "h-5 w-5" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: cn("truncate text-sm font-bold transition-colors md:text-base", isDark
                                                                        ? "text-slate-200 group-hover:text-white"
                                                                        : "text-slate-900 group-hover:text-purple-700"), children: page.name }), _jsx("div", { className: "truncate text-xs text-slate-400 mt-0.5", children: page.path })] })] }) }), _jsx("td", { className: "hidden px-8 py-5 md:table-cell", children: _jsx("span", { className: cn("text-xs font-medium truncate block", isDark ? "text-slate-400" : "text-slate-500"), children: page.templateName || "—" }) }), _jsx("td", { className: "hidden px-4 py-5 md:table-cell", children: _jsx("span", { className: cn("text-xs font-medium", isDark ? "text-slate-400" : "text-slate-500"), children: page.language || "en" }) }), _jsx("td", { className: "px-4 sm:px-8 py-5 text-center", children: _jsx("span", { className: cn("inline-flex items-center rounded-full px-3 py-1 text-[10px] font-bold tracking-widest uppercase shadow-sm whitespace-nowrap", isDark
                                                        ? "border border-purple-500/30 bg-purple-500/10 text-purple-300"
                                                        : "border border-purple-200 bg-purple-50 text-purple-700"), children: page.workflowState || "Draft" }) }), _jsx("td", { className: "px-2 py-5 text-right", children: _jsx(ChevronRight, { className: cn("ml-auto h-5 w-5 transition-all duration-300 opacity-0 group-hover:opacity-100", isDark
                                                        ? "text-slate-600 group-hover:translate-x-1 group-hover:text-white"
                                                        : "text-slate-300 group-hover:translate-x-1 group-hover:text-purple-600") }) })] }, `${page.id ?? "unknown"}-${page.language ?? "en"}-${page.version ?? "latest"}-${index}`))) })] }) }) }) })) }) }));
}
//# sourceMappingURL=RecentPages.js.map