"use client"

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

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 {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"

import { getColumns } from "./possible-items-columns"
import { getTechVendorPossibleItems } from "../../tech-vendor-possible-items/service"
import { deleteTechVendorPossibleItem, getTechVendorDetailById } from "../service"
import type { TechVendorPossibleItem } from "../validations"
import { PossibleItemsTableToolbarActions } from "./possible-items-toolbar-actions"
import { AddItemDialog } from "./add-item-dialog" // 주석처리

interface TechVendorPossibleItemsTableProps {
  promises: Promise<
    [
      Awaited<ReturnType<typeof getTechVendorPossibleItems>>,
    ]
  >
  vendorId: number
}

export function TechVendorPossibleItemsTable({ 
  promises, 
  vendorId,
}: TechVendorPossibleItemsTableProps) {
  // Suspense로 받아온 데이터
  const [{ data, pageCount }] = React.use(promises)
  const [rowAction, setRowAction] = React.useState<DataTableRowAction<TechVendorPossibleItem> | null>(null)
  const [showAddDialog, setShowAddDialog] = React.useState(false) // 주석처리
  const [showDeleteAlert, setShowDeleteAlert] = React.useState(false)
  const [isDeleting, setIsDeleting] = React.useState(false)
  
  // vendor 정보와 items 다이얼로그 관련 상태
  const [vendorInfo, setVendorInfo] = React.useState<{
    id: number
    vendorName: string
    status: string
    items: string | null
  } | null>(null)
  const [showItemsDialog, setShowItemsDialog] = React.useState(false)
  const [isLoadingVendor, setIsLoadingVendor] = React.useState(false)

  // getColumns() 호출 시, setRowAction을 주입
  const columns = React.useMemo(
    () => getColumns({ setRowAction }),
    [setRowAction]
  )

  // vendor 정보 가져오기
  React.useEffect(() => {
    async function fetchVendorInfo() {
      try {
        setIsLoadingVendor(true)
        const vendorData = await getTechVendorDetailById(vendorId)
        setVendorInfo(vendorData)
      } catch (error) {
        console.error("Error fetching vendor info:", error)
        toast.error("벤더 정보를 불러오는데 실패했습니다")
      } finally {
        setIsLoadingVendor(false)
      }
    }

    fetchVendorInfo()
  }, [vendorId])

  // 단일 아이템 삭제 핸들러
  async function handleDeleteItem() {
    if (!rowAction || rowAction.type !== "delete") return

    setIsDeleting(true)
    try {
      const { success, error } = await deleteTechVendorPossibleItem(
        rowAction.row.original.id, 
        vendorId
      )
      
      if (!success) {
        throw new Error(error)
      }

      toast.success("아이템이 삭제되었습니다")
      setShowDeleteAlert(false)
      setRowAction(null)
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "아이템 삭제 중 오류가 발생했습니다")
    } finally {
      setIsDeleting(false)
    }
  }

  const filterFields: DataTableFilterField<TechVendorPossibleItem>[] = [
    { id: "vendorId", label: "벤더 ID" },
    { id: "techVendorType", label: "아이템 타입" },
  ]

  const advancedFilterFields: DataTableAdvancedFilterField<TechVendorPossibleItem>[] = [
    { id: "vendorId", label: "벤더 ID", type: "number" },
    { id: "itemCode", label: "아이템 코드", type: "text" },
    { id: "workType", label: "공종", type: "text" },
    { id: "itemList", label: "아이템명", type: "text" },
    { id: "shipTypes", label: "선종", type: "text" },
    { id: "subItemList", label: "서브아이템", type: "text" },
    { id: "techVendorType", label: "아이템 타입", type: "text" },
    { id: "createdAt", label: "등록일", type: "date" },
    { id: "updatedAt", label: "수정일", type: "date" },
  ]

  const { table } = useDataTable({
    data: data as TechVendorPossibleItem[], // 타입 단언 추가
    columns,
    pageCount,
    filterFields,
    enablePinning: true,
    enableAdvancedFilter: true,
    initialState: {
      sorting: [{ id: "createdAt", desc: true }],
      columnPinning: { right: ["actions"] },
    },
    getRowId: (originalRow) => String(originalRow.id),
    shallow: false,
    clearOnDefault: true,
  })

  // rowAction 상태 변경 감지
  React.useEffect(() => {
    if (rowAction?.type === "delete") {
      setShowDeleteAlert(true)
    }
  }, [rowAction])

  // 견적비교용 벤더인지 확인
  const isQuoteComparisonVendor = vendorInfo?.status === "QUOTE_COMPARISON"


  return (
    <>
      <DataTable table={table}>
        <DataTableAdvancedToolbar
          table={table}
          filterFields={advancedFilterFields}
          shallow={false}
        >
          <div className="flex items-center gap-2">
            {/* 견적비교용 벤더일 때만 items 버튼 표시 */}
            {isQuoteComparisonVendor && (
              <Button
                variant="outline"
                size="sm"
                onClick={() => setShowItemsDialog(true)}
                disabled={isLoadingVendor}
                className="flex items-center gap-2"
              >
                <Badge variant="secondary" className="text-xs">
                  수기입력된 자재 항목
                </Badge>
              </Button>
            )}
            
            <PossibleItemsTableToolbarActions
              table={table}
              vendorId={vendorId}
              onAdd={() => setShowAddDialog(true)} // 주석처리
              onRefresh={() => {
                // 페이지 새로고침을 위한 콜백
                window.location.reload()
              }}
            />
          </div>
        </DataTableAdvancedToolbar>
      </DataTable>

      {/* Add Item Dialog */}
      <AddItemDialog
        open={showAddDialog}
        onOpenChange={setShowAddDialog}
        vendorId={vendorId}
      />

      {/* Vendor Items Dialog */}
      <Dialog open={showItemsDialog} onOpenChange={setShowItemsDialog}>
        <DialogContent className="max-w-2xl max-h-[80vh]">
          <DialogHeader>
            <DialogTitle>벤더 수기입력 자재 항목</DialogTitle>
            <DialogDescription>
              {vendorInfo?.vendorName} 벤더가 직접 입력한 자재 항목입니다.
            </DialogDescription>
          </DialogHeader>
          
          <ScrollArea className="max-h-[60vh]">
            {vendorInfo?.items && vendorInfo.items.length > 0 ? (
              <div className="space-y-3">
                          <p className="text-sm text-muted-foreground mt-1">
                            {vendorInfo.items}
                          </p>
              </div>
            ) : (
              <div className="text-center py-8 text-muted-foreground">
                <p>등록된 수기입력 자재 항목이 없습니다.</p>
              </div>
            )}
          </ScrollArea>
        </DialogContent>
      </Dialog>

      {/* Delete Confirmation Dialog */}
      <AlertDialog open={showDeleteAlert} onOpenChange={setShowDeleteAlert}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>아이템 삭제</AlertDialogTitle>
            <AlertDialogDescription>
              이 아이템을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => setRowAction(null)}>
              취소
            </AlertDialogCancel>
            <AlertDialogAction 
              onClick={handleDeleteItem}
              disabled={isDeleting}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              {isDeleting ? "삭제 중..." : "삭제"}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  )
}