// ================================================================
// 2. PERIODIC EVALUATIONS FILTER SHEET
// ================================================================

"use client"

import { useEffect, useTransition, useState, useRef } from "react"
import { useRouter, useParams } from "next/navigation"
import { z } from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Search, X } from "lucide-react"
import { customAlphabet } from "nanoid"
import { parseAsStringEnum, useQueryState } from "nuqs"

import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { cn } from "@/lib/utils"
import { getFiltersStateParser } from "@/lib/parsers"

// nanoid 생성기
const generateId = customAlphabet("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", 6)

// 정기평가 필터 스키마 정의
const periodicEvaluationFilterSchema = z.object({
  evaluationYear: z.string().optional(),
  evaluationPeriod: z.string().optional(),
  division: z.string().optional(),
  status: z.string().optional(),
  domesticForeign: z.string().optional(),
  materialType: z.string().optional(),
  vendorCode: z.string().optional(),
  vendorName: z.string().optional(),
  documentsSubmitted: z.string().optional(),
  evaluationGrade: z.string().optional(),
  finalGrade: z.string().optional(),
  minTotalScore: z.string().optional(),
  maxTotalScore: z.string().optional(),
})

// 옵션 정의
const evaluationPeriodOptions = [
  { value: "상반기", label: "상반기" },
  { value: "하반기", label: "하반기" },
  { value: "연간", label: "연간" },
]

const divisionOptions = [
  { value: "PLANT", label: "해양" },
  { value: "SHIP", label: "조선" },
]

const statusOptions = [
  { value: "PENDING_SUBMISSION", label: "제출대기" },
  { value: "SUBMITTED", label: "제출완료" },
  { value: "IN_REVIEW", label: "검토중" },
  { value: "REVIEW_COMPLETED", label: "검토완료" },
  { value: "FINALIZED", label: "최종확정" },
]

const domesticForeignOptions = [
  { value: "DOMESTIC", label: "내자" },
  { value: "FOREIGN", label: "외자" },
]

const materialTypeOptions = [
  { value: "EQUIPMENT", label: "기자재" },
  { value: "BULK", label: "벌크" },
  { value: "EQUIPMENT_BULK", label: "기자재/벌크" },
]

const documentsSubmittedOptions = [
  { value: "true", label: "제출완료" },
  { value: "false", label: "미제출" },
]

const gradeOptions = [
  { value: "S", label: "S등급" },
  { value: "A", label: "A등급" },
  { value: "B", label: "B등급" },
  { value: "C", label: "C등급" },
  { value: "D", label: "D등급" },
]

type PeriodicEvaluationFilterFormValues = z.infer<typeof periodicEvaluationFilterSchema>

interface PeriodicEvaluationFilterSheetProps {
  isOpen: boolean;
  onClose: () => void;
  onSearch?: () => void;
  isLoading?: boolean;
}

export function PeriodicEvaluationFilterSheet({
  isOpen,
  onClose,
  onSearch,
  isLoading = false
}: PeriodicEvaluationFilterSheetProps) {
  const router = useRouter()
  const params = useParams();

  const [isPending, startTransition] = useTransition()
  const [isInitializing, setIsInitializing] = useState(false)
  const lastAppliedFilters = useRef<string>("")

  // nuqs로 URL 상태 관리
  const [filters, setFilters] = useQueryState(
    "basicFilters",
    getFiltersStateParser().withDefault([])
  )

  const [joinOperator, setJoinOperator] = useQueryState(
    "basicJoinOperator",
    parseAsStringEnum(["and", "or"]).withDefault("and")
  )

  // 폼 상태 초기화
  const form = useForm<PeriodicEvaluationFilterFormValues>({
    resolver: zodResolver(periodicEvaluationFilterSchema),
    defaultValues: {
      evaluationYear: new Date().getFullYear().toString(),
      evaluationPeriod: "",
      division: "",
      status: "",
      domesticForeign: "",
      materialType: "",
      vendorCode: "",
      vendorName: "",
      documentsSubmitted: "",
      evaluationGrade: "",
      finalGrade: "",
      minTotalScore: "",
      maxTotalScore: "",
    },
  })

  // URL 필터에서 초기 폼 상태 설정
  useEffect(() => {
    const currentFiltersString = JSON.stringify(filters);

    if (isOpen && filters && filters.length > 0 && currentFiltersString !== lastAppliedFilters.current) {
      setIsInitializing(true);

      const formValues = { ...form.getValues() };
      let formUpdated = false;

      filters.forEach(filter => {
        if (filter.id in formValues) {
          // @ts-ignore - 동적 필드 접근
          formValues[filter.id] = filter.value;
          formUpdated = true;
        }
      });

      if (formUpdated) {
        form.reset(formValues);
        lastAppliedFilters.current = currentFiltersString;
      }

      setIsInitializing(false);
    }
  }, [filters, isOpen])

  // 현재 적용된 필터 카운트
  const getActiveFilterCount = () => {
    return filters?.length || 0
  }

  // 폼 제출 핸들러
  async function onSubmit(data: PeriodicEvaluationFilterFormValues) {
    if (isInitializing) return;

    startTransition(async () => {
      try {
        const newFilters = []

        if (data.evaluationYear?.trim()) {
          newFilters.push({
            id: "evaluationYear",
            value: parseInt(data.evaluationYear.trim()),
            type: "number",
            operator: "eq",
            rowId: generateId()
          })
        }

        if (data.evaluationPeriod?.trim()) {
          newFilters.push({
            id: "evaluationPeriod",
            value: data.evaluationPeriod.trim(),
            type: "select",
            operator: "eq",
            rowId: generateId()
          })
        }

        if (data.division?.trim()) {
          newFilters.push({
            id: "division",
            value: data.division.trim(),
            type: "select",
            operator: "eq",
            rowId: generateId()
          })
        }

        if (data.status?.trim()) {
          newFilters.push({
            id: "status",
            value: data.status.trim(),
            type: "select",
            operator: "eq",
            rowId: generateId()
          })
        }

        if (data.domesticForeign?.trim()) {
          newFilters.push({
            id: "domesticForeign",
            value: data.domesticForeign.trim(),
            type: "select",
            operator: "eq",
            rowId: generateId()
          })
        }

        if (data.materialType?.trim()) {
          newFilters.push({
            id: "materialType",
            value: data.materialType.trim(),
            type: "select",
            operator: "eq",
            rowId: generateId()
          })
        }

        if (data.vendorCode?.trim()) {
          newFilters.push({
            id: "vendorCode",
            value: data.vendorCode.trim(),
            type: "text",
            operator: "iLike",
            rowId: generateId()
          })
        }

        if (data.vendorName?.trim()) {
          newFilters.push({
            id: "vendorName",
            value: data.vendorName.trim(),
            type: "text",
            operator: "iLike",
            rowId: generateId()
          })
        }

        if (data.documentsSubmitted?.trim()) {
          newFilters.push({
            id: "documentsSubmitted",
            value: data.documentsSubmitted.trim() === "true",
            type: "boolean",
            operator: "eq",
            rowId: generateId()
          })
        }

        if (data.evaluationGrade?.trim()) {
          newFilters.push({
            id: "evaluationGrade",
            value: data.evaluationGrade.trim(),
            type: "select",
            operator: "eq",
            rowId: generateId()
          })
        }

        if (data.finalGrade?.trim()) {
          newFilters.push({
            id: "finalGrade",
            value: data.finalGrade.trim(),
            type: "select",
            operator: "eq",
            rowId: generateId()
          })
        }

        if (data.minTotalScore?.trim()) {
          newFilters.push({
            id: "totalScore",
            value: parseFloat(data.minTotalScore.trim()),
            type: "number",
            operator: "gte",
            rowId: generateId()
          })
        }

        if (data.maxTotalScore?.trim()) {
          newFilters.push({
            id: "totalScore",
            value: parseFloat(data.maxTotalScore.trim()),
            type: "number",
            operator: "lte",
            rowId: generateId()
          })
        }

        // URL 업데이트
        const currentUrl = new URL(window.location.href);
        const params = new URLSearchParams(currentUrl.search);
        
        params.delete('basicFilters');
        params.delete('basicJoinOperator');
        params.delete('page');
        
        if (newFilters.length > 0) {
          params.set('basicFilters', JSON.stringify(newFilters));
          params.set('basicJoinOperator', joinOperator);
        }
        
        params.set('page', '1');
        
        const newUrl = `${currentUrl.pathname}?${params.toString()}`;
        window.location.href = newUrl;

        lastAppliedFilters.current = JSON.stringify(newFilters);

        if (onSearch) {
          onSearch();
        }
      } catch (error) {
        console.error("정기평가 필터 적용 오류:", error);
      }
    })
  }

  // 필터 초기화 핸들러
  async function handleReset() {
    try {
      setIsInitializing(true);

      form.reset({
        evaluationYear: new Date().getFullYear().toString(),
        evaluationPeriod: "",
        division: "",
        status: "",
        domesticForeign: "",
        materialType: "",
        vendorCode: "",
        vendorName: "",
        documentsSubmitted: "",
        evaluationGrade: "",
        finalGrade: "",
        minTotalScore: "",
        maxTotalScore: "",
      });

      const currentUrl = new URL(window.location.href);
      const params = new URLSearchParams(currentUrl.search);

      params.delete('basicFilters');
      params.delete('basicJoinOperator');
      params.set('page', '1');

      const newUrl = `${currentUrl.pathname}?${params.toString()}`;
      window.location.href = newUrl;

      lastAppliedFilters.current = "";
      setIsInitializing(false);
    } catch (error) {
      console.error("정기평가 필터 초기화 오류:", error);
      setIsInitializing(false);
    }
  }

  if (!isOpen) {
    return null;
  }

  return (
    <div className="flex flex-col h-full max-h-full bg-[#F5F7FB] px-6 sm:px-8">
      {/* Filter Panel Header */}
      <div className="flex items-center justify-between px-6 min-h-[60px] shrink-0">
        <h3 className="text-lg font-semibold whitespace-nowrap">정기평가 검색 필터</h3>
        <div className="flex items-center gap-2">
          {getActiveFilterCount() > 0 && (
            <Badge variant="secondary" className="px-2 py-1">
              {getActiveFilterCount()}개 필터 적용됨
            </Badge>
          )}
        </div>
      </div>

      {/* Join Operator Selection */}
      <div className="px-6 shrink-0">
        <label className="text-sm font-medium">조건 결합 방식</label>
        <Select
          value={joinOperator}
          onValueChange={(value: "and" | "or") => setJoinOperator(value)}
          disabled={isInitializing}
        >
          <SelectTrigger className="h-8 w-[180px] mt-2 bg-white">
            <SelectValue placeholder="조건 결합 방식" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="and">모든 조건 충족 (AND)</SelectItem>
            <SelectItem value="or">하나라도 충족 (OR)</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col h-full min-h-0">
          {/* Scrollable content area */}
          <div className="flex-1 min-h-0 overflow-y-auto px-6 pb-4">
            <div className="space-y-4 pt-2">
              
              {/* 평가년도 */}
              <FormField
                control={form.control}
                name="evaluationYear"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>평가년도</FormLabel>
                    <FormControl>
                      <div className="relative">
                        <Input
                          type="number"
                          placeholder="평가년도 입력"
                          {...field}
                          className={cn(field.value && "pr-8", "bg-white")}
                          disabled={isInitializing}
                        />
                        {field.value && (
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            className="absolute right-0 top-0 h-full px-2"
                            onClick={(e) => {
                              e.stopPropagation();
                              form.setValue("evaluationYear", "");
                            }}
                            disabled={isInitializing}
                          >
                            <X className="size-3.5" />
                          </Button>
                        )}
                      </div>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 평가기간 */}
              <FormField
                control={form.control}
                name="evaluationPeriod"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>평가기간</FormLabel>
                    <Select
                      value={field.value}
                      onValueChange={field.onChange}
                      disabled={isInitializing}
                    >
                      <FormControl>
                        <SelectTrigger className={cn(field.value && "pr-8", "bg-white")}>
                          <div className="flex justify-between w-full">
                            <SelectValue placeholder="평가기간 선택" />
                            {field.value && (
                              <Button
                                type="button"
                                variant="ghost"
                                size="icon"
                                className="h-4 w-4 -mr-2"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  form.setValue("evaluationPeriod", "");
                                }}
                                disabled={isInitializing}
                              >
                                <X className="size-3" />
                              </Button>
                            )}
                          </div>
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {evaluationPeriodOptions.map(option => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 구분 */}
              <FormField
                control={form.control}
                name="division"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>구분</FormLabel>
                    <Select
                      value={field.value}
                      onValueChange={field.onChange}
                      disabled={isInitializing}
                    >
                      <FormControl>
                        <SelectTrigger className={cn(field.value && "pr-8", "bg-white")}>
                          <div className="flex justify-between w-full">
                            <SelectValue placeholder="구분 선택" />
                            {field.value && (
                              <Button
                                type="button"
                                variant="ghost"
                                size="icon"
                                className="h-4 w-4 -mr-2"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  form.setValue("division", "");
                                }}
                                disabled={isInitializing}
                              >
                                <X className="size-3" />
                              </Button>
                            )}
                          </div>
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {divisionOptions.map(option => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 진행상태 */}
              <FormField
                control={form.control}
                name="status"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>진행상태</FormLabel>
                    <Select
                      value={field.value}
                      onValueChange={field.onChange}
                      disabled={isInitializing}
                    >
                      <FormControl>
                        <SelectTrigger className={cn(field.value && "pr-8", "bg-white")}>
                          <div className="flex justify-between w-full">
                            <SelectValue placeholder="진행상태 선택" />
                            {field.value && (
                              <Button
                                type="button"
                                variant="ghost"
                                size="icon"
                                className="h-4 w-4 -mr-2"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  form.setValue("status", "");
                                }}
                                disabled={isInitializing}
                              >
                                <X className="size-3" />
                              </Button>
                            )}
                          </div>
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {statusOptions.map(option => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 내외자 구분 */}
              <FormField
                control={form.control}
                name="domesticForeign"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>내외자 구분</FormLabel>
                    <Select
                      value={field.value}
                      onValueChange={field.onChange}
                      disabled={isInitializing}
                    >
                      <FormControl>
                        <SelectTrigger className={cn(field.value && "pr-8", "bg-white")}>
                          <div className="flex justify-between w-full">
                            <SelectValue placeholder="내외자 구분 선택" />
                            {field.value && (
                              <Button
                                type="button"
                                variant="ghost"
                                size="icon"
                                className="h-4 w-4 -mr-2"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  form.setValue("domesticForeign", "");
                                }}
                                disabled={isInitializing}
                              >
                                <X className="size-3" />
                              </Button>
                            )}
                          </div>
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {domesticForeignOptions.map(option => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 자재구분 */}
              <FormField
                control={form.control}
                name="materialType"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>자재구분</FormLabel>
                    <Select
                      value={field.value}
                      onValueChange={field.onChange}
                      disabled={isInitializing}
                    >
                      <FormControl>
                        <SelectTrigger className={cn(field.value && "pr-8", "bg-white")}>
                          <div className="flex justify-between w-full">
                            <SelectValue placeholder="자재구분 선택" />
                            {field.value && (
                              <Button
                                type="button"
                                variant="ghost"
                                size="icon"
                                className="h-4 w-4 -mr-2"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  form.setValue("materialType", "");
                                }}
                                disabled={isInitializing}
                              >
                                <X className="size-3" />
                              </Button>
                            )}
                          </div>
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {materialTypeOptions.map(option => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 벤더 코드 */}
              <FormField
                control={form.control}
                name="vendorCode"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>벤더 코드</FormLabel>
                    <FormControl>
                      <div className="relative">
                        <Input
                          placeholder="벤더 코드 입력"
                          {...field}
                          className={cn(field.value && "pr-8", "bg-white")}
                          disabled={isInitializing}
                        />
                        {field.value && (
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            className="absolute right-0 top-0 h-full px-2"
                            onClick={(e) => {
                              e.stopPropagation();
                              form.setValue("vendorCode", "");
                            }}
                            disabled={isInitializing}
                          >
                            <X className="size-3.5" />
                          </Button>
                        )}
                      </div>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 벤더명 */}
              <FormField
                control={form.control}
                name="vendorName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>벤더명</FormLabel>
                    <FormControl>
                      <div className="relative">
                        <Input
                          placeholder="벤더명 입력"
                          {...field}
                          className={cn(field.value && "pr-8", "bg-white")}
                          disabled={isInitializing}
                        />
                        {field.value && (
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            className="absolute right-0 top-0 h-full px-2"
                            onClick={(e) => {
                              e.stopPropagation();
                              form.setValue("vendorName", "");
                            }}
                            disabled={isInitializing}
                          >
                            <X className="size-3.5" />
                          </Button>
                        )}
                      </div>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 문서제출여부 */}
              <FormField
                control={form.control}
                name="documentsSubmitted"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>문서제출여부</FormLabel>
                    <Select
                      value={field.value}
                      onValueChange={field.onChange}
                      disabled={isInitializing}
                    >
                      <FormControl>
                        <SelectTrigger className={cn(field.value && "pr-8", "bg-white")}>
                          <div className="flex justify-between w-full">
                            <SelectValue placeholder="문서제출여부 선택" />
                            {field.value && (
                              <Button
                                type="button"
                                variant="ghost"
                                size="icon"
                                className="h-4 w-4 -mr-2"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  form.setValue("documentsSubmitted", "");
                                }}
                                disabled={isInitializing}
                              >
                                <X className="size-3" />
                              </Button>
                            )}
                          </div>
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {documentsSubmittedOptions.map(option => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 평가등급 */}
              <FormField
                control={form.control}
                name="evaluationGrade"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>평가등급</FormLabel>
                    <Select
                      value={field.value}
                      onValueChange={field.onChange}
                      disabled={isInitializing}
                    >
                      <FormControl>
                        <SelectTrigger className={cn(field.value && "pr-8", "bg-white")}>
                          <div className="flex justify-between w-full">
                            <SelectValue placeholder="평가등급 선택" />
                            {field.value && (
                              <Button
                                type="button"
                                variant="ghost"
                                size="icon"
                                className="h-4 w-4 -mr-2"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  form.setValue("evaluationGrade", "");
                                }}
                                disabled={isInitializing}
                              >
                                <X className="size-3" />
                              </Button>
                            )}
                          </div>
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {gradeOptions.map(option => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 최종등급 */}
              <FormField
                control={form.control}
                name="finalGrade"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>최종등급</FormLabel>
                    <Select
                      value={field.value}
                      onValueChange={field.onChange}
                      disabled={isInitializing}
                    >
                      <FormControl>
                        <SelectTrigger className={cn(field.value && "pr-8", "bg-white")}>
                          <div className="flex justify-between w-full">
                            <SelectValue placeholder="최종등급 선택" />
                            {field.value && (
                              <Button
                                type="button"
                                variant="ghost"
                                size="icon"
                                className="h-4 w-4 -mr-2"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  form.setValue("finalGrade", "");
                                }}
                                disabled={isInitializing}
                              >
                                <X className="size-3" />
                              </Button>
                            )}
                          </div>
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {gradeOptions.map(option => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 점수 범위 */}
              <div className="grid grid-cols-2 gap-2">
                <FormField
                  control={form.control}
                  name="minTotalScore"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>최소점수</FormLabel>
                      <FormControl>
                        <div className="relative">
                          <Input
                            type="number"
                            step="0.1"
                            placeholder="최소"
                            {...field}
                            className={cn(field.value && "pr-8", "bg-white")}
                            disabled={isInitializing}
                          />
                          {field.value && (
                            <Button
                              type="button"
                              variant="ghost"
                              size="icon"
                              className="absolute right-0 top-0 h-full px-2"
                              onClick={(e) => {
                                e.stopPropagation();
                                form.setValue("minTotalScore", "");
                              }}
                              disabled={isInitializing}
                            >
                              <X className="size-3.5" />
                            </Button>
                          )}
                        </div>
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="maxTotalScore"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>최대점수</FormLabel>
                      <FormControl>
                        <div className="relative">
                          <Input
                            type="number"
                            step="0.1"
                            placeholder="최대"
                            {...field}
                            className={cn(field.value && "pr-8", "bg-white")}
                            disabled={isInitializing}
                          />
                          {field.value && (
                            <Button
                              type="button"
                              variant="ghost"
                              size="icon"
                              className="absolute right-0 top-0 h-full px-2"
                              onClick={(e) => {
                                e.stopPropagation();
                                form.setValue("maxTotalScore", "");
                              }}
                              disabled={isInitializing}
                            >
                              <X className="size-3.5" />
                            </Button>
                          )}
                        </div>
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

            </div>
          </div>

          {/* Fixed buttons at bottom */}
          <div className="p-4 shrink-0">
            <div className="flex gap-2 justify-end">
              <Button
                type="button"
                variant="outline"
                onClick={handleReset}
                disabled={isPending || getActiveFilterCount() === 0 || isInitializing}
                className="px-4"
              >
                초기화
              </Button>
              <Button
                type="submit"
                variant="samsung"
                disabled={isPending || isLoading || isInitializing}
                className="px-4"
              >
                <Search className="size-4 mr-2" />
                {isPending || isLoading ? "조회 중..." : "조회"}
              </Button>
            </div>
          </div>
        </form>
      </Form>
    </div>
  )
}