import { useState } from 'react';
import { Input, Layout, Avatar, Button, Dropdown } from 'antd';
import { SearchOutlined, UserOutlined } from '@ant-design/icons';
import { useAuth } from '@web/src/providers/auth-provider';
import { useNavigate } from 'react-router-dom';
import { UserMenu } from './UserMenu';
import { NavigationMenu } from './NavigationMenu';

const { Header } = Layout;

export function MainHeader() {
    const [searchValue, setSearchValue] = useState('');
    const { isAuthenticated, user } = useAuth();
    const navigate = useNavigate();

    return (
        <Header className="select-none flex items-center justify-center bg-white shadow-md border-b border-gray-100 fixed w-full z-30">
            <div className="w-full max-w-screen-2xl px-4 md:px-6 mx-auto flex items-center justify-between h-full">
                <div className="flex items-center space-x-8">
                    <div
                        onClick={() => navigate('/')}
                        className="text-2xl font-bold bg-gradient-to-r from-primary-600 via-primary-500 to-primary-400 bg-clip-text text-transparent hover:scale-105 transition-transform cursor-pointer"
                    >
                        烽火慕课
                    </div>
                    <NavigationMenu />
                </div>
                <div className="flex items-center space-x-6">
                    <div className="group relative">
                        <Input
                            size="large"
                            prefix={<SearchOutlined className="text-gray-400 group-hover:text-blue-500 transition-colors" />}
                            placeholder="搜索课程"
                            className="w-72 rounded-full"
                            value={searchValue}
                            onChange={(e) => setSearchValue(e.target.value)}
                        />
                    </div>
                    {isAuthenticated ? (
                        <Dropdown
                            overlay={<UserMenu />}
                            trigger={['click']}
                            placement="bottomRight"
                        >
                            <Avatar
                                size="large"
                                className="cursor-pointer hover:scale-105 transition-all bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold"
                            >
                                {(user?.showname || user?.username || '')[0]?.toUpperCase()}
                            </Avatar>
                        </Dropdown>
                    ) : (
                        <Button
                            onClick={() => navigate('/login')}
                            className="flex items-center space-x-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700 border-none shadow-md hover:shadow-lg transition-all"
                            icon={<UserOutlined />}
                        >
                            登录
                        </Button>
                    )}
                </div>
            </div>
        </Header>
    );
}