"use client";

import { useState } from "react";
import { Menu, Search, Bell, HelpCircle, X, ArrowLeft } from "lucide-react";
import { ThemeToggle } from "@/components/ThemeToggle";
import { useLayout } from "@/components/LayoutProvider";
import { usePathname, useRouter } from "next/navigation";
import Image from "next/image";

export default function Header() {
  const { setMobileMenuOpen } = useLayout();
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const pathname = usePathname();
  const router = useRouter();

  // Only show the back button on pages NOT directly reachable via the sidebar
  const sidebarPaths = ['/', '/analysis', '/students', '/settings'];
  const showBack = !sidebarPaths.includes(pathname);

  return (
    <header className="h-20 flex items-center justify-between px-6 lg:px-8 border-b border-outline-variant/30 z-10 bg-background/95 backdrop-blur-sm sticky top-0">
      <div className="flex items-center w-full max-w-xl gap-2">
        <button 
          className="lg:hidden mr-2 shrink-0 text-secondary hover:text-on-surface transition-colors"
          onClick={() => setMobileMenuOpen(true)}
        >
          <Menu className="w-6 h-6" />
        </button>

        {/* Back Button — visible on sub-pages */}
        {showBack && (
          <button
            onClick={() => router.back()}
            className="shrink-0 w-9 h-9 rounded-full flex items-center justify-center hover:bg-surface-container-high text-secondary hover:text-on-surface transition-colors cursor-pointer"
            title="返回上一页"
          >
            <ArrowLeft className="w-5 h-5" />
          </button>
        )}

        {/* Mobile Banner */}
        <div className="lg:hidden flex-1 flex items-center">
          <Image 
            src="/banner.png" 
            alt="SEEC Analysis Banner" 
            width={120} 
            height={30} 
            className="object-contain"
            priority
          />
        </div>
        
        {/* Desktop Search (hidden on mobile) */}
        <div className="relative w-full hidden lg:block">
          <span className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <Search className="w-5 h-5 text-outline" />
          </span>
          <input
            className="w-full py-2.5 pl-10 pr-4 bg-surface-container-high border-none rounded-full focus:ring-1 focus:ring-primary text-sm placeholder-outline text-on-surface transition-all shadow-inner outline-none focus:outline-none"
            placeholder="搜索能力指标、学生名单..."
            type="text"
          />
        </div>
        
        {/* Mobile Search Button */}
        <button 
          className="lg:hidden p-2 text-secondary hover:text-on-surface"
          onClick={() => setIsSearchOpen(true)}
        >
          <Search className="w-5 h-5" />
        </button>
      </div>

      {/* Mobile Expanded Search Overlay */}
      {isSearchOpen && (
        <div className="absolute inset-y-0 left-0 right-0 bg-background/95 backdrop-blur-sm z-20 flex items-center px-4 lg:hidden">
          <div className="relative w-full flex items-center">
            <span className="absolute left-3 flex items-center pointer-events-none">
              <Search className="w-5 h-5 text-outline" />
            </span>
            <input
              autoFocus
              className="w-full py-2 pl-10 pr-10 bg-surface-container-high border-none rounded-full focus:ring-1 focus:ring-primary text-sm placeholder-outline text-on-surface outline-none"
              placeholder="搜索能力指标、学生名单..."
              type="text"
            />
            <button 
              className="absolute right-3 p-1 rounded-full hover:bg-surface-variant text-secondary"
              onClick={() => setIsSearchOpen(false)}
            >
              <X className="w-4 h-4" />
            </button>
          </div>
        </div>
      )}
      <div className="flex items-center space-x-3">
        <ThemeToggle />
        <button className="p-2 rounded-full hover:bg-surface-container-high text-secondary hover:text-on-surface transition-colors relative">
          <Bell className="w-6 h-6" />
          <span className="absolute top-2.5 right-2.5 h-2 w-2 bg-chart-2 rounded-full ring-2 ring-background"></span>
        </button>
        <button className="p-2 rounded-full hover:bg-surface-container-high text-secondary hover:text-on-surface transition-colors">
          <HelpCircle className="w-6 h-6" />
        </button>
      </div>
    </header>
  );
}