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 { useRef } from "react";
import { Button } from "@/components/ui/button";
import { getLeases } from "@/lib/querys/forklifts/getLeases";
import TableNoExpand from "@/lib/tableStuff/TableNoExpand";

type Leases = {
	id: string;
	leaseNumber: string;
	startDate: Date;
	endDate: Date;
	leaseLink: string | null;
	companyName: string;
	add_user: string;
	add_date: Date;
	upd_user: string;
	upd_date: Date;
};

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

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

	const columnHelper = createColumnHelper<Leases>();
	//const submitting = useRef(false);

	const columns = [
		columnHelper.accessor("companyName", {
			header: ({ column }) => {
				return (
					<Button
						variant="ghost"
						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
					>
						<span className="flex flex-row gap-2">Company</span>
						{column.getIsSorted() === "asc" ? (
							<ArrowUp className="ml-2 h-4 w-4" />
						) : (
							<ArrowDown className="ml-2 h-4 w-4" />
						)}
					</Button>
				);
			},
		}),
		columnHelper.accessor("leaseNumber", {
			header: ({ column }) => {
				return (
					<Button
						variant="ghost"
						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
					>
						<span className="flex flex-row gap-2">Lease Number</span>
						{column.getIsSorted() === "asc" ? (
							<ArrowUp className="ml-2 h-4 w-4" />
						) : (
							<ArrowDown className="ml-2 h-4 w-4" />
						)}
					</Button>
				);
			},
			cell: ({ getValue }) => {
				return <span>{getValue()}</span>;
			},
		}),
		columnHelper.accessor("startDate", {
			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>;
			},
		}),
		columnHelper.accessor("endDate", {
			header: ({ column }) => {
				return (
					<Button
						variant="ghost"
						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
					>
						<span className="flex flex-row gap-2">End 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={leaseData} columns={columns} />;
}
