"use client"

import * as React from "react"
import type {
    DataTableAdvancedFilterField,
    DataTableFilterField,
    DataTableRowAction,
} from "@/types/table"

import { useDataTable } from "@/hooks/use-data-table"
import { DataTable } from "@/components/data-table/data-table"
import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"

import { getEvaluationSubmissions, EvaluationSubmissionWithVendor } from "../service"
import { getColumns } from "./evaluation-submissions-table-columns"
import { EsgEvaluationFormSheet } from "./esg-evaluation-form-sheet"
import { useRouter } from "next/navigation"
import { GeneralEvaluationFormSheet } from "./general-evaluation-form-sheet"
import { EvaluationSubmissionDialog } from "./evaluation-submit-dialog"

interface EvaluationSubmissionsTableProps {
    promises: Promise<
        [
            Awaited<ReturnType<typeof getEvaluationSubmissions>>,
        ]
    >
}

export function EvaluationSubmissionsTable({ promises }: EvaluationSubmissionsTableProps) {
    // 1. 데이터 로딩 상태 관리
    const [isLoading, setIsLoading] = React.useState(true)
    const [tableData, setTableData] = React.useState<{
        data: EvaluationSubmissionWithVendor[]
        pageCount: number
    }>({ data: [], pageCount: 0 })
    const router = useRouter()


    // 2. 행 액션 상태 관리
    const [rowAction, setRowAction] =
        React.useState<DataTableRowAction<EvaluationSubmissionWithVendor> | null>(null)

    // 3. Promise 해결을 useEffect로 처리
    React.useEffect(() => {
        promises
            .then(([result]) => {
                setTableData(result)
                setIsLoading(false)
            })
        //   .catch((error) => {
        //     console.error('Failed to load evaluation submissions:', error)
        //     setIsLoading(false)
        //   })
    }, [promises])

    // 4. 컬럼 정의
    const columns = React.useMemo(
        () => getColumns({ setRowAction }),
        [setRowAction]
    )

    // 5. 필터 필드 정의
    const filterFields: DataTableFilterField<EvaluationSubmissionWithVendor>[] = [
        {
            id: "submissionStatus",
            label: "제출상태",
            placeholder: "상태 선택...",
        },
        {
            id: "evaluationYear",
            label: "평가연도",
            placeholder: "연도 선택...",
        },
    ]

    const advancedFilterFields: DataTableAdvancedFilterField<EvaluationSubmissionWithVendor>[] = [
        {
            id: "submissionId",
            label: "제출 ID",
            type: "text",
        },
        {
            id: "evaluationYear",
            label: "평가연도",
            type: "number",
        },
        {
            id: "evaluationRound",
            label: "평가회차",
            type: "text",
        },
        {
            id: "submissionStatus",
            label: "제출상태",
            type: "select",
            options: [
                { label: "임시저장", value: "draft" },
                { label: "제출완료", value: "submitted" },
                { label: "검토중", value: "under_review" },
                { label: "승인", value: "approved" },
                { label: "반려", value: "rejected" },
            ],
        },
        {
            id: "submittedAt",
            label: "제출일시",
            type: "date",
        },
        {
            id: "reviewedAt",
            label: "검토일시",
            type: "date",
        },
        {
            id: "averageEsgScore",
            label: "ESG 점수",
            type: "number",
        },
        {
            id: "createdAt",
            label: "생성일",
            type: "date",
        },
        {
            id: "updatedAt",
            label: "수정일",
            type: "date",
        },
    ]

    // 6. 데이터 테이블 설정
    const { table } = useDataTable({
        data: tableData.data,
        columns,
        pageCount: tableData.pageCount,
        filterFields,
        enablePinning: true,
        enableAdvancedFilter: true,
        initialState: {
            sorting: [{ id: "createdAt", desc: true }],
            columnPinning: { left: ["select"], right: ["actions"] },
        },
        getRowId: (originalRow) => String(originalRow.id),
        shallow: false,
        clearOnDefault: true,
    })

    // 7. 데이터 새로고침 함수
    const handleRefresh = React.useCallback(() => {
        setIsLoading(true)
        router.refresh()
    }, [router])

    // 8. 각종 성공 핸들러
    const handleActionSuccess = React.useCallback(() => {
        setRowAction(null)
        table.resetRowSelection()
        handleRefresh()
    }, [handleRefresh, table])

    // 9. 로딩 상태 표시
    if (isLoading) {
        return (
            <div className="flex items-center justify-center h-32">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
                <span className="ml-2">평가 제출 목록을 불러오는 중...</span>
            </div>
        )
    }

    return (
        <>
            {/* 메인 테이블 */}
            <DataTable table={table}>
                <DataTableAdvancedToolbar
                    table={table}
                    filterFields={advancedFilterFields}
                    shallow={false}
                >
                </DataTableAdvancedToolbar>
            </DataTable>


            {/* 일반평가 작성 시트 */}
            <GeneralEvaluationFormSheet
                open={rowAction?.type === "general_evaluation"}
                onOpenChange={() => setRowAction(null)}
                submission={rowAction?.row.original ?? null}
                onSuccess={handleActionSuccess}
            />

            {/* ESG평가 작성 시트 */}
            <EsgEvaluationFormSheet
                open={rowAction?.type === "esg_evaluation"}
                onOpenChange={() => setRowAction(null)}
                submission={rowAction?.row.original ?? null}
                onSuccess={handleActionSuccess}
            />

            <EvaluationSubmissionDialog
                open={rowAction?.type === "submit"}
                onOpenChange={() => setRowAction(null)}
                submission={rowAction?.row.original ?? null}
                onSuccess={handleActionSuccess}
            />



        </>
    )
}