"use client"

import { ColumnDef } from "@tanstack/react-table"
import { MoreHorizontal, Download, Eye } from "lucide-react" // Import Eye icon
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog" // Import Dialog components
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useState } from "react" // Import useState

export type PurchaseOrder = {
  id: string
  supplierName: string
  orderDate: string
  status: string
  itemCount: number
  orderNumber?: string
  accountRef?: string
  salesOrderNo?: string
  carriageCharge?: number
  items: Array<{ stockItemId: string; itemName: string; quantity: number; sku: string; costPrice: number; costPriceGBP: number }> // Added costPrice and costPriceGBP
  quantities: number[]
  supplier?: {
    name: string
    address: string
    email: string
    phone: string
  } | null
}

// Define the props for the actions column
interface ActionsColumnProps {
  onDownloadPdf: (order: PurchaseOrder) => void;
  onViewOrder: (order: PurchaseOrder) => void; // Add onViewOrder prop
}

// Export createColumns function
export const createColumns = ({ onDownloadPdf, onViewOrder }: ActionsColumnProps): ColumnDef<PurchaseOrder>[] => [
  {
    accessorKey: "supplierName",
    header: "Supplier Name",
  },
  {
    accessorKey: "orderDate",
    header: "Order Date",
    cell: ({ row }) => {
      const date = new Date(row.getValue("orderDate"))
      const formattedDate = date.toLocaleDateString("en-ZA", {
        year: "numeric",
        month: "short",
        day: "numeric",
      })
      return <div className="font-medium">{formattedDate}</div>
    },
  },
  {
    accessorKey: "status",
    header: "Status",
  },
  {
    accessorKey: "itemCount",
    header: "Number of Items",
  },
  {
    id: "actions",
    enableHiding: false,
    cell: ({ row }) => {
      const order = row.original
      const [isEditDialogOpen, setIsEditDialogOpen] = useState(false); // State for edit dialog, if needed later

      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="h-8 w-8 p-0">
              <span className="sr-only">Open menu</span>
              <MoreHorizontal className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuLabel>Actions</DropdownMenuLabel>
            <DropdownMenuItem
              onClick={() => navigator.clipboard.writeText(order.id)}
            >
              Copy Order ID
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={() => onViewOrder(order)}> {/* Call onViewOrder */}
              <Eye className="mr-2 h-4 w-4" />
              View Order
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onDownloadPdf(order)}>
              <Download className="mr-2 h-4 w-4" />
              Download PDF
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      )
    },
  },
]