path: root/lib/basic-contract/agreement-comments/agreement-comment-list.tsx

"use client";

import React, { useState, useCallback, useEffect } from 'react';
import { ScrollArea } from "@/components/ui/scroll-area";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import {
  MessageSquare,
  Plus,
  Trash2,
  Paperclip,
  X,
  Save,
  Upload,
  FileText,
  User,
  Building2,
  Loader2,
  Download,
  Send,
  CheckCircle2,
} from "lucide-react";
import { cn, formatDateTime } from "@/lib/utils";
import {
  getAgreementComments,
  addAgreementComment,
  deleteAgreementComment,
  uploadCommentAttachment,
  deleteCommentAttachment,
  completeNegotiation,
  type AgreementCommentData,
  type AgreementCommentAuthorType,
} from "./actions";

export interface AgreementCommentListProps {
  basicContractId: number;
  currentUserType?: AgreementCommentAuthorType;
  readOnly?: boolean;
  className?: string;
  onCommentCountChange?: (count: number) => void;
  isNegotiationCompleted?: boolean; // 협의 완료 여부
  onNegotiationComplete?: () => void; // 협의 완료 콜백
}

export function AgreementCommentList({
  basicContractId,
  currentUserType = 'Vendor',
  readOnly = false,
  className,
  onCommentCountChange,
  isNegotiationCompleted = false,
  onNegotiationComplete,
}: AgreementCommentListProps) {
  const [comments, setComments] = useState<AgreementCommentData[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isAdding, setIsAdding] = useState(false);
  const [newComment, setNewComment] = useState('');
  const [newAuthorName, setNewAuthorName] = useState('');
  const [uploadingFiles, setUploadingFiles] = useState<Set<number>>(new Set());
  const [isSaving, setIsSaving] = useState(false);
  const [pendingFiles, setPendingFiles] = useState<File[]>([]); // 첨부 대기 중인 파일들
  const [isCompletingNegotiation, setIsCompletingNegotiation] = useState(false);

  // 코멘트 로드
  const loadComments = useCallback(async () => {
    try {
      setIsLoading(true);
      const data = await getAgreementComments(basicContractId);
      setComments(data);
      onCommentCountChange?.(data.length);
    } catch (error) {
      console.error('코멘트 로드 실패:', error);
      toast.error("코멘트를 불러오는데 실패했습니다.");
    } finally {
      setIsLoading(false);
    }
  }, [basicContractId]); // onCommentCountChange를 dependency에서 제거

  // 초기 로드
  useEffect(() => {
    loadComments();
  }, [basicContractId]); // loadComments 대신 basicContractId만 의존

  // 코멘트 추가 핸들러 (저장만 - 이메일 발송 없음)
  const handleAddComment = useCallback(async (shouldSendEmail: boolean = false) => {
    if (!newComment.trim()) {
      toast.error("코멘트를 입력해주세요.");
      return;
    }

    setIsSaving(true);
    try {
      const result = await addAgreementComment({
        basicContractId,
        comment: newComment.trim(),
        authorName: newAuthorName.trim() || undefined,
        files: pendingFiles,
        shouldSendEmail, // 이메일 발송 여부 전달
      });

      if (result.success) {
        setNewComment('');
        setNewAuthorName('');
        setPendingFiles([]);
        setIsAdding(false);
        
        if (shouldSendEmail) {
          toast.success("코멘트가 제출되었으며 상대방에게 이메일이 발송되었습니다.");
        } else {
          toast.success("코멘트가 저장되었습니다.");
        }
        
        await loadComments(); // 목록 새로고침
      } else {
        toast.error(result.error || "코멘트 추가에 실패했습니다.");
      }
    } catch (error) {
      console.error('코멘트 추가 실패:', error);
      toast.error("코멘트 추가에 실패했습니다.");
    } finally {
      setIsSaving(false);
    }
  }, [newComment, newAuthorName, basicContractId, pendingFiles]); // pendingFiles 추가

  // 파일 선택 핸들러
  const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []);
    if (files.length > 0) {
      setPendingFiles(prev => [...prev, ...files]);
      toast.success(`${files.length}개의 파일이 추가되었습니다.`);
    }
    e.target.value = ''; // 파일 입력 초기화
  }, []);

  // 대기 중인 파일 삭제 핸들러
  const handleRemovePendingFile = useCallback((index: number) => {
    setPendingFiles(prev => prev.filter((_, i) => i !== index));
  }, []);

  // 코멘트 삭제 핸들러
  const handleDeleteComment = useCallback(async (commentId: number) => {
    if (!confirm("이 코멘트를 삭제하시겠습니까?")) {
      return;
    }

    try {
      const result = await deleteAgreementComment(commentId);
      if (result.success) {
        toast.success("코멘트가 삭제되었습니다.");
        await loadComments(); // 목록 새로고침
      } else {
        toast.error(result.error || "코멘트 삭제에 실패했습니다.");
      }
    } catch (error) {
      console.error('코멘트 삭제 실패:', error);
      toast.error("코멘트 삭제에 실패했습니다.");
    }
  }, []); // loadComments 제거

  // 첨부파일 업로드 핸들러
  const handleUploadAttachment = useCallback(async (commentId: number, file: File) => {
    setUploadingFiles(prev => new Set(prev).add(commentId));
    try {
      const result = await uploadCommentAttachment(commentId, file);
      if (result.success) {
        toast.success(`${file.name}이(가) 업로드되었습니다.`);
        await loadComments(); // 목록 새로고침
      } else {
        toast.error(result.error || "파일 업로드에 실패했습니다.");
      }
    } catch (error) {
      console.error('파일 업로드 실패:', error);
      toast.error("파일 업로드에 실패했습니다.");
    } finally {
      setUploadingFiles(prev => {
        const next = new Set(prev);
        next.delete(commentId);
        return next;
      });
    }
  }, []); // loadComments 제거

  // 첨부파일 삭제 핸들러
  const handleDeleteAttachment = useCallback(async (commentId: number, attachmentId: string) => {
    if (!confirm("이 첨부파일을 삭제하시겠습니까?")) {
      return;
    }

    try {
      const result = await deleteCommentAttachment(commentId, attachmentId);
      if (result.success) {
        toast.success("첨부파일이 삭제되었습니다.");
        await loadComments(); // 목록 새로고침
      } else {
        toast.error(result.error || "첨부파일 삭제에 실패했습니다.");
      }
    } catch (error) {
      console.error('첨부파일 삭제 실패:', error);
      toast.error("첨부파일 삭제에 실패했습니다.");
    }
  }, []); // loadComments 제거

  // 협의 완료 핸들러
  const handleCompleteNegotiation = useCallback(async () => {
    if (!confirm("협의를 완료하시겠습니까?\n협의 완료 후에는 법무검토 요청이 가능합니다.")) {
      return;
    }

    setIsCompletingNegotiation(true);
    try {
      const result = await completeNegotiation(basicContractId);
      if (result.success) {
        toast.success("협의가 완료되었습니다. 이제 법무검토 요청이 가능합니다.");
        if (onNegotiationComplete) {
          onNegotiationComplete();
        }
      } else {
        toast.error(result.error || "협의 완료 처리에 실패했습니다.");
      }
    } catch (error) {
      console.error('협의 완료 실패:', error);
      toast.error("협의 완료 처리 중 오류가 발생했습니다.");
    } finally {
      setIsCompletingNegotiation(false);
    }
  }, [basicContractId, onNegotiationComplete]);

  // 파일 크기 포맷팅
  const formatFileSize = (bytes: number): string => {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
  };

  if (isLoading) {
    return (
      <div className={cn("h-full flex items-center justify-center", className)}>
        <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
      </div>
    );
  }

  return (
    <div className={cn("h-full flex flex-col", className)}>
      {/* 헤더 */}
      <div className="flex-shrink-0 border-b bg-gray-50 p-3">
        <div className="flex items-center justify-between mb-2">
          <div className="flex items-center space-x-2">
            <MessageSquare className="h-5 w-5 text-blue-500" />
            <h3 className="font-semibold text-gray-800">협의 코멘트</h3>
            {isNegotiationCompleted && (
              <Badge className="bg-green-500 text-white border-green-600">
                협의 완료
              </Badge>
            )}
          </div>
          <div className="flex items-center space-x-2">
            <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200 h-8 px-3 text-sm flex items-center">
              총 {comments.length}개
            </Badge>
            {!readOnly && !isNegotiationCompleted && (
              <>
                <Button
                  size="sm"
                  onClick={() => setIsAdding(true)}
                  disabled={isAdding}
                  className="h-8"
                >
                  <Plus className="h-4 w-4 mr-1" />
                  코멘트 추가
                </Button>
                {comments.length > 0 && currentUserType === 'SHI' && (
                  <Button
                    size="sm"
                    onClick={handleCompleteNegotiation}
                    disabled={isCompletingNegotiation}
                    className="h-8 bg-green-600 hover:bg-green-700"
                  >
                    {isCompletingNegotiation ? (
                      <Loader2 className="h-4 w-4 mr-1 animate-spin" />
                    ) : (
                      <CheckCircle2 className="h-4 w-4 mr-1" />
                    )}
                    협의 완료
                  </Button>
                )}
              </>
            )}
          </div>
        </div>

        <p className="text-sm text-gray-600">
          {isNegotiationCompleted 
            ? "협의가 완료되었습니다. 법무검토 요청이 가능합니다."
            : "SHI와 협력업체 간 기본계약서 협의 내용을 작성하고 공유합니다."}
        </p>
      </div>

      {/* 코멘트 리스트 */}
      <ScrollArea className="flex-1">
        <div className="p-3 space-y-3">
          {/* 새 코멘트 입력 폼 */}
          {isAdding && !readOnly && !isNegotiationCompleted && (
            <Card 
              className={cn(
                "border-l-4",
                currentUserType === 'SHI'
                  ? "border-l-blue-500 border-blue-200 bg-blue-50"
                  : "border-l-green-500 border-green-200 bg-green-50"
              )}
            >
              <CardContent className="pt-4">
                <div className="space-y-3">
                  <div>
                    <Label className="text-sm font-medium text-gray-700">
                      작성자 유형
                    </Label>
                    <div className="mt-1.5 flex items-center space-x-2">
                      <Badge 
                        variant="outline" 
                        className={cn(
                          "px-3 py-1 font-semibold",
                          currentUserType === 'SHI' 
                            ? "bg-blue-600 text-white border-blue-700"
                            : "bg-green-600 text-white border-green-700"
                        )}
                      >
                        {currentUserType === 'SHI' ? (
                          <>
                            <Building2 className="h-3.5 w-3.5 mr-1.5" />
                            SHI
                          </>
                        ) : (
                          <>
                            <User className="h-3.5 w-3.5 mr-1.5" />
                            Vendor
                          </>
                        )}
                      </Badge>
                    </div>
                  </div>

                  <div>
                    <Label htmlFor="authorName" className="text-sm font-medium text-gray-700">
                      작성자 이름 (선택사항)
                    </Label>
                    <Input
                      id="authorName"
                      value={newAuthorName}
                      onChange={(e) => setNewAuthorName(e.target.value)}
                      placeholder="작성자 이름을 입력하세요..."
                      className="mt-1.5"
                    />
                  </div>

                  <div>
                    <Label htmlFor="comment" className="text-sm font-medium text-gray-700">
                      코멘트 *
                    </Label>
                    <Textarea
                      id="comment"
                      value={newComment}
                      onChange={(e) => setNewComment(e.target.value)}
                      placeholder="협의하고 싶은 내용을 입력하세요..."
                      className="mt-1.5 min-h-[100px]"
                    />
                  </div>

                  {/* 파일 첨부 영역 */}
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label className="text-sm font-medium text-gray-700 flex items-center">
                        <Paperclip className="h-4 w-4 mr-1" />
                        첨부파일 {pendingFiles.length > 0 ? `(${pendingFiles.length})` : ''}
                      </Label>
                      <label htmlFor="new-comment-files">
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          className="h-8"
                          onClick={() => document.getElementById('new-comment-files')?.click()}
                          disabled={isSaving}
                        >
                          <Upload className="h-3 w-3 mr-1" />
                          파일 추가
                        </Button>
                        <input
                          id="new-comment-files"
                          type="file"
                          multiple
                          className="hidden"
                          onChange={handleFileSelect}
                          accept="*/*" 
                        />
                      </label>
                    </div>

                    {/* 대기 중인 파일 목록 */}
                    {pendingFiles.length > 0 && (
                      <div className="space-y-1.5 max-h-32 overflow-y-auto">
                        {pendingFiles.map((file, index) => (
                          <div
                            key={`${file.name}-${index}`}
                            className="flex items-center justify-between bg-white rounded p-2 border border-gray-200"
                          >
                            <div className="flex items-center space-x-2 flex-1 min-w-0">
                              <FileText className="h-4 w-4 text-blue-500 flex-shrink-0" />
                              <div className="flex-1 min-w-0">
                                <p className="text-sm text-gray-700 truncate">
                                  {file.name}
                                </p>
                                <p className="text-xs text-gray-500">
                                  {formatFileSize(file.size)}
                                </p>
                              </div>
                            </div>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleRemovePendingFile(index)}
                              className="h-6 w-6 p-0 text-red-500 hover:text-red-700 hover:bg-red-50"
                            >
                              <X className="h-3 w-3" />
                            </Button>
                          </div>
                        ))}
                      </div>
                    )}

                    <p className="text-xs text-gray-500">
                      💡 파일을 먼저 추가한 후 저장 또는 제출 버튼을 눌러주세요.
                    </p>
                  </div>

                  <div className="flex items-center justify-end gap-2 pt-2 border-t">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        setIsAdding(false);
                        setNewComment('');
                        setNewAuthorName('');
                        setPendingFiles([]);
                      }}
                      disabled={isSaving}
                    >
                      <X className="h-4 w-4 mr-1" />
                      취소
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleAddComment(false)}
                      disabled={isSaving || !newComment.trim()}
                    >
                      {isSaving ? (
                        <Loader2 className="h-4 w-4 mr-1 animate-spin" />
                      ) : (
                        <Save className="h-4 w-4 mr-1" />
                      )}
                      저장
                    </Button>
                    <Button
                      size="sm"
                      onClick={() => handleAddComment(true)}
                      disabled={isSaving || !newComment.trim()}
                      className="bg-blue-600 hover:bg-blue-700"
                    >
                      {isSaving ? (
                        <Loader2 className="h-4 w-4 mr-1 animate-spin" />
                      ) : (
                        <Send className="h-4 w-4 mr-1" />
                      )}
                      제출 (메일발송)
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}

          {/* 기존 코멘트 목록 */}
          {comments.length === 0 && !isAdding ? (
            <div className="text-center py-8">
              <MessageSquare className="h-12 w-12 text-gray-300 mx-auto mb-3" />
              <p className="text-sm text-gray-500">
                {isNegotiationCompleted 
                  ? "협의가 완료되어 더 이상 코멘트를 추가할 수 없습니다."
                  : "아직 코멘트가 없습니다."}
              </p>
              {!readOnly && !isNegotiationCompleted && (
                <Button
                  variant="outline"
                  size="sm"
                  className="mt-3"
                  onClick={() => setIsAdding(true)}
                >
                  <Plus className="h-4 w-4 mr-1" />
                  첫 번째 코멘트 작성하기
                </Button>
              )}
            </div>
          ) : (
            comments.map((comment) => {
              // 현재 사용자가 이 코멘트의 작성자인지 확인
              const isCommentOwner = comment.authorType === currentUserType;

              return (
              <Card 
                key={comment.id} 
                className={cn(
                  "transition-all duration-200 hover:shadow-md",
                  comment.authorType === 'SHI' 
                    ? "border-l-4 border-l-blue-500 border-blue-200 bg-blue-50/50"
                    : "border-l-4 border-l-green-500 border-green-200 bg-green-50/50"
                )}
              >
                <CardContent className="pt-4">
                  <div className="space-y-3">
                    {/* 헤더: 작성자 정보 */}
                    <div className="flex items-start justify-between">
                      <div className="flex items-center space-x-2">
                        <Badge 
                          variant="outline" 
                          className={cn(
                            "px-3 py-1 font-semibold",
                            comment.authorType === 'SHI' 
                              ? "bg-blue-600 text-white border-blue-700"
                              : "bg-green-600 text-white border-green-700"
                          )}
                        >
                          {comment.authorType === 'SHI' ? (
                            <>
                              <Building2 className="h-3.5 w-3.5 mr-1.5" />
                              SHI
                            </>
                          ) : (
                            <>
                              <User className="h-3.5 w-3.5 mr-1.5" />
                              Vendor
                            </>
                          )}
                        </Badge>
                        {comment.authorName && (
                          <span className="text-sm font-medium text-gray-700">
                            {comment.authorName}
                          </span>
                        )}
                      </div>

                      {!readOnly && isCommentOwner && (
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => handleDeleteComment(comment.id)}
                          className="h-7 w-7 p-0 text-red-500 hover:text-red-700 hover:bg-red-50"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      )}
                    </div>

                    {/* 코멘트 내용 */}
                    <div className="bg-white rounded-md p-3 border border-gray-200">
                      <p className="text-sm text-gray-800 whitespace-pre-wrap leading-relaxed">
                        {comment.comment}
                      </p>
                    </div>

                    {/* 첨부파일 */}
                    {(comment.attachments.length > 0 || (!readOnly && isCommentOwner)) && (
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <Label className="text-xs font-medium text-gray-600 flex items-center">
                            <Paperclip className="h-3 w-3 mr-1" />
                            첨부파일 {comment.attachments.length > 0 ? `(${comment.attachments.length})` : ''}
                          </Label>
                          {!readOnly && isCommentOwner && (
                            <label htmlFor={`file-${comment.id}`}>
                              <Button
                                type="button"
                                variant="ghost"
                                size="sm"
                                className="h-6 text-xs"
                                disabled={uploadingFiles.has(comment.id)}
                                onClick={() => document.getElementById(`file-${comment.id}`)?.click()}
                              >
                                {uploadingFiles.has(comment.id) ? (
                                  <Loader2 className="h-3 w-3 mr-1 animate-spin" />
                                ) : (
                                  <Upload className="h-3 w-3 mr-1" />
                                )}
                                업로드
                              </Button>
                              <input
                                id={`file-${comment.id}`}
                                type="file"
                                className="hidden"
                                onChange={(e) => {
                                  const file = e.target.files?.[0];
                                  if (file) {
                                    handleUploadAttachment(comment.id, file);
                                  }
                                  e.target.value = '';
                                }}
                              />
                            </label>
                          )}
                        </div>

                        {comment.attachments.length > 0 && (
                          <div className="space-y-1.5">
                            {comment.attachments.map((attachment) => (
                              <div
                                key={attachment.id}
                                className="flex items-center justify-between bg-white rounded p-2 border border-gray-200 hover:border-gray-300 transition-colors"
                              >
                                <div className="flex items-center space-x-2 flex-1 min-w-0">
                                  <FileText className="h-4 w-4 text-blue-500 flex-shrink-0" />
                                  <div className="flex-1 min-w-0">
                                    <p className="text-sm text-gray-700 truncate">
                                      {attachment.fileName}
                                    </p>
                                    <p className="text-xs text-gray-500">
                                      {formatFileSize(attachment.fileSize)}
                                    </p>
                                  </div>
                                </div>
                                <div className="flex items-center space-x-1">
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    asChild
                                    className="h-6 w-6 p-0 text-blue-500 hover:text-blue-700 hover:bg-blue-50"
                                  >
                                    <a 
                                      href={attachment.filePath} 
                                      download={attachment.fileName}
                                      target="_blank" 
                                      rel="noopener noreferrer"
                                      title={`${attachment.fileName} 다운로드`}
                                    >
                                      <Download className="h-3 w-3" />
                                    </a>
                                  </Button>
                                  {!readOnly && isCommentOwner && (
                                    <Button
                                      variant="ghost"
                                      size="sm"
                                      onClick={() => handleDeleteAttachment(comment.id, attachment.id)}
                                      className="h-6 w-6 p-0 text-red-500 hover:text-red-700 hover:bg-red-50"
                                    >
                                      <X className="h-3 w-3" />
                                    </Button>
                                  )}
                                </div>
                              </div>
                            ))}
                          </div>
                        )}
                      </div>
                    )}

                    {/* 푸터: 작성일시 */}
                    <div className="flex items-center justify-between text-xs text-gray-500 pt-2 border-t border-gray-200">
                      <span>
                        작성일: {formatDateTime(comment.createdAt, "KR")}
                      </span>
                      {comment.updatedAt && comment.updatedAt.getTime() !== comment.createdAt.getTime() && (
                        <span>
                          수정일: {formatDateTime(comment.updatedAt, "KR")}
                        </span>
                      )}
                    </div>
                  </div>
                </CardContent>
              </Card>
            );
            })
          )}
        </div>
      </ScrollArea>
    </div>
  );
}