import { Link, NavLink, useNavigate } from "react-router-dom";
import { memo, useMemo } from "react";
import { SearchBar } from "./SearchBar";
import Navigation from "./navigation";
import { useAuth } from "@web/src/providers/auth-provider";
import { UserOutlined } from "@ant-design/icons";
import { UserMenu } from "../element/usermenu/usermenu";
import { api, useAppConfig } from "@nice/client";
import { env } from "@web/src/env";

export const Header = memo(function Header() {
	const { isAuthenticated } = useAuth();
	const { logo } = useAppConfig();
	const { data: logoRes, isLoading } = api.resource.findFirst.useQuery(
		{
			where: {
				fileId: logo,
			},
			select: {
				id: true,
				url: true,
			},
		},
		{
			enabled: !!logo,
		}
	);
	const logoUrl: string = useMemo(() => {
		return `http://${env.SERVER_IP}/uploads/${logoRes?.url}`;
	}, [logoRes]);
	return (
		<header className="sticky top-0 z-50  bg-gradient-to-br from-primary-500 to-primary-800  text-white shadow-lg">
			<div className=" mx-auto px-4">
				<div className="py-2">
					<div className="flex items-center justify-between gap-4">
						<div className="">
							{/** 在这里放置logo */}
							{isLoading ? (
								<div className="w-48 h-24 bg-gray-300 animate-pulse"></div>
							) : (
								logoUrl && (
									<img
										src={logoUrl}
										alt="Logo"
										style={{ width: 192, height: 72 }}
										className=" w-full h-full"
									/>
								)
							)}
						</div>
						<div className="flex-grow max-w-2xl">
							<SearchBar />
						</div>
						<div className="flex items-center ">
							{!isAuthenticated ? (
								<Link
									to="/auth"
									className="group flex items-center gap-2 rounded-lg 
bg-[#00539B]/90 px-5 py-2.5 font-medium
shadow-lg transition-all duration-300 
hover:-translate-y-0.5 hover:bg-[#0063B8] 
hover:shadow-xl hover:shadow-[#00539B]/30
focus:outline-none focus:ring-2 
focus:ring-[#8EADD4] focus:ring-offset-2
focus:ring-offset-[#13294B]"
									aria-label="Login">
									<UserOutlined
										className="h-5 w-5 transition-transform 
    group-hover:scale-110 group-hover:rotate-12"></UserOutlined>

									<span>登录</span>
								</Link>
							) : (
								<UserMenu />
							)}
						</div>
					</div>
				</div>
				<Navigation />
			</div>
		</header>
	);
});