'use client';

import { GlobalFilterDialog } from "@/components/common/global-filter-dialog";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { SidebarTrigger } from "@/components/ui/sidebar";
import { useAnalysisYear } from "@/contexts/AnalysisYearContext";
import { useFilterStore } from "@/store/filter-store";
import { useAuthStore } from "@/store/auth-store";
import { LogOut, User } from "lucide-react";
import { useRouter } from "next/navigation";

export function SiteHeader() {
  const { user, logout } = useAuthStore();
  const router = useRouter();
  const { filters } = useFilterStore();
  const { selectedYear, setSelectedYear, availableYears } = useAnalysisYear();

  const handleLogout = async () => {
    await logout();
    router.push('/login');
  };

  // 활성화된 필터 개수 계산
  const geneCount = filters.selectedGenes.length;
  const traitCount = filters.selectedTraits?.length || 0;

  return (
    <>
      <header className="sticky top-0 z-50 w-full bg-white/80 backdrop-blur-sm border-b border-slate-200">
        <div className="flex h-14 md:h-16 items-center justify-between gap-2 md:gap-3 px-3 md:px-4 lg:px-6">
          {/* 왼쪽 영역 */}
          <div className="flex items-center gap-2 md:gap-3 min-w-0 overflow-hidden">
            <SidebarTrigger className="h-9 w-9 md:h-10 md:w-10 flex-shrink-0" />
          </div>

          {/* 오른쪽 영역 */}
          <div className="flex items-center gap-2 md:gap-3 flex-shrink-0">
            {/* 연도 선택 - 반응형 개선 */}
            <Select
              value={selectedYear.toString()}
              onValueChange={(value) => setSelectedYear(Number(value))}
            >
              <SelectTrigger className="w-[80px] md:w-[120px] h-8 md:h-9 text-xs md:text-base font-semibold bg-slate-50 hover:bg-slate-100 border-slate-200 px-2 md:px-3">
                <SelectValue>
                  <span className="font-medium">{selectedYear}</span>
                </SelectValue>
              </SelectTrigger>
              <SelectContent>
                {availableYears.map((year) => (
                  <SelectItem key={year} value={year.toString()} className="text-sm md:text-base">
                    {year}년
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            {/* 필터 버튼 */}
            <GlobalFilterDialog geneCount={geneCount} traitCount={traitCount} />

            {/* 사용자 메뉴 */}
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-9 w-9 md:h-10 md:w-auto md:gap-2 md:px-3 rounded-full md:rounded-lg p-0 md:p-2 hover:bg-slate-100">
                  <Avatar className="h-8 w-8 md:h-9 md:w-9">
                    <AvatarImage alt={user?.userName} />
                    <AvatarFallback className="text-xs md:text-sm font-bold">
                      {user?.userName?.charAt(0)?.toUpperCase() || 'U'}
                    </AvatarFallback>
                  </Avatar>
                  <span className="hidden md:inline text-sm md:text-base font-semibold text-slate-900">{user?.userName || '사용자'}</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-52 md:w-56">
                <DropdownMenuLabel className="text-sm md:text-base font-semibold">{user?.userName || '사용자'}</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem disabled className="text-sm md:text-base">
                  <User className="mr-2 h-4 w-4 md:h-5 md:w-5" />
                  <span>마이페이지</span>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={handleLogout} className="text-sm md:text-base text-red-600 font-medium">
                  <LogOut className="mr-2 h-4 w-4 md:h-5 md:w-5" />
                  <span>로그아웃</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </header>
    </>
  )
}
