'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// packages/ui/src/routing/404.tsx
/**
 * @fileoverview 404 Not Found page component
 * @description Professional 404 page with full-viewport centered layout, i18n, and dynamic route suggestions
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
import { Home, ArrowLeft, Link as LinkIcon } from 'lucide-react';
import { useMemo } from 'react';
import { Button, BUTTON_VARIANT, Stack, Text } from '@donotdev/components';
import { useTranslation } from '@donotdev/core';
// Platform-specific hooks via conditional exports
import { useLocation, useNavigate } from '@donotdev/ui/routing/hooks';
import { Link } from './Link';
import { useNavigationItems } from './useNavigation';
import { Icon } from '../components/common/icon';
import { PageContainer } from '../components/layout/PageContainer';
/**
 * 404 Not Found page metadata configuration
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
export const meta = {
    hideFromMenu: true,
};
/**
 * Professional 404 Not Found page component
 *
 * Features:
 * - Full-viewport centered design for professional appearance
 * - Translation system integration (i18n)
 * - Dynamic route suggestions from discovered routes
 * - Accessible design with proper semantic HTML
 * - Responsive across all viewports
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
export default function NotFoundPage() {
    const { t } = useTranslation('dndev');
    const location = useLocation();
    const navigate = useNavigate();
    const navigationItems = useNavigationItems();
    /**
     * Get suggested routes for navigation
     * Filters out dynamic routes, home, and limits to 4 suggestions
     */
    const suggestedRoutes = useMemo(() => {
        return navigationItems
            .filter((route) => !route.path.includes(':') && route.path !== '/')
            .slice(0, 4);
    }, [navigationItems]);
    /**
     * Handle back button click
     * Uses navigate('back') for platform-agnostic back navigation
     */
    const handleBack = () => {
        navigate('back');
    };
    return (_jsx(PageContainer, { variant: "docs", centered: true, children: _jsxs(Stack, { gap: "large", align: "center", justify: "center", children: [_jsxs(Stack, { align: "center", children: [_jsx(Text, { level: "h1", style: {
                                fontSize: 'clamp(4rem, 12vw, 8rem)',
                                fontWeight: 'var(--font-weight-bold)',
                                lineHeight: 1,
                                letterSpacing: '-0.02em',
                                background: 'linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%)',
                                WebkitBackgroundClip: 'text',
                                WebkitTextFillColor: 'transparent',
                                backgroundClip: 'text',
                                margin: 0,
                            }, children: "404" }), _jsx(Text, { level: "h2", style: {
                                fontSize: 'var(--font-size-2xl)',
                                fontWeight: 'var(--font-weight-semibold)',
                                margin: 0,
                            }, children: t('errors.notFound.title', 'Page Not Found') }), _jsx(Text, { style: {
                                fontSize: 'var(--font-size-lg)',
                                color: 'var(--muted-foreground)',
                                textAlign: 'center',
                                margin: 0,
                            }, children: t('errors.notFound.description', "The page you're looking for doesn't exist or has been moved.") }), location.pathname && (_jsx("code", { style: {
                                padding: 'var(--gap-sm) var(--gap-md)',
                                background: 'var(--muted)',
                                borderRadius: 'var(--radius-md)',
                                fontSize: 'var(--font-size-sm)',
                                fontFamily: 'var(--font-mono)',
                                color: 'var(--foreground)',
                                wordBreak: 'break-all',
                                maxWidth: '100%',
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                                border: '1px solid var(--border-hairline)',
                            }, children: location.pathname }))] }), suggestedRoutes.length > 0 && (_jsxs(Stack, { align: "center", children: [_jsx("p", { className: "dndev-text-base", style: {
                                fontSize: 'var(--font-size-md)',
                                fontWeight: 'var(--font-weight-semibold)',
                                margin: 0,
                                color: 'var(--muted-foreground)',
                            }, children: t('errors.notFound.suggestions', 'You might be looking for:') }), _jsx(Stack, { direction: "row", wrap: "wrap", justify: "center", gap: "tight", children: suggestedRoutes.map((route) => (_jsx(Link, { path: route.path, replace: true, children: _jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, icon: _jsx(Icon, { icon: route.icon, fallback: LinkIcon }), "aria-label": t('errors.notFound.navigateTo', `Navigate to ${route.label}`, { label: route.label }), children: route.label }) }, route.path))) })] })), _jsxs(Stack, { direction: "row", wrap: "wrap", justify: "center", children: [_jsx(Link, { path: "/", replace: true, children: _jsx(Button, { variant: BUTTON_VARIANT.DEFAULT, icon: Home, "aria-label": t('errors.notFound.goHome', 'Go to home page'), children: t('errors.notFound.goHome', 'Go Home') }) }), _jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, icon: ArrowLeft, onClick: handleBack, "aria-label": t('errors.notFound.goBack', 'Go back to previous page'), children: t('errors.notFound.goBack', 'Go Back') })] })] }) }));
}
