import { createFileRoute } from "@tanstack/react-router";
import { createColumnHelper } from "@tanstack/react-table";
import { useState } from "react";
import { Separator } from "../../components/ui/separator";
import LstTable from "../../lib/tableStuff/LstTable";
import SearchableHeader from "../../lib/tableStuff/SearchableHeader";
import { runtimeConfig } from "../../lib/umami.utils";
import ForecastUpload from "./-components/dm.ForecastUpload";
import OrdersUpload from "./-components/dm.OrdersUpload";
import Templates from "./-components/dm.Templates";

export const Route = createFileRoute("/logistics/dm")({
	component: RouteComponent,
});

function RouteComponent() {
	const server = runtimeConfig.server;
	const columnHelper = createColumnHelper<any>();
	const [uploadInfo, setUploadInfo] = useState<any>([]);

	console.log(uploadInfo?.data?.orders);
	const columns = [
		columnHelper.accessor("customerId", {
			header: ({ column }) => (
				<SearchableHeader
					column={column}
					title="Customer ID"
					searchable={true}
				/>
			),
			filterFn: "includesString",
			cell: (i) => <>{i.getValue()}</>,
		}),
		columnHelper.accessor("customerOrderNo", {
			header: ({ column }) => (
				<SearchableHeader
					column={column}
					title="Customer Order Number"
					searchable={true}
				/>
			),
			filterFn: "includesString",
			cell: (i) => <>{i.getValue()}</>,
		}),
		columnHelper.accessor((row) => row.positions?.[0]?.customerLineItemNo, {
			id: "customerLineItemNo",
			header: ({ column }) => (
				<SearchableHeader
					column={column}
					title="Customer Line Item No"
					searchable={true}
				/>
			),
			filterFn: "includesString",
			cell: (i) => <>{i.getValue()}</>,
		}),
		columnHelper.accessor((row) => row.positions?.[0]?.deliveryDate, {
			id: "deliveryDate",
			header: ({ column }) => (
				<SearchableHeader
					column={column}
					title="Delivery date"
					searchable={true}
				/>
			),
			filterFn: "includesString",
			cell: (i) => <>{i.getValue()}</>,
		}),
		columnHelper.accessor((row) => row.positions?.[0]?.quantity, {
			id: "quantity",
			header: ({ column }) => (
				<SearchableHeader column={column} title="Quantity" searchable={true} />
			),
			filterFn: "includesString",
			cell: (i) => <>{i.getValue()}</>,
		}),
	];
	return (
		<div>
			<div className="w-7x1 mt-2 flex flex-row gap-2 justify-center">
				<div>
					<Templates />
				</div>
				<div>
					<ForecastUpload server={server} responseData={setUploadInfo} />
				</div>
				<div>
					<OrdersUpload server={server} responseData={setUploadInfo} />
				</div>
			</div>

			<div className="mt-2">
				<p>
					As a reminder, All forecast and orders, uploaded will always show
					processed as good or error, you will still need to go into AlplaPROD
					2.0 and validate the file processed all orders with no errors.
				</p>
				<p>
					This is due to AlplaPROD basically saying it has accepted your file
					only.
				</p>
			</div>
			<Separator />
			<p className="text-sm">
				The info in the table below is what was processed and sent over to
				AlplaPROD, if releases were in any other state than planned they would
				be skipped and not show up below.
			</p>
			<p className="text-sm">
				We only pass back the data you sent in no releases you will need to
				validate this on your own.
			</p>
			<Separator className="m-2" />
			<p className="text-center">
				The below table will show orders only forecast will be added in later
			</p>
			<div className="w-7xl flex justify-center mt-3">
				<LstTable
					data={uploadInfo?.data?.orders ?? []}
					columns={columns}
					pageSize={50}
					className="max-h-96 "
				/>
			</div>
		</div>
	);
}
