import { useQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { createColumnHelper } from "@tanstack/react-table";
import { format } from "date-fns";
import { ArrowDown, ArrowUp } from "lucide-react";
import { Button } from "@/components/ui/button";
import { getInvoices } from "@/lib/querys/forklifts/getInvoices";
import TableNoExpand from "@/lib/tableStuff/TableNoExpand";

type Invoices = {
	id: string;
	invoiceNumber: string;
	invoiceDate: Date;
	totalAmount: string;
	add_date: Date;
};

export const Route = createFileRoute("/_app/_forklifts/forklifts/invoices")({
	component: RouteComponent,
});

function RouteComponent() {
	const { data: invoiceData = [], isLoading } = useQuery(getInvoices());

	const columnHelper = createColumnHelper<Invoices>();
	//const submitting = useRef(false);
	console.log(invoiceData);
	const columns = [
		columnHelper.accessor("invoiceNumber", {
			header: ({ column }) => {
				return (
					<Button
						variant="ghost"
						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
					>
						<span className="flex flex-row gap-2">Invoice Number</span>
						{column.getIsSorted() === "asc" ? (
							<ArrowUp className="ml-2 h-4 w-4" />
						) : (
							<ArrowDown className="ml-2 h-4 w-4" />
						)}
					</Button>
				);
			},
		}),
		columnHelper.accessor("totalAmount", {
			header: ({ column }) => {
				return (
					<Button
						variant="ghost"
						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
					>
						<span className="flex flex-row gap-2">Total Amount</span>
						{column.getIsSorted() === "asc" ? (
							<ArrowUp className="ml-2 h-4 w-4" />
						) : (
							<ArrowDown className="ml-2 h-4 w-4" />
						)}
					</Button>
				);
			},
		}),
		columnHelper.accessor("invoiceDate", {
			header: ({ column }) => {
				return (
					<Button
						variant="ghost"
						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
					>
						<span className="flex flex-row gap-2">Invoice Date</span>
						{column.getIsSorted() === "asc" ? (
							<ArrowUp className="ml-2 h-4 w-4" />
						) : (
							<ArrowDown className="ml-2 h-4 w-4" />
						)}
					</Button>
				);
			},
			cell: ({ getValue }) => {
				const raw = getValue() as string | Date;
				const date = typeof raw === "string" ? new Date(raw) : (raw as Date);
				if (isNaN(date.getTime())) return "Invalid date";
				return <span>{format(date, "MM/dd/yyyy")}</span>;
			},
		}),
		// columnHelper.accessor("add_date", {
		// 	header: ({ column }) => {
		// 		return (
		// 			<Button
		// 				variant="ghost"
		// 				onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
		// 			>
		// 				<span className="flex flex-row gap-2">Start Date</span>
		// 				{column.getIsSorted() === "asc" ? (
		// 					<ArrowUp className="ml-2 h-4 w-4" />
		// 				) : (
		// 					<ArrowDown className="ml-2 h-4 w-4" />
		// 				)}
		// 			</Button>
		// 		);
		// 	},
		// 	cell: ({ getValue }) => {
		// 		const raw = getValue() as string | Date;
		// 		const date = typeof raw === "string" ? new Date(raw) : (raw as Date);
		// 		if (isNaN(date.getTime())) return "Invalid date";
		// 		return <span>{format(date, "MM/dd/yyyy")}</span>;
		// 	},
		//}),
	];

	if (isLoading) {
		return <div className="m-auto">Loading user data</div>;
	}
	return <TableNoExpand data={invoiceData} columns={columns} />;
}
