import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
// packages/ui/src/routing/AuthGuardFallback.tsx
/**
 * @fileoverview AuthGuardFallback component
 * @description Shows login options when users hit protected routes
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
import { Shield, ArrowLeft, User, Lock, AlertTriangle } from 'lucide-react';
import { Suspense, lazy } from 'react';
import { Card, Button, Separator, Stack, cn } from '@donotdev/components';
import { useTranslation } from '@donotdev/core';
import { useBreakpoint } from '@donotdev/core';
// Platform-specific hooks via conditional exports
import { useLocation, useBack } from '@donotdev/ui/routing/hooks';
import { PageContainer } from '../components/layout/PageContainer';
// Lazy load MultipleAuthProviders to enable code splitting
const MultipleAuthProviders = lazy(() => import('@donotdev/auth').then((module) => ({
    default: module.MultipleAuthProviders,
})));
/**
 * AuthGuardFallback - Shows login options when users hit protected routes
 *
 * Instead of redirecting to a separate login page, this component shows
 * the authentication options directly on the protected route, providing
 * better UX and keeping users in context.
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
export function AuthGuardFallback({ title, description, showBackButton = true, onBack, className = '', }) {
    const { t } = useTranslation(['auth', 'common']);
    const location = useLocation();
    const back = useBack();
    const handleBack = () => {
        if (onBack) {
            onBack();
        }
        else {
            back();
        }
    };
    return (_jsx(PageContainer, { variant: "docs", children: _jsx(Stack, { align: "center", justify: "center", className: cn('dndev-min-h-60', className), style: {
                paddingTop: 'var(--gap-lg)',
                paddingBottom: 'var(--gap-lg)',
            }, children: _jsx(Card, { className: "dndev-w-full", style: {
                    maxWidth: '28rem',
                    border: 'none',
                    boxShadow: 'var(--shadow-xl)',
                }, title: _jsxs(Stack, { children: [_jsx(Stack, { justify: "center", children: _jsx("div", { style: {
                                    borderRadius: '9999px',
                                    backgroundColor: 'color-mix(in oklab, var(--primary) 10%, transparent)',
                                    padding: 'var(--gap-md)',
                                }, children: _jsx(Lock, { className: "dndev-size-touch", style: { color: 'var(--primary)' } }) }) }), _jsx("div", { style: {
                                fontSize: 'var(--font-size-2xl)',
                                fontWeight: 700,
                            }, children: t('auth.fallback.title', 'Authentication Required') }), _jsx("p", { style: { color: 'var(--muted-foreground)' }, children: t('auth.fallback.description', 'Please sign in to access this page') })] }), children: _jsxs(Stack, { children: [_jsxs(Stack, { gap: "large", children: [_jsx("div", { children: _jsx("p", { style: {
                                            fontSize: 'var(--font-size-sm)',
                                            color: 'var(--muted-foreground)',
                                        }, children: t('auth.fallback.chooseProvider') }) }), _jsx(Suspense, { fallback: _jsx("div", { children: "Loading providers..." }), children: _jsx(MultipleAuthProviders, { layout: "vertical", spacing: "tight", fullWidth: true, ariaLabel: t('auth.fallback.authOptions') }) })] }), showBackButton && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx("div", { children: _jsx(Button, { onClick: handleBack, className: "dndev-gap-sm", icon: ArrowLeft, children: t('common.back') }) })] })), _jsxs(Stack, { gap: "tight", style: {
                                fontSize: 'var(--font-size-xs)',
                                color: 'var(--muted-foreground)',
                            }, children: [_jsx("p", { children: t('auth.fallback.secure') }), _jsx("p", { children: t('auth.fallback.terms') })] })] }) }) }) }));
}
export default AuthGuardFallback;
