"use client";

import { useState, useEffect } from "react";
import { Plus, ChevronDown, ChevronRight, Users, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useToast } from "@/hooks/use-toast";
import type { Department } from "@/types/department";
import * as departmentAPI from "@/lib/api/department";

interface DepartmentStructureProps {
  companyCode: string;
  selectedDepartment: Department | null;
  onSelectDepartment: (department: Department | null) => void;
  refreshTrigger?: number;
}

/**
 * 부서 구조 컴포넌트 (트리 형태)
 */
export function DepartmentStructure({
  companyCode,
  selectedDepartment,
  onSelectDepartment,
  refreshTrigger,
}: DepartmentStructureProps) {
  const { toast } = useToast();
  const [departments, setDepartments] = useState<Department[]>([]);
  const [expandedDepts, setExpandedDepts] = useState<Set<string>>(new Set());
  const [isLoading, setIsLoading] = useState(false);

  // 부서 추가 모달
  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
  const [parentDeptForAdd, setParentDeptForAdd] = useState<string | null>(null);
  const [newDeptName, setNewDeptName] = useState("");
  const [duplicateMessage, setDuplicateMessage] = useState<string | null>(null);

  // 부서 삭제 확인 모달
  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
  const [deptToDelete, setDeptToDelete] = useState<{ code: string; name: string } | null>(null);
  const [deleteErrorMessage, setDeleteErrorMessage] = useState<string | null>(null);

  // 부서 목록 로드
  useEffect(() => {
    loadDepartments();
  }, [companyCode, refreshTrigger]);

  const loadDepartments = async () => {
    setIsLoading(true);
    try {
      const response = await departmentAPI.getDepartments(companyCode);
      if (response.success && response.data) {
        setDepartments(response.data);
      } else {
        console.error("부서 목록 로드 실패:", response.error);
        setDepartments([]);
      }
    } catch (error) {
      console.error("부서 목록 로드 실패:", error);
      setDepartments([]);
    } finally {
      setIsLoading(false);
    }
  };

  // 부서 트리 구조 생성
  const buildTree = (parentCode: string | null): Department[] => {
    return departments
      .filter((dept) => dept.parent_dept_code === parentCode)
      .sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0));
  };

  // 부서 추가 핸들러
  const handleAddDepartment = (parentDeptCode: string | null = null) => {
    setParentDeptForAdd(parentDeptCode);
    setNewDeptName("");
    setIsAddModalOpen(true);
  };

  // 부서 저장
  const handleSaveDepartment = async () => {
    if (!newDeptName.trim()) return;

    try {
      const response = await departmentAPI.createDepartment(companyCode, {
        dept_name: newDeptName,
        parent_dept_code: parentDeptForAdd,
      });

      if (response.success) {
        setIsAddModalOpen(false);
        setNewDeptName("");
        setParentDeptForAdd(null);
        loadDepartments();

        // 성공 Toast 표시
        toast({
          title: "부서 생성 완료",
          description: `"${newDeptName}" 부서가 생성되었습니다.`,
          variant: "default",
        });
      } else {
        if ((response as any).isDuplicate) {
          setDuplicateMessage(response.error || "이미 존재하는 부서명입니다.");
        } else {
          toast({
            title: "부서 생성 실패",
            description: response.error || "부서 추가에 실패했습니다.",
            variant: "destructive",
          });
        }
      }
    } catch (error) {
      console.error("부서 추가 실패:", error);
      toast({
        title: "부서 생성 실패",
        description: "부서 추가 중 오류가 발생했습니다.",
        variant: "destructive",
      });
    }
  };

  // 부서 삭제 확인 요청
  const handleDeleteDepartmentRequest = (deptCode: string, deptName: string) => {
    setDeptToDelete({ code: deptCode, name: deptName });
    setDeleteConfirmOpen(true);
  };

  // 부서 삭제 실행
  const handleDeleteDepartmentConfirm = async () => {
    if (!deptToDelete) return;

    try {
      const response = await departmentAPI.deleteDepartment(deptToDelete.code);

      if (response.success) {
        // 삭제된 부서가 선택되어 있었다면 선택 해제
        if (selectedDepartment?.dept_code === deptToDelete.code) {
          onSelectDepartment(null);
        }

        setDeleteConfirmOpen(false);
        setDeptToDelete(null);
        loadDepartments();

        // 성공 메시지 Toast로 표시 (부서원 수 포함)
        toast({
          title: "부서 삭제 완료",
          description: response.message || "부서가 삭제되었습니다.",
          variant: "default",
        });
      } else {
        // 삭제 확인 모달을 닫고 에러 모달을 표시
        setDeleteConfirmOpen(false);
        setDeptToDelete(null);
        setDeleteErrorMessage(response.error || "부서 삭제에 실패했습니다.");
      }
    } catch (error) {
      console.error("부서 삭제 실패:", error);
      setDeleteConfirmOpen(false);
      setDeptToDelete(null);
      setDeleteErrorMessage("부서 삭제 중 오류가 발생했습니다.");
    }
  };

  // 확장/축소 토글
  const toggleExpand = (deptCode: string) => {
    const newExpanded = new Set(expandedDepts);
    if (newExpanded.has(deptCode)) {
      newExpanded.delete(deptCode);
    } else {
      newExpanded.add(deptCode);
    }
    setExpandedDepts(newExpanded);
  };

  // 부서 트리 렌더링 (재귀)
  const renderDepartmentTree = (parentCode: string | null, level: number = 0) => {
    const children = buildTree(parentCode);

    return children.map((dept) => {
      const hasChildren = departments.some((d) => d.parent_dept_code === dept.dept_code);
      const isExpanded = expandedDepts.has(dept.dept_code);
      const isSelected = selectedDepartment?.dept_code === dept.dept_code;

      return (
        <div key={dept.dept_code}>
          {/* 부서 항목 */}
          <div
            className={`hover:bg-muted flex cursor-pointer items-center justify-between rounded-lg p-2 text-sm transition-colors ${
              isSelected ? "bg-primary/10 text-primary" : ""
            }`}
            style={{ marginLeft: `${level * 16}px` }}
          >
            <div className="flex flex-1 items-center gap-2" onClick={() => onSelectDepartment(dept)}>
              {/* 확장/축소 아이콘 */}
              {hasChildren ? (
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    toggleExpand(dept.dept_code);
                  }}
                  className="h-4 w-4"
                >
                  {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                </button>
              ) : (
                <div className="h-4 w-4" />
              )}

              {/* 부서명 */}
              <span className="font-medium">{dept.dept_name}</span>

              {/* 인원수 */}
              <div className="text-muted-foreground flex items-center gap-1 text-xs">
                <Users className="h-3 w-3" />
                <span>{dept.memberCount || 0}</span>
              </div>
            </div>

            {/* 액션 버튼 */}
            <div className="flex gap-1">
              <Button
                variant="ghost"
                size="icon"
                className="h-6 w-6"
                onClick={(e) => {
                  e.stopPropagation();
                  handleAddDepartment(dept.dept_code);
                }}
              >
                <Plus className="h-3 w-3" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                className="text-destructive h-6 w-6"
                onClick={(e) => {
                  e.stopPropagation();
                  handleDeleteDepartmentRequest(dept.dept_code, dept.dept_name);
                }}
              >
                <Trash2 className="h-3 w-3" />
              </Button>
            </div>
          </div>

          {/* 하위 부서 (재귀) */}
          {hasChildren && isExpanded && renderDepartmentTree(dept.dept_code, level + 1)}
        </div>
      );
    });
  };

  return (
    <div className="space-y-4">
      {/* 헤더 */}
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold">부서 구조</h3>
        <Button size="sm" className="h-9 gap-2 text-sm" onClick={() => handleAddDepartment(null)}>
          <Plus className="h-4 w-4" />
          최상위 부서 추가
        </Button>
      </div>

      {/* 부서 트리 */}
      <div className="bg-card space-y-1 rounded-lg border p-4 shadow-sm">
        {isLoading ? (
          <div className="text-muted-foreground py-8 text-center text-sm">로딩 중...</div>
        ) : departments.length === 0 ? (
          <div className="text-muted-foreground py-8 text-center text-sm">
            부서가 없습니다. 최상위 부서를 추가해주세요.
          </div>
        ) : (
          renderDepartmentTree(null)
        )}
      </div>

      {/* 부서 추가 모달 */}
      <Dialog open={isAddModalOpen} onOpenChange={setIsAddModalOpen}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>{parentDeptForAdd ? "하위 부서 추가" : "최상위 부서 추가"}</DialogTitle>
          </DialogHeader>

          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="dept_name">
                부서명 <span className="text-destructive">*</span>
              </Label>
              <Input
                id="dept_name"
                value={newDeptName}
                onChange={(e) => setNewDeptName(e.target.value)}
                placeholder="부서명을 입력하세요"
                autoFocus
              />
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setIsAddModalOpen(false)}>
              취소
            </Button>
            <Button onClick={handleSaveDepartment} disabled={!newDeptName.trim()}>
              추가
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 중복 알림 모달 */}
      <Dialog open={!!duplicateMessage} onOpenChange={() => setDuplicateMessage(null)}>
        <DialogContent className="max-w-[95vw] sm:max-w-[400px]">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">중복 알림</DialogTitle>
          </DialogHeader>
          <div className="py-4">
            <p className="text-sm">{duplicateMessage}</p>
          </div>
          <DialogFooter>
            <Button onClick={() => setDuplicateMessage(null)} className="h-8 text-xs sm:h-10 sm:text-sm">
              확인
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 부서 삭제 확인 모달 */}
      <Dialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
        <DialogContent className="max-w-[95vw] sm:max-w-[400px]">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">부서 삭제 확인</DialogTitle>
          </DialogHeader>
          <div className="py-4">
            <p className="text-sm">
              <span className="font-semibold">{deptToDelete?.name}</span> 부서를 삭제하시겠습니까?
            </p>
            <p className="text-muted-foreground mt-2 text-xs">이 작업은 되돌릴 수 없습니다.</p>
          </div>
          <DialogFooter className="gap-2 sm:gap-0">
            <Button
              variant="outline"
              onClick={() => {
                setDeleteConfirmOpen(false);
                setDeptToDelete(null);
              }}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </Button>
            <Button
              variant="destructive"
              onClick={handleDeleteDepartmentConfirm}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              삭제
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 부서 삭제 에러 모달 */}
      <Dialog open={!!deleteErrorMessage} onOpenChange={() => setDeleteErrorMessage(null)}>
        <DialogContent className="max-w-[95vw] sm:max-w-[400px]">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">삭제 불가</DialogTitle>
          </DialogHeader>
          <div className="py-4">
            <p className="text-sm">{deleteErrorMessage}</p>
          </div>
          <DialogFooter>
            <Button onClick={() => setDeleteErrorMessage(null)} className="h-8 text-xs sm:h-10 sm:text-sm">
              확인
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}