"use client"

import * as React from "react"
import { format } from "date-fns"
import { ko } from "date-fns/locale"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { 
  FileText, 
  Users, 
  CheckCircle, 
  Clock, 
  AlertCircle,
  Download,
  File,
  MessageSquare
} from "lucide-react"

import { 
  getComplianceResponse,
  getComplianceResponseAnswers,
  getComplianceResponseFilesByResponseId,
  getComplianceSurveyTemplate,
  getComplianceQuestions,
} from "./services"
import { AgreementCommentList } from "@/lib/basic-contract/agreement-comments/agreement-comment-list"

interface ComplianceResponseDetailProps {
  templateId: number
  responseId: number
  promises?: Promise<any[]>
}

export function ComplianceResponseDetail({ templateId, responseId, promises }: ComplianceResponseDetailProps) {
  const [response, setResponse] = React.useState<any>(null)
  const [answers, setAnswers] = React.useState<any[]>([])
  const [files, setFiles] = React.useState<any[]>([])
  const [template, setTemplate] = React.useState<any>(null)
  const [questions, setQuestions] = React.useState<any[]>([])
  const [loading, setLoading] = React.useState(true)

  React.useEffect(() => {
    const fetchResponseData = async () => {
      try {
        let responseData, answersData, filesData, templateData, questionsData;
        
        if (promises) {
          [responseData, answersData, filesData, templateData, questionsData] = await promises;
        } else {
          [responseData, answersData, filesData, templateData, questionsData] = await Promise.all([
            getComplianceResponse(responseId),
            getComplianceResponseAnswers(responseId),
            getComplianceResponseFilesByResponseId(responseId),
            getComplianceSurveyTemplate(templateId),
            getComplianceQuestions(templateId)
          ]);
        }

        setResponse(responseData)
        setAnswers(answersData)
        setFiles(filesData)
        setTemplate(templateData)
        setQuestions(questionsData)
      } catch (error) {
        console.error("Error fetching response data:", error)
      } finally {
        setLoading(false)
      }
    }

    fetchResponseData()
  }, [templateId, responseId, promises])

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'COMPLETED':
        return <CheckCircle className="h-4 w-4 text-green-600" />
      case 'IN_PROGRESS':
        return <Clock className="h-4 w-4 text-yellow-600" />
      case 'REVIEWED':
        return <CheckCircle className="h-4 w-4 text-blue-600" />
      default:
        return <AlertCircle className="h-4 w-4 text-gray-600" />
    }
  }

  const getStatusText = (status: string) => {
    switch (status) {
      case 'COMPLETED':
        return '완료'
      case 'IN_PROGRESS':
        return '진행중'
      case 'REVIEWED':
        return '검토완료'
      default:
        return '알 수 없음'
    }
  }

  const getQuestionText = (questionId: number) => {
    const question = questions.find(q => q.id === questionId)
    return question ? question.questionText : '질문을 찾을 수 없습니다'
  }

  const getQuestionNumber = (questionId: number) => {
    const question = questions.find(q => q.id === questionId)
    return question ? question.questionNumber : '-'
  }

  const hasFileUpload = (questionId: number) => {
    const question = questions.find(q => q.id === questionId)
    return question ? question.hasFileUpload : false
  }

  const isQuestionRedFlag = (questionId: number) => {
    const question = questions.find(q => q.id === questionId)
    return question ? question.isRedFlag : false
  }

  const isRedFlagTriggered = (answer: any) => {
    const isRedFlag = isQuestionRedFlag(answer.questionId)
    const answerValue = (answer.answerValue ?? '').toString().trim().toUpperCase()
    return isRedFlag && answerValue === 'YES'
  }

  // 파일 다운로드 핸들러
  const handleFileDownload = async (file: any) => {
    try {
      // 파일 다운로드 API 호출
      const response = await fetch(`/api/compliance/files/download?fileId=${file.id}`);
      
      if (!response.ok) {
        throw new Error('파일 다운로드에 실패했습니다');
      }
      
      // Blob으로 파일 데이터 받기
      const blob = await response.blob();
      
      // 임시 URL 생성하여 다운로드
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = file.fileName;
      document.body.appendChild(link);
      link.click();
      
      // 정리
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
      
      console.log("✅ 파일 다운로드 성공:", file.fileName);
    } catch (error) {
      console.error("❌ 파일 다운로드 실패:", error);
      alert(`파일 다운로드에 실패했습니다: ${error instanceof Error ? error.message : '알 수 없는 오류'}`);
    }
  }

  if (loading) {
    return (
      <div className="space-y-4">
        <div className="h-8 w-48 bg-muted animate-pulse rounded" />
        <div className="h-64 w-full bg-muted animate-pulse rounded" />
      </div>
    )
  }

  if (!response) {
    return (
      <div className="text-center py-8 text-muted-foreground">
        응답을 찾을 수 없습니다.
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* 응답 정보 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Users className="h-5 w-5" />
            설문조사 응답 정보
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="text-sm font-medium text-muted-foreground">템플릿</label>
              <p className="mt-1">{template?.name || '-'}</p>
            </div>
            <div>
              <label className="text-sm font-medium text-muted-foreground">업체명</label>
              <p className="mt-1">
                {response.vendorName ? (
                  <span>{response.vendorName}</span>
                ) : (
                  <span className="text-muted-foreground">기본계약 ID: {response.basicContractId}</span>
                )}
              </p>
              {response.vendorCode && (
                <p className="text-xs text-muted-foreground mt-1">Vendor Code: {response.vendorCode}</p>
              )}
            </div>
            <div>
              <label className="text-sm font-medium text-muted-foreground">상태</label>
              <div className="flex items-center gap-2 mt-1">
                {getStatusIcon(response.status)}
                <Badge variant={response.status === 'COMPLETED' ? 'default' : 'secondary'}>
                  {getStatusText(response.status)}
                </Badge>
              </div>
            </div>
            <div>
              <label className="text-sm font-medium text-muted-foreground">완료일</label>
              <p className="mt-1">
                {response.completedAt ? 
                  format(new Date(response.completedAt), 'yyyy-MM-dd HH:mm', { locale: ko }) : 
                  '-'
                }
              </p>
            </div>
            <div>
              <label className="text-sm font-medium text-muted-foreground">생성일</label>
              <p className="mt-1">
                {response.createdAt ? 
                  format(new Date(response.createdAt), 'yyyy-MM-dd HH:mm', { locale: ko }) : 
                  '-'
                }
              </p>
            </div>
            <div>
              <label className="text-sm font-medium text-muted-foreground">수정일</label>
              <p className="mt-1">
                {response.updatedAt ? 
                  format(new Date(response.updatedAt), 'yyyy-MM-dd HH:mm', { locale: ko }) : 
                  '-'
                }
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 답변 목록 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <FileText className="h-5 w-5" />
            답변 목록 ({answers.length}개)
          </CardTitle>
        </CardHeader>
        <CardContent>
          {answers.length === 0 ? (
            <div className="text-center py-8 text-muted-foreground">
              아직 답변이 없습니다.
            </div>
          ) : (
            <div className="space-y-4">
              {answers.map((answer) => {
                const redFlagTriggered = isRedFlagTriggered(answer)
                return (
                  <div 
                    key={answer.id} 
                    className={`border-2 rounded-lg p-4 space-y-3 ${
                      redFlagTriggered 
                        ? 'border-red-500 bg-red-50/50' 
                        : 'border-gray-200'
                    }`}
                  >
                    <div className="flex items-center gap-2 pb-3 border-b">
                      <Badge 
                        variant={redFlagTriggered ? "destructive" : "outline"}
                      >
                        {getQuestionNumber(answer.questionId)}
                      </Badge>
                      <span className="font-medium">
                        {getQuestionText(answer.questionId)}
                      </span>
                      {/* {isQuestionRedFlag(answer.questionId) && (
                        <Badge variant="destructive" className="ml-auto">
                          RED FLAG
                        </Badge>
                      )} */}
                    </div>
                    <div className="space-y-3">
                      {/* 답변 값 */}
                      {answer.answerValue && (
                        <div>
                          <label className="text-sm font-medium text-muted-foreground">답변</label>
                          <div className="mt-1 flex items-center gap-2">
                            <p className={`flex-1 p-2 rounded ${
                              redFlagTriggered 
                                ? 'bg-red-100 text-red-900 font-semibold' 
                                : 'bg-muted'
                            }`}>
                              {answer.answerValue}
                            </p>
                            {/* {redFlagTriggered && (
                              <Badge variant="destructive" className="shrink-0">
                                Red Flag 발생
                              </Badge>
                            )} */}
                          </div>
                        </div>
                      )}

                      {/* 상세 설명 */}
                      {answer.detailText && (
                        <div>
                          <label className="text-sm font-medium text-muted-foreground">상세 설명</label>
                          <p className="mt-1 p-2 bg-muted rounded">{answer.detailText}</p>
                        </div>
                      )}

                      {/* 기타 텍스트 */}
                      {answer.otherText && (
                        <div>
                          <label className="text-sm font-medium text-muted-foreground">기타 입력</label>
                          <p className="mt-1 p-2 bg-muted rounded">{answer.otherText}</p>
                        </div>
                      )}

                      {/* 퍼센트 값 */}
                      {answer.percentageValue && (
                        <div>
                          <label className="text-sm font-medium text-muted-foreground">퍼센트 값</label>
                          <p className="mt-1 p-2 bg-muted rounded">{answer.percentageValue}%</p>
                        </div>
                      )}

                    
                      {hasFileUpload(answer.questionId) && (
                        <div>
                          <label className="text-sm font-medium text-muted-foreground">첨부파일</label>
                          <div className="mt-1">
                            {files.filter(file => file.answerId === answer.id).length > 0 ? (
                              <div className="space-y-2">
                                {files
                                  .filter(file => file.answerId === answer.id)
                                  .map((file) => (
                                    <div key={file.id} className="flex items-center justify-between p-2 bg-muted rounded">
                                      <div className="flex items-center gap-2">
                                        <File className="h-4 w-4 text-muted-foreground" />
                                        <span className="text-sm">{file.fileName}</span>
                                        <span className="text-xs text-muted-foreground">
                                          ({file.fileSize ? `${(file.fileSize / 1024).toFixed(1)} KB` : '크기 정보 없음'})
                                        </span>
                                      </div>
                                      <Button
                                        variant="ghost"
                                        size="sm"
                                        onClick={() => handleFileDownload(file)}
                                        className="h-6 w-6 p-0"
                                      >
                                        <Download className="h-3 w-3" />
                                      </Button>
                                    </div>
                                  ))}
                              </div>
                            ) : (
                              <p className="text-sm text-muted-foreground">첨부된 파일이 없습니다</p>
                            )}
                          </div>
                        </div>
                      )}

                      {/* 답변 생성일 */}
                      <div className="text-xs text-muted-foreground">
                        답변일: {answer.createdAt ? 
                          format(new Date(answer.createdAt), 'yyyy-MM-dd HH:mm', { locale: ko }) : 
                          '-'
                        }
                      </div>
                    </div>
                  </div>
                )
              })}
            </div>
          )}
        </CardContent>
      </Card>

      {/* 검토 정보 */}
      {response.reviewedBy && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <CheckCircle className="h-5 w-5" />
              검토 정보
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="text-sm font-medium text-muted-foreground">검토자</label>
                <p className="mt-1">
                  {response.reviewerName ? (
                    <span>{response.reviewerName}</span>
                  ) : (
                    <span className="text-muted-foreground">사용자 ID: {response.reviewedBy}</span>
                  )}
                </p>
                {response.reviewerEmail && (
                  <p className="text-xs text-muted-foreground mt-1">{response.reviewerEmail}</p>
                )}
              </div>
              <div>
                <label className="text-sm font-medium text-muted-foreground">검토일</label>
                <p className="mt-1">
                  {response.reviewedAt ? 
                    format(new Date(response.reviewedAt), 'yyyy-MM-dd HH:mm', { locale: ko }) : 
                    '-'
                  }
                </p>
              </div>
            </div>
            {response.reviewNotes && (
              <div>
                <label className="text-sm font-medium text-muted-foreground">검토 의견</label>
                <p className="mt-1 p-2 bg-muted rounded">{response.reviewNotes}</p>
              </div>
            )}
          </CardContent>
        </Card>
      )}

      {/* 협의 코멘트 - Red Flag 발생 시 당사가 먼저 코멘트를 달 수 있도록 */}
      {response.basicContractId && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <MessageSquare className="h-5 w-5" />
              협의 코멘트
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="h-[400px]">
              <AgreementCommentList
                basicContractId={response.basicContractId}
                currentUserType="SHI"
                readOnly={false}
              />
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}