"use client"

import * as React from "react"
import { useRouter } from "next/navigation"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { FileText, Users } from "lucide-react"

import { ComplianceResponseStats } from "@/lib/compliance/responses/compliance-response-stats"
import { ComplianceQuestionCreateDialog } from "@/lib/compliance/questions/compliance-question-create-dialog"
import { ComplianceQuestionsDraggableList } from "@/lib/compliance/questions/compliance-questions-draggable-list"

interface ComplianceTemplateDetailProps {
  templateId: number
  template: Awaited<ReturnType<typeof import("./services").getComplianceSurveyTemplate>>
  questions: Awaited<ReturnType<typeof import("./services").getComplianceQuestions>>
  responses: Awaited<ReturnType<typeof import("./services").getComplianceResponses>>
  stats: Awaited<ReturnType<typeof import("./services").getComplianceResponseStats>>
}

export function ComplianceTemplateDetail({ templateId, template, questions, responses, stats }: ComplianceTemplateDetailProps) {
  const router = useRouter()



  if (!template) {
    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" />
            응답 현황 ({responses.length}개)
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {/* 통계 카드들 */}
            <ComplianceResponseStats stats={stats} />
            
            <div className="flex items-center justify-between pt-4 border-t">
              <p className="text-muted-foreground">
                이 템플릿에 대한 응답들을 확인하려면 응답 현황 페이지로 이동하세요.
              </p>
              <Button
                variant="outline"
                onClick={() => router.push(`/evcp/compliance/${templateId}/responses`)}
              >
                <Users className="mr-2 h-4 w-4" />
                응답 현황 보기
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 질문 목록 */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5" />
              설문 질문 목록 ({questions.length}개)
            </CardTitle>
            <ComplianceQuestionCreateDialog templateId={templateId} />
          </div>
        </CardHeader>
        <CardContent>
          <ComplianceQuestionsDraggableList questions={questions} />
        </CardContent>
      </Card>
    </div>
  )
}