"use client"

import * as React from "react"
import { Search, X, Users, ChevronLeft, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { useDebounce } from "@/hooks/use-debounce"
import { cn } from "@/lib/utils"
// import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Skeleton } from "@/components/ui/skeleton"
import { searchUsersForSelector } from "@/lib/users/service"

// User 타입 정의
export interface UserSelectItem {
  id: number
  name: string
  email: string
  epId?: string | null
  deptCode?: string | null
  deptName?: string | null
  imageUrl?: string | null
  domain?: string
  companyName?: string | null
}

// Domain 필터 타입
export type UserDomainFilter = 
  | { type: "exclude"; domains: string[] }  // partners가 아닌 경우
  | { type: "include"; domains: string[] }  // 특정 domain인 경우
  | null  // 필터 없음

// 페이지네이션 정보 타입
interface PaginationInfo {
  page: number
  perPage: number
  total: number
  pageCount: number
  hasNextPage: boolean
  hasPrevPage: boolean
}

export interface UserSelectorProps {
  /** 선택된 사용자들 */
  selectedUsers?: UserSelectItem[]
  /** 사용자 선택 변경 콜백 */
  onUsersChange?: (users: UserSelectItem[]) => void
  /** 단일 선택 모드 여부 */
  singleSelect?: boolean
  /** domain 필터 */
  domainFilter?: UserDomainFilter
  /** placeholder 텍스트 */
  placeholder?: string
  /** 입력 없이 focus 시 표시할 placeholder */
  noValuePlaceHolder?: string
  /** 비활성화 여부 */
  disabled?: boolean
  /** 최대 선택 가능 사용자 수 */
  maxSelections?: number
  /** 조직도 선택 다이얼로그 오픈 콜백 (추후 구현) */
  onOpenOrgChart?: () => void
  /** 컴포넌트 클래스명 */
  className?: string
  /** 사용자 선택 후 팝오버 닫기 여부 */
  closeOnSelect?: boolean
}

export function UserSelector({
  selectedUsers = [],
  onUsersChange,
  singleSelect = false,
  domainFilter,
  placeholder = "사용자를 검색하세요...",
  noValuePlaceHolder = "사용자를 검색하거나 조직도에서 찾아보세요",
  disabled = false,
  maxSelections,
  onOpenOrgChart,
  className,
  closeOnSelect = true // 기본값으로 선택 후 닫기
}: UserSelectorProps) {
  const [searchQuery, setSearchQuery] = React.useState("")
  const [isSearching, setIsSearching] = React.useState(false)
  const [searchResults, setSearchResults] = React.useState<UserSelectItem[]>([])
  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false)
  const [currentPage, setCurrentPage] = React.useState(1)
  const [pagination, setPagination] = React.useState<PaginationInfo>({
    page: 1,
    perPage: 10,
    total: 0,
    pageCount: 0,
    hasNextPage: false,
    hasPrevPage: false,
  })
  const [searchError, setSearchError] = React.useState<string | null>(null)
  
  const inputRef = React.useRef<HTMLInputElement>(null)

  // Debounce 적용된 검색어
  const debouncedSearchQuery = useDebounce(searchQuery, 300)

  // 검색 실행 - useCallback으로 메모이제이션
  const performSearch = React.useCallback(async (query: string, page: number = 1) => {
    setIsSearching(true)
    setSearchError(null)
    
    try {
      const result = await searchUsersForSelector(query, page, 10, domainFilter)
      
      if (result.success) {
        setSearchResults(result.data)
        setPagination(result.pagination)
        setCurrentPage(page)
      } else {
        setSearchResults([])
        setSearchError("검색 중 오류가 발생했습니다.")
        setPagination({
          page: 1,
          perPage: 10,
          total: 0,
          pageCount: 0,
          hasNextPage: false,
          hasPrevPage: false,
        })
      }
    } catch (err) {
      console.error("사용자 검색 실패:", err)
      setSearchResults([])
      setSearchError("검색 중 오류가 발생했습니다.")
      setPagination({
        page: 1,
        perPage: 10,
        total: 0,
        pageCount: 0,
        hasNextPage: false,
        hasPrevPage: false,
      })
    } finally {
      setIsSearching(false)
    }
  }, [domainFilter])

  // Debounced 검색어 변경 시 검색 실행
  React.useEffect(() => {
    setCurrentPage(1)
    performSearch(debouncedSearchQuery, 1)
  }, [debouncedSearchQuery, performSearch])

  // 페이지 변경 처리 - useCallback으로 메모이제이션
  const handlePageChange = React.useCallback((newPage: number) => {
    if (newPage >= 1 && newPage <= pagination.pageCount) {
      performSearch(debouncedSearchQuery, newPage)
    }
  }, [pagination.pageCount, performSearch, debouncedSearchQuery])

  // 사용자 선택 처리 - useCallback으로 메모이제이션
  const handleUserSelect = React.useCallback((user: UserSelectItem) => {
    if (disabled) return

    const isSelected = selectedUsers.some(u => u.id === user.id)
    let newSelection: UserSelectItem[]

    if (singleSelect) {
      newSelection = isSelected ? [] : [user]
    } else {
      if (isSelected) {
        newSelection = selectedUsers.filter(u => u.id !== user.id)
      } else {
        if (maxSelections && selectedUsers.length >= maxSelections) {
          return // 최대 선택 수 도달
        }
        newSelection = [...selectedUsers, user]
      }
    }

    onUsersChange?.(newSelection)
    
    // 선택 후 팝오버 닫기 (closeOnSelect가 true이거나 단일 선택 모드일 때)
    if ((closeOnSelect || singleSelect) && !isSelected) {
      setIsPopoverOpen(false)
      setSearchQuery("")
    }
  }, [disabled, selectedUsers, singleSelect, maxSelections, onUsersChange, closeOnSelect])

  // 선택된 사용자 제거 - useCallback으로 메모이제이션
  const handleRemoveUser = React.useCallback((userId: number) => {
    if (disabled) return
    const newSelection = selectedUsers.filter(u => u.id !== userId)
    onUsersChange?.(newSelection)
  }, [disabled, selectedUsers, onUsersChange])

  // 사용자 이니셜 생성 - useMemo로 메모이제이션
  const getUserInitials = React.useCallback((name: string) => {
    const names = name.split(' ')
    return names.length > 1 
      ? `${names[0][0]}${names[1][0]}`
      : name.slice(0, 2)
  }, [])

  // Input 이벤트 핸들러들
  const handleInputFocus = React.useCallback(() => {
    setIsPopoverOpen(true)
  }, [])

  const handleInputChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(e.target.value)
    if (!isPopoverOpen) {
      setIsPopoverOpen(true)
    }
  }, [isPopoverOpen])

  const handleClosePopover = React.useCallback(() => {
    setIsPopoverOpen(false)
  }, [])

  // 계산된 값들 - useMemo로 메모이제이션
  const shouldShowResults = React.useMemo(() => 
    searchQuery.trim() || isSearching, [searchQuery, isSearching])
  
  const hasResults = React.useMemo(() => 
    searchResults.length > 0, [searchResults.length])

  // 검색 결과 렌더링 - 컴포넌트 분리로 가독성 향상
  const renderSearchResults = React.useMemo(() => {
    if (!shouldShowResults) {
      return (
        <div className="p-4 text-sm text-muted-foreground text-center">
          {noValuePlaceHolder}
        </div>
      )
    }

    if (isSearching) {
      return (
        <div className="p-2 space-y-2">
          {Array.from({ length: 3 }).map((_, i) => (
            <div key={i} className="flex items-center space-x-2 p-2">
              <div className="h-6 w-6 rounded-full bg-muted flex items-center justify-center text-xs">
                ?
              </div>
              <div className="space-y-1 flex-1">
                <Skeleton className="h-3 w-full" />
              </div>
            </div>
          ))}
        </div>
      )
    }

    if (searchError) {
      return (
        <div className="p-4 text-sm text-destructive text-center">
          {searchError}
        </div>
      )
    }

    if (!hasResults) {
      return (
        <div className="p-4 text-sm text-muted-foreground text-center">
          검색 결과가 없습니다.
        </div>
      )
    }

    return (
      <>
        <div className="p-1">
          {searchResults.map((user) => {
            const isSelected = selectedUsers.some(u => u.id === user.id)
            const canSelect = !maxSelections || selectedUsers.length < maxSelections || isSelected
            
            return (
              <div
                key={user.id}
                onClick={() => handleUserSelect(user)}
                className={cn(
                  "flex items-center space-x-3 p-2 rounded-md cursor-pointer hover:bg-accent",
                  !canSelect && !isSelected && "opacity-50 cursor-not-allowed"
                )}
              >
                <div className="h-6 w-6 rounded-full bg-muted flex items-center justify-center text-xs">
                  {getUserInitials(user.name)}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 text-sm">
                    <span className="font-medium">{user.name}</span>
                    <span className="text-muted-foreground">·</span>
                    <span className="text-muted-foreground">{user.email}</span>
                    {user.deptName && (
                      <>
                        <span className="text-muted-foreground">·</span>
                        <span className="text-muted-foreground">{user.deptName}</span>
                      </>
                    )}
                    {isSelected && <div className="h-2 w-2 bg-primary rounded-full ml-auto" />}
                  </div>
                </div>
              </div>
            )
          })}
        </div>

        {/* 페이지네이션 */}
        {pagination.pageCount > 1 && (
          <div className="flex items-center justify-between p-3 border-t bg-muted/30">
            <div className="text-xs text-muted-foreground">
              {pagination.total}명 중 {((pagination.page - 1) * pagination.perPage) + 1}-{Math.min(pagination.page * pagination.perPage, pagination.total)}명
            </div>
            <div className="flex items-center gap-1">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => handlePageChange(currentPage - 1)}
                disabled={!pagination.hasPrevPage}
                className="h-8 w-8 p-0"
              >
                <ChevronLeft className="h-4 w-4" />
              </Button>
              <span className="text-xs text-muted-foreground px-2">
                {pagination.page} / {pagination.pageCount}
              </span>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => handlePageChange(currentPage + 1)}
                disabled={!pagination.hasNextPage}
                className="h-8 w-8 p-0"
              >
                <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          </div>
        )}
      </>
    )
  }, [
    shouldShowResults, 
    noValuePlaceHolder, 
    isSearching, 
    searchError, 
    hasResults, 
    searchResults, 
    selectedUsers, 
    maxSelections, 
    handleUserSelect, 
    getUserInitials, 
    pagination, 
    currentPage, 
    handlePageChange
  ])

  return (
    <div className={cn("space-y-2", className)}>
      {/* 검색 입력 영역 */}
      <div className="flex gap-2">
        <div className="flex-1 relative">
          <div className="relative">
            <Input
              ref={inputRef}
              placeholder={placeholder}
              value={searchQuery}
              onChange={handleInputChange}
              onFocus={handleInputFocus}
              disabled={disabled}
              className="pr-10"
            />
            <Search className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          </div>
          
          {/* 검색 결과 팝오버 */}
          {isPopoverOpen && (
            <div className="absolute top-full left-0 right-0 z-50 mt-1 rounded-md border bg-popover text-popover-foreground shadow-md outline-none">
              {/* 팝오버 헤더 */}
              <div className="flex items-center justify-between p-3 border-b">
                <span className="text-sm font-medium">사용자 선택</span>
                <Button 
                  variant="ghost" 
                  size="sm" 
                  onClick={handleClosePopover}
                  className="h-6 w-6 p-0"
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>

              {/* 검색 결과 영역 */}
              <div className="max-h-[400px] overflow-y-auto">
                {renderSearchResults}
              </div>
            </div>
          )}
        </div>
        
        {/* 조직도 찾기 버튼 */}
        {onOpenOrgChart && (
          <Button
            variant="outline"
            onClick={onOpenOrgChart}
            disabled={disabled}
            className="px-3"
          >
            <Users className="h-4 w-4 mr-2" />
            찾기
          </Button>
        )}
      </div>

      {/* 선택된 사용자들 표시 */}
      {selectedUsers.length > 0 && (
        <div className="flex flex-wrap gap-2">
          {selectedUsers.map((user) => (
            <Badge
              key={user.id}
              variant="secondary"
              className="flex items-center gap-2 px-3 py-1"
            >
              <div className="h-5 w-5 rounded-full bg-muted flex items-center justify-center text-xs">
                {getUserInitials(user.name)}
              </div>
              <span className="text-sm">{user.name}</span>
              {user.deptName && (
                <span className="text-xs text-muted-foreground">({user.deptName})</span>
              )}
              {!disabled && (
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-4 w-4 p-0 hover:bg-transparent"
                  onClick={() => handleRemoveUser(user.id)}
                >
                  <X className="h-3 w-3" />
                </Button>
              )}
            </Badge>
          ))}
        </div>
      )}

      {/* 선택 제한 안내 */}
      {maxSelections && selectedUsers.length >= maxSelections && (
        <div className="text-xs text-muted-foreground">
          최대 {maxSelections}명까지 선택할 수 있습니다.
        </div>
      )}
    </div>
  )
}