"use client"

import * as React from "react"

import { useDataTable } from "@/hooks/use-data-table"
import { DataTable } from "@/components/data-table/data-table"
import { Button } from "@/components/ui/button"
import { toast } from "sonner"

import { columns, type AvlDetailItem } from "./columns-detail"

interface AvlDetailTableProps {
  data: AvlDetailItem[]
  pageCount?: number
  avlType?: '프로젝트AVL' | '선종별표준AVL' // AVL 타입
  projectCode?: string // 프로젝트 코드
  shipOwnerName?: string // 선주명
  businessType?: string // 사업 유형 (예: 조선/해양)
}

export function AvlDetailTable({
  data,
  pageCount,
  avlType = '프로젝트AVL',
  projectCode,
  shipOwnerName,
  businessType = '조선'
}: AvlDetailTableProps) {
  // 액션 핸들러
  const handleAction = React.useCallback(async (action: string) => {
    switch (action) {
      case 'avl-form':
        toast.info("AVL 양식을 준비 중입니다.")
        // TODO: AVL 양식 다운로드 로직 구현
        break

      case 'quote-request':
        toast.info("견적 요청을 처리 중입니다.")
        // TODO: 견적 요청 로직 구현
        break

      case 'vendor-pool':
        toast.info("Vendor Pool을 열고 있습니다.")
        // TODO: Vendor Pool 페이지 이동 또는 모달 열기 로직 구현
        break

      case 'download':
        toast.info("데이터를 다운로드 중입니다.")
        // TODO: 데이터 다운로드 로직 구현
        break

      default:
        toast.error(`알 수 없는 액션: ${action}`)
    }
  }, [])


  // 테이블 메타 설정 (읽기 전용)
  const tableMeta = React.useMemo(() => ({
    onAction: handleAction,
  }), [handleAction])

  // 데이터 테이블 설정
  const { table } = useDataTable({
    data,
    columns,
    pageCount: pageCount ?? 1,
    initialState: {
      sorting: [{ id: "no", desc: false }],
      pagination: {
        pageIndex: 0,
        pageSize: 10,
      },
    },
    getRowId: (row) => String(row.id),
    meta: tableMeta,
  })


  return (
    <div className="space-y-4">
      {/* 상단 정보 표시 영역 */}
      <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
        <div className="flex items-center gap-4">
          <h2 className="text-lg font-semibold">AVL 상세내역</h2>
          <span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
            {avlType}
          </span>
          <span className="text-sm text-muted-foreground">
            [{businessType}] {projectCode || '프로젝트코드'} ({shipOwnerName || '선주명'})
          </span>
        </div>
      </div>

      {/* 상단 버튼 영역 */}
      <div className="flex items-center gap-2">
        <Button variant="outline" size="sm" onClick={() => handleAction('avl-form')}>
          AVL양식
        </Button>
        <Button variant="outline" size="sm" onClick={() => handleAction('quote-request')}>
          견적요청
        </Button>
        <Button variant="outline" size="sm" onClick={() => handleAction('vendor-pool')}>
          Vendor Pool
        </Button>
        <Button variant="outline" size="sm" onClick={() => handleAction('download')}>
          다운로드
        </Button>
      </div>

      {/* 데이터 테이블 */}
      <DataTable table={table} />

    </div>
  )
}