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";

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 server = settings.filter((n) => n.name === "server")[0]?.value || "";

    const roles = ["admin", "manager", "operator"];

    if (user && roles.includes(user.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>
                            {data?.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(user.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>
    );
}