"use client"

import * as React from "react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { DataTable } from "@/components/data-table/data-table"
import { useDataTable } from "@/hooks/use-data-table"
import { type ColumnDef } from "@tanstack/react-table"
import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"

interface RfqItem {
  id: number
  itemCode: string
  description: string | null
  quantity: number | null
  uom: string | null
}

interface RfqItemsTableDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  items: RfqItem[]
}

export function RfqItemsTableDialog({
  open,
  onOpenChange,
  items,
}: RfqItemsTableDialogProps) {
  const columns = React.useMemo<ColumnDef<RfqItem>[]>(
    () => [
      {
        accessorKey: "itemCode",
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Item Code" />
        ),
      },
      {
        accessorKey: "description",
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Description" />
        ),
        cell: ({ row }) => row.getValue("description") || "-",
      },
      {
        accessorKey: "quantity",
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Quantity" />
        ),
        cell: ({ row }) => {
          const quantity = row.getValue("quantity") as number | null;
          return (
            <div className="text-center">
              {quantity !== null ? quantity.toLocaleString() : "-"}
            </div>
          );
        },
      },
      {
        accessorKey: "uom",
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="UoM" />
        ),
        cell: ({ row }) => row.getValue("uom") || "-",
      },
    ],
    []
  )

  const { table } = useDataTable({
    data: items,
    columns,
    pageCount: 1,
    enablePinning: false,
    enableAdvancedFilter: false,
  })

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl">
        <DialogHeader>
          <DialogTitle>RFQ Items</DialogTitle>
          <DialogDescription>
            Items included in this RFQ
          </DialogDescription>
        </DialogHeader>
        <div className="mt-4">
          <DataTable table={table} />
        </div>
      </DialogContent>
    </Dialog>
  )
}