'use client';
import { jsx as _jsx } from "react/jsx-runtime";
// packages/ui/src/components/auth/AuthHeader.tsx
/**
 * @fileoverview Auth Header Component
 * @description Authentication header component for navigation. Provides user authentication status, login/logout buttons, and user menu with lazy-loaded authentication modal.
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
import { User } from 'lucide-react';
import React, { Suspense, lazy, useState } from 'react';
import { Button, BUTTON_VARIANT, DropdownMenu, Dialog, DISPLAY, } from '@donotdev/components';
import { useTranslation } from '@donotdev/core';
import { useAuthConfig } from '@donotdev/core';
import { getEnabledAuthPartners } from '@donotdev/core';
import { AuthMenu } from './AuthMenu';
import { Link } from '../../routing';
import { useAuthSafe, useAuthVisibility } from '../../utils';
// Lazy load auth components for code splitting; degrade to null if auth pkg missing
const NullComponent = () => null;
function SignInButton({ display, signInLabel, className, style, children, ...props }) {
    return (_jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, icon: User, display: display, tooltip: signInLabel, className: className, style: style, ...props, children: children ?? signInLabel }));
}
// @ts-expect-error - lazy() type doesn't account for graceful degradation fallback
const AuthPartnerButton = lazy(async () => {
    try {
        const module = await import('@donotdev/auth');
        return { default: module.AuthPartnerButton };
    }
    catch {
        return { default: NullComponent };
    }
});
// @ts-expect-error - lazy() type doesn't account for graceful degradation fallback
const MultipleAuthProviders = lazy(async () => {
    try {
        const module = await import('@donotdev/auth');
        return { default: module.MultipleAuthProviders };
    }
    catch {
        return { default: NullComponent };
    }
});
/**
 * Auth header component
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
export const AuthHeader = ({ display = DISPLAY.AUTO, className, style, }) => {
    const { t } = useTranslation('dndev');
    const { shouldHide, isLoading, isReady, isAuthenticated } = useAuthVisibility();
    const authConfig = useAuthConfig();
    const enabled = getEnabledAuthPartners();
    const [dialogOpen, setDialogOpen] = useState(false);
    const loginPath = authConfig.loginPath;
    const signInLabel = t('auth.signIn', { defaultValue: 'Sign In' });
    const loadingLabel = t('auth.loading', { defaultValue: 'Loading...' });
    const hasPasswordProvider = enabled.includes('password') || enabled.includes('emailLink');
    if (shouldHide || !isReady) {
        return null;
    }
    // NOT AUTHENTICATED
    // Button's display prop + CSS container queries handle responsive label visibility
    if (!isAuthenticated) {
        if (loginPath !== undefined) {
            return (_jsx(Link, { path: loginPath, prefetch: true, children: _jsx(SignInButton, { display: display, signInLabel: signInLabel, className: className, style: style }) }));
        }
        const targetProvider = enabled[0];
        // Use Dialog if password/emailLink provider is present (better UX for forms)
        if (hasPasswordProvider) {
            return (_jsx(Dialog, { trigger: _jsx(SignInButton, { display: display, signInLabel: signInLabel, className: className, style: style }), title: signInLabel, open: dialogOpen, onOpenChange: setDialogOpen, "data-content-size": "form", children: _jsx(Suspense, { fallback: _jsx("div", { style: {
                            padding: 'var(--gap-md)',
                            fontSize: 'var(--font-size-sm)',
                            color: 'var(--muted-foreground)',
                        }, children: loadingLabel }), children: _jsx(MultipleAuthProviders, { spacing: "medium", onSuccess: () => setDialogOpen(false) }) }) }));
        }
        // Use DropdownMenu if multiple OAuth providers (no password/emailLink)
        if (enabled.length > 1) {
            return (_jsx(DropdownMenu, { trigger: _jsx(SignInButton, { display: display, signInLabel: signInLabel, className: className, style: style }), children: _jsx(Suspense, { fallback: _jsx("div", { style: {
                            padding: 'var(--gap-md)',
                            fontSize: 'var(--font-size-sm)',
                            color: 'var(--muted-foreground)',
                        }, children: loadingLabel }), children: _jsx(MultipleAuthProviders, { spacing: "tight" }) }) }));
        }
        // Normal case: single non-password provider → use AuthPartnerButton directly
        return (_jsx(Suspense, { fallback: _jsx(SignInButton, { display: display, signInLabel: signInLabel, className: className, style: style, disabled: isLoading, tooltip: isLoading ? loadingLabel : signInLabel, children: isLoading ? loadingLabel : signInLabel }), children: _jsx(AuthPartnerButton, { partnerId: targetProvider, display: display, className: className, style: style }) }));
    }
    // AUTHENTICATED - Delegate to AuthMenu
    return (_jsx(AuthMenu, { display: display, loginPath: loginPath, className: className, style: style }));
};
export default AuthHeader;
