import { LstCard } from "@/components/extendedUI/LstCard";

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

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) => n.module_id === module[0]?.module_id
    ) 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>
    );
}