"use client";
import { usePermission } from "@/utils/auth/permission";
import getData from "@/utils/fetch";
import { useQuery } from "@tanstack/react-query";
import { Card, List, Spinner, Tooltip } from "flowbite-react";
import { useSearchParams } from "next/navigation";
import { FC, useEffect, useId, useState } from "react";
import { HiTrash } from "react-icons/hi";
import { MdClose } from "react-icons/md";
import Button from "../Button";
import PageHeader from "../PageHeder";
import ActionButton from "../action-button";
import DeleteItem from "../common/delete-item";
import DataTable from "../dataTable/data-table-fb";
import { TSpackageSchema } from "../forms/schema/package";
import RemovePackage from "./pacakge-remove";

type props = {
  packageId: string | null;
};
const PackageView: FC<props> = ({ packageId }) => {
  const randomId = useId();
  const [resellers, setReseller] = useState<any>();
  const [refetchData, setRefetch] = useState(false);
  const searchParams = useSearchParams();
  let redirectTo = searchParams.get("type");

  const getPackage = async () => {
    const { data } = await getData(`/api/v1/packages/${packageId}`);
    const reseller = data?.children?.filter(
      (items: any) => items.is_reseller_package === 0
    );
    if (reseller) {
      setReseller(reseller);
    }
    return data as TSpackageSchema;
  };

  const {
    data: packages,
    isLoading,
    refetch,
  } = useQuery({
    queryKey: [randomId],
    queryFn: getPackage,
    retry: 0,
  });
  useEffect(() => {
    if (refetchData) {
      refetch();
    }
  }, [refetchData]);
  const columns = [
    {
      header: "SL",
      cell: ({ row }: any) => <div className="font-bold">{row.index + 1}</div>,
    },
    {
      header: "Reseller name",
      accessorKey: "name",
      cell: ({ row }: any) => {
        const packages = row.original;
        return <>{packages?.reseller?.name}</>;
      },
    },
    {
      header: "Mikrotik Profile",
      cell: ({ row }: any) => (
        <div className="font-bold">{packages?.mikrotik_profile}</div>
      ),
    },
    {
      header: "Bandwidth",
      cell: ({ row }: any) => (
        <div className="font-bold">{packages?.bandwidth}</div>
      ),
    },
    {
      header: "Package Name",
      cell: ({ row }: any) => {
        const packages = row.original;
        return <div className="font-bold">{packages?.name}</div>;
      },
    },
    {
      header: "Clients",
      cell: ({ row }: any) => {
        const packages = row.original;
        return <>{packages?.clients?.length}</>;
      },
    },
    {
      header: "Actions",
      id: "testing",
      cell: ({ row }: any) => {
        const pack = row.original;
        return (
          <>
            <div className=" flex">
              {usePermission("packages.delete") &&
              resellers?.clients?.length === 0 ? (
                <>
                  <RemovePackage
                    packageId={packages?.id as any}
                    resellerId={pack?.reseller?.uuid}
                    setRefetch={setRefetch}
                  />
                </>
              ) : (
                <>
                  <Tooltip content="Delete All Clients First, Then Remove Package">
                    <Button
                      className={`bg-red-600 text-white mt-4 disabled`}
                      disabled
                    >
                      <MdClose className="text-lg mt-0.5 mr-1" />
                      Remove
                    </Button>
                  </Tooltip>
                </>
              )}
            </div>
          </>
        );
      },
    },
  ];

  return (
    <>
      <PageHeader>
        <div className="flex justify-between !p-0">
          <h2 className="text-xl font-semibold">Package Details</h2>
          <div className="flex">
            {usePermission("packages.delete") && (
              <>
                {packages?.active_clients === 0 &&
                packages?.reseller_clients === 0 ? (
                  <DeleteItem
                    name="Package"
                    keys="packages"
                    url={`/api/v1/packages/${packageId}`}
                    customButton={true}
                    buttonTitle="Delete Package"
                    color="red"
                    redirectTo="/client-packages"
                  />
                ) : (
                  <Tooltip content="Remove All Reseller And Clients First, Then delete Package">
                    <Button
                      className={`bg-red-600 text-white disabled`}
                      disabled
                    >
                      <HiTrash className="text-lg mt-0.5 mr-1" />
                      Delete package
                    </Button>
                  </Tooltip>
                )}
              </>
            )}
            <div className="ml-2">
              <ActionButton type="back" href={`/${redirectTo}`} />
            </div>
          </div>
        </div>
      </PageHeader>
      {isLoading && (
        <div className="flex justify-around">
          <Spinner
            aria-label="Center-aligned spinner flex justify-center"
            className="mt-20"
            size="xl"
          />
        </div>
      )}
      {packages && (
        <>
          <Card className="rounded-none h-full" title="Packages">
            <div className="grid grid-cols-1 gap-0 p-2 relative md:grid-cols-2 lg:grid-cols-2 mb-5">
              <div>
                <List className="list-none">
                  <List.Item>
                    <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                      Package Name
                    </span>
                    <span className="font-bold text-gray-900 mr-2">:</span>
                    <span>{packages?.name}</span>
                  </List.Item>
                  {packages?.is_reseller_package === 1 && (
                    <>
                      <List.Item>
                        <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                          Reseller Price
                        </span>
                        <span className="font-bold text-gray-900 mr-2">:</span>
                        <span>{packages?.buying_price}</span>
                      </List.Item>
                      <List.Item>
                        <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                          Cost
                        </span>
                        <span className="font-bold text-gray-900 mr-2">:</span>
                        <span>{packages?.price}</span>
                      </List.Item>
                    </>
                  )}
                  {packages?.is_reseller_package === 0 && (
                    <>
                      <List.Item>
                        <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                          Price
                        </span>
                        <span className="font-bold text-gray-900 mr-2">:</span>
                        <span>{packages?.price}</span>
                      </List.Item>
                      <List.Item>
                        <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                          Cost
                        </span>
                        <span className="font-bold text-gray-900 mr-2">:</span>
                        <span>{packages?.buying_price}</span>
                      </List.Item>
                    </>
                  )}
                  <List.Item>
                    <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                      Bandwidth
                    </span>
                    <span className="font-bold text-gray-900 mr-2">:</span>
                    <span>{packages?.bandwidth}</span>
                  </List.Item>
                  <List.Item>
                    <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                      Miktorik Profile
                    </span>
                    <span className="font-bold text-gray-900 mr-2">:</span>
                    <span>{packages?.mikrotik_profile}</span>
                  </List.Item>
                </List>
              </div>
              <div>
                <List className="list-none">
                  <List.Item>
                    <List ordered nested className="list-none p-0">
                      <List.Item>
                        <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                          Network
                        </span>
                        <span className="font-bold text-gray-900 mr-2">:</span>
                        <span>{packages?.network?.name}</span>
                      </List.Item>
                      {packages?.is_reseller_package === 1 && (
                        <List.Item>
                          <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                            Reseller Count
                          </span>
                          <span className="font-bold text-gray-900 mr-2">
                            :
                          </span>
                          <span>{packages?.reseller_count}</span>
                        </List.Item>
                      )}
                      {packages?.is_reseller_package === 0 && (
                        <>
                          <List.Item>
                            <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                              Active Clients
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                            <span>{packages?.active_clients}</span>
                          </List.Item>
                          <List.Item>
                            <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                              Inactive Clients
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                            <span>{packages?.inactive_clients}</span>
                          </List.Item>
                        </>
                      )}
                    </List>
                  </List.Item>
                </List>
              </div>
            </div>
          </Card>
          {resellers && Object.keys(resellers).length > 0 && (
            <div className="border-b overflow-x-auto">
              <DataTable data={resellers} columns={columns} />
            </div>
          )}
        </>
      )}
    </>
  );
};

export default PackageView;