import { Search, Plus, ChevronDown, ChevronUp } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { UserSearchFilter } from "@/types/user";
import { useState } from "react";

interface UserToolbarProps {
  searchFilter: UserSearchFilter;
  totalCount: number;
  isSearching?: boolean;
  onSearchChange: (searchFilter: Partial<UserSearchFilter>) => void;
  onCreateClick: () => void;
}

/**
 * 사용자 관리 툴바 컴포넌트
 * 통합 검색 + 고급 검색 옵션 지원
 */
export function UserToolbar({
  searchFilter,
  totalCount,
  isSearching = false,
  onSearchChange,
  onCreateClick,
}: UserToolbarProps) {
  const [showAdvancedSearch, setShowAdvancedSearch] = useState(false);

  // 통합 검색어 변경
  const handleUnifiedSearchChange = (value: string) => {
    onSearchChange({
      searchValue: value,
      // 통합 검색 시 고급 검색 필드들 클리어
      searchType: undefined,
      search_sabun: undefined,
      search_companyName: undefined,
      search_deptName: undefined,
      search_positionName: undefined,
      search_userId: undefined,
      search_userName: undefined,
      search_tel: undefined,
      search_email: undefined,
    });
  };

  // 고급 검색 필드 변경
  const handleAdvancedSearchChange = (field: string, value: string) => {
    onSearchChange({
      [field]: value,
      // 고급 검색 시 통합 검색어 클리어
      searchValue: undefined,
    });
  };

  // 고급 검색 모드인지 확인
  const isAdvancedSearchMode = !!(
    searchFilter.search_sabun ||
    searchFilter.search_companyName ||
    searchFilter.search_deptName ||
    searchFilter.search_positionName ||
    searchFilter.search_userId ||
    searchFilter.search_userName ||
    searchFilter.search_tel ||
    searchFilter.search_email
  );

  return (
    <div className="space-y-4">
      {/* 메인 검색 영역 */}
      <div className="bg-muted/30 rounded-lg p-4">
        {/* 통합 검색 */}
        <div className="mb-4 flex items-center gap-4">
          <div className="flex-1">
            <div className="relative">
              <Search
                className={`absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform ${
                  isSearching ? "animate-pulse text-blue-500" : "text-muted-foreground"
                }`}
              />
              <Input
                placeholder="통합 검색..."
                value={searchFilter.searchValue || ""}
                onChange={(e) => handleUnifiedSearchChange(e.target.value)}
                disabled={isAdvancedSearchMode}
                className={`pl-10 ${isSearching ? "border-blue-300 ring-1 ring-blue-200" : ""} ${
                  isAdvancedSearchMode ? "bg-muted text-muted-foreground cursor-not-allowed" : ""
                }`}
              />
            </div>
            {isSearching && <p className="mt-1 text-xs text-blue-500">검색 중...</p>}
            {isAdvancedSearchMode && (
              <p className="mt-1 text-xs text-amber-600">
                고급 검색 모드가 활성화되어 있습니다. 통합 검색을 사용하려면 고급 검색 조건을 초기화하세요.
              </p>
            )}
          </div>

          {/* 고급 검색 토글 버튼 */}
          <Button
            variant="outline"
            size="sm"
            onClick={() => setShowAdvancedSearch(!showAdvancedSearch)}
            className="gap-2"
          >
            🔍 고급 검색
            {showAdvancedSearch ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
          </Button>
        </div>

        {/* 고급 검색 옵션 */}
        {showAdvancedSearch && (
          <div className="border-t pt-4">
            <div className="mb-3">
              <h4 className="text-sm font-medium">고급 검색 옵션</h4>
              <span className="text-muted-foreground text-xs">(각 필드별로 개별 검색 조건을 설정할 수 있습니다)</span>
            </div>

            {/* 고급 검색 필드들 */}
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">

              <div>
                <label className="text-muted-foreground mb-1 block text-xs font-medium">회사명</label>
                <Input
                  placeholder="회사명 검색"
                  value={searchFilter.search_companyName || ""}
                  onChange={(e) => handleAdvancedSearchChange("search_companyName", e.target.value)}
                />
              </div>

              <div>
                <label className="text-muted-foreground mb-1 block text-xs font-medium">부서명</label>
                <Input
                  placeholder="부서명 검색"
                  value={searchFilter.search_deptName || ""}
                  onChange={(e) => handleAdvancedSearchChange("search_deptName", e.target.value)}
                />
              </div>

              <div>
                <label className="text-muted-foreground mb-1 block text-xs font-medium">직책</label>
                <Input
                  placeholder="직책 검색"
                  value={searchFilter.search_positionName || ""}
                  onChange={(e) => handleAdvancedSearchChange("search_positionName", e.target.value)}
                />
              </div>

              <div>
                <label className="text-muted-foreground mb-1 block text-xs font-medium">사용자 ID</label>
                <Input
                  placeholder="사용자 ID 검색"
                  value={searchFilter.search_userId || ""}
                  onChange={(e) => handleAdvancedSearchChange("search_userId", e.target.value)}
                />
              </div>

              <div>
                <label className="text-muted-foreground mb-1 block text-xs font-medium">사용자명</label>
                <Input
                  placeholder="사용자명 검색"
                  value={searchFilter.search_userName || ""}
                  onChange={(e) => handleAdvancedSearchChange("search_userName", e.target.value)}
                />
              </div>

              <div>
                <label className="text-muted-foreground mb-1 block text-xs font-medium">전화번호</label>
                <Input
                  placeholder="전화번호/휴대폰 검색"
                  value={searchFilter.search_tel || ""}
                  onChange={(e) => handleAdvancedSearchChange("search_tel", e.target.value)}
                />
              </div>

              <div>
                <label className="text-muted-foreground mb-1 block text-xs font-medium">이메일</label>
                <Input
                  placeholder="이메일 검색"
                  value={searchFilter.search_email || ""}
                  onChange={(e) => handleAdvancedSearchChange("search_email", e.target.value)}
                />
              </div>
            </div>

            {/* 고급 검색 초기화 버튼 */}
            {isAdvancedSearchMode && (
              <div className="mt-4 border-t pt-2">
                <Button
                  variant="ghost"
                  onClick={() =>
                    onSearchChange({
                      search_sabun: undefined,
                      search_companyName: undefined,
                      search_deptName: undefined,
                      search_positionName: undefined,
                      search_userId: undefined,
                      search_userName: undefined,
                      search_tel: undefined,
                      search_email: undefined,
                    })
                  }
                  className="text-muted-foreground hover:text-foreground"
                >
                  고급 검색 조건 초기화
                </Button>
              </div>
            )}
          </div>
        )}
      </div>

      {/* 액션 버튼 영역 */}
      <div className="flex items-center justify-between">
        {/* 조회 결과 정보 */}
        <div className="text-muted-foreground text-sm">
          총 <span className="text-foreground font-medium">{totalCount}</span> 명
        </div>

        {/* 액션 버튼들 */}
        <div className="flex gap-2">
          <Button onClick={onCreateClick} className="gap-2">
            <Plus className="h-4 w-4" />
            사용자 등록
          </Button>
        </div>
      </div>
    </div>
  );
}