"use client"

import * as React from "react"
import { useForm, useWatch } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { SaveIcon, CheckIcon, XIcon, BarChart3Icon, TrendingUpIcon, DownloadIcon } from "lucide-react"

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { toast } from "sonner"
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import ExcelJS from "exceljs"

import { 
  getEsgEvaluationFormData, 
  saveEsgEvaluationResponse,
  recalculateEvaluationProgress,
  EsgEvaluationFormData 
} from "../service"
import { EvaluationSubmissionWithVendor } from "../service"

interface EsgEvaluationFormSheetProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  submission: EvaluationSubmissionWithVendor | null
  onSuccess: () => void
}

// 폼 스키마 정의
const formSchema = z.object({
  responses: z.array(z.object({
    itemId: z.number(),
    selectedOptionId: z.number().optional(),
    selectedScore: z.number().default(0),
    additionalComments: z.string().optional(),
  }))
})

type FormData = z.infer<typeof formSchema>

export function EsgEvaluationFormSheet({
  open,
  onOpenChange,
  submission,
  onSuccess,
}: EsgEvaluationFormSheetProps) {
  const [isLoading, setIsLoading] = React.useState(false)
  const [isSaving, setIsSaving] = React.useState(false)
  const [formData, setFormData] = React.useState<EsgEvaluationFormData | null>(null)
  const [currentScores, setCurrentScores] = React.useState<Record<number, number>>({})

  const form = useForm<FormData>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      responses: []
    }
  })

  // 현재 폼 값을 실시간으로 감시
  const watchedResponses = useWatch({
    control: form.control,
    name: 'responses'
  })

  // 데이터 로딩
  React.useEffect(() => {
    if (open && submission?.id) {
      loadFormData()
    }
  }, [open, submission?.id])

  const loadFormData = async () => {
    if (!submission?.id) return

    setIsLoading(true)
    try {
      const data = await getEsgEvaluationFormData(submission.id)
      setFormData(data)

      // 폼 초기값 설정
      const responses: any[] = []
      const scores: Record<number, number> = {}

      data.evaluations.forEach(evaluation => {
        evaluation.items.forEach(item => {
          responses.push({
            itemId: item.item.id,
            selectedOptionId: item.response?.esgAnswerOptionId,
            selectedScore: item.response?.selectedScore || 0,
            additionalComments: item.response?.additionalComments || '',
          })

          if (item.response?.selectedScore) {
            scores[item.item.id] = item.response.selectedScore
          }
        })
      })

      setCurrentScores(scores)
      form.reset({ responses })
    } catch (error) {
      console.error('Error loading ESG form data:', error)
      toast.error('ESG 평가 데이터를 불러오는데 실패했습니다.')
    } finally {
      setIsLoading(false)
    }
  }

  // 개별 응답 저장
  const handleSaveResponse = async (itemId: number, optionId: number, score: number) => {
    if (!submission?.id) return

    try {
      const formResponse = form.getValues('responses').find(r => r.itemId === itemId)
      
      await saveEsgEvaluationResponse({
        submissionId: submission.id,
        esgEvaluationItemId: itemId,
        esgAnswerOptionId: optionId,
        selectedScore: score,
        additionalComments: formResponse?.additionalComments || '',
      })

      // 현재 점수 업데이트
      setCurrentScores(prev => ({
        ...prev,
        [itemId]: score
      }))

      // 평균 점수 재계산
      await recalculateEvaluationProgress(submission.id)

      toast.success('응답이 저장되었습니다.')
    } catch (error) {
      console.error('Error saving ESG response:', error)
      toast.error('응답 저장에 실패했습니다.')
    }
  }

  // 선택 변경 핸들러
  const handleOptionChange = (itemId: number, optionId: string, score: number) => {
    const responseIndex = form.getValues('responses').findIndex(r => r.itemId === itemId)
    if (responseIndex >= 0) {
      form.setValue(`responses.${responseIndex}.selectedOptionId`, parseInt(optionId))
      form.setValue(`responses.${responseIndex}.selectedScore`, score)
    }

    // 자동 저장
    handleSaveResponse(itemId, parseInt(optionId), score)
  }

  // 전체 저장
  const onSubmit = async (data: FormData) => {
    if (!submission?.id || !formData) return

    setIsSaving(true)
    try {
      // 모든 응답을 순차적으로 저장
      for (const response of data.responses) {
        if (response.selectedOptionId && response.selectedScore > 0) {
          await saveEsgEvaluationResponse({
            submissionId: submission.id,
            esgEvaluationItemId: response.itemId,
            esgAnswerOptionId: response.selectedOptionId,
            selectedScore: response.selectedScore,
            additionalComments: response.additionalComments || '',
          })
        }
      }

      // 평균 점수 재계산
      await recalculateEvaluationProgress(submission.id)

      toast.success('모든 ESG 자가평가서가 저장되었습니다.')
      onSuccess()
    } catch (error) {
      console.error('Error saving all ESG responses:', error)
      toast.error('ESG 자가평가서 저장에 실패했습니다.')
    } finally {
      setIsSaving(false)
    }
  }

// ESG 평가 데이터 내보내기
const handleExportData = async () => {
  if (!formData) return

  // 워크북 및 워크시트 생성
  const workbook = new ExcelJS.Workbook()
  const worksheet = workbook.addWorksheet('ESG평가')

  // 헤더 정의
  const headers = ['카테고리', '점검항목', '평가항목', '평가항목설명', '답변옵션', '옵션점수']
  
  // 데이터 준비
  const data: any[] = []
  let lastKey = ''
  
  formData.evaluations.forEach(evaluation => {
    evaluation.items.forEach(item => {
      item.answerOptions.forEach(option => {
        // A-D열의 중복 체크를 위한 키 생성
        const currentKey = `${evaluation.evaluation.category}|${evaluation.evaluation.inspectionItem}|${item.item.evaluationItem}|${item.item.evaluationItemDescription}`
        
        // 중복된 경우 A-D열을 빈 값으로 설정
        const row = lastKey === currentKey
          ? ['', '', '', '', option.answerText, option.score]
          : [
              evaluation.evaluation.category,
              evaluation.evaluation.inspectionItem,
              item.item.evaluationItem,
              item.item.evaluationItemDescription || '',
              option.answerText,
              option.score
            ]
        
        data.push(row)
        lastKey = currentKey
      })
    })
  })

  // 헤더 추가 및 스타일 적용
  worksheet.addRow(headers)
  const headerRow = worksheet.getRow(1)
  headerRow.eachCell((cell) => {
    cell.fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: 'D3D3D3' } // 회색 배경
    }
    cell.font = { bold: true }
    cell.alignment = { vertical: 'middle', horizontal: 'center' }
  })

  // 데이터 행 추가
  data.forEach((row: any) => {
    worksheet.addRow(row)
  })

  // 컬럼 너비 자동 조정
  worksheet.columns.forEach((column, colIndex) => {
    let maxWidth = headers[colIndex].length
    data.forEach((row: any) => {
      const cellValue = row[colIndex] ? String(row[colIndex]) : ''
      maxWidth = Math.max(maxWidth, cellValue.length)
    })
    column.width = maxWidth + 5 // 여유 공간 추가
  })

  // 파일 생성 및 다운로드
  const buffer = await workbook.xlsx.writeBuffer()
  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
  const link = document.createElement('a')
  const url = URL.createObjectURL(blob)
  link.setAttribute('href', url)
  link.setAttribute('download', `ESG평가문항_${formData.submission.vendorName}_${new Date().toISOString().split('T')[0]}.xlsx`)
  link.style.visibility = 'hidden'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)

  toast.success('ESG 자가평가서 문항이 다운로드되었습니다.')
}

  // 진행률 및 점수 계산
  const getProgress = () => {
    if (!formData) return { 
      completed: 0, 
      total: 0, 
      percentage: 0, 
      averageScore: 0, 
      maxAverageScore: 0,
      totalPossibleScore: 0,
      actualTotalScore: 0
    }
  
    let total = 0
    let completed = 0
    let totalScore = 0  // 숫자로 초기화
    let maxTotalScore = 0
  
    formData.evaluations.forEach(evaluation => {
      evaluation.items.forEach(item => {
        total++
        
        // 최대 점수 계산 (모든 항목에 대해)
        const maxOptionScore = Math.max(...item.answerOptions.map(opt => parseFloat(opt.score.toString())))
        maxTotalScore += maxOptionScore
        
        // 응답이 있는 경우에만 완료된 것으로 계산
        const currentScore = currentScores[item.item.id]
        if (currentScore !== undefined && currentScore >= 0) {
          completed++
          // 숫자로 명시적 변환하여 더하기
          totalScore += Number(currentScore) || 0
          console.log(`Adding score: ${Number(currentScore)}, Total so far: ${totalScore}`)
        }
      })
    })
  
    const percentage = total > 0 ? Math.round((completed / total) * 100) : 0
    
    // 응답한 항목들에 대해서만 평균 계산 (0으로 나누기 방지)
    const averageScore = completed > 0 ? totalScore / completed : 0
    
    // 전체 항목 기준 최대 평균 점수
    const maxAverageScore = total > 0 ? maxTotalScore / total : 0
  
    return { 
      completed, 
      total, 
      percentage, 
      averageScore, 
      maxAverageScore,
      totalPossibleScore: maxTotalScore,
      actualTotalScore: totalScore
    }
  }

  const progress = getProgress()

  if (isLoading) {
    return (
      <Sheet open={open} onOpenChange={onOpenChange}>
        <SheetContent className="w-[900px] sm:max-w-[900px]" style={{width:900, maxWidth:900}}>
          <div className="flex items-center justify-center h-full">
            <div className="text-center space-y-4">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto"></div>
              <p>ESG 자가평가서 데이터를 불러오는 중...</p>
            </div>
          </div>
        </SheetContent>
      </Sheet>
    )
  }

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className="w-[900px] sm:max-w-[900px] flex flex-col" style={{width:900, maxWidth:900}}>
        <SheetHeader>
          <div className="flex items-center justify-between">
            <div>
              <SheetTitle>ESG 자가평가서 작성</SheetTitle>
              <SheetDescription>
                {formData?.submission.vendorName}의 ESG 자가평가서를 작성해주세요. <br/>
                우측의 "내보내기" 버튼을 클릭하시면 전체 질문을 엑셀로 다운로드 받아 답변 작성에 참고할 수 있습니다.
              </SheetDescription>
            </div>
            <Button
              variant="outline"
              size="sm"
              onClick={handleExportData}
              className="flex items-center gap-2"
            >
              <DownloadIcon className="h-4 w-4" />
              내보내기
            </Button>
          </div>
        </SheetHeader>

        {formData && (
          <>
            {/* 진행률 및 점수 표시 */}
            <div className="mt-6 grid grid-cols-2 gap-4">
              <Card>
                <CardContent className="p-4">
                  <div className="flex items-center justify-between mb-2">
                    <div className="flex items-center gap-2">
                      <CheckIcon className="h-4 w-4" />
                      <span className="text-sm font-medium">진행률</span>
                    </div>
                    <span className="text-sm text-muted-foreground">
                      {progress.completed}/{progress.total}
                    </span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
                    <div
                      className="bg-green-600 h-2 rounded-full transition-all duration-300"
                      style={{ width: `${progress.percentage}%` }}
                    />
                  </div>
                  <p className="text-xs text-muted-foreground">
                    {progress.percentage}% 완료
                  </p>
                </CardContent>
              </Card>

              <Card>
                <CardContent className="p-4">
                  <div className="flex items-center justify-between mb-2">
                    <div className="flex items-center gap-2">
                      <TrendingUpIcon className="h-4 w-4" />
                      <span className="text-sm font-medium">평균 점수</span>
                    </div>
                    <Badge variant="outline">
                      {progress.averageScore.toFixed(1)} / {progress.maxAverageScore.toFixed(1)}
                    </Badge>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
                    <div
                      className="bg-blue-600 h-2 rounded-full transition-all duration-300"
                      style={{ 
                        width: `${progress.maxAverageScore > 0 ? (progress.averageScore / progress.maxAverageScore) * 100 : 0}%` 
                      }}
                    />
                  </div>
                  <p className="text-xs text-muted-foreground">
                    {progress.completed > 0 ? 
                      `${progress.completed}개 항목 평균` : '응답 없음'}
                  </p>
                </CardContent>
              </Card>
            </div>

            <Form {...form}>
              <form onSubmit={form.handleSubmit(onSubmit)} className="flex-1 flex flex-col min-h-0">
                {/* 스크롤 가능한 폼 영역 */}
                <div className="flex-1 overflow-y-auto min-h-0 mt-6">
                  <div className="space-y-4 pr-4">
                    <Accordion type="multiple" defaultValue={formData.evaluations.map((_, i) => `evaluation-${i}`)}>
                      {formData.evaluations.map((evaluation, evalIndex) => (
                        <AccordionItem 
                          key={evaluation.evaluation.id} 
                          value={`evaluation-${evalIndex}`}
                        >
                          <AccordionTrigger className="hover:no-underline">
                            <div className="flex items-center justify-between w-full mr-4">
                              <div className="flex items-center gap-3">
                                <Badge variant="outline">
                                  {evaluation.evaluation.serialNumber}
                                </Badge>
                                <div className="text-left">
                                  <div className="font-medium">
                                    {evaluation.evaluation.category}
                                  </div>
                                  <div className="text-sm text-muted-foreground">
                                    {evaluation.evaluation.inspectionItem}
                                  </div>
                                </div>
                              </div>
                              <div className="flex items-center gap-2">
                                <BarChart3Icon className="h-4 w-4" />
                                <span className="text-sm">
                                  {evaluation.items.filter(item => 
                                    currentScores[item.item.id] >= 0
                                  ).length}/{evaluation.items.length}
                                </span>
                              </div>
                            </div>
                          </AccordionTrigger>
                          <AccordionContent>
                            <div className="space-y-6 pt-4">
                              {evaluation.items.map((item, itemIndex) => {
                                const responseIndex = form.getValues('responses').findIndex(
                                  r => r.itemId === item.item.id
                                )
                                
                                // watchedResponses에서 현재 응답 찾기
                                const currentResponse = watchedResponses?.find(r => r.itemId === item.item.id)
                                const selectedOptionId = currentResponse?.selectedOptionId?.toString() || ''
                                
                                return (
                                  <Card key={item.item.id} className="bg-gray-50">
                                    <CardHeader className="pb-3">
                                      <CardTitle className="text-sm flex items-center justify-between">
                                        <span>{item.item.evaluationItem}</span>
                                        {currentScores[item.item.id] > 0 && (
                                          <Badge variant="default" className="bg-green-100 text-green-800">
                                            {currentScores[item.item.id]}점
                                          </Badge>
                                        )}
                                      </CardTitle>
                                      {item.item.evaluationItemDescription && (
                                        <p className="text-xs text-muted-foreground">
                                          {item.item.evaluationItemDescription}
                                        </p>
                                      )}
                                    </CardHeader>
                                    <CardContent className="space-y-4">
                                      {/* 답변 옵션들 */}
                                      <RadioGroup
                                        value={selectedOptionId}
                                        onValueChange={(value) => {
                                          const option = item.answerOptions.find(
                                            opt => opt.id === parseInt(value)
                                          )
                                          if (option) {
                                            handleOptionChange(
                                              item.item.id, 
                                              value, 
                                              parseFloat(option.score.toString())
                                            )
                                          }
                                        }}
                                      >
                                        <div className="space-y-2">
                                          {item.answerOptions.map((option) => (
                                            <div 
                                              key={option.id} 
                                              className="flex items-center space-x-3 p-3 rounded-md border hover:bg-white transition-colors"
                                            >
                                              <RadioGroupItem 
                                                value={option.id.toString()} 
                                                id={`option-${option.id}`}
                                              />
                                              <label 
                                                htmlFor={`option-${option.id}`}
                                                className="flex-1 cursor-pointer"
                                              >
                                                <div className="flex items-center justify-between">
                                                  <span className="text-sm">
                                                    {option.answerText}
                                                  </span>
                                                  <Badge 
                                                    variant="secondary"
                                                    className="ml-2"
                                                  >
                                                    {option.score}점
                                                  </Badge>
                                                </div>
                                              </label>
                                            </div>
                                          ))}
                                        </div>
                                      </RadioGroup>

                                      {/* 추가 의견 */}
                                      {responseIndex >= 0 && (
                                        <FormField
                                          control={form.control}
                                          name={`responses.${responseIndex}.additionalComments`}
                                          render={({ field }) => (
                                            <FormItem>
                                              <FormLabel className="text-xs">
                                                추가 의견 (선택사항)
                                              </FormLabel>
                                              <FormControl>
                                                <Textarea
                                                  {...field}
                                                  placeholder="추가적인 설명이나 의견을 입력하세요..."
                                                  className="min-h-[60px] text-sm"
                                                />
                                              </FormControl>
                                            </FormItem>
                                          )}
                                        />
                                      )}
                                    </CardContent>
                                  </Card>
                                )
                              })}
                            </div>
                          </AccordionContent>
                        </AccordionItem>
                      ))}
                    </Accordion>
                  </div>
                </div>

                <Separator className="my-4" />

                {/* 하단 버튼 영역 */}
                <div className="flex-shrink-0 flex items-center justify-between">
                  <div className="text-sm text-muted-foreground">
                    {progress.percentage === 100 ? (
                      <div className="flex items-center gap-2 text-green-600">
                        <CheckIcon className="h-4 w-4" />
                        모든 ESG 자가평가서가 완료되었습니다
                      </div>
                    ) : (
                      <div className="flex items-center gap-2">
                        <XIcon className="h-4 w-4" />
                        {progress.total - progress.completed}개 항목이 미완료입니다
                      </div>
                    )}
                  </div>
                  <div className="flex items-center gap-2">
                    <Button
                      type="button"
                      variant="outline"
                      onClick={() => onOpenChange(false)}
                    >
                      닫기
                    </Button>
                    <Button
                      type="submit"
                      disabled={isSaving || progress.completed === 0}
                    >
                      {isSaving ? "저장 중..." : "최종 저장"}
                    </Button>
                  </div>
                </div>
              </form>
            </Form>
          </>
        )}
      </SheetContent>
    </Sheet>
  )
}