"use client";

import { format } from "date-fns";
import { ko } from "date-fns/locale";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Eye, Download } from "lucide-react";
import { useRouter } from "next/navigation";
import { complianceSurveyTemplates } from "@/db/schema/compliance";

interface ComplianceResponsesListProps {
  template: typeof complianceSurveyTemplates.$inferSelect;
  responses: Array<{
    id: number;
    basicContractId: number;
    templateId: number;
    status: string;
    completedAt: Date | null;
    reviewedBy: number | null;
    reviewedAt: Date | null;
    reviewNotes: string | null;
    createdAt: Date;
    updatedAt: Date;
    answersCount: number;
  }>;
}

export function ComplianceResponsesList({ template, responses }: ComplianceResponsesListProps) {
  const router = useRouter();

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "COMPLETED":
        return <Badge variant="default">완료</Badge>;
      case "IN_PROGRESS":
        return <Badge variant="secondary">진행중</Badge>;
      case "REVIEWED":
        return <Badge variant="outline">검토완료</Badge>;
      default:
        return <Badge variant="secondary">{status}</Badge>;
    }
  };

  if (responses.length === 0) {
    return (
      <div className="text-center py-8">
        <p className="text-muted-foreground">아직 응답이 없습니다.</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>응답 ID</TableHead>
              <TableHead>계약 ID</TableHead>
              <TableHead>상태</TableHead>
              <TableHead>답변 수</TableHead>
              <TableHead>완료일</TableHead>
              <TableHead>검토일</TableHead>
              <TableHead>생성일</TableHead>
              <TableHead>작업</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {responses.map((response) => (
              <TableRow key={response.id}>
                <TableCell className="font-medium">
                  #{response.id}
                </TableCell>
                <TableCell>
                  {response.basicContractId}
                </TableCell>
                <TableCell>
                  {getStatusBadge(response.status)}
                </TableCell>
                <TableCell>
                  <Badge variant="outline">{response.answersCount}개</Badge>
                </TableCell>
                <TableCell>
                  {response.completedAt 
                    ? format(new Date(response.completedAt), 'yyyy-MM-dd HH:mm', { locale: ko })
                    : "-"
                  }
                </TableCell>
                <TableCell>
                  {response.reviewedAt 
                    ? format(new Date(response.reviewedAt), 'yyyy-MM-dd HH:mm', { locale: ko })
                    : "-"
                  }
                </TableCell>
                <TableCell>
                  {response.createdAt 
                    ? format(new Date(response.createdAt), 'yyyy-MM-dd HH:mm', { locale: ko })
                    : "-"
                  }
                </TableCell>
                <TableCell>
                  <div className="flex space-x-2">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => router.push(`/evcp/compliance/${template.id}/responses/${response.id}`)}
                    >
                      <Eye className="h-4 w-4 mr-1" />
                      상세보기
                    </Button>
                    {response.status === "COMPLETED" && (
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => {
                          // TODO: 응답 다운로드 기능 구현
                          console.log("Download response:", response.id);
                        }}
                      >
                        <Download className="h-4 w-4 mr-1" />
                        다운로드
                      </Button>
                    )}
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}