"use client";

import { useSession } from "next-auth/react";
import { Search, Bell } from "lucide-react";
import { AlertBell } from "@/components/layout/alert-bell";

export function Header() {
  const { data: session } = useSession();
  const userName = session?.user?.name || session?.user?.email || "用户";
  const initials = userName.slice(0, 2).toUpperCase();

  return (
    <header className="flex h-16 items-center justify-between border-b border-gray-200 bg-white px-6">
      {/* Left: Search */}
      <div className="relative w-72">
        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
        <input
          type="text"
          placeholder="搜索..."
          className="h-10 w-full rounded-full bg-gray-100 pl-10 pr-4 text-sm text-gray-700 placeholder-gray-400 outline-none transition-colors duration-150 focus:bg-gray-50 focus:ring-2 focus:ring-emerald-500/20"
        />
      </div>

      {/* Right: Actions */}
      <div className="flex items-center gap-4">
        {/* Notification bell */}
        <AlertBell />

        {/* User avatar + name */}
        <div className="flex items-center gap-2.5">
          <div className="flex h-9 w-9 items-center justify-center rounded-full bg-emerald-100 text-sm font-semibold text-emerald-700">
            {initials}
          </div>
          <span className="text-sm font-medium text-gray-700">{userName}</span>
        </div>
      </div>
    </header>
  );
}