path: root/components/pq/pq-review-table.tsx

"use client"

import * as React from "react"
import { ChevronsUpDown, MessagesSquare, Download, Loader2 } from "lucide-react"

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { PQGroupData } from "@/lib/pq/service"
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Textarea } from "@/components/ui/textarea"
import { addReviewCommentAction, getItemReviewLogsAction } from "@/lib/pq/service"
import { useToast } from "@/hooks/use-toast"
import { formatDate } from "@/lib/utils"
import { downloadFileAction } from "@/lib/downloadFile"

interface ReviewLog {
  id: number
  reviewerComment: string
  reviewerName: string | null
  createdAt: Date
}

interface VendorPQReviewPageProps {
  data: PQGroupData[];
  onCommentAdded?: () => void; // 코멘트 추가 콜백
}

export default function VendorPQReviewPage({ data, onCommentAdded }: VendorPQReviewPageProps) {
  const { toast } = useToast()

  // 파일 다운로드 함수 - 서버 액션 사용
  const handleFileDownload = async (filePath: string, fileName: string) => {
    try {
      toast({
        title: "Download Started",
        description: `Preparing ${fileName} for download...`,
      });
      
      // 서버 액션 호출
      const result = await downloadFileAction(filePath);
      
      if (!result.ok || !result.data) {
        throw new Error(result.error || 'Failed to download file');
      }
      
      // Base64 디코딩하여 Blob 생성
      const binaryString = atob(result.data.content);
      const bytes = new Uint8Array(binaryString.length);
      for (let i = 0; i < binaryString.length; i++) {
        bytes[i] = binaryString.charCodeAt(i);
      }
      
      // Blob 생성 및 다운로드
      const blob = new Blob([bytes.buffer], { type: result.data.mimeType });
      const url = URL.createObjectURL(blob);
      
      // 다운로드 링크 생성 및 클릭
      const a = document.createElement('a');
      a.href = url;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
      
      // 정리
      URL.revokeObjectURL(url);
      document.body.removeChild(a);
      
      toast({
        title: "Download Complete",
        description: `${fileName} downloaded successfully`,
      });
    } catch (error) {
      console.error('Download error:', error);
      toast({ 
        title: "Download Error", 
        description: error instanceof Error ? error.message : "Failed to download file",
        variant: "destructive" 
      });
    }
  };

  return (
    <div className="space-y-4">
      {data.map((group) => (
        <Collapsible key={group.groupName} defaultOpen>
          <CollapsibleTrigger asChild>
            <div className="flex items-center justify-between cursor-pointer p-3 bg-muted rounded">
              <h2 className="font-semibold text-lg">{group.groupName}</h2>
              <Button variant="ghost" size="sm" className="p-0 h-7 w-7">
                <ChevronsUpDown className="h-4 w-4" />
              </Button>
            </div>
          </CollapsibleTrigger>

          <CollapsibleContent>
            <Card className="mt-2 p-4">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[60px]">Code</TableHead>
                    <TableHead>Check Point</TableHead>
                    <TableHead>Answer</TableHead>
                    <TableHead className="w-[180px]">Attachments</TableHead>
                    <TableHead className="w-[60px] text-center">Comments</TableHead>
                  </TableRow>
                </TableHeader>

                <TableBody>
                  {group.items.map((item) => (
                    <TableRow key={item.criteriaId}>
                      <TableCell className="font-medium">{item.code}</TableCell>
                      <TableCell>{item.checkPoint}</TableCell>

                      <TableCell>
                        {item.answer ? (
                          <p className="whitespace-pre-wrap text-sm">
                            {item.answer}
                          </p>
                        ) : (
                          <p className="text-sm text-muted-foreground">(no answer)</p>
                        )}
                      </TableCell>

                      <TableCell>
                        {item.attachments.length > 0 ? (
                          <ul className="list-none space-y-1">
                            {item.attachments.map((file) => (
                              <li key={file.attachId} className="text-sm flex items-center">
                                <button
                                  className="text-blue-600 hover:text-blue-800 hover:underline flex items-center truncate max-w-[160px]"
                                  onClick={() => handleFileDownload(file.filePath, file.fileName)}
                                >
                                  <Download className="h-3 w-3 mr-1 flex-shrink-0" />
                                  <span className="truncate">{file.fileName}</span>
                                </button>
                              </li>
                            ))}
                          </ul>
                        ) : (
                          <p className="text-sm text-muted-foreground">(none)</p>
                        )}
                      </TableCell>

                      <TableCell className="text-center">
                        <ItemReviewButton 
                          answerId={item.answerId ?? undefined}
                          checkPoint={item.checkPoint} 
                          onCommentAdded={onCommentAdded}
                        />
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Card>
          </CollapsibleContent>
        </Collapsible>
      ))}
    </div>
  )
}

interface ItemReviewButtonProps {
  answerId?: number;
  checkPoint: string; // Check Point 추가
  onCommentAdded?: () => void;
}

/**
 * A button that opens a dialog to show logs + add new comment for a single item (vendorPqCriteriaAnswers).
 */
function ItemReviewButton({ answerId, checkPoint, onCommentAdded }: ItemReviewButtonProps) {
  const { toast } = useToast();
  const [open, setOpen] = React.useState(false);
  const [logs, setLogs] = React.useState<ReviewLog[]>([]);
  const [newComment, setNewComment] = React.useState("");
  const [isLoading, setIsLoading] = React.useState(false);
  const [hasComments, setHasComments] = React.useState(false);

  // If there's no answerId, item wasn't answered
  if (!answerId) {
    return <p className="text-xs text-muted-foreground">N/A</p>;
  }

  // fetchLogs 함수를 useCallback으로 메모이제이션
  const fetchLogs = React.useCallback(async () => {
    try {
      setIsLoading(true);
      const res = await getItemReviewLogsAction({ answerId });
      
      if (res.ok && res.data) {
        setLogs(res.data);
        // 코멘트 존재 여부 설정
        setHasComments(res.data.length > 0);
      } else {
        console.error("Error response:", res.error);
        toast({ title: "Error", description: res.error, variant: "destructive" });
      }
    } catch (error) {
      console.error("Fetch error:", error);
      toast({ title: "Error", description: String(error), variant: "destructive" });
    } finally {
      setIsLoading(false);
    }
  }, [answerId, toast]);

  // 초기 로드 시 코멘트 존재 여부 확인 (아이콘 색상용)
  React.useEffect(() => {
    const checkComments = async () => {
      try {
        const res = await getItemReviewLogsAction({ answerId });
        if (res.ok && res.data) {
          setHasComments(res.data.length > 0);
        }
      } catch (error) {
        console.error("Error checking comments:", error);
      }
    };
    
    checkComments();
  }, [answerId]);

  // open 상태가 변경될 때 로그 가져오기
  React.useEffect(() => {
    if (open) {
      fetchLogs();
    }
  }, [open, fetchLogs]);

  // 버튼 클릭 핸들러 - 다이얼로그 열기
  const handleButtonClick = React.useCallback(() => {
    setOpen(true);
  }, []);

  // 다이얼로그 상태 변경 핸들러
  const handleOpenChange = React.useCallback((nextOpen: boolean) => {
    setOpen(nextOpen);
  }, []);

  // 코멘트 추가 핸들러
  const handleAddComment = React.useCallback(async () => {
    try {
      setIsLoading(true);
      
      const res = await addReviewCommentAction({
        answerId,
        comment: newComment,
        reviewerName: "AdminUser",
      });
      
      if (res.ok) {
        toast({ title: "Comment added", description: "New review comment saved" });
        setNewComment("");
        setHasComments(true); // 코멘트 추가 성공 시 상태 업데이트
        
        // 코멘트가 추가되었음을 부모 컴포넌트에 알림
        if (onCommentAdded) {
          onCommentAdded();
        }
        
        // 로그 다시 가져오기
        fetchLogs();
      } else {
        toast({ title: "Error", description: res.error, variant: "destructive" });
      }
    } catch (error) {
      toast({ title: "Error", description: String(error), variant: "destructive" });
    } finally {
      setIsLoading(false);
    }
  }, [answerId, newComment, onCommentAdded, fetchLogs, toast]);

  return (
    <>
      <Button variant="ghost" size="sm" onClick={handleButtonClick}>
        <MessagesSquare 
          className={`h-4 w-4 ${hasComments ? 'text-blue-600' : ''}`} 
        />
      </Button>

      <Dialog open={open} onOpenChange={handleOpenChange}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{checkPoint} Comments</DialogTitle>
          </DialogHeader>

          {/* Logs section */}
          <div className="max-h-[200px] overflow-y-auto space-y-2">
            {isLoading ? (
              <div className="flex justify-center p-4">
                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
              </div>
            ) : logs.length > 0 ? (
              logs.map((log) => (
                <div key={log.id} className="p-2 border rounded text-sm">
                  <p className="font-medium">{log.reviewerName}</p>
                  <p>{log.reviewerComment}</p>
                  <p className="text-xs text-muted-foreground">
                    {formatDate(log.createdAt)}
                  </p>
                </div>
              ))
            ) : (
              <p className="text-sm text-muted-foreground">No comments yet.</p>
            )}
          </div>

          {/* Add new comment */}
          <div className="space-y-2">
            <Textarea
              placeholder="Add a new comment..."
              value={newComment}
              onChange={(e) => setNewComment(e.target.value)}
            />
            <Button
              size="sm"
              onClick={handleAddComment}
              disabled={isLoading || !newComment.trim()}
            >
              Add Comment
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}