"use client";

import { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { MoreHorizontal, Trash2, Copy, Plus, Search, Network, Database, Calendar, User } from "lucide-react";
import { DataFlowAPI, DataFlowDiagram } from "@/lib/api/dataflow";
import { toast } from "sonner";
import { useAuth } from "@/hooks/useAuth";

interface DataFlowListProps {
  onDesignDiagram: (diagram: DataFlowDiagram | null) => void;
}

export default function DataFlowList({ onDesignDiagram }: DataFlowListProps) {
  const { user } = useAuth();
  const [diagrams, setDiagrams] = useState<DataFlowDiagram[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [total, setTotal] = useState(0);

  // 사용자 회사 코드 가져오기 (기본값: "*")
  const companyCode = user?.company_code || user?.companyCode || "*";

  // 모달 상태
  const [showCopyModal, setShowCopyModal] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [selectedDiagramForAction, setSelectedDiagramForAction] = useState<DataFlowDiagram | null>(null);

  // 목록 로드 함수 분리
  const loadDiagrams = useCallback(async () => {
    try {
      setLoading(true);
      const response = await DataFlowAPI.getJsonDataFlowDiagrams(currentPage, 20, searchTerm, companyCode);

      // JSON API 응답을 기존 형식으로 변환
      const convertedDiagrams = response.diagrams.map((diagram) => ({
        diagramId: diagram.diagram_id,
        relationshipId: diagram.diagram_id, // 호환성을 위해 추가
        diagramName: diagram.diagram_name,
        connectionType: "json-based", // 새로운 JSON 기반 타입
        relationshipType: "multi-relationship", // 다중 관계 타입
        relationshipCount: diagram.relationships?.relationships?.length || 0,
        tableCount: diagram.relationships?.tables?.length || 0,
        tables: diagram.relationships?.tables || [],
        companyCode: diagram.company_code, // 회사 코드 추가
        createdAt: new Date(diagram.created_at || new Date()),
        createdBy: diagram.created_by || "SYSTEM",
        updatedAt: new Date(diagram.updated_at || diagram.created_at || new Date()),
        updatedBy: diagram.updated_by || "SYSTEM",
        lastUpdated: diagram.updated_at || diagram.created_at || new Date().toISOString(),
      }));

      setDiagrams(convertedDiagrams);
      setTotal(response.pagination.total || 0);
      setTotalPages(Math.max(1, Math.ceil((response.pagination.total || 0) / 20)));
    } catch (error) {
      console.error("관계도 목록 조회 실패", error);
      toast.error("관계도 목록을 불러오는데 실패했습니다.");
    } finally {
      setLoading(false);
    }
  }, [currentPage, searchTerm, companyCode]);

  // 관계도 목록 로드
  useEffect(() => {
    loadDiagrams();
  }, [loadDiagrams]);

  const handleDelete = (diagram: DataFlowDiagram) => {
    setSelectedDiagramForAction(diagram);
    setShowDeleteModal(true);
  };

  const handleCopy = (diagram: DataFlowDiagram) => {
    setSelectedDiagramForAction(diagram);
    setShowCopyModal(true);
  };

  // 복사 확인
  const handleConfirmCopy = async () => {
    if (!selectedDiagramForAction) return;

    try {
      setLoading(true);
      const copiedDiagram = await DataFlowAPI.copyJsonDataFlowDiagram(
        selectedDiagramForAction.diagramId,
        companyCode,
        undefined,
        user?.userId || "SYSTEM",
      );
      toast.success(`관계도가 성공적으로 복사되었습니다: ${copiedDiagram.diagram_name}`);

      // 목록 새로고침
      await loadDiagrams();
    } catch (error) {
      console.error("관계도 복사 실패:", error);
      toast.error("관계도 복사에 실패했습니다.");
    } finally {
      setLoading(false);
      setShowCopyModal(false);
      setSelectedDiagramForAction(null);
    }
  };

  // 삭제 확인
  const handleConfirmDelete = async () => {
    if (!selectedDiagramForAction) return;

    try {
      setLoading(true);
      await DataFlowAPI.deleteJsonDataFlowDiagram(selectedDiagramForAction.diagramId, companyCode);
      toast.success(`관계도가 삭제되었습니다: ${selectedDiagramForAction.diagramName}`);

      // 목록 새로고침
      await loadDiagrams();
    } catch (error) {
      console.error("관계도 삭제 실패:", error);
      toast.error("관계도 삭제에 실패했습니다.");
    } finally {
      setLoading(false);
      setShowDeleteModal(false);
      setSelectedDiagramForAction(null);
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center py-8">
        <div className="text-gray-500">로딩 중...</div>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* 검색 및 필터 */}
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-2">
          <div className="relative">
            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
            <Input
              placeholder="관계도명, 테이블명으로 검색..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-80 pl-10"
            />
          </div>
        </div>
        <Button className="bg-blue-600 hover:bg-blue-700" onClick={() => onDesignDiagram(null)}>
          <Plus className="mr-2 h-4 w-4" />새 관계도 생성
        </Button>
      </div>

      {/* 관계도 목록 테이블 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center justify-between">
            <span className="flex items-center">
              <Network className="mr-2 h-5 w-5" />
              데이터 흐름 관계도 ({total})
            </span>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>관계도명</TableHead>
                <TableHead>회사 코드</TableHead>
                <TableHead>테이블 수</TableHead>
                <TableHead>관계 수</TableHead>
                <TableHead>최근 수정</TableHead>
                <TableHead>작업</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {diagrams.map((diagram) => (
                <TableRow key={diagram.diagramId} className="hover:bg-gray-50">
                  <TableCell>
                    <div>
                      <div className="flex items-center font-medium text-gray-900">
                        <Database className="mr-2 h-4 w-4 text-gray-500" />
                        {diagram.diagramName}
                      </div>
                      <div className="mt-1 text-sm text-gray-500">
                        테이블: {diagram.tables.slice(0, 3).join(", ")}
                        {diagram.tables.length > 3 && ` 외 ${diagram.tables.length - 3}개`}
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>{diagram.companyCode || "*"}</TableCell>
                  <TableCell>
                    <div className="flex items-center">
                      <Database className="mr-1 h-3 w-3 text-gray-400" />
                      {diagram.tableCount}
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center">
                      <Network className="mr-1 h-3 w-3 text-gray-400" />
                      {diagram.relationshipCount}
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center text-sm text-gray-600">
                      <Calendar className="mr-1 h-3 w-3 text-gray-400" />
                      {new Date(diagram.updatedAt).toLocaleDateString()}
                    </div>
                    <div className="flex items-center text-xs text-gray-400">
                      <User className="mr-1 h-3 w-3" />
                      {diagram.updatedBy}
                    </div>
                  </TableCell>
                  <TableCell>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" className="h-8 w-8 p-0">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => onDesignDiagram(diagram)}>
                          <Network className="mr-2 h-4 w-4" />
                          관계도 설계
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => handleCopy(diagram)}>
                          <Copy className="mr-2 h-4 w-4" />
                          복사
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => handleDelete(diagram)} className="text-red-600">
                          <Trash2 className="mr-2 h-4 w-4" />
                          삭제
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>

          {diagrams.length === 0 && (
            <div className="py-8 text-center text-gray-500">
              <Network className="mx-auto mb-4 h-12 w-12 text-gray-300" />
              <div className="mb-2 text-lg font-medium">관계도가 없습니다</div>
              <div className="text-sm">새 관계도를 생성하여 테이블 간 데이터 관계를 설정해보세요.</div>
            </div>
          )}
        </CardContent>
      </Card>

      {/* 페이지네이션 */}
      {totalPages > 1 && (
        <div className="flex items-center justify-center space-x-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
            disabled={currentPage === 1}
          >
            이전
          </Button>
          <span className="text-sm text-gray-600">
            {currentPage} / {totalPages}
          </span>
          <Button
            variant="outline"
            size="sm"
            onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
            disabled={currentPage === totalPages}
          >
            다음
          </Button>
        </div>
      )}

      {/* 복사 확인 모달 */}
      <Dialog open={showCopyModal} onOpenChange={setShowCopyModal}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>관계도 복사</DialogTitle>
            <DialogDescription>
              &ldquo;{selectedDiagramForAction?.diagramName}&rdquo; 관계도를 복사하시겠습니까?
              <br />
              새로운 관계도는 원본 이름 뒤에 (1), (2), (3)... 형태로 생성됩니다.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowCopyModal(false)}>
              취소
            </Button>
            <Button onClick={handleConfirmCopy} disabled={loading}>
              {loading ? "복사 중..." : "복사"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 삭제 확인 모달 */}
      <Dialog open={showDeleteModal} onOpenChange={setShowDeleteModal}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="text-red-600">관계도 삭제</DialogTitle>
            <DialogDescription>
              &ldquo;{selectedDiagramForAction?.diagramName}&rdquo; 관계도를 완전히 삭제하시겠습니까?
              <br />
              <span className="font-medium text-red-600">
                이 작업은 되돌릴 수 없으며, 모든 관계 정보가 영구적으로 삭제됩니다.
              </span>
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowDeleteModal(false)}>
              취소
            </Button>
            <Button variant="destructive" onClick={handleConfirmDelete} disabled={loading}>
              {loading ? "삭제 중..." : "삭제"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}