import { useQuery } from "@tanstack/react-query";
import { LstCard } from "@/components/extendedUI/LstCard";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Skeleton } from "@/components/ui/skeleton";
import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import { useSessionStore } from "@/lib/store/sessionStore";
import { useGetUserRoles } from "@/lib/store/useGetRoles";
import { useModuleStore } from "@/lib/store/useModuleStore";
import { useSettingStore } from "@/lib/store/useSettings";
import { LotType } from "@/types/lots";
import { getlots } from "@/utils/querys/production/lots";
import ManualPrint from "./ManualPrinting/ManualPrint";
import ManualPrintForm from "./ManualPrinting/ManualPrintForm";

let lotColumns = [
	{
		key: "MachineDescription",
		label: "Machine",
	},
	{
		key: "AV",
		label: "AV",
	},
	{
		key: "Alias",
		label: "AvDescription",
	},
	{
		key: "lot",
		label: "LotNumber",
	},
	{
		key: "ProlinkLot",
		label: "ProlinkLot",
	},
	{
		key: "PlannedQTY",
		label: "PlannedQTY",
	},
	{
		key: "Produced",
		label: "Produced",
	},
	{
		key: "Remaining",
		label: "Remaining",
	},
	{
		key: "overPrinting",
		label: "Overprinting",
	},
	// {
	//     key: "lastProlinkUpdate",
	//     label: "Last ProlinkCheck",
	// },
	// {
	//     key: "printLabel",
	//     label: "Print Label",
	// },
];
export default function Lots() {
	const { data, isError, isLoading } = useQuery(getlots());
	const { user } = useSessionStore();
	const { settings } = useSettingStore();
	const { userRoles } = useGetUserRoles();
	const { modules } = useModuleStore();

	const server = settings.filter((n) => n.name === "server")[0]?.value || "";

	const roles = ["systemAdmin", "technician", "admin", "manager", "operator"];
	const lotdata = data ? data : [];

	const module = modules.filter((n) => n.name === "logistics");

	const accessRoles = userRoles.filter(
		(n: any) => n.module === module[0]?.name,
	) as any;

	if (user && roles.includes(accessRoles[0]?.role)) {
		//width = 1280;
		const checkCol = lotColumns.some((l) => l.key === "printLabel");
		if (!checkCol) {
			lotColumns = [
				...lotColumns,
				{
					key: "printLabel",
					label: "Print Label",
				},
			];
		}
	}

	if (isError) {
		return (
			<div className="m-2 p-2 min-h-2/5">
				<ScrollArea className="max-h-1/2 rounded-md border p-4">
					<LstCard>
						<p className="text-center">Current Assigned lots</p>
						<Table>
							<TableHeader>
								<TableRow>
									{lotColumns.map((l) => (
										<TableHead key={l.key}>{l.label}</TableHead>
									))}
								</TableRow>
							</TableHeader>

							<TableBody>
								{Array(10)
									.fill(0)
									.map((_, i) => (
										<TableRow key={i}>
											<TableCell className="font-medium">
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
										</TableRow>
									))}
							</TableBody>
						</Table>
					</LstCard>
				</ScrollArea>
			</div>
		);
	}
	return (
		<LstCard className="m-2 p-2 min-h-2/5">
			<ScrollArea className="h-[400px]">
				<p className="text-center">Current Assigned lots</p>
				<Table>
					<TableHeader>
						<TableRow>
							{lotColumns.map((l) => (
								<TableHead key={l.key}>{l.label}</TableHead>
							))}
						</TableRow>
					</TableHeader>
					{isLoading ? (
						<>
							<TableBody>
								{Array(10)
									.fill(0)
									.map((_, i) => (
										<TableRow key={i}>
											<TableCell className="font-medium">
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
										</TableRow>
									))}
							</TableBody>
						</>
					) : (
						<TableBody>
							{lotdata.map((lot: LotType) => (
								<TableRow key={lot.LabelOnlineID}>
									<TableCell className="font-medium">
										{lot.MachineLocation}
									</TableCell>
									<TableCell className="font-medium">{lot.AV}</TableCell>
									<TableCell className="font-medium">{lot.Alias}</TableCell>
									<TableCell
										className={`font-medium ${lot.ProlinkLot != lot.lot ? "text-red-500" : ""}`}
									>
										{lot.lot}
									</TableCell>
									<TableCell
										className={`font-medium ${lot.ProlinkLot != lot.lot ? "text-red-500" : ""}`}
									>
										{lot.ProlinkLot}
									</TableCell>
									<TableCell className="font-medium">
										{lot.PlannedQTY}
									</TableCell>
									<TableCell className="font-medium">{lot.Produced}</TableCell>
									<TableCell className="font-medium">{lot.Remaining}</TableCell>
									<TableCell className="font-medium">
										{lot.overPrinting}
									</TableCell>
									{user && roles.includes(accessRoles[0]?.role) && (
										<>
											{server === "usday1vms006" || server === "localhost" ? (
												<>
													<TableCell className="flex justify-center">
														<ManualPrintForm />
													</TableCell>
												</>
											) : (
												<TableCell className="flex justify-center">
													<ManualPrint lot={lot} />
												</TableCell>
											)}
										</>
									)}
								</TableRow>
							))}
						</TableBody>
					)}
				</Table>
			</ScrollArea>
		</LstCard>
	);
}
