"use client";

import React, { useState, useEffect, useMemo } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { 
  Loader2, 
  Download, 
  FileIcon,
  AlertCircle,
  ArrowDownToLine,
  ArrowUpFromLine,
} from "lucide-react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { 
  fetchGetRevTreeCompleteList,
  parseRevisionTree,
  fetchGetActivityFileList,
  type ActivityFileApiResponse,
} from "@/lib/swp/api-client";
import { downloadVendorFile } from "@/lib/swp/vendor-actions";
import type { DocumentListItem } from "@/lib/swp/document-service";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import { formatSwpDateShort, formatFileSize } from "@/lib/swp/utils";

interface SwpDocumentDetailDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  document: DocumentListItem | null;
  projNo: string;
  vendorCode: string;
  userId: string;
}

// Activity 행 데이터
interface ActivityRow {
  revNo: string;
  revSeq: string;
  stage: string;
  actvNo: string;
  inOut: "IN" | "OUT";
  statusCode: string;
  statusName: string;
  transmittalNo: string;
  refActivityNo: string;
  createDate: string;
  createEmpNo: string;
}

export function SwpDocumentDetailDialog({
  open,
  onOpenChange,
  document,
  projNo,
}: SwpDocumentDetailDialogProps) {
  const [activities, setActivities] = useState<ActivityRow[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [selectedActivity, setSelectedActivity] = useState<ActivityRow | null>(null);
  const [activityFiles, setActivityFiles] = useState<ActivityFileApiResponse[]>([]);
  const [isLoadingFiles, setIsLoadingFiles] = useState(false);

  // 문서 상세 로드
  useEffect(() => {
    if (open && document) {
      loadDocumentDetail();
    } else {
      // 다이얼로그 닫힐 때 초기화
      setSelectedActivity(null);
      setActivityFiles([]);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open, document?.DOC_NO]);

  const loadDocumentDetail = async () => {
    if (!document) return;

    setIsLoading(true);
    setSelectedActivity(null);
    setActivityFiles([]);
    
    try {
      // GetRevTreeCompleteList 호출
      const tree = await fetchGetRevTreeCompleteList({
        proj_no: projNo,
        doc_no: document.DOC_NO,
      });

      const parsed = await parseRevisionTree(tree);

      // Activity를 flat한 배열로 변환 (테이블용)
      const flatActivities: ActivityRow[] = [];
      parsed.revisions.forEach((rev) => {
        rev.activities.forEach((act) => {
          flatActivities.push({
            revNo: rev.revNo,
            revSeq: rev.revSeq,
            stage: rev.stage,
            actvNo: act.actvNo,
            inOut: act.inOut,
            statusCode: act.statusCode,
            statusName: act.statusName,
            transmittalNo: act.transmittalNo,
            refActivityNo: act.refActivityNo,
            createDate: act.createDate,
            createEmpNo: act.createEmpNo,
          });
        });
      });

      setActivities(flatActivities);
    } catch (error) {
      console.error("문서 상세 조회 실패:", error);
      toast.error("문서 리비전 트리를 불러오는데 실패했습니다");
    } finally {
      setIsLoading(false);
    }
  };

  // Activity 선택 및 파일 로드
  const handleActivityClick = async (activity: ActivityRow) => {
    if (selectedActivity?.actvNo === activity.actvNo) {
      // 같은 Activity 클릭 시 토글
      setSelectedActivity(null);
      setActivityFiles([]);
      return;
    }

    setSelectedActivity(activity);
    setIsLoadingFiles(true);
    setActivityFiles([]);

    try {
      // GetActivityFileList 호출
      const files = await fetchGetActivityFileList({
        proj_no: projNo,
        doc_no: document?.DOC_NO || "",
        rev_seq: activity.revSeq,
      });

      // 해당 Activity의 파일만 필터링
      const activitySpecificFiles = files.filter(
        (f) => f.ACTV_NO === activity.actvNo
      );

      setActivityFiles(activitySpecificFiles);
    } catch (error) {
      console.error("파일 목록 조회 실패:", error);
      toast.error("파일 목록을 불러오는데 실패했습니다");
    } finally {
      setIsLoadingFiles(false);
    }
  };

  const handleDownloadFile = async (fileName: string, ownDocNo: string) => {
    try {
      toast.info("파일 다운로드 중...");
      const result = await downloadVendorFile(projNo, ownDocNo, fileName);
      
      if (!result.success || !result.data) {
        toast.error(result.error || "파일 다운로드 실패");
        return;
      }

      // Blob 생성 및 다운로드
      const blob = new Blob([Buffer.from(result.data)], { type: result.mimeType });
      const url = URL.createObjectURL(blob);
      const link = window.document.createElement("a");
      link.href = url;
      link.download = result.fileName || fileName;
      window.document.body.appendChild(link);
      link.click();
      window.document.body.removeChild(link);
      URL.revokeObjectURL(url);

      toast.success(`파일 다운로드 완료: ${fileName}`);
    } catch (error) {
      console.error("파일 다운로드 실패:", error);
      toast.error("파일 다운로드에 실패했습니다");
    }
  };

  // Revision별로 Activity 그룹핑 (rowspan용)
  const groupedActivities = useMemo(() => {
    const groups: Map<string, ActivityRow[]> = new Map();
    activities.forEach((activity) => {
      const key = `${activity.revNo}|${activity.stage}`;
      if (!groups.has(key)) {
        groups.set(key, []);
      }
      groups.get(key)!.push(activity);
    });
    return groups;
  }, [activities]);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[95vw] max-h-[80vh] overflow-hidden flex flex-col">
        <DialogHeader>
          <DialogTitle>문서 리비전 히스토리</DialogTitle>
          {document && (
            <DialogDescription>
              {document.DOC_NO} - {document.DOC_TITLE}
            </DialogDescription>
          )}
        </DialogHeader>

        {document && (
          <div className="flex-1 flex flex-col space-y-4 overflow-hidden min-h-0">
            {/* 문서 정보 */}
            <div className="grid grid-cols-1 md:grid-cols-5 gap-4 p-4 bg-muted/30 rounded-lg">
              <div>
                <span className="text-sm font-semibold">프로젝트:</span>
                <div className="text-sm">{document.PROJ_NO}</div>
                {document.PROJ_NM && (
                  <div className="text-xs text-muted-foreground">{document.PROJ_NM}</div>
                )}
              </div>
              <div>
                <span className="text-sm font-semibold">패키지:</span>
                <div className="text-sm">{document.PKG_NO || "-"}</div>
              </div>
              <div>
                <span className="text-sm font-semibold">업체:</span>
                <div className="text-sm">{document.CPY_NM || "-"}</div>
                {document.VNDR_CD && (
                  <div className="text-xs text-muted-foreground">{document.VNDR_CD}</div>
                )}
              </div>
              <div>
                <span className="text-sm font-semibold">최신 리비전:</span>
                <div className="text-sm">{document.LTST_REV_NO || "-"}</div>
              </div>
              <div>
                <span className="text-sm font-semibold">총 Activity:</span>
                <div className="text-sm">{activities.length}개</div>
              </div>
            </div>

            {/* Activity 테이블 */}
            {isLoading ? (
              <div className="flex items-center justify-center p-8">
                <Loader2 className="h-6 w-6 animate-spin" />
                <span className="ml-2">리비전 트리 로딩 중...</span>
              </div>
            ) : activities.length > 0 ? (
              <>
                {/* Activity 테이블 (위) */}
                <div className="flex-1 overflow-auto border rounded-lg min-h-0">
                  <Table>
                    <TableHeader className="sticky top-0 bg-background z-10">
                      <TableRow>
                        <TableHead className="w-[80px]">Rev</TableHead>
                        <TableHead className="w-[80px]">Stage</TableHead>
                        <TableHead className="w-[80px]">IN/OUT</TableHead>
                        <TableHead className="w-[100px]">Status</TableHead>
                        <TableHead className="min-w-[150px]">Transmittal No</TableHead>
                        <TableHead className="min-w-[150px]">Activity No</TableHead>
                        <TableHead className="min-w-[100px]">Ref Activity</TableHead>
                        <TableHead className="w-[120px]">Modified</TableHead>
                        <TableHead className="w-[80px]">By</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {Array.from(groupedActivities.entries()).map(([key, groupActivities]) => {
                        const [revNo, stage] = key.split("|");
                        return groupActivities.map((activity, idx) => (
                          <TableRow
                            key={activity.actvNo}
                            className={cn(
                              "cursor-pointer hover:bg-muted/50",
                              selectedActivity?.actvNo === activity.actvNo &&
                                "bg-blue-50 hover:bg-blue-100"
                            )}
                            onClick={() => handleActivityClick(activity)}
                          >
                            {/* Rev 컬럼 (첫 행만 표시, rowspan) */}
                            {idx === 0 && (
                              <TableCell 
                                className="font-mono text-sm font-semibold align-top border-r"
                                rowSpan={groupActivities.length}
                              >
                                {revNo}
                              </TableCell>
                            )}
                            {/* Stage 컬럼 (첫 행만 표시, rowspan) */}
                            {idx === 0 && (
                              <TableCell 
                                className="align-top border-r"
                                rowSpan={groupActivities.length}
                              >
                                <Badge
                                  variant="outline"
                                  className={
                                    stage === "IFC"
                                      ? "bg-green-100 text-green-800"
                                      : stage === "IFA"
                                      ? "bg-blue-100 text-blue-800"
                                      : "bg-gray-100 text-gray-800"
                                  }
                                >
                                  {stage}
                                </Badge>
                              </TableCell>
                            )}
                            <TableCell>
                              <Badge
                                variant="outline"
                                className={
                                  activity.inOut === "IN"
                                    ? "bg-blue-100 text-blue-800"
                                    : "bg-green-100 text-green-800"
                                }
                              >
                                {activity.inOut === "IN" ? (
                                  <>
                                    <ArrowDownToLine className="h-3 w-3 mr-1" />
                                    IN
                                  </>
                                ) : (
                                  <>
                                    <ArrowUpFromLine className="h-3 w-3 mr-1" />
                                    OUT
                                  </>
                                )}
                              </Badge>
                            </TableCell>
                            <TableCell>
                              <div className="text-sm">
                                <div className="font-medium">{activity.statusName}</div>
                                <div className="text-xs text-muted-foreground">
                                  {activity.statusCode}
                                </div>
                              </div>
                            </TableCell>
                            <TableCell className="text-sm">
                              {activity.transmittalNo || "-"}
                            </TableCell>
                            <TableCell className="font-mono text-xs">
                              {activity.actvNo}
                            </TableCell>
                            <TableCell className="font-mono text-xs">
                              {activity.refActivityNo || "-"}
                            </TableCell>
                            <TableCell className="text-xs">
                              {formatSwpDateShort(activity.createDate)}
                            </TableCell>
                            <TableCell className="text-xs">
                              {activity.createEmpNo}
                            </TableCell>
                          </TableRow>
                        ));
                      })}
                    </TableBody>
                  </Table>
                </div>

                {/* 파일 목록 (아래) */}
                <div className="border rounded-lg overflow-hidden" style={{ height: "250px" }}>
                  <div className="p-3 bg-muted/50 border-b">
                    <h3 className="font-semibold text-sm">파일 목록</h3>
                    {selectedActivity ? (
                      <>
                        <p className="text-xs text-muted-foreground mt-1">
                          Activity: {selectedActivity.actvNo}
                        </p>
                        <p className="text-xs text-muted-foreground">
                          Rev {selectedActivity.revNo} ({selectedActivity.stage}) / {selectedActivity.inOut}
                        </p>
                      </>
                    ) : (
                      <p className="text-xs text-muted-foreground mt-1">
                        Activity를 선택하면 파일 목록이 표시됩니다
                      </p>
                    )}
                  </div>
                  <div className="overflow-auto p-3" style={{ height: "calc(250px - 80px)" }}>
                    {selectedActivity ? (
                      isLoadingFiles ? (
                        <div className="flex items-center justify-center h-full">
                          <Loader2 className="h-5 w-5 animate-spin" />
                          <span className="ml-2 text-sm">파일 로딩 중...</span>
                        </div>
                      ) : activityFiles.length > 0 ? (
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
                          {activityFiles.map((file) => (
                            <div
                              key={file.FILE_SEQ}
                              className="flex flex-col gap-2 p-3 border rounded bg-background hover:bg-muted/30"
                            >
                              <div className="flex items-start gap-2">
                                <FileIcon className="h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" />
                                <div className="flex-1 min-w-0">
                                  <div className="text-sm font-medium break-all line-clamp-2">
                                    {file.FILE_NM}
                                  </div>
                                  {file.FILE_SZ && (
                                    <div className="text-xs text-muted-foreground">
                                      {formatFileSize(file.FILE_SZ)}
                                    </div>
                                  )}
                                  {file.STAT && (
                                    <Badge variant="outline" className="text-xs mt-1">
                                      {file.STAT}
                                    </Badge>
                                  )}
                                </div>
                              </div>
                              <Button
                                variant="outline"
                                size="sm"
                                className="w-full"
                                onClick={() => handleDownloadFile(file.FILE_NM, document.OWN_DOC_NO || document.DOC_NO)}
                              >
                                <Download className="h-3 w-3 mr-1" />
                                다운로드
                              </Button>
                            </div>
                          ))}
                        </div>
                      ) : (
                        <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
                          <div className="text-center">
                            <AlertCircle className="h-8 w-8 mx-auto mb-2 opacity-50" />
                            <p>파일이 없습니다</p>
                          </div>
                        </div>
                      )
                    ) : (
                      <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
                        <div className="text-center">
                          <FileIcon className="h-12 w-12 mx-auto mb-2 opacity-30" />
                          <p>Activity를 선택해주세요</p>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </>
            ) : (
              <div className="p-8 text-center text-muted-foreground">
                <AlertCircle className="h-12 w-12 mx-auto mb-2 opacity-50" />
                <p>Activity 정보가 없습니다</p>
              </div>
            )}
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}