'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// packages/ui/src/internal/common/RouteErrorFallback.tsx
/**
 * @fileoverview Route error fallback component
 * @description Professional route error fallback using framework components. Only for route-level errors (framework is stable).
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
import { AlertTriangle, Home, ArrowLeft, RotateCw, Copy, Check, } from 'lucide-react';
import { useEffect, useState } from 'react';
import { Button, BUTTON_VARIANT, Card, CARD_VARIANT, Alert, ALERT_VARIANT, Stack, } from '@donotdev/components';
import { handleError, useTranslation } from '@donotdev/core';
import { useLocation, useBack } from '@donotdev/ui/routing/hooks';
// Platform-specific hooks via conditional exports
import { Link } from '../../routing/Link';
/**
 * Professional Route Error Fallback Component
 *
 * Uses framework components (Card, Button, Alert, PageContainer) for consistent design.
 * Only used for route-level errors where framework is stable.
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
export const RouteErrorFallback = ({ error, resetError, componentStack, eventId, }) => {
    const { t } = useTranslation('dndev');
    const [copiedStack, setCopiedStack] = useState(false);
    const back = useBack();
    const location = useLocation();
    const pathname = location?.pathname ||
        (typeof window !== 'undefined' ? window.location.pathname : '/');
    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
    const errorStack = error instanceof Error ? error.stack : undefined;
    const isDevelopment = process.env.NODE_ENV === 'development';
    useEffect(() => {
        try {
            handleError(error, {
                userMessage: 'Page encountered an error',
                context: { component: 'RouteErrorFallback', location: pathname },
            });
        }
        catch (err) {
            console.error('Error in RouteErrorFallback:', error);
            console.error('handleError also failed:', err);
        }
    }, [error, pathname]);
    const handleCopyStackTrace = async () => {
        if (!errorStack)
            return;
        const fullErrorInfo = [
            `Error: ${errorMessage}`,
            `Timestamp: ${new Date().toISOString()}`,
            `User Agent: ${navigator.userAgent}`,
            eventId ? `Event ID: ${eventId}` : null,
            `Path: ${pathname}`,
            '',
            'Stack Trace:',
            errorStack,
            componentStack ? '\nComponent Stack:' : null,
            componentStack || null,
        ]
            .filter(Boolean)
            .join('\n');
        try {
            await navigator.clipboard.writeText(fullErrorInfo);
            setCopiedStack(true);
            setTimeout(() => setCopiedStack(false), 2000);
        }
        catch (err) {
            console.error('Failed to copy stack trace:', err);
        }
    };
    const handleRetry = () => {
        try {
            resetError();
        }
        catch (err) {
            if (typeof window !== 'undefined') {
                window.location.reload();
            }
        }
    };
    const handleGoBack = () => {
        try {
            back();
        }
        catch {
            if (typeof window !== 'undefined') {
                window.history.back();
            }
        }
    };
    return (_jsx("div", { className: "dndev-container", "data-variant": "standard", "data-centered": "true", children: _jsx(Card, { variant: CARD_VARIANT.DEFAULT, elevated: true, className: "dndev-w-full", style: { maxWidth: '65ch', margin: '0 auto' }, children: _jsxs(Stack, { gap: "large", align: "center", className: "dndev-text-center", children: [_jsx(Stack, { align: "center", justify: "center", style: {
                            width: '5rem',
                            height: '5rem',
                            backgroundColor: 'rgba(220, 38, 38, 0.1)',
                            borderRadius: '50%',
                            border: '1px solid var(--destructive)',
                        }, children: _jsx(AlertTriangle, { style: {
                                width: '2.5rem',
                                height: '2.5rem',
                                color: 'var(--destructive)',
                            }, "aria-hidden": "true" }) }), _jsxs(Stack, { children: [_jsx("h1", { className: "dndev-text-base", "data-level": "h1", style: {
                                    fontSize: 'var(--font-size-2xl)',
                                    fontWeight: 'var(--font-weight-bold)',
                                    margin: 0,
                                }, children: t('routeError.title', 'Something went wrong') }), _jsx("p", { className: "dndev-text-base", style: {
                                    fontSize: 'var(--font-size-lg)',
                                    color: 'var(--muted-foreground)',
                                    margin: 0,
                                }, children: t('routeError.description', 'We encountered an error while loading this page.') }), _jsx(Alert, { variant: ALERT_VARIANT.INFO, hideIcon: true, children: _jsx("div", { style: { fontSize: 'var(--font-size-sm)', textAlign: 'center' }, children: t('routeError.dataSafe', "Don't worry, your data is safe.") }) })] }), eventId && (_jsxs("code", { style: {
                            padding: 'var(--gap-sm) var(--gap-md)',
                            background: 'var(--muted)',
                            borderRadius: 'var(--radius-full)',
                            fontSize: 'var(--font-size-xs)',
                            fontFamily: 'var(--font-mono)',
                            color: 'var(--foreground)',
                        }, children: [t('routeError.errorId', 'Error ID'), ": ", eventId] })), isDevelopment && errorMessage && (_jsxs(Card, { variant: CARD_VARIANT.MUTED, className: "dndev-w-full", children: [_jsxs(Stack, { direction: "row", align: "center", justify: "between", children: [_jsx("span", { className: "dndev-text-base", style: {
                                            fontSize: 'var(--font-size-sm)',
                                            fontWeight: 'var(--font-weight-semibold)',
                                            color: 'var(--destructive)',
                                        }, children: "Error Message:" }), _jsx(Button, { variant: BUTTON_VARIANT.GHOST, icon: copiedStack ? Check : Copy, onClick: handleCopyStackTrace, disabled: copiedStack, children: copiedStack
                                            ? t('routeError.copied', 'Copied')
                                            : t('routeError.copyDetails', 'Copy Details') })] }), _jsx("pre", { style: {
                                    fontSize: 'var(--font-size-xs)',
                                    fontFamily: 'var(--font-mono)',
                                    wordBreak: 'break-word',
                                    whiteSpace: 'pre-wrap',
                                    color: 'var(--foreground)',
                                    margin: 0,
                                    marginTop: 'var(--gap-sm)',
                                }, children: errorMessage })] })), _jsxs(Stack, { className: "dndev-w-full", children: [_jsx(Button, { variant: BUTTON_VARIANT.DESTRUCTIVE, icon: RotateCw, onClick: handleRetry, fullWidth: true, children: t('routeError.tryAgain', 'Try Again') }), _jsxs(Stack, { direction: "row", justify: "center", children: [_jsx(Link, { path: "/", children: _jsx(Button, { variant: BUTTON_VARIANT.DEFAULT, icon: Home, fullWidth: true, children: t('routeError.goHome', 'Go Home') }) }), _jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, icon: ArrowLeft, onClick: handleGoBack, fullWidth: true, children: t('routeError.goBack', 'Go Back') })] })] }), _jsx("p", { className: "dndev-text-base", style: {
                            fontSize: 'var(--font-size-sm)',
                            color: 'var(--muted-foreground)',
                            margin: 0,
                        }, children: t('routeError.contactSupport', 'If the problem persists, please contact support.') })] }) }) }));
};
export default RouteErrorFallback;
