"use client"

import * as React from "react"
import { useRouter } from "next/navigation"
import { 
  Card, 
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
  CardFooter
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle
} from "@/components/ui/dialog"
import { useToast } from "@/hooks/use-toast"
import { CheckCircle, AlertCircle, FileText, Paperclip } from "lucide-react"
import { PQGroupData } from "@/lib/pq/service"
import { approvePQAction, rejectPQAction } from "@/lib/pq/service"

// PQ 제출 정보 타입
interface PQSubmission {
  id: number
  vendorId: number
  vendorName: string
  vendorCode: string
  type: string
  status: string
  projectId: number | null
  projectName: string | null
  projectCode: string | null
  submittedAt: Date | null
  approvedAt: Date | null
  rejectedAt: Date | null
  rejectReason: string | null
}

interface PQReviewWrapperProps {
  pqData: PQGroupData[]
  vendorId: number
  pqSubmission: PQSubmission
  canReview: boolean
}

export function PQReviewWrapper({
  pqData,
  vendorId,
  pqSubmission,
  canReview
}: PQReviewWrapperProps) {
  const router = useRouter()
  const { toast } = useToast()
  const [isApproving, setIsApproving] = React.useState(false)
  const [isRejecting, setIsRejecting] = React.useState(false)
  const [showApproveDialog, setShowApproveDialog] = React.useState(false)
  const [showRejectDialog, setShowRejectDialog] = React.useState(false)
  const [rejectReason, setRejectReason] = React.useState("")
  
  // PQ 승인 처리
  const handleApprove = async () => {
    try {
      setIsApproving(true)
      
      const result = await approvePQAction({
        pqSubmissionId: pqSubmission.id,
        vendorId: vendorId
      })
      
      if (result.ok) {
        toast({
          title: "PQ 승인 완료",
          description: "PQ가 성공적으로 승인되었습니다.",
        })
        // 페이지 새로고침
        router.refresh()
      } else {
        toast({
          title: "승인 실패",
          description: result.error || "PQ 승인 중 오류가 발생했습니다.",
          variant: "destructive"
        })
      }
    } catch (error) {
      console.error("PQ 승인 오류:", error)
      toast({
        title: "승인 실패",
        description: "PQ 승인 중 오류가 발생했습니다.",
        variant: "destructive"
      })
    } finally {
      setIsApproving(false)
      setShowApproveDialog(false)
    }
  }
  
  // PQ 거부 처리
  const handleReject = async () => {
    if (!rejectReason.trim()) {
      toast({
        title: "거부 사유 필요",
        description: "거부 사유를 입력해주세요.",
        variant: "destructive"
      })
      return
    }
    
    try {
      setIsRejecting(true)
      
      const result = await rejectPQAction({
        pqSubmissionId: pqSubmission.id,
        vendorId: vendorId,
        rejectReason: rejectReason
      })
      
      if (result.ok) {
        toast({
          title: "PQ 거부 완료",
          description: "PQ가 거부되었습니다.",
        })
        // 페이지 새로고침
        router.refresh()
      } else {
        toast({
          title: "거부 실패",
          description: result.error || "PQ 거부 중 오류가 발생했습니다.",
          variant: "destructive"
        })
      }
    } catch (error) {
      console.error("PQ 거부 오류:", error)
      toast({
        title: "거부 실패",
        description: "PQ 거부 중 오류가 발생했습니다.",
        variant: "destructive"
      })
    } finally {
      setIsRejecting(false)
      setShowRejectDialog(false)
    }
  }
  
  return (
    <div className="space-y-6">
      {/* 그룹별 PQ 항목 표시 */}
      {pqData.map((group) => (
        <div key={group.groupName} className="space-y-4">
          <h3 className="text-lg font-medium">{group.groupName}</h3>
          
          <div className="grid grid-cols-1 gap-4">
            {group.items.map((item) => (
              <Card key={item.criteriaId}>
                <CardHeader>
                  <div className="flex justify-between items-start">
                    <div>
                      <CardTitle className="text-base">
                        {item.code} - {item.checkPoint}
                      </CardTitle>
                      {item.description && (
                        <CardDescription className="mt-1 whitespace-pre-wrap">
                          {item.description}
                        </CardDescription>
                      )}
                    </div>
                    {/* 항목 상태 표시 */}
                    {!!item.answer || item.attachments.length > 0 ? (
                      <Badge variant="outline" className="text-green-600 bg-green-50">
                        <CheckCircle className="h-3 w-3 mr-1" />
                        답변 있음
                      </Badge>
                    ) : (
                      <Badge variant="outline" className="text-amber-600 bg-amber-50">
                        <AlertCircle className="h-3 w-3 mr-1" />
                        답변 없음
                      </Badge>
                    )}
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* 프로젝트별 추가 정보 */}
                  {pqSubmission.projectId && item.contractInfo && (
                    <div className="space-y-1">
                      <p className="text-sm font-medium">계약 정보</p>
                      <div className="rounded-md bg-muted/30 p-3 text-sm whitespace-pre-wrap">
                        {item.contractInfo}
                      </div>
                    </div>
                  )}
                  
                  {pqSubmission.projectId && item.additionalRequirement && (
                    <div className="space-y-1">
                      <p className="text-sm font-medium">추가 요구사항</p>
                      <div className="rounded-md bg-muted/30 p-3 text-sm whitespace-pre-wrap">
                        {item.additionalRequirement}
                      </div>
                    </div>
                  )}
                  
                  {/* 벤더 답변 */}
                  <div className="space-y-1">
                    <p className="text-sm font-medium flex items-center gap-1">
                      <FileText className="h-4 w-4" />
                      벤더 답변
                    </p>
                    <div className="rounded-md border p-3 min-h-20 whitespace-pre-wrap">
                      {item.answer || <span className="text-muted-foreground">답변 없음</span>}
                    </div>
                  </div>
                  
                  {/* 첨부 파일 */}
                  {item.attachments.length > 0 && (
                    <div className="space-y-1">
                      <p className="text-sm font-medium flex items-center gap-1">
                        <Paperclip className="h-4 w-4" />
                        첨부 파일 ({item.attachments.length})
                      </p>
                      <div className="rounded-md border p-3">
                        <ul className="space-y-1">
                          {item.attachments.map((attachment, idx) => (
                            <li key={idx} className="flex items-center gap-2">
                              <FileText className="h-4 w-4 text-muted-foreground" />
                              <a 
                                href={attachment.filePath} 
                                target="_blank"
                                rel="noopener noreferrer"
                                className="text-sm text-blue-600 hover:underline"
                              >
                                {attachment.fileName}
                              </a>
                            </li>
                          ))}
                        </ul>
                      </div>
                    </div>
                  )}
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      ))}
      
      {/* 검토 버튼 */}
      {canReview && (
        <div className="fixed bottom-4 right-4 bg-background p-4 rounded-lg shadow-md border">
          <div className="flex gap-2">
            <Button 
              variant="outline" 
              onClick={() => setShowRejectDialog(true)}
              disabled={isRejecting}
            >
              {isRejecting ? "거부 중..." : "거부"}
            </Button>
            <Button 
              variant="default" 
              onClick={() => setShowApproveDialog(true)}
              disabled={isApproving}
            >
              {isApproving ? "승인 중..." : "승인"}
            </Button>
          </div>
        </div>
      )}
      
      {/* 승인 확인 다이얼로그 */}
      <Dialog open={showApproveDialog} onOpenChange={setShowApproveDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>PQ 승인 확인</DialogTitle>
            <DialogDescription>
              {pqSubmission.vendorName}의 {pqSubmission.type === "GENERAL" ? "일반" : "프로젝트"} PQ를 승인하시겠습니까?
              {pqSubmission.projectId && (
                <span> 프로젝트: {pqSubmission.projectName}</span>
              )}
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowApproveDialog(false)}>
              취소
            </Button>
            <Button onClick={handleApprove} disabled={isApproving}>
              {isApproving ? "승인 중..." : "승인"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      
      {/* 거부 확인 다이얼로그 */}
      <Dialog open={showRejectDialog} onOpenChange={setShowRejectDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>PQ 거부</DialogTitle>
            <DialogDescription>
              {pqSubmission.vendorName}의 {pqSubmission.type === "GENERAL" ? "일반" : "프로젝트"} PQ를 거부하는 이유를 입력해주세요.
              {pqSubmission.projectId && (
                <span> 프로젝트: {pqSubmission.projectName}</span>
              )}
            </DialogDescription>
          </DialogHeader>
          <Textarea
            value={rejectReason}
            onChange={(e) => setRejectReason(e.target.value)}
            placeholder="거부 사유를 입력하세요"
            className="min-h-24"
          />
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowRejectDialog(false)}>
              취소
            </Button>
            <Button 
              variant="destructive" 
              onClick={handleReject} 
              disabled={isRejecting || !rejectReason.trim()}
            >
              {isRejecting ? "거부 중..." : "거부"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}