"use client"

import * as React from "react"
import { useParams, useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"
import { AlertCircle, ArrowLeft, RefreshCw } from "lucide-react"
import { Alert, AlertDescription } from "@/components/ui/alert"

import { getEvaluationFormData } from "./service"
import { EvaluationFormData } from "@/types/evaluation-form"

import { EvaluationForm } from "./evaluation-form"

/**
 * 로딩 스켈레톤 컴포넌트
 */
function EvaluationFormSkeleton() {
  return (
    <div className="container mx-auto py-6 space-y-6">
      {/* 헤더 스켈레톤 */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Skeleton className="h-10 w-10" />
          <div className="space-y-2">
            <Skeleton className="h-8 w-32" />
            <Skeleton className="h-4 w-48" />
          </div>
        </div>
        <Skeleton className="h-6 w-16" />
      </div>

      {/* 평가 정보 카드 스켈레톤 */}
      <Card>
        <CardHeader>
          <Skeleton className="h-6 w-24" />
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {[...Array(4)].map((_, i) => (
              <div key={i} className="space-y-2">
                <Skeleton className="h-4 w-16" />
                <Skeleton className="h-5 w-24" />
                <Skeleton className="h-3 w-20" />
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* 진행률 카드 스켈레톤 */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex items-center justify-between">
            <div className="space-y-1">
              <Skeleton className="h-4 w-16" />
              <Skeleton className="h-6 w-24" />
            </div>
            <Skeleton className="h-2 w-32" />
          </div>
        </CardContent>
      </Card>

      {/* 질문 카드들 스켈레톤 */}
      {[...Array(3)].map((_, i) => (
        <Card key={i} className="mb-6">
          <CardHeader className="pb-4">
            <div className="flex items-start justify-between">
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  <Skeleton className="h-5 w-16" />
                  <Skeleton className="h-5 w-12" />
                </div>
                <Skeleton className="h-6 w-64" />
                <Skeleton className="h-4 w-48" />
              </div>
            </div>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-3">
              <Skeleton className="h-4 w-32" />
              {[...Array(3)].map((_, j) => (
                <div key={j} className="flex items-center space-x-3 p-3 border rounded-lg">
                  <Skeleton className="h-4 w-4 rounded-full" />
                  <div className="flex-1 flex items-center justify-between">
                    <Skeleton className="h-4 w-32" />
                    <Skeleton className="h-5 w-12" />
                  </div>
                </div>
              ))}
            </div>
            <div className="space-y-2">
              <Skeleton className="h-4 w-24" />
              <Skeleton className="h-20 w-full" />
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}

/**
 * 에러 상태 컴포넌트
 */
function EvaluationFormError({ 
  error, 
  onRetry 
}: { 
  error: string
  onRetry: () => void 
}) {
  const router = useRouter()

  return (
    <div className="container mx-auto py-6 space-y-6">
      <div className="flex items-center gap-4">
        <Button 
          variant="ghost" 
          size="icon"
          onClick={() => router.back()}
        >
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <div>
          <h1 className="text-2xl font-bold">평가 작성</h1>
          <p className="text-muted-foreground">평가를 불러오는 중 오류가 발생했습니다</p>
        </div>
      </div>

      <Alert variant="destructive">
        <AlertCircle className="h-4 w-4" />
        <AlertDescription>
          {error}
        </AlertDescription>
      </Alert>

      <Card>
        <CardHeader>
          <CardTitle>문제 해결</CardTitle>
          <CardDescription>
            다음 방법들을 시도해보세요:
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <ul className="list-disc pl-6 space-y-2 text-sm">
            <li>페이지를 새로고침해보세요</li>
            <li>인터넷 연결 상태를 확인해보세요</li>
            <li>잠시 후 다시 시도해보세요</li>
            <li>문제가 지속되면 관리자에게 문의하세요</li>
          </ul>
          
          <div className="flex items-center gap-2 pt-4">
            <Button onClick={onRetry} className="flex items-center gap-2">
              <RefreshCw className="h-4 w-4" />
              다시 시도
            </Button>
            <Button variant="outline" onClick={() => router.back()}>
              목록으로 돌아가기
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

/**
 * 평가 작성 페이지 메인 컴포넌트
 */
export function EvaluationPage() {
  const params = useParams()
  const router = useRouter()
  const [formData, setFormData] = React.useState<EvaluationFormData | null>(null)
  const [isLoading, setIsLoading] = React.useState(true)
  const [error, setError] = React.useState<string | null>(null)

  const reviewerEvaluationId = params?.id ? parseInt(params.id as string) : null

  // 평가 데이터 로드
  const loadEvaluationData = React.useCallback(async () => {
    if (!reviewerEvaluationId) {
      setError("잘못된 평가 ID입니다.")
      setIsLoading(false)
      return
    }

    try {
      setIsLoading(true)
      setError(null)
      console.log(`[CLIENT] Loading evaluation data for ID: ${reviewerEvaluationId}`)
      const data = await getEvaluationFormData(reviewerEvaluationId)
      
      if (!data) {
        console.warn(`[CLIENT] No evaluation data returned for ID: ${reviewerEvaluationId}`)
        setError("평가 데이터를 찾을 수 없습니다. 해당 평가가 존재하지 않거나 접근 권한이 없을 수 있습니다.")
        return
      }

      console.log(`[CLIENT] Successfully loaded evaluation data for ID: ${reviewerEvaluationId}`)
      
    setFormData(data as EvaluationFormData)
  } catch (err) {
    console.error('[CLIENT] Failed to load evaluation data:', err)
    const errorMessage = err instanceof Error ? err.message : "알 수 없는 오류"
    setError(`평가 데이터를 불러오는 중 오류가 발생했습니다: ${errorMessage}`)
  } finally {
    setIsLoading(false)
    console.log('[CLIENT] Loading completed')
    }
  }, [reviewerEvaluationId])

  // 초기 데이터 로드
  React.useEffect(() => {
    loadEvaluationData()
  }, [loadEvaluationData])

  // 평가 완료 후 처리
  const handleSubmitSuccess = React.useCallback(() => {
    router.push('/evaluations')
  }, [router])

  // 로딩 상태
  if (isLoading) {
    return <EvaluationFormSkeleton />
  }

  // 에러 상태
  if (error) {
    return (
      <EvaluationFormError 
        error={error} 
        onRetry={loadEvaluationData}
      />
    )
  }

  // 데이터가 없는 경우
  if (!formData) {
    return (
      <EvaluationFormError 
        error="평가 데이터를 불러올 수 없습니다." 
        onRetry={loadEvaluationData}
      />
    )
  }

  // 정상 상태 - 평가 폼 렌더링
  return (
    <EvaluationForm 
      formData={formData}
      onSubmit={handleSubmitSuccess}
    />
  )
}

// 페이지 컴포넌트용 기본 export
export default function EvaluationPageWrapper() {
  return <EvaluationPage />
}