"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 { getInitialRfqDetail } from "../service" // 앞서 만든 서버 액션
import { getInitialRfqDetailColumns } from "./initial-rfq-detail-columns"
import { InitialRfqDetailTableToolbarActions } from "./initial-rfq-detail-toolbar-actions"

interface InitialRfqDetailTableProps {
  promises: Promise<Awaited<ReturnType<typeof getInitialRfqDetail>>>
  rfqId?: number
}

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

  // 선택된 상세 정보
  const [selectedDetail, setSelectedDetail] = React.useState<any>(null)

  const columns = React.useMemo(
    () => getInitialRfqDetailColumns({
      onSelectDetail: setSelectedDetail
    }),
    []
  )

  /**
   * 필터 필드 정의
   */
  const filterFields: DataTableFilterField<any>[] = [
    {
      id: "rfqCode",
      label: "RFQ 코드",
      placeholder: "RFQ 코드로 검색...",
    },
    {
      id: "vendorName",
      label: "벤더명",
      placeholder: "벤더명으로 검색...",
    },
    {
      id: "rfqStatus",
      label: "RFQ 상태",
      options: [
        { label: "Draft", value: "DRAFT", count: 0 },
        { label: "문서 접수", value: "Doc. Received", count: 0 },
        { label: "담당자 배정", value: "PIC Assigned", count: 0 },
        { label: "문서 확정", value: "Doc. Confirmed", count: 0 },
        { label: "초기 RFQ 발송", value: "Init. RFQ Sent", count: 0 },
        { label: "초기 RFQ 응답", value: "Init. RFQ Answered", count: 0 },
        { label: "TBE 시작", value: "TBE started", count: 0 },
        { label: "TBE 완료", value: "TBE finished", count: 0 },
        { label: "최종 RFQ 발송", value: "Final RFQ Sent", count: 0 },
        { label: "견적 접수", value: "Quotation Received", count: 0 },
        { label: "벤더 선정", value: "Vendor Selected", count: 0 },
      ],
    },
    {
      id: "initialRfqStatus",
      label: "초기 RFQ 상태",
      options: [
        { label: "대기", value: "PENDING", count: 0 },
        { label: "발송", value: "SENT", count: 0 },
        { label: "응답", value: "RESPONDED", count: 0 },
        { label: "만료", value: "EXPIRED", count: 0 },
        { label: "취소", value: "CANCELLED", count: 0 },
      ],
    },
    {
      id: "vendorCountry",
      label: "벤더 국가",
      options: [
        { label: "한국", value: "KR", count: 0 },
        { label: "중국", value: "CN", count: 0 },
        { label: "일본", value: "JP", count: 0 },
        { label: "미국", value: "US", count: 0 },
        { label: "독일", value: "DE", count: 0 },
      ],
    },
  ]

  /**
   * 고급 필터 필드
   */
  const advancedFilterFields: DataTableAdvancedFilterField<any>[] = [
    {
      id: "rfqCode",
      label: "RFQ 코드",
      type: "text",
    },
    {
      id: "vendorName",
      label: "벤더명",
      type: "text",
    },
    {
      id: "vendorCode",
      label: "벤더 코드",
      type: "text",
    },
    {
      id: "vendorCountry",
      label: "벤더 국가",
      type: "multi-select",
      options: [
        { label: "한국", value: "KR" },
        { label: "중국", value: "CN" },
        { label: "일본", value: "JP" },
        { label: "미국", value: "US" },
        { label: "독일", value: "DE" },
      ],
    },
    {
      id: "rfqStatus",
      label: "RFQ 상태",
      type: "multi-select",
      options: [
        { label: "Draft", value: "DRAFT" },
        { label: "문서 접수", value: "Doc. Received" },
        { label: "담당자 배정", value: "PIC Assigned" },
        { label: "문서 확정", value: "Doc. Confirmed" },
        { label: "초기 RFQ 발송", value: "Init. RFQ Sent" },
        { label: "초기 RFQ 응답", value: "Init. RFQ Answered" },
        { label: "TBE 시작", value: "TBE started" },
        { label: "TBE 완료", value: "TBE finished" },
        { label: "최종 RFQ 발송", value: "Final RFQ Sent" },
        { label: "견적 접수", value: "Quotation Received" },
        { label: "벤더 선정", value: "Vendor Selected" },
      ],
    },
    {
      id: "initialRfqStatus",
      label: "초기 RFQ 상태",
      type: "multi-select",
      options: [
        { label: "대기", value: "PENDING" },
        { label: "발송", value: "SENT" },
        { label: "응답", value: "RESPONDED" },
        { label: "만료", value: "EXPIRED" },
        { label: "취소", value: "CANCELLED" },
      ],
    },
    {
      id: "vendorBusinessSize",
      label: "벤더 규모",
      type: "multi-select",
      options: [
        { label: "대기업", value: "LARGE" },
        { label: "중기업", value: "MEDIUM" },
        { label: "소기업", value: "SMALL" },
        { label: "스타트업", value: "STARTUP" },
      ],
    },
    {
      id: "incotermsCode",
      label: "Incoterms",
      type: "text",
    },
    {
      id: "dueDate",
      label: "마감일",
      type: "date",
    },
    {
      id: "validDate",
      label: "유효일",
      type: "date",
    },
    {
      id: "shortList",
      label: "Short List",
      type: "boolean",
    },
    {
      id: "returnYn",
      label: "Return 여부",
      type: "boolean",
    },
    {
      id: "cpRequestYn",
      label: "CP Request 여부",
      type: "boolean",
    },
    {
      id: "prjectGtcYn",
      label: "Project GTC 여부",
      type: "boolean",
    },
    {
      id: "classification",
      label: "분류",
      type: "text",
    },
    {
      id: "sparepart",
      label: "예비부품",
      type: "text",
    },
    {
      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.initialRfqId.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}
          >
            <InitialRfqDetailTableToolbarActions table={table} rfqId={rfqId} />
          </DataTableAdvancedToolbar>
        </DataTable>
      </div>

      {/* 선택된 상세 정보 패널 (필요시 추가) */}
      {selectedDetail && (
        <div className="border rounded-lg p-4">
          <h3 className="text-lg font-semibold mb-2">
            상세 정보: {selectedDetail.rfqCode}
          </h3>
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <strong>벤더:</strong> {selectedDetail.vendorName}
            </div>
            <div>
              <strong>국가:</strong> {selectedDetail.vendorCountry}
            </div>
            <div>
              <strong>마감일:</strong> {formatDate(selectedDetail.dueDate)}
            </div>
            <div>
              <strong>유효일:</strong> {formatDate(selectedDetail.validDate)}
            </div>
          </div>
        </div>
      )}
    </div>
  )
}