"use client";

import React from 'react';
import { Search } from 'lucide-react';

interface FiltersProps {
  selectedYear: number;
  selectedQuarter: string;
  searchTerm: string;
  onYearChange: (year: number) => void;
  onQuarterChange: (quarter: string) => void;
  onSearchChange: (term: string) => void;
}

export const Filters = ({
  selectedYear,
  selectedQuarter,
  searchTerm,
  onYearChange,
  onQuarterChange,
  onSearchChange,
}: FiltersProps) => {
  const quarters = ['전체', '1분기', '2분기', '3분기', '4분기'];
  const years = [2025, 2024, 2023, 2022, 2021];

  return (
    <div className="w-full bg-white p-4 rounded-lg mb-4 shadow-sm flex flex-wrap items-center gap-4">
      {/* Year Selection */}
      <div className="flex flex-col gap-1">
        <span className="text-xs font-semibold text-gray-500">년도</span>
        <div className="w-32">
          <select
            value={selectedYear}
            onChange={(e) => onYearChange(parseInt(e.target.value))}
            className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
          >
            {years.map((year) => (
              <option key={year} value={year}>{year}년</option>
            ))}
          </select>
        </div>
      </div>

      {/* Quarter Selection */}
      <div className="flex flex-col gap-1">
        <span className="text-xs font-semibold text-gray-500">분기</span>
        <div className="flex bg-gray-100 rounded-md p-1 gap-1">
          {quarters.map((q) => (
            <button
              key={q}
              onClick={() => onQuarterChange(q)}
              className={`px-4 py-1.5 text-sm rounded-sm transition-all ${
                selectedQuarter === q
                  ? 'bg-blue-600 text-white shadow-sm'
                  : 'text-gray-600 hover:bg-gray-200'
              }`}
            >
              {q}
            </button>
          ))}
        </div>
      </div>

      {/* Search Input */}
      <div className="flex flex-col gap-1 flex-1 min-w-[200px]">
        <span className="text-xs font-semibold text-gray-500">검색</span>
        <div className="relative">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
          <input
            type="text"
            placeholder="품질관리서번호, 현장명, 인정품목..."
            value={searchTerm}
            onChange={(e) => onSearchChange(e.target.value)}
            className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-md text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
          />
        </div>
      </div>

      {/* Search Button */}
      <div className="flex flex-col gap-1 justify-end h-full mt-auto mb-0.5">
        <button className="bg-[#1e3a8a] text-white px-6 py-2 rounded-md text-sm hover:bg-blue-800 transition-colors">
          조회
        </button>
      </div>
    </div>
  );
};