"use client";

import React, { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Ban, Check, ChevronsUpDown, Plus, RefreshCw, Search, Pencil, Trash2 } from "lucide-react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import { mutualExclusionApi, MutualExclusion, EXCLUSION_TYPES } from "@/lib/api/cascadingMutualExclusion";
import { tableManagementApi } from "@/lib/api/tableManagement";

export default function MutualExclusionTab() {
  // 목록 상태
  const [exclusions, setExclusions] = useState<MutualExclusion[]>([]);
  const [tables, setTables] = useState<Array<{ tableName: string; displayName: string }>>([]);
  const [columns, setColumns] = useState<Array<{ columnName: string; displayName: string }>>([]);
  const [loading, setLoading] = useState(true);
  const [searchText, setSearchText] = useState("");

  // 테이블 Combobox 상태
  const [tableComboOpen, setTableComboOpen] = useState(false);

  // 모달 상태
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [editingExclusion, setEditingExclusion] = useState<MutualExclusion | null>(null);
  const [deletingExclusionId, setDeletingExclusionId] = useState<number | null>(null);

  // 폼 데이터
  const [formData, setFormData] = useState<Omit<MutualExclusion, "exclusionId" | "exclusionCode">>({
    exclusionName: "",
    fieldNames: "",
    sourceTable: "",
    valueColumn: "",
    labelColumn: "",
    exclusionType: "SAME_VALUE",
    errorMessage: "동일한 값을 선택할 수 없습니다",
  });

  // 필드 목록 (동적 추가)
  const [fieldList, setFieldList] = useState<string[]>(["", ""]);

  // 목록 로드
  const loadExclusions = useCallback(async () => {
    setLoading(true);
    try {
      const response = await mutualExclusionApi.getList();
      if (response.success && response.data) {
        setExclusions(response.data);
      }
    } catch (error) {
      console.error("상호 배제 목록 로드 실패:", error);
      toast.error("목록을 불러오는데 실패했습니다.");
    } finally {
      setLoading(false);
    }
  }, []);

  // 테이블 목록 로드
  const loadTables = useCallback(async () => {
    try {
      const response = await tableManagementApi.getTableList();
      if (response.success && response.data) {
        setTables(response.data);
      }
    } catch (error) {
      console.error("테이블 목록 로드 실패:", error);
    }
  }, []);

  useEffect(() => {
    loadExclusions();
    loadTables();
  }, [loadExclusions, loadTables]);

  // 테이블 선택 시 컬럼 로드
  const loadColumns = async (tableName: string) => {
    if (!tableName) {
      setColumns([]);
      return;
    }

    try {
      const response = await tableManagementApi.getColumnList(tableName);
      if (response.success && response.data?.columns) {
        setColumns(response.data.columns);
      }
    } catch (error) {
      console.error("컬럼 목록 로드 실패:", error);
    }
  };

  // 필터된 목록
  const filteredExclusions = exclusions.filter(
    (e) =>
      e.exclusionName?.toLowerCase().includes(searchText.toLowerCase()) ||
      e.exclusionCode?.toLowerCase().includes(searchText.toLowerCase()),
  );

  // 모달 열기 (생성)
  const handleOpenCreate = () => {
    setEditingExclusion(null);
    setFormData({
      exclusionName: "",
      fieldNames: "",
      sourceTable: "",
      valueColumn: "",
      labelColumn: "",
      exclusionType: "SAME_VALUE",
      errorMessage: "동일한 값을 선택할 수 없습니다",
    });
    setFieldList(["", ""]);
    setColumns([]);
    setIsModalOpen(true);
  };

  // 모달 열기 (수정)
  const handleOpenEdit = async (exclusion: MutualExclusion) => {
    setEditingExclusion(exclusion);
    setFormData({
      exclusionCode: exclusion.exclusionCode,
      exclusionName: exclusion.exclusionName,
      fieldNames: exclusion.fieldNames,
      sourceTable: exclusion.sourceTable,
      valueColumn: exclusion.valueColumn,
      labelColumn: exclusion.labelColumn || "",
      exclusionType: exclusion.exclusionType || "SAME_VALUE",
      errorMessage: exclusion.errorMessage || "동일한 값을 선택할 수 없습니다",
    });
    setFieldList(exclusion.fieldNames.split(",").map((f) => f.trim()));
    await loadColumns(exclusion.sourceTable);
    setIsModalOpen(true);
  };

  // 삭제 확인
  const handleDeleteConfirm = (exclusionId: number) => {
    setDeletingExclusionId(exclusionId);
    setIsDeleteDialogOpen(true);
  };

  // 삭제 실행
  const handleDelete = async () => {
    if (!deletingExclusionId) return;

    try {
      const response = await mutualExclusionApi.delete(deletingExclusionId);
      if (response.success) {
        toast.success("상호 배제 규칙이 삭제되었습니다.");
        loadExclusions();
      } else {
        toast.error(response.error || "삭제에 실패했습니다.");
      }
    } catch (error) {
      toast.error("삭제 중 오류가 발생했습니다.");
    } finally {
      setIsDeleteDialogOpen(false);
      setDeletingExclusionId(null);
    }
  };

  // 필드 추가
  const addField = () => {
    setFieldList([...fieldList, ""]);
  };

  // 필드 제거
  const removeField = (index: number) => {
    if (fieldList.length <= 2) {
      toast.error("최소 2개의 필드가 필요합니다.");
      return;
    }
    setFieldList(fieldList.filter((_, i) => i !== index));
  };

  // 필드 값 변경
  const updateField = (index: number, value: string) => {
    const newFields = [...fieldList];
    newFields[index] = value;
    setFieldList(newFields);
  };

  // 저장
  const handleSave = async () => {
    // 필드 목록 합치기
    const cleanedFields = fieldList.filter((f) => f.trim());
    if (cleanedFields.length < 2) {
      toast.error("최소 2개의 필드를 입력해주세요.");
      return;
    }

    // 유효성 검사
    if (!formData.exclusionName || !formData.sourceTable || !formData.valueColumn) {
      toast.error("필수 항목을 모두 입력해주세요.");
      return;
    }

    const dataToSave = {
      ...formData,
      fieldNames: cleanedFields.join(","),
    };

    try {
      let response;
      if (editingExclusion) {
        response = await mutualExclusionApi.update(editingExclusion.exclusionId!, dataToSave);
      } else {
        response = await mutualExclusionApi.create(dataToSave);
      }

      if (response.success) {
        toast.success(editingExclusion ? "수정되었습니다." : "생성되었습니다.");
        setIsModalOpen(false);
        loadExclusions();
      } else {
        toast.error(response.error || "저장에 실패했습니다.");
      }
    } catch (error) {
      toast.error("저장 중 오류가 발생했습니다.");
    }
  };

  // 테이블 선택 핸들러
  const handleTableChange = async (tableName: string) => {
    setFormData({ ...formData, sourceTable: tableName, valueColumn: "", labelColumn: "" });
    await loadColumns(tableName);
  };

  return (
    <div className="space-y-6">
      {/* 검색 */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex items-center gap-4">
            <div className="relative flex-1">
              <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
              <Input
                placeholder="배제 코드, 이름으로 검색..."
                value={searchText}
                onChange={(e) => setSearchText(e.target.value)}
                className="pl-10"
              />
            </div>
            <Button variant="outline" onClick={loadExclusions}>
              <RefreshCw className="mr-2 h-4 w-4" />
              새로고침
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* 목록 */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="flex items-center gap-2">
                <Ban className="h-5 w-5" />
                상호 배제 규칙
              </CardTitle>
              <CardDescription>
                두 필드가 같은 값을 선택할 수 없도록 제한합니다. (총 {filteredExclusions.length}개)
              </CardDescription>
            </div>
            <Button onClick={handleOpenCreate}>
              <Plus className="mr-2 h-4 w-4" />새 규칙 추가
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          {loading ? (
            <div className="flex items-center justify-center py-8">
              <RefreshCw className="h-6 w-6 animate-spin" />
              <span className="ml-2">로딩 중...</span>
            </div>
          ) : filteredExclusions.length === 0 ? (
            <div className="text-muted-foreground space-y-4 py-8 text-center">
              <div className="text-sm">
                {searchText ? "검색 결과가 없습니다." : "등록된 상호 배제 규칙이 없습니다."}
              </div>
              <div className="mx-auto max-w-md space-y-3 text-left">
                <div className="rounded-lg border p-4">
                  <div className="text-foreground mb-2 text-sm font-medium">예시: 창고 이동</div>
                  <div className="text-muted-foreground text-xs">
                    "출발 창고"와 "도착 창고"가 같은 창고를 선택할 수 없도록 제한
                  </div>
                </div>
                <div className="rounded-lg border p-4">
                  <div className="text-foreground mb-2 text-sm font-medium">예시: 부서 이동</div>
                  <div className="text-muted-foreground text-xs">
                    "현재 부서"와 "이동 부서"가 같은 부서를 선택할 수 없도록 제한
                  </div>
                </div>
              </div>
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>배제 코드</TableHead>
                  <TableHead>배제명</TableHead>
                  <TableHead>대상 필드</TableHead>
                  <TableHead>소스 테이블</TableHead>
                  <TableHead>상태</TableHead>
                  <TableHead className="text-right">작업</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredExclusions.map((exclusion) => (
                  <TableRow key={exclusion.exclusionId}>
                    <TableCell className="font-mono text-sm">{exclusion.exclusionCode}</TableCell>
                    <TableCell className="font-medium">{exclusion.exclusionName}</TableCell>
                    <TableCell>
                      <div className="flex flex-wrap gap-1">
                        {exclusion.fieldNames.split(",").map((field, idx) => (
                          <Badge key={idx} variant="outline" className="text-xs">
                            {field.trim()}
                          </Badge>
                        ))}
                      </div>
                    </TableCell>
                    <TableCell className="font-mono text-xs">{exclusion.sourceTable}</TableCell>
                    <TableCell>
                      <Badge variant={exclusion.isActive === "Y" ? "default" : "secondary"}>
                        {exclusion.isActive === "Y" ? "활성" : "비활성"}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-right">
                      <Button variant="ghost" size="icon" onClick={() => handleOpenEdit(exclusion)}>
                        <Pencil className="h-4 w-4" />
                      </Button>
                      <Button variant="ghost" size="icon" onClick={() => handleDeleteConfirm(exclusion.exclusionId!)}>
                        <Trash2 className="h-4 w-4 text-red-500" />
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>

      {/* 생성/수정 모달 */}
      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>{editingExclusion ? "상호 배제 규칙 수정" : "상호 배제 규칙 생성"}</DialogTitle>
            <DialogDescription>두 필드가 같은 값을 선택할 수 없도록 제한합니다.</DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            {/* 배제명 */}
            <div className="space-y-2">
              <Label>배제명 *</Label>
              <Input
                value={formData.exclusionName}
                onChange={(e) => setFormData({ ...formData, exclusionName: e.target.value })}
                placeholder="예: 창고 이동 제한"
              />
            </div>

            {/* 대상 필드 */}
            <div className="rounded-lg border p-4">
              <div className="mb-3 flex items-center justify-between">
                <h4 className="text-sm font-semibold">대상 필드 (최소 2개)</h4>
                <Button variant="outline" size="sm" onClick={addField}>
                  <Plus className="mr-1 h-3 w-3" />
                  추가
                </Button>
              </div>
              <div className="space-y-2">
                {fieldList.map((field, index) => (
                  <div key={index} className="flex items-center gap-2">
                    <Input
                      value={field}
                      onChange={(e) => updateField(index, e.target.value)}
                      placeholder={`필드 ${index + 1} (예: source_warehouse)`}
                      className="flex-1"
                    />
                    {fieldList.length > 2 && (
                      <Button variant="ghost" size="icon" onClick={() => removeField(index)}>
                        <Trash2 className="h-4 w-4 text-red-500" />
                      </Button>
                    )}
                  </div>
                ))}
              </div>
              <p className="text-muted-foreground mt-2 text-xs">이 필드들은 서로 같은 값을 선택할 수 없습니다.</p>
            </div>

            {/* 소스 테이블 및 컬럼 */}
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>소스 테이블 *</Label>
                <Popover open={tableComboOpen} onOpenChange={setTableComboOpen}>
                  <PopoverTrigger asChild>
                    <Button
                      variant="outline"
                      role="combobox"
                      aria-expanded={tableComboOpen}
                      className="h-10 w-full justify-between text-sm"
                    >
                      {formData.sourceTable
                        ? tables.find((t) => t.tableName === formData.sourceTable)?.displayName || formData.sourceTable
                        : "테이블 선택"}
                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
                    <Command>
                      <CommandInput placeholder="테이블명 또는 라벨로 검색..." className="text-sm" />
                      <CommandList className="max-h-[300px] overflow-y-auto overscroll-contain">
                        <CommandEmpty className="text-sm">테이블을 찾을 수 없습니다.</CommandEmpty>
                        <CommandGroup>
                          {tables
                            .filter((t) => t.tableName)
                            .map((t) => (
                              <CommandItem
                                key={t.tableName}
                                value={`${t.tableName} ${t.displayName || ""}`}
                                onSelect={async () => {
                                  setFormData({
                                    ...formData,
                                    sourceTable: t.tableName,
                                    valueColumn: "",
                                    labelColumn: "",
                                  });
                                  await loadColumns(t.tableName);
                                  setTableComboOpen(false);
                                }}
                                className="text-sm"
                              >
                                <Check
                                  className={cn(
                                    "mr-2 h-4 w-4",
                                    formData.sourceTable === t.tableName ? "opacity-100" : "opacity-0",
                                  )}
                                />
                                <div className="flex flex-col">
                                  <span className="font-medium">{t.displayName || t.tableName}</span>
                                  {t.displayName && t.displayName !== t.tableName && (
                                    <span className="text-muted-foreground text-xs">{t.tableName}</span>
                                  )}
                                </div>
                              </CommandItem>
                            ))}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>
              </div>
              <div className="space-y-2">
                <Label>값 컬럼 *</Label>
                <Select
                  value={formData.valueColumn}
                  onValueChange={(v) => setFormData({ ...formData, valueColumn: v })}
                  disabled={!formData.sourceTable}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="값 컬럼 선택" />
                  </SelectTrigger>
                  <SelectContent>
                    {columns
                      .filter((c) => c.columnName)
                      .map((c) => (
                        <SelectItem key={c.columnName} value={c.columnName}>
                          {c.displayName || c.columnName}
                        </SelectItem>
                      ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>라벨 컬럼</Label>
                <Select
                  value={formData.labelColumn}
                  onValueChange={(v) => setFormData({ ...formData, labelColumn: v })}
                  disabled={!formData.sourceTable}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="라벨 컬럼 선택 (선택)" />
                  </SelectTrigger>
                  <SelectContent>
                    {columns
                      .filter((c) => c.columnName)
                      .map((c) => (
                        <SelectItem key={c.columnName} value={c.columnName}>
                          {c.displayName || c.columnName}
                        </SelectItem>
                      ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>배제 유형</Label>
                <Select
                  value={formData.exclusionType}
                  onValueChange={(v) => setFormData({ ...formData, exclusionType: v })}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {EXCLUSION_TYPES.map((t) => (
                      <SelectItem key={t.value} value={t.value}>
                        {t.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            {/* 에러 메시지 */}
            <div className="space-y-2">
              <Label>에러 메시지</Label>
              <Input
                value={formData.errorMessage}
                onChange={(e) => setFormData({ ...formData, errorMessage: e.target.value })}
                placeholder="동일한 값을 선택할 수 없습니다"
              />
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setIsModalOpen(false)}>
              취소
            </Button>
            <Button onClick={handleSave}>{editingExclusion ? "수정" : "생성"}</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 삭제 확인 다이얼로그 */}
      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>상호 배제 규칙 삭제</AlertDialogTitle>
            <AlertDialogDescription>
              이 상호 배제 규칙을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction onClick={handleDelete} className="bg-red-500 hover:bg-red-600">
              삭제
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}