import {useSessionStore} from "@/lib/store/sessionStore";
import {LstCard} from "../extendedUI/LstCard";
import {Tabs, TabsContent, TabsList, TabsTrigger} from "../ui/tabs";
import {useModuleStore} from "@/lib/store/useModuleStore";
import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "../ui/table";
import {Skeleton} from "../ui/skeleton";

import {Link, useRouter} from "@tanstack/react-router";
import {Popover, PopoverContent, PopoverTrigger} from "../ui/popover";
import {Button} from "../ui/button";
import {cn} from "@/lib/utils";
import {CalendarIcon} from "lucide-react";
import {format, startOfMonth} from "date-fns";
import {Calendar} from "../ui/calendar";
import {useState} from "react";
import {toast} from "sonner";
import KFP from "./KFP";

export default function EomPage() {
    const {modules} = useModuleStore();
    const {user} = useSessionStore();
    const router = useRouter();
    const [date, setDate] = useState<Date>();

    if (!user) {
        router.navigate({to: "/"});
    }
    const eomMod = modules.filter((m) => m.name === "eom");
    // the users current role for eom is?
    const role: any = user?.roles.filter((r) => r.module_id === eomMod[0].module_id) || "";

    const tabs = [
        {key: "kfp", label: "Key Figures", roles: ["admin", "systemAdmin"], content: <KFP />},
        {key: "fg", label: "Finished Goods", roles: ["admin", "systemAdmin"], content: <DummyContent />},
        {key: "mm", label: "Main Material", roles: ["admin", "systemAdmin"], content: <DummyContent />},
        {key: "mb", label: "Master Batch", roles: ["admin", "systemAdmin"], content: <DummyContent />},
        {key: "ab", label: "Additive", roles: ["admin", "systemAdmin"], content: <DummyContent />},
        {key: "pp", label: "Purchased Preforms", roles: ["admin", "systemAdmin"], content: <DummyContent />},
        {key: "pre", label: "Preforms", roles: ["admin", "systemAdmin"], content: <DummyContent />},
        {key: "pkg", label: "Packaging", roles: ["admin", "systemAdmin"], content: <DummyContent />},
        {key: "ui", label: "Undefined Items", roles: ["admin"], content: <DummyContent />},
    ];
    return (
        <div className="m-2 w-screen">
            <div className="mb-2 flex flex-row">
                <Popover>
                    <PopoverTrigger asChild>
                        <Button
                            variant={"outline"}
                            className={cn(
                                "w-[280px] justify-start text-left font-normal",
                                !date && "text-muted-foreground"
                            )}
                        >
                            <CalendarIcon className="mr-2 h-4 w-4" />
                            {date ? format(date, "PPP") : <span>Pick a date</span>}
                        </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0">
                        <Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
                    </PopoverContent>
                </Popover>
                <div className="ml-2">
                    <Button onClick={() => toast.success(`Getting data for ${startOfMonth(date!)}-${date}`)}>
                        <span className="text-sm">Update Data</span>
                    </Button>
                </div>
            </div>

            <Tabs defaultValue="mm">
                <TabsList>
                    {tabs.map((tab) => {
                        if (tab.roles.includes(role[0].role))
                            return <TabsTrigger value={tab.key}>{tab.label}</TabsTrigger>;
                    })}
                </TabsList>
                {tabs.map((tab) => {
                    if (tab.roles.includes(role[0].role))
                        return <TabsContent value={tab.key}>{tab.content}</TabsContent>;
                })}
            </Tabs>
        </div>
    );
}

function DummyContent() {
    return (
        <LstCard className="w-5/6">
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead>Av</TableHead>
                        <TableHead>Description</TableHead>
                        <TableHead>Material Type</TableHead>
                        <TableHead>Waste</TableHead>
                        <TableHead>Loss / Gain $$</TableHead>
                    </TableRow>
                </TableHeader>

                <TableBody>
                    {Array(10)
                    .fill(0)
                    .map((_, i) => (
                        <TableRow key={i}>
                            <TableCell className="font-medium m-2">
                                <Link to="/article/$av" params={{av: `${i}`}}>
                                    {i}
                                </Link>
                            </TableCell>
                            <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> */}
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </LstCard>
    );
}