import { Input, Layout, Avatar, Button, Dropdown } from "antd";
import {
	EditFilled,
	PlusOutlined,
	SearchOutlined,
	UserOutlined,
} from "@ant-design/icons";
import { useAuth } from "@web/src/providers/auth-provider";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { UserMenu } from "./UserMenu/UserMenu";
import { NavigationMenu } from "./NavigationMenu";
import { useMainContext } from "./MainProvider";
import { Header } from "antd/es/layout/layout";

export function MainHeader() {
	const { isAuthenticated, user } = useAuth();
	const { id } = useParams();
	const navigate = useNavigate();
	const { searchValue, setSearchValue } = useMainContext();

	return (
		<div 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-3xl 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>
			<div className=" flex justify-end gap-4 mr-2">
				<Input
					size="large"
					prefix={
						<SearchOutlined className="text-gray-400 group-hover:text-blue-500 transition-colors" />
					}
					placeholder="搜索课程"
					className="w-96 rounded-full"
					value={searchValue}
					onChange={(e) => setSearchValue(e.target.value)}
					onPressEnter={(e) => {
						if (
							!window.location.pathname.startsWith("/courses/") &&
							!window.location.pathname.startsWith("/my") &&
							!window.location.pathname.startsWith("/path")
						) {
							navigate(`/courses/`);
							window.scrollTo({
								top: 0,
								behavior: "smooth",
							});
						}
					}}
				/>
				<div className="flex items-center gap-4">
					{isAuthenticated && (
						<>
							<Button
								onClick={() => {
									const url = id
										? `/course/${id}/editor`
										: "/course/editor";
									navigate(url);
								}}
								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={<EditFilled />}>
								{id ? "编辑课程" : "创建课程"}
							</Button>
						</>
					)}
					{isAuthenticated && (
						<Button
							onClick={() => {
								window.location.href = "/path/editor";
							}}
							icon={<PlusOutlined></PlusOutlined>}>
							创建学习路径
						</Button>
					)}
					{isAuthenticated ? (
						<UserMenu />
					) : (
						<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>
		</div>
	);
}
