'use client';

import React, { useState } from 'react';
import { Menu, X } from 'lucide-react';
import { BrandLogo, BrandLogoLink } from '../../brand';
import { ThemeToggle } from '@/features/theme/components/theme-toggle-enhanced';
import { LanguageSwitcher } from '@/features/theme/components/language-switcher';
import { Button } from '@/features/shared/components/ui/button';
import { cn } from '@/shared/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 - Clean x.ai style navigation
 * VI: Navigation Header - Navigation theo phong cách x.ai sạch sẽ
 *
 * Features:
 * - Clean minimal design
 * - Navigation menu items
 * - CTA button
 * - Responsive design
 *
 * @example
 * ```tsx
 * <NavigationHeader />
 * ```
 */
export function NavigationHeader({ className }: { className?: string }) {
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

    const navItems = [
        { name: 'Grok', href: '/chat' },
        { name: 'API', href: '/api' },
        { name: 'Company', href: '/company' },
        { name: 'Careers', href: '/careers' },
        { name: 'News', href: '/news' },
    ];

    return (
        <header
            className={cn(
                'sticky top-0 z-50 w-full border-b border-border-primary',
                'bg-bg-primary/80 backdrop-blur-glass',
                'transition-all duration-normal',
                className
            )}
        >
            <div className="container mx-auto px-6">
                {/* EN: Main header content / VI: Nội dung header chính */}
                <div className="flex h-14 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 space-x-8">
                        {navItems.map((item) => (
                            <a
                                key={item.name}
                                href={item.href}
                                className="text-text-secondary hover:text-text-primary transition-colors text-sm font-medium"
                            >
                                {item.name}
                            </a>
                        ))}
                    </nav>

                    {/* EN: CTA Button / VI: Button CTA */}
                    <div className="hidden md:flex items-center gap-3">
                        <ThemeToggle />
                        <LanguageSwitcher />
                        <Button
                            variant="ghost"
                            size="sm"
                            onPress={() => window.location.href = '/chat'}
                            className="text-text-primary border border-border-primary hover:bg-glass-hover transition-all"
                        >
                            Try Grok
                        </Button>
                    </div>

                    {/* EN: Mobile Menu Button / VI: Button menu mobile */}
                    <button
                        className="md:hidden p-2 hover:bg-glass-hover rounded-md transition-colors"
                        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                        aria-label="Toggle mobile menu"
                        aria-expanded={mobileMenuOpen}
                    >
                        {mobileMenuOpen ? (
                            <X className="h-5 w-5 text-text-primary" />
                        ) : (
                            <Menu className="h-5 w-5 text-text-primary" />
                        )}
                    </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"
                    >
                        <nav className="flex flex-col space-y-4">
                            {navItems.map((item) => (
                                <a
                                    key={item.name}
                                    href={item.href}
                                    className="text-text-secondary hover:text-text-primary transition-colors text-sm font-medium py-2"
                                    onClick={() => setMobileMenuOpen(false)}
                                >
                                    {item.name}
                                </a>
                            ))}
                        </nav>
                        <Button
                            variant="ghost"
                            size="sm"
                            onPress={() => {
                                window.location.href = '/chat';
                                setMobileMenuOpen(false);
                            }}
                            className="text-text-primary border border-border-primary hover:bg-glass-hover transition-all w-full mt-4"
                        >
                            Try Grok
                        </Button>

                        {/* EN: Theme and Language Controls / VI: Controls theme và ngôn ngữ */}
                        <div className="flex items-center gap-3 pt-4 border-t border-border-primary">
                            <ThemeToggle />
                            <LanguageSwitcher />
                        </div>
                    </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>
    );
}
