"use client"

import * as React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm, useFieldArray } from "react-hook-form"
import * as z from "zod"
import { toast } from "sonner"
import { CheckCircle2, AlertCircle, Building2 } from "lucide-react"

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { PeriodicEvaluationView } from "@/db/schema"
import { finalizeEvaluations } from "../service"

// 등급 옵션
const GRADE_OPTIONS = [
  { value: "S", label: "S등급 (90점 이상)" },
  { value: "A", label: "A등급 (80-89점)" },
  { value: "B", label: "B등급 (70-79점)" },
  { value: "C", label: "C등급 (60-69점)" },
  { value: "D", label: "D등급 (60점 미만)" },
] as const

// 점수에 따른 등급 계산
const calculateGrade = (score: number): string => {
  if (score >= 90) return "S"
  if (score >= 80) return "A"
  if (score >= 70) return "B"
  if (score >= 60) return "C"
  return "D"
}

// 개별 평가 스키마
const evaluationItemSchema = z.object({
  id: z.number(),
  vendorName: z.string(),
  vendorCode: z.string(),
  evaluationScore: z.number().nullable(),
  finalScore: z.number()
    .min(0, "점수는 0 이상이어야 합니다"),
    // .max(100, "점수는 100 이하여야 합니다"),
  finalGrade: z.enum(["S", "A", "B", "C", "D"]),
})

// 전체 폼 스키마
const finalizeEvaluationSchema = z.object({
  evaluations: z.array(evaluationItemSchema).min(1, "확정할 평가가 없습니다"),
})

type FinalizeEvaluationFormData = z.infer<typeof finalizeEvaluationSchema>

interface FinalizeEvaluationDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  evaluations: PeriodicEvaluationView[]
  onSuccess?: () => void
}

export function FinalizeEvaluationDialog({
  open,
  onOpenChange,
  evaluations,
  onSuccess,
}: FinalizeEvaluationDialogProps) {
  const [isLoading, setIsLoading] = React.useState(false)

  const form = useForm<FinalizeEvaluationFormData>({
    resolver: zodResolver(finalizeEvaluationSchema),
    defaultValues: {
      evaluations: [],
    },
  })

  const { fields, update } = useFieldArray({
    control: form.control,
    name: "evaluations",
  })

  // evaluations가 변경될 때 폼 초기화
  React.useEffect(() => {
    if (evaluations.length > 0) {
      const formData = evaluations.map(evaluation => ({
        id: evaluation.id,
        vendorName: evaluation.vendorName || "",
        vendorCode: evaluation.vendorCode || "",
        evaluationScore: evaluation.evaluationScore || null,
        finalScore: Number(evaluation.evaluationScore || 0),
        finalGrade: calculateGrade(Number(evaluation.evaluationScore || 0)),
      }))
      
      form.reset({ evaluations: formData })
    }
  }, [evaluations, form])

  // 점수 변경 시 등급 자동 계산
  const handleScoreChange = (index: number, score: number) => {
    const currentEvaluation = form.getValues(`evaluations.${index}`)
    const newGrade = calculateGrade(score)
    
    update(index, {
      ...currentEvaluation,
      finalScore: score,
      finalGrade: newGrade,
    })
  }

  // 폼 제출
  const onSubmit = async (data: FinalizeEvaluationFormData) => {
    try {
      setIsLoading(true)

      const finalizeData = data.evaluations.map(evaluation => ({
        id: evaluation.id,
        finalScore: evaluation.finalScore,
        finalGrade: evaluation.finalGrade,
      }))

      await finalizeEvaluations(finalizeData)

      toast.success("평가가 확정되었습니다", {
        description: `${data.evaluations.length}건의 평가가 최종 확정되었습니다.`,
      })

      onSuccess?.()
      onOpenChange(false)
    } catch (error) {
      console.error("Failed to finalize evaluations:", error)
      toast.error("평가 확정 실패", {
        description: error instanceof Error ? error.message : "알 수 없는 오류가 발생했습니다.",
      })
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <CheckCircle2 className="h-5 w-5 text-purple-600" />
            평가 확정
          </DialogTitle>
          <DialogDescription>
            검토가 완료된 평가의 최종 점수와 등급을 확정합니다.
            확정 후에는 수정이 제한됩니다.
          </DialogDescription>
        </DialogHeader>

        <Alert>
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>
            확정할 평가: <strong>{evaluations.length}건</strong>
            <br />
            평가 점수는 리뷰어들의 평가를 바탕으로 계산된 값을 기본으로 하며, 필요시 조정 가능합니다.
          </AlertDescription>
        </Alert>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[200px]">협력업체</TableHead>
                    <TableHead className="w-[100px]">평가점수</TableHead>
                    <TableHead className="w-[120px]">최종점수</TableHead>
                    <TableHead className="w-[120px]">최종등급</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {fields.map((field, index) => (
                    <TableRow key={field.id}>
                      <TableCell>
                        <div className="space-y-1">
                          <div className="font-medium">
                            {form.watch(`evaluations.${index}.vendorName`)}
                          </div>
                          <div className="text-sm text-muted-foreground">
                            {form.watch(`evaluations.${index}.vendorCode`)}
                          </div>
                        </div>
                      </TableCell>
                      
                      <TableCell>
                        <div className="text-center">
                          {form.watch(`evaluations.${index}.evaluationScore`) !== null ? (
                            <Badge variant="outline" className="font-mono">
                              {Number(form.watch(`evaluations.${index}.evaluationScore`)).toFixed(1)}점
                            </Badge>
                          ) : (
                            <span className="text-muted-foreground">-</span>
                          )}
                        </div>
                      </TableCell>

                      <TableCell>
                        <FormField
                          control={form.control}
                          name={`evaluations.${index}.finalScore`}
                          render={({ field }) => (
                            <FormItem>
                              <FormControl>
                                <Input
                                  type="number"
                                  min="0"
                                  max="100"
                                  step="0.1"
                                  {...field}
                                  onChange={(e) => {
                                    const value = parseFloat(e.target.value)
                                    field.onChange(value)
                                    if (!isNaN(value)) {
                                      handleScoreChange(index, value)
                                    }
                                  }}
                                  className="text-center font-mono"
                                />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                      </TableCell>

                      <TableCell>
                        <FormField
                          control={form.control}
                          name={`evaluations.${index}.finalGrade`}
                          render={({ field }) => (
                            <FormItem>
                              <FormControl>
                                <Select value={field.value} onValueChange={field.onChange}>
                                  <SelectTrigger>
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    {GRADE_OPTIONS.map((option) => (
                                      <SelectItem key={option.value} value={option.value}>
                                        {option.label}
                                      </SelectItem>
                                    ))}
                                  </SelectContent>
                                </Select>
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>

            <DialogFooter>
              <Button
                type="button"
                variant="outline"
                onClick={() => onOpenChange(false)}
                disabled={isLoading}
              >
                취소
              </Button>
              <Button
                type="submit"
                disabled={isLoading}
                className="bg-purple-600 hover:bg-purple-700"
              >
                {isLoading ? "확정 중..." : `평가 확정 (${fields.length}건)`}
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}