'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState, useCallback, useRef } from 'react';
import { FileX, House, ArrowLeft, MagnifyingGlass, Spinner } from '@phosphor-icons/react';
import { Button } from '@/components/ui/button';
import { useDocsNavigation } from '@/lib/docs-navigation-context';
import { MDXRemote } from 'next-mdx-remote';
import { useCodeCopy } from '@/hooks/use-code-copy';
// Import MDX components for custom 404 pages
import { Note, Warning, Info, Tip, Check, Error as ErrorCallout, Callout, Card, CardGroup, Accordion, AccordionGroup, Steps, Step, Tabs, Tab, CodeGroup, Frame, Columns, Snippet, Latex, ParamField, ResponseField, Expandable, Iframe, Video, Loom, Image, Screenshot, Logo, Icon, Highlight, Marker, Underline, Badge, Mermaid, PDF, Audio, Download, Hero, Pre, Tagline, Headline, Description, CommandBox, Section, Center, FeatureGrid, FeatureItem, ButtonLink, Spacer, Divider } from '../../docs/mdx/index';
// MDX components mapping for custom 404 pages
const mdxComponents = {
    Note,
    Warning,
    Info,
    Tip,
    Check,
    Error: ErrorCallout,
    Callout,
    Card,
    CardGroup,
    Accordion,
    AccordionGroup,
    Steps,
    Step,
    Tabs,
    Tab,
    CodeGroup,
    Frame,
    Columns,
    Snippet,
    Latex,
    ParamField,
    ResponseField,
    Expandable,
    Iframe,
    Video,
    Loom,
    Image,
    Screenshot,
    Logo,
    Icon,
    Highlight,
    Marker,
    Underline,
    Badge,
    Mermaid,
    PDF,
    Audio,
    Download,
    Hero,
    Pre,
    Tagline,
    Headline,
    Description,
    CommandBox,
    Section,
    Center,
    FeatureGrid,
    FeatureItem,
    ButtonLink,
    Spacer,
    Divider
};
export function NotFoundPage({ slug, onGoBack, onSearch }) {
    const docsNav = useDocsNavigation();
    const [customPage, setCustomPage] = useState(null);
    const [loading, setLoading] = useState(true);
    const contentRef = useRef(null);
    // Add copy buttons to code blocks after content loads
    useCodeCopy(contentRef, [
        customPage
    ]);
    // Try to load custom 404.mdx page
    useEffect(()=>{
        async function loadCustom404() {
            try {
                const response = await fetch('/api/docs?slug=404&is404=true');
                if (response.ok) {
                    const data = await response.json();
                    setCustomPage(data);
                }
            } catch  {
            // No custom 404 page, use default
            } finally{
                setLoading(false);
            }
        }
        loadCustom404();
    }, []);
    const handleGoHome = useCallback(()=>{
        // Navigate to the first page of the current tab or just switch to first tab
        if (docsNav?.switchToTab) {
            window.location.hash = '';
            window.location.reload();
        } else {
            window.location.hash = '';
        }
    }, [
        docsNav
    ]);
    const handleGoBack = useCallback(()=>{
        if (onGoBack) {
            onGoBack();
        } else {
            window.history.back();
        }
    }, [
        onGoBack
    ]);
    // Show loading state briefly while checking for custom 404
    if (loading) {
        return /*#__PURE__*/ _jsx("div", {
            className: "docs-page docs-page-not-found w-full min-h-[200px]",
            children: /*#__PURE__*/ _jsx("div", {
                className: "flex items-center justify-center py-12",
                children: /*#__PURE__*/ _jsx(Spinner, {
                    className: "h-6 w-6 animate-spin text-muted-foreground"
                })
            })
        });
    }
    // Render custom 404 page if available
    if (customPage) {
        const { mode = 'default', hideHeader, background } = customPage.frontmatter;
        const isCustomMode = mode === 'custom';
        const showHeader = !hideHeader && !isCustomMode;
        // Custom mode: Full-width layout
        if (isCustomMode) {
            return /*#__PURE__*/ _jsx("div", {
                ref: contentRef,
                className: "docs-page docs-page-not-found docs-content w-full min-h-full",
                style: {
                    background: background || 'var(--background)'
                },
                children: /*#__PURE__*/ _jsx("div", {
                    className: "docs-custom-content [&>*]:w-full",
                    children: /*#__PURE__*/ _jsx(MDXRemote, {
                        ...customPage.mdxSource,
                        components: mdxComponents
                    })
                })
            });
        }
        // Default mode with optional header
        const containerClass = mode === 'wide' ? 'max-w-6xl' : 'max-w-4xl';
        return /*#__PURE__*/ _jsxs("div", {
            ref: contentRef,
            className: `docs-page docs-page-not-found docs-content ${containerClass} mx-auto px-4 py-6 sm:px-8 sm:py-8`,
            children: [
                showHeader && customPage.frontmatter.title && /*#__PURE__*/ _jsxs("div", {
                    className: "docs-page-header mb-6",
                    children: [
                        /*#__PURE__*/ _jsx("h1", {
                            className: "docs-content-title text-2xl sm:text-3xl font-bold mb-2 text-foreground",
                            children: customPage.frontmatter.title
                        }),
                        customPage.frontmatter.description && /*#__PURE__*/ _jsx("p", {
                            className: "docs-content-description text-lg text-muted-foreground",
                            children: customPage.frontmatter.description
                        })
                    ]
                }),
                /*#__PURE__*/ _jsx("div", {
                    className: "docs-prose prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground prose-strong:text-foreground",
                    children: /*#__PURE__*/ _jsx(MDXRemote, {
                        ...customPage.mdxSource,
                        components: mdxComponents
                    })
                }),
                /*#__PURE__*/ _jsx("div", {
                    className: "mt-8 pt-6 border-t border-border",
                    children: /*#__PURE__*/ _jsxs("div", {
                        className: "flex flex-col sm:flex-row items-center justify-center gap-3",
                        children: [
                            /*#__PURE__*/ _jsxs(Button, {
                                variant: "outline",
                                size: "sm",
                                onClick: handleGoBack,
                                className: "gap-2 min-w-[120px]",
                                children: [
                                    /*#__PURE__*/ _jsx(ArrowLeft, {
                                        className: "w-4 h-4"
                                    }),
                                    "Go back"
                                ]
                            }),
                            /*#__PURE__*/ _jsxs(Button, {
                                variant: "default",
                                size: "sm",
                                onClick: handleGoHome,
                                className: "gap-2 min-w-[120px]",
                                children: [
                                    /*#__PURE__*/ _jsx(House, {
                                        className: "w-4 h-4"
                                    }),
                                    "Go home"
                                ]
                            }),
                            onSearch && /*#__PURE__*/ _jsxs(Button, {
                                variant: "outline",
                                size: "sm",
                                onClick: onSearch,
                                className: "gap-2 min-w-[120px]",
                                children: [
                                    /*#__PURE__*/ _jsx(MagnifyingGlass, {
                                        className: "w-4 h-4"
                                    }),
                                    "Search"
                                ]
                            })
                        ]
                    })
                })
            ]
        });
    }
    // Default 404 page
    return /*#__PURE__*/ _jsx("div", {
        className: "docs-page docs-page-not-found w-full min-h-[calc(100vh-200px)] flex items-center justify-center",
        children: /*#__PURE__*/ _jsxs("div", {
            className: "text-center px-4 py-12 max-w-md mx-auto",
            children: [
                /*#__PURE__*/ _jsx("div", {
                    className: "mb-6",
                    children: /*#__PURE__*/ _jsx("div", {
                        className: "inline-flex items-center justify-center w-20 h-20 rounded-full bg-muted/50 text-muted-foreground",
                        children: /*#__PURE__*/ _jsx(FileX, {
                            className: "w-10 h-10",
                            weight: "light"
                        })
                    })
                }),
                /*#__PURE__*/ _jsx("h1", {
                    className: "text-2xl font-semibold text-foreground mb-2",
                    children: "Page not found"
                }),
                /*#__PURE__*/ _jsx("p", {
                    className: "text-muted-foreground mb-2",
                    children: "The page you're looking for doesn't exist or has been moved."
                }),
                slug && /*#__PURE__*/ _jsxs("p", {
                    className: "text-sm text-muted-foreground/70 mb-6 font-mono bg-muted/30 px-3 py-1.5 rounded-md inline-block",
                    children: [
                        "/",
                        slug
                    ]
                }),
                !slug && /*#__PURE__*/ _jsx("div", {
                    className: "mb-6"
                }),
                /*#__PURE__*/ _jsxs("div", {
                    className: "flex flex-col sm:flex-row items-center justify-center gap-3",
                    children: [
                        /*#__PURE__*/ _jsxs(Button, {
                            variant: "outline",
                            size: "sm",
                            onClick: handleGoBack,
                            className: "gap-2 min-w-[120px]",
                            children: [
                                /*#__PURE__*/ _jsx(ArrowLeft, {
                                    className: "w-4 h-4"
                                }),
                                "Go back"
                            ]
                        }),
                        /*#__PURE__*/ _jsxs(Button, {
                            variant: "default",
                            size: "sm",
                            onClick: handleGoHome,
                            className: "gap-2 min-w-[120px]",
                            children: [
                                /*#__PURE__*/ _jsx(House, {
                                    className: "w-4 h-4"
                                }),
                                "Go home"
                            ]
                        }),
                        onSearch && /*#__PURE__*/ _jsxs(Button, {
                            variant: "outline",
                            size: "sm",
                            onClick: onSearch,
                            className: "gap-2 min-w-[120px]",
                            children: [
                                /*#__PURE__*/ _jsx(MagnifyingGlass, {
                                    className: "w-4 h-4"
                                }),
                                "Search"
                            ]
                        })
                    ]
                }),
                /*#__PURE__*/ _jsx("p", {
                    className: "text-xs text-muted-foreground/60 mt-8",
                    children: "If you believe this is an error, please check the URL or contact the documentation maintainer."
                })
            ]
        })
    });
}
