"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 { getColumns } from "./contact-table-columns"
import { getTechVendorContacts } from "../service"
import { TechVendorContact } from "@/db/schema/techVendors"
import { TechVendorContactsTableToolbarActions } from "./contact-table-toolbar-actions"
import { UpdateContactSheet } from "./update-contact-sheet"
import { toast } from "sonner"
import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from "@/components/ui/alert-dialog"
import { deleteTechVendorContact } from "../service"

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

export function TechVendorContactsTable({ promises , vendorId}: TechVendorContactsTableProps) {

  // Suspense로 받아온 데이터
  const [{ data, pageCount }] = React.use(promises)

  const [rowAction, setRowAction] = React.useState<DataTableRowAction<TechVendorContact> | null>(null)
  const [isDeleting, setIsDeleting] = React.useState(false)
  const [showDeleteAlert, setShowDeleteAlert] = React.useState(false)

  React.useEffect(() => {
    if (rowAction?.type === "delete") {
      setShowDeleteAlert(true)
    }
  }, [rowAction])

  async function handleDeleteContact() {
    if (!rowAction || rowAction.type !== "delete") return
    setIsDeleting(true)
    try {
      const contactId = rowAction.row.original.id
      const vId = rowAction.row.original.vendorId
      const { data, error } = await deleteTechVendorContact(contactId, vId)
      if (error) throw new Error(error)
      toast.success("연락처가 삭제되었습니다.")
      setShowDeleteAlert(false)
      setRowAction(null)
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "삭제 중 오류가 발생했습니다.")
    } finally {
      setIsDeleting(false)
    }
  }

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

  const filterFields: DataTableFilterField<TechVendorContact>[] = [
    
  ]

  const advancedFilterFields: DataTableAdvancedFilterField<TechVendorContact>[] = [
    { id: "contactName", label: "Contact Name", type: "text" },
    { id: "contactPosition", label: "Contact Position", type: "text" },
    { id: "contactEmail", label: "Contact Email", type: "text" },
    { id: "contactPhone", label: "Contact Phone", type: "text" },
    { id: "contactCountry", label: "Country", type: "text" },
    { id: "createdAt", label: "Created at", type: "date" },
    { id: "updatedAt", label: "Updated at", type: "date" },
  ]

  const { table } = useDataTable({
    data,
    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,
  })

  return (
    <>
      <DataTable
        table={table}
      >
        <DataTableAdvancedToolbar
          table={table}
          filterFields={advancedFilterFields}
          shallow={false}
        >
          <TechVendorContactsTableToolbarActions table={table} vendorId={vendorId} />
        </DataTableAdvancedToolbar>
      </DataTable>

      <UpdateContactSheet
        open={rowAction?.type === "update"}
        onOpenChange={() => setRowAction(null)}
        contact={rowAction?.type === "update" ? rowAction.row.original : null}
        vendorId={vendorId}
      />

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