"use client"

import * as React from "react"
import { type DataTableAdvancedFilterField, type DataTableFilterField } 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 { VendorResponsesPanel } from "./vendor-responses-panel"
import { Separator } from "@/components/ui/separator"
import { FileText } from "lucide-react"
import { getRfqAttachments, getVendorResponsesForAttachment } from "../service"
import { getAttachmentColumns } from "./attachment-columns"
import { RfqAttachmentsTableToolbarActions } from "./attachment-toolbar-action"

interface RfqAttachmentsTableProps {
    promises: Promise<Awaited<ReturnType<typeof getRfqAttachments>>>
    rfqId: number
}

export function RfqAttachmentsTable({ promises, rfqId }: RfqAttachmentsTableProps) {
    const { data, pageCount } = React.use(promises)

    // 선택된 첨부파일과 벤더 응답 데이터
    const [selectedAttachment, setSelectedAttachment] = React.useState<any>(null)
    const [vendorResponses, setVendorResponses] = React.useState<any[]>([])
    const [isLoadingResponses, setIsLoadingResponses] = React.useState(false)

    const columns = React.useMemo(
        () => getAttachmentColumns({
            onSelectAttachment: setSelectedAttachment
        }),
        []
    )

    // 첨부파일 선택 시 벤더 응답 데이터 로드
    React.useEffect(() => {
        if (!selectedAttachment) {
            setVendorResponses([])
            return
        }

        const loadVendorResponses = async () => {
            setIsLoadingResponses(true)
            try {
                const responses = await getVendorResponsesForAttachment(
                    selectedAttachment.id,
                    'INITIAL' // 또는 현재 RFQ 상태에 따라 결정
                )
                setVendorResponses(responses)
            } catch (error) {
                console.error('Failed to load vendor responses:', error)
                setVendorResponses([])
            } finally {
                setIsLoadingResponses(false)
            }
        }

        loadVendorResponses()
    }, [selectedAttachment])

    /**
     * 필터 필드 정의
     */
    const filterFields: DataTableFilterField<any>[] = [
        {
            id: "fileName",
            label: "파일명",
            placeholder: "파일명으로 검색...",
        },
        {
            id: "attachmentType",
            label: "문서 타입",
            options: [
                { label: "구매 문서", value: "구매", count: 0 },
                { label: "설계 문서", value: "설계", count: 0 },
            ],
        },
        {
            id: "fileType",
            label: "파일 형식",
            options: [
                { label: "PDF", value: "pdf", count: 0 },
                { label: "Excel", value: "xlsx", count: 0 },
                { label: "Word", value: "docx", count: 0 },
                { label: "기타", value: "기타", count: 0 },
            ],
        },
    ]

    /**
     * 고급 필터 필드
     */
    const advancedFilterFields: DataTableAdvancedFilterField<any>[] = [
        {
            id: "fileName",
            label: "파일명",
            type: "text",
        },
        {
            id: "originalFileName",
            label: "원본 파일명",
            type: "text",
        },
        {
            id: "serialNo",
            label: "시리얼 번호",
            type: "text",
        },
        {
            id: "description",
            label: "설명",
            type: "text",
        },
        {
            id: "attachmentType",
            label: "문서 타입",
            type: "multi-select",
            options: [
                { label: "구매 문서", value: "구매" },
                { label: "설계 문서", value: "설계" },
            ],
        },
        {
            id: "fileType",
            label: "파일 형식",
            type: "multi-select",
            options: [
                { label: "PDF", value: "pdf" },
                { label: "Excel", value: "xlsx" },
                { label: "Word", value: "docx" },
                { label: "기타", value: "기타" },
            ],
        },
        {
            id: "createdAt",
            label: "등록일",
            type: "date",
        },
    ]

    const { table } = useDataTable({
        data,
        columns,
        pageCount,
        filterFields,
        enableAdvancedFilter: true,
        initialState: {
            sorting: [{ id: "createdAt", desc: true }],
            columnPinning: { right: ["actions"] },
        },
        getRowId: (originalRow) => originalRow.id.toString(),
        shallow: false,
        clearOnDefault: true,
    })

    return (
        <div className="space-y-6">
            {/* 메인 테이블 */}
            <div className="h-full w-full">
            <DataTable table={table}  className="h-full">
                <DataTableAdvancedToolbar
                    table={table}
                    filterFields={advancedFilterFields}
                    shallow={false}
                >
                    <RfqAttachmentsTableToolbarActions table={table} rfqId={rfqId} />
                </DataTableAdvancedToolbar>
            </DataTable>
            </div>

            {/* 벤더 응답 현황 패널 */}
            {selectedAttachment && (
                <>
                    <Separator />
                    <VendorResponsesPanel
                        attachment={selectedAttachment}
                        responses={vendorResponses}
                        isLoading={isLoadingResponses}
                        onRefresh={() => {
                            // 새로고침 로직
                            if (selectedAttachment) {
                                setSelectedAttachment({ ...selectedAttachment })
                            }
                        }}
                    />
                </>
            )}
        </div>
    )
}