import { LstCard } from "@/components/extendedUI/LstCard";
import { Button } from "@/components/ui/button";
import { CardHeader } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from "@/components/ui/tooltip";
import { getStockSilo } from "@/utils/querys/logistics/siloAdjustments/getStockSilo";
import { useForm } from "@tanstack/react-form";
import { useQuery } from "@tanstack/react-query";
import { Link } from "@tanstack/react-router";
import axios from "axios";
import { format } from "date-fns";
import { CircleAlert } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import ChartData from "./ChartData";
import { AttachSilo } from "./AttachSilo";
import { DetachSilo } from "./DetachSilo";
import { useSessionStore } from "@/lib/store/sessionStore";
import { useModuleStore } from "@/lib/store/useModuleStore";
import { useGetUserRoles } from "@/lib/store/useGetRoles";

export default function SiloCard(data: any) {
    const token = localStorage.getItem("auth_token");
    const [submitting, setSubmitting] = useState(false);
    const { refetch } = useQuery(getStockSilo());
    const { user } = useSessionStore();
    const { userRoles } = useGetUserRoles();
    const { modules } = useModuleStore();
    const silo = data.silo;

    // roles that can do the silo adjustments
    const roles = ["systemAdmin", "technician", "admin", "manager"];

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

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

    const form = useForm({
        defaultValues: {
            newLevel: "",
        },
        onSubmit: async ({ value }) => {
            setSubmitting(true);
            const dataToSubmit = {
                quantity: parseFloat(value.newLevel),
                warehouseId: silo.WarehouseID,
                laneId: silo.LocationID,
            };

            try {
                const res = await axios.post(
                    "/api/logistics/createsiloadjustment",
                    dataToSubmit,
                    { headers: { Authorization: `Bearer ${token}` } }
                );
                //console.log(res.data);

                if (res.data.success) {
                    toast.success(res.data.message);
                    refetch();
                    form.reset();
                }
                if (!res.data.success && res.data.data?.status === 400) {
                    if (res.data.data.status === 400) {
                        toast.error(res.data.data.data.errors[0].message);
                    }
                } else if (!res.data.success) {
                    toast.error(res.data.message);
                }
                setSubmitting(false);
            } catch (error: any) {
                //console.log(error);
                if (error.status === 401) {
                    toast.error(error.response.statusText);
                    setSubmitting(false);
                }
            }
        },
    });

    console.log(accessRoles);
    return (
        <LstCard>
            <div className="flex flex-row">
                <LstCard className="grow m-1 max-w-[400px]">
                    <CardHeader>{silo.Description}</CardHeader>
                    <div className="m-1">
                        <hr className="m-2" />
                        <span>Current Stock: </span>
                        {silo.Stock_Total}
                        <hr className="m-2" />
                        <span>Last date adjusted </span>
                        {format(silo.LastAdjustment, "M/dd/yyyy")}
                        <hr className="m-2" />
                    </div>
                    <div>
                        {silo.Stock_Total === 0 ? (
                            <div className="flex justify-center flex-col">
                                <span>
                                    The silo is currently empty you will not be
                                    able to do an adjustment until you have
                                    received material in.
                                </span>
                                <hr />
                                <ul>
                                    <li>
                                        -Someone click "Take inventory on a
                                        empty location" in stock.
                                    </li>
                                    <li>
                                        -Silo virtualy ran empty due to
                                        production over consumption.
                                    </li>
                                    <li>
                                        -Someone forgot to move a railcar
                                        compartment over to this location.
                                    </li>
                                </ul>
                            </div>
                        ) : (
                            <>
                                {user &&
                                    roles.includes(accessRoles[0]?.role) && (
                                        <form
                                            onSubmit={(e) => {
                                                e.preventDefault();
                                                e.stopPropagation();
                                            }}
                                        >
                                            <form.Field
                                                name="newLevel"
                                                validators={{
                                                    // We can choose between form-wide and field-specific validators
                                                    onChange: ({ value }) =>
                                                        value.length > 1
                                                            ? undefined
                                                            : "You must enter a value greate than 1",
                                                }}
                                                children={(field) => {
                                                    return (
                                                        <div className="m-2 min-w-48 max-w-96 p-2">
                                                            <div className="flex flex-row">
                                                                <Label htmlFor="newLevel">
                                                                    New level
                                                                </Label>
                                                                <div>
                                                                    <Disclaimer />
                                                                </div>
                                                            </div>
                                                            <div className="flex flex-row">
                                                                <Input
                                                                    name={
                                                                        field.name
                                                                    }
                                                                    value={
                                                                        field
                                                                            .state
                                                                            .value
                                                                    }
                                                                    onBlur={
                                                                        field.handleBlur
                                                                    }
                                                                    type="decimal"
                                                                    onChange={(
                                                                        e
                                                                    ) =>
                                                                        field.handleChange(
                                                                            e
                                                                                .target
                                                                                .value
                                                                        )
                                                                    }
                                                                />
                                                                <Button
                                                                    className="ml-1"
                                                                    variant="outline"
                                                                    type="submit"
                                                                    onClick={
                                                                        form.handleSubmit
                                                                    }
                                                                    disabled={
                                                                        submitting
                                                                    }
                                                                >
                                                                    {submitting ? (
                                                                        <span className="w-24">
                                                                            Submitting...
                                                                        </span>
                                                                    ) : (
                                                                        <span className="w-24">
                                                                            Submit
                                                                        </span>
                                                                    )}
                                                                </Button>
                                                            </div>

                                                            {field.state.meta
                                                                .errors
                                                                .length ? (
                                                                <em>
                                                                    {field.state.meta.errors.join(
                                                                        ","
                                                                    )}
                                                                </em>
                                                            ) : null}
                                                        </div>
                                                    );
                                                }}
                                            />
                                        </form>
                                    )}
                            </>
                        )}
                    </div>
                </LstCard>
                <div className="grow max-w-[600px]">
                    <ChartData laneId={silo.LocationID} />

                    <div className="flex justify-end m-1 gap-3">
                        <AttachSilo silo={silo} />
                        <DetachSilo silo={silo} />
                        <Button variant="outline">
                            <Link
                                to={"/siloAdjustments/$hist"}
                                params={{ hist: silo.LocationID }}
                            >
                                Historical Data
                            </Link>
                        </Button>
                    </div>
                </div>
            </div>
        </LstCard>
    );
}

const Disclaimer = () => {
    return (
        <TooltipProvider>
            <Tooltip>
                <TooltipTrigger asChild>
                    <CircleAlert className="ml-1 w-[14px]" />
                </TooltipTrigger>
                <TooltipContent className="max-w-48">
                    <p className="text-pretty">
                        If you have had this page open for a period of time
                        before submitting your data, there is a chance that the
                        stock levels will be different from the ones you see
                        above
                    </p>
                </TooltipContent>
            </Tooltip>
        </TooltipProvider>
    );
};