import { useContext, useState } from "react";
import { Input, Layout, Avatar, Button, Dropdown } from "antd";
import {
	EditFilled,
	HomeOutlined,
	SearchOutlined,
	UserOutlined,
} from "@ant-design/icons";
import { useAuth } from "@web/src/providers/auth-provider";
import { useNavigate } from "react-router-dom";
import { UserMenu } from "@web/src/app/main/layout/UserMenu/UserMenu";
import { CourseDetailContext } from "../CourseDetailContext";

const { Header } = Layout;

export function CourseDetailHeader() {
	const [searchValue, setSearchValue] = useState("");
	const { isAuthenticated, user } = useAuth();
	const navigate = useNavigate();
	const { course } = useContext(CourseDetailContext);

	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-2">
					<HomeOutlined
						onClick={() => {
							navigate("/");
						}}
						className="text-2xl text-primary-500 hover:scale-105 cursor-pointer"
					/>

					<div className="text-2xl font-bold bg-gradient-to-r from-primary-600 via-primary-500 to-primary-400 bg-clip-text text-transparent transition-transform ">
						{course?.title}
					</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 && (
						<>
							<Button
								onClick={() => navigate("/course/editor")}
								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 />}>
								创建课程
							</Button>
						</>
					)}
					{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>
	);
}