'use client';

import React, { useState } from 'react';
import { Menu, X } from 'lucide-react';
import { BrandLogo, BrandLogoLink } from '../ui/brand-logo';
import { ThemeToggle } from '../ui/theme-toggle-enhanced';
import { LanguageSwitcher } from '../ui/language-switcher';
import { Button } from '../ui/button';
import { cn } from '@/lib/utils';

/**
 * EN: Navigation Header props
 * VI: Props cho Navigation Header
 */
export interface NavigationHeaderProps {
    /** Show CTA button / Hiển thị button CTA */
    showCTA?: boolean;
    /** CTA button text / Text button CTA */
    ctaText?: string;
    /** CTA button onClick / onClick button CTA */
    onCTAClick?: () => void;
    /** Additional CSS classes / CSS classes bổ sung */
    className?: string;
}

/**
 * EN: Navigation Header - Responsive header with brand logo, theme toggle, and language switcher
 * VI: Navigation Header - Header responsive với logo, theme toggle và language switcher
 * 
 * Features:
 * - Sticky header with glassmorphism
 * - Responsive design (mobile menu)
 * - Brand logo integration
 * - Theme toggle
 * - Language switcher
 * - CTA button
 * 
 * @example
 * ```tsx
 * <NavigationHeader 
 *   showCTA 
 *   ctaText="Get Started" 
 *   onCTAClick={() => router.push('/auth/login')}
 * />
 * ```
 */
export function NavigationHeader({
    showCTA = true,
    ctaText = 'Get Started',
    onCTAClick,
    className,
}: NavigationHeaderProps) {
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

    return (
        <header
            className={cn(
                'sticky top-0 z-50 w-full border-b border-white/10',
                'bg-bg-primary/30 backdrop-blur-2xl',
                'transition-all duration-normal',
                className
            )}
        >
            <div className="container mx-auto px-4">
                {/* EN: Main header content / VI: Nội dung header chính */}
                <div className="flex h-16 items-center justify-between">
                    {/* EN: Logo / VI: Logo */}
                    <BrandLogoLink variant="wordmark" size="sm" href="/" />

                    {/* EN: Desktop Navigation / VI: Navigation desktop */}
                    <nav className="hidden md:flex items-center gap-4">
                        <ThemeToggle />
                        <LanguageSwitcher />
                        {showCTA && (
                            <Button
                                variant="brand"
                                size="md"
                                onClick={onCTAClick}
                                className="ml-2"
                            >
                                {ctaText}
                            </Button>
                        )}
                    </nav>

                    {/* EN: Mobile Menu Button / VI: Button menu mobile */}
                    <button
                        className="md:hidden p-2 hover:bg-bg-tertiary rounded-md transition-colors"
                        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                        aria-label="Toggle mobile menu"
                        aria-expanded={mobileMenuOpen}
                    >
                        {mobileMenuOpen ? (
                            <X className="h-6 w-6" />
                        ) : (
                            <Menu className="h-6 w-6" />
                        )}
                    </button>
                </div>

                {/* EN: Mobile Menu / VI: Menu mobile */}
                {mobileMenuOpen && (
                    <div
                        className="md:hidden py-4 space-y-4 border-t border-border-primary animate-fadeIn"
                        role="navigation"
                        aria-label="Mobile navigation"
                    >
                        <div className="flex items-center justify-between gap-4">
                            <ThemeToggle />
                            <LanguageSwitcher />
                        </div>
                        {showCTA && (
                            <Button
                                variant="brand"
                                size="lg"
                                onClick={() => {
                                    onCTAClick?.();
                                    setMobileMenuOpen(false);
                                }}
                                className="w-full"
                            >
                                {ctaText}
                            </Button>
                        )}
                    </div>
                )}
            </div>
        </header>
    );
}

/**
 * EN: Minimal Navigation Header - Simplified version without CTA
 * VI: Navigation Header tối giản - Phiên bản đơn giản không có CTA
 * 
 * @example
 * ```tsx
 * <MinimalNavigationHeader />
 * ```
 */
export function MinimalNavigationHeader({ className }: { className?: string }) {
    return (
        <header
            className={cn(
                'sticky top-0 z-50 w-full border-b border-border-primary',
                'bg-bg-primary/80 backdrop-blur-glass',
                className
            )}
        >
            <div className="container mx-auto px-4">
                <div className="flex h-14 items-center justify-between">
                    <BrandLogo variant="icon" size="sm" />
                    <div className="flex items-center gap-3">
                        <ThemeToggle />
                        <LanguageSwitcher />
                    </div>
                </div>
            </div>
        </header>
    );
}
