"use client";

import * as React from "react";
import { getComplianceResponsesWithPagination } from "@/lib/compliance/services";
import { ComplianceResponsesTable } from "./compliance-responses-table";
import { ComplianceResponseStats } from "./compliance-response-stats";

interface ComplianceResponsesPageClientProps {
  templateId: number;
  promises?: Promise<[{ data: any[]; pageCount: number }, any]>;
  isInfiniteMode: boolean;
}

export function ComplianceResponsesPageClient({ 
  templateId, 
  promises,
  isInfiniteMode
}: ComplianceResponsesPageClientProps) {
  // 페이지네이션 모드 데이터
  const paginationData = promises ? React.use(promises) : null;
  const responses = paginationData ? paginationData[0] : { data: [], pageCount: 0 };
  const stats = paginationData ? paginationData[1] : {
    inProgress: 0,
    completed: 0,
    reviewed: 0,
    total: 0,
  };

  const [statusFilter, setStatusFilter] = React.useState<'all' | 'IN_PROGRESS' | 'COMPLETED' | 'REVIEWED'>('all');

  // 필터링된 데이터
  const filteredData = React.useMemo(() => {
    if (statusFilter === 'all') {
      return responses.data;
    }
    return responses.data.filter(item => item.status === statusFilter);
  }, [responses.data, statusFilter]);

  // 통계 카드 클릭 핸들러
  const handleFilterChange = (filter: 'all' | 'IN_PROGRESS' | 'COMPLETED' | 'REVIEWED') => {
    setStatusFilter(filter);
  };

  return (
    <>
      {/* 응답 통계 카드 */}
      <div className="mb-6">
        <ComplianceResponseStats 
          stats={stats} 
          onFilterChange={handleFilterChange}
          currentFilter={statusFilter}
        />
      </div>
      
      {/* 응답 테이블 */}
      <ComplianceResponsesTable 
        templateId={templateId}
        promises={Promise.resolve([{ data: filteredData, pageCount: Math.ceil(filteredData.length / 10) }])}
      />
    </>
  );
}