"use client";

import React, { useState, useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { Search, Loader2, Check } from "lucide-react";
import { cn } from "@/lib/utils";
import { useEntitySearch } from "./useEntitySearch";
import { EntitySearchResult } from "./types";

interface EntitySearchModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  tableName: string;
  displayField: string;
  valueField: string;
  searchFields?: string[];
  filterCondition?: Record<string, any>;
  modalTitle?: string;
  modalColumns?: string[];
  onSelect: (value: any, fullData: EntitySearchResult) => void;
  // 다중선택 관련
  multiple?: boolean;
  selectedValues?: string[]; // 이미 선택된 값들
}

export function EntitySearchModal({
  open,
  onOpenChange,
  tableName,
  displayField,
  valueField,
  searchFields = [displayField],
  filterCondition = {},
  modalTitle = "검색",
  modalColumns = [],
  onSelect,
  multiple = false,
  selectedValues = [],
}: EntitySearchModalProps) {
  const [localSearchText, setLocalSearchText] = useState("");
  const {
    results,
    loading,
    error,
    pagination,
    search,
    clearSearch,
    loadMore,
  } = useEntitySearch({
    tableName,
    searchFields,
    filterCondition,
  });

  // 모달 열릴 때 초기 검색
  useEffect(() => {
    if (open) {
      search("", 1); // 빈 검색어로 전체 목록 조회
    } else {
      clearSearch();
      setLocalSearchText("");
    }
  }, [open]);

  const handleSearch = () => {
    search(localSearchText, 1);
  };

  const handleSelect = (item: EntitySearchResult) => {
    onSelect(item[valueField], item);
    // 다중선택이 아닌 경우에만 모달 닫기
    if (!multiple) {
      onOpenChange(false);
    }
  };

  // 항목이 선택되어 있는지 확인
  const isItemSelected = (item: EntitySearchResult): boolean => {
    return selectedValues.includes(String(item[valueField]));
  };

  // 표시할 컬럼 결정
  const displayColumns = modalColumns.length > 0 ? modalColumns : [displayField];

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[95vw] sm:max-w-[800px] max-h-[90vh] overflow-hidden">
        <DialogHeader>
          <DialogTitle className="text-base sm:text-lg">{modalTitle}</DialogTitle>
          <DialogDescription className="text-xs sm:text-sm">
            항목을 검색하고 선택하세요
          </DialogDescription>
        </DialogHeader>

        {/* 검색 입력 */}
        <div className="flex gap-2">
          <Input
            placeholder="검색어를 입력하세요"
            value={localSearchText}
            onChange={(e) => setLocalSearchText(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                handleSearch();
              }
            }}
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
          <Button
            onClick={handleSearch}
            disabled={loading}
            className="h-8 text-xs sm:h-10 sm:text-sm"
          >
            {loading ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              <Search className="h-4 w-4" />
            )}
            <span className="ml-2">검색</span>
          </Button>
        </div>

        {/* 오류 메시지 */}
        {error && (
          <div className="text-sm text-destructive bg-destructive/10 p-3 rounded-md">
            {error}
          </div>
        )}

        {/* 검색 결과 테이블 */}
        <div className="border rounded-md overflow-hidden">
          <div className="overflow-x-auto max-h-[400px] overflow-y-auto">
            <table className="w-full text-xs sm:text-sm">
              <thead className="bg-muted sticky top-0">
                <tr>
                  {/* 다중선택 시 체크박스 컬럼 */}
                  {multiple && (
                    <th className="px-4 py-2 text-left font-medium text-muted-foreground w-12">
                      선택
                    </th>
                  )}
                  {displayColumns.map((col, colIdx) => (
                    <th
                      key={col || `header-${colIdx}`}
                      className="px-4 py-2 text-left font-medium text-muted-foreground"
                    >
                      {col}
                    </th>
                  ))}
                  {!multiple && (
                    <th className="px-4 py-2 text-left font-medium text-muted-foreground w-24">
                      선택
                    </th>
                  )}
                </tr>
              </thead>
              <tbody>
                {loading && results.length === 0 ? (
                  <tr>
                    <td colSpan={displayColumns.length + (multiple ? 1 : 2)} className="px-4 py-8 text-center">
                      <Loader2 className="h-6 w-6 animate-spin mx-auto" />
                      <p className="mt-2 text-muted-foreground">검색 중...</p>
                    </td>
                  </tr>
                ) : results.length === 0 ? (
                  <tr>
                    <td colSpan={displayColumns.length + (multiple ? 1 : 2)} className="px-4 py-8 text-center text-muted-foreground">
                      검색 결과가 없습니다
                    </td>
                  </tr>
                ) : (
                  results.map((item, index) => {
                    // null과 undefined 모두 체크하여 유니크 키 생성
                    const uniqueKey = item[valueField] != null ? `${item[valueField]}` : `row-${index}`;
                    const isSelected = isItemSelected(item);
                    return (
                      <tr
                        key={uniqueKey}
                        className={cn(
                          "border-t cursor-pointer transition-colors",
                          isSelected ? "bg-primary/10 hover:bg-primary/10" : "hover:bg-accent"
                        )}
                        onClick={() => handleSelect(item)}
                      >
                        {/* 다중선택 시 체크박스 */}
                        {multiple && (
                          <td className="px-4 py-2">
                            <Checkbox
                              checked={isSelected}
                              onCheckedChange={() => handleSelect(item)}
                              onClick={(e) => e.stopPropagation()}
                            />
                          </td>
                        )}
                        {displayColumns.map((col, colIdx) => (
                          <td key={`${uniqueKey}-${col || colIdx}`} className="px-4 py-2">
                            {item[col] || "-"}
                          </td>
                        ))}
                        {!multiple && (
                          <td className="px-4 py-2">
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={(e) => {
                                e.stopPropagation();
                                handleSelect(item);
                              }}
                              className="h-7 text-xs"
                            >
                              선택
                            </Button>
                          </td>
                        )}
                      </tr>
                    );
                  })
                )}
              </tbody>
            </table>
          </div>
        </div>

        {/* 페이지네이션 정보 */}
        {results.length > 0 && (
          <div className="flex justify-between items-center text-xs sm:text-sm text-muted-foreground">
            <span>
              전체 {pagination.total}개 중 {results.length}개 표시
            </span>
            {pagination.page * pagination.limit < pagination.total && (
              <Button
                variant="outline"
                size="sm"
                onClick={loadMore}
                disabled={loading}
                className="h-7 text-xs"
              >
                더 보기
              </Button>
            )}
          </div>
        )}

        <DialogFooter className="gap-2 sm:gap-0">
          {/* 다중선택 시 선택된 항목 수 표시 */}
          {multiple && selectedValues.length > 0 && (
            <div className="flex-1 text-sm text-muted-foreground">
              {selectedValues.length}개 항목 선택됨
            </div>
          )}
          <Button
            variant="outline"
            onClick={() => onOpenChange(false)}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
          >
            {multiple ? "완료" : "취소"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

