"use client";

import { FC, useId, useState, useCallback, useMemo } from "react";
import dynamic from "next/dynamic";
import PageHeader from "../PageHeder";
import { useMediaQuery } from "@/hooks/use-media-query";
import { usePermission } from "@/utils/auth/permission";
import ActionButton from "../action-button";
import { Badge } from "flowbite-react";
import { MdEditSquare, MdNetworkWifi, MdNetworkWifi1Bar, MdOutlineFileDownload, MdOutlineFileUpload, MdOutlineSms, MdOutlineSupportAgent, MdUpdate } from "react-icons/md";
import { HiOutlineCurrencyBangladeshi } from "react-icons/hi";
import axios from "axios";
import { useQuery } from "@tanstack/react-query";
import ButtonSkeleton from "../skeleton/button-skeleton";
import ClientInfoSkeleton from "../skeleton/client-info";
import ClientSpeed from "./client-upload-download-speed";
import ClientChangePackage from "./client-change-package";
import MoneyFormat from "../common/money";
import BulkInvoicePayModal from "../invoices/bulk-invoice-pay-modal";

const ClientInvoices = dynamic(() => import("../invoices/client-invoice"));
const ClientBasicView = dynamic(() => import("./basic-view"));
const ClientHistory = dynamic(() => import("./client-history"));
const ClientStatus = dynamic(() => import("./client-status"));
const InvoicePayModal = dynamic(() => import("../invoices/bulk-invoice-pay-modal"))
const TicketList = dynamic(() => import("../tickets/ticket-list"))

type props = {
  clientId: string | null;
};
const ClientView: FC<props> = ({ clientId }) => {
  const [graph, setGraph] = useState(null);
  const [isInvoicePay, setInvoicePay] = useState(false);
  const isMobile = useMediaQuery("(max-width: 768px)");
  const hasEditPermission = usePermission("clients.edit");
  const hasTicketPermission = usePermission("tickets.create");
  const hasPaymentPermission = usePermission("invoices.pay");
  const hasSmsSendPermission = usePermission("sms-send.access");
  const [packageOpen, setPackageOpen] = useState(false);
  const randomId = useId();

  // Memoize the setInvoicePay function to prevent unnecessary re-renders
  const handleSetInvoicePay = useCallback((value: boolean) => {
    setInvoicePay(value);
  }, []);

  const getUser = async () => {
    const { data } = await axios.get(`/api/clients/${clientId}`);
    return data?.data as any;
  };

  const { data: clientInfo, isLoading } = useQuery({
    queryKey: ['client-info', { clientId }],
    queryFn: getUser,
    retry: 0,
  });

  // Memoize the invoice ID to prevent unnecessary re-renders
  const invoiceId = useMemo(() => {
    return clientInfo?.client?.invoiceDue?.[0]?.uuid
      ? `${clientInfo.client.invoiceDue[0].uuid}`
      : null;
  }, [clientInfo?.client?.invoiceDue]);
  return (
    <div>
      <PageHeader className="!pb-0">
        <div className="md:flex md:justify-between lg:flex lg:justify-between !p-0 mb-2 border-b">
          <div className="flex gap-2 mt-2 justify-center">
            <div className="flex gap-3 justify-center mb-3 md:mb-0 lg:mb-0 md:justify-start lg:justify-start">
              {!isLoading ? (
                <div>
                  <Badge color={clientInfo?.router_info?.is_online ? "green" : "red"}>
                    <div className="flex gap-1">
                      <div className="mt-1">
                        {clientInfo?.router_info?.is_online ? (<MdNetworkWifi />) : (<MdNetworkWifi1Bar />)}
                      </div>
                      <div>
                        {clientInfo?.router_info?.is_online ? "Online" : "Offline"}
                      </div>
                    </div>
                  </Badge>
                </div>
              ) : (
                <div>
                  <ButtonSkeleton width="w-10" height="h-4" />
                </div>
              )}
              <div>
                <ClientStatus client={clientInfo?.client} />
              </div>
              {/* <ClientSpeed clientId={clientId} /> */}
            </div>
          </div>
          <div className="flex flex-wrap gap-2 md:gap-3 lg:gap-3 justify-center mb-3">
            <div>
              <ActionButton size={isMobile ? "xs" : "sm"} type="back" href="/clients" />
            </div>
            <div>
              <ActionButton size={isMobile ? "xs" : "sm"} title="Package" Icon={MdUpdate} type="any" onClick={() => setPackageOpen(true)} />
              <ClientChangePackage client={clientInfo?.client} isOpen={packageOpen} setOpen={setPackageOpen} />
            </div>
            {hasEditPermission && (
              <div>
                <ActionButton size={isMobile ? "xs" : "sm"} type="back" href={`/clients/edit/${clientId}`}>
                  <MdEditSquare className="text-lg text-white block mr-2" />{" "}
                  Edit
                </ActionButton>
              </div>
            )}
            {hasPaymentPermission && invoiceId && (
              <div>
                <ActionButton size={isMobile ? "xs" : "sm"} type="any" onClick={() => handleSetInvoicePay(true)} >
                  <div className="flex gap-0.5">
                    <HiOutlineCurrencyBangladeshi className="text-lg text-white block mr-2" />{" "}
                    <div>
                      Pay
                    </div>
                  </div>
                </ActionButton>
                {isInvoicePay && (
                  <div>
                    <BulkInvoicePayModal
                      isOpen={isInvoicePay}
                      setOpen={handleSetInvoicePay}
                      client={clientInfo?.client}
                    />
                  </div>
                )}
              </div>
            )}
            {hasTicketPermission && (
              <div>
                <ActionButton size={isMobile ? "xs" : "sm"} type="back" target="_blank" href={`/tickets?client_id=${clientId}`}>
                  <MdOutlineSupportAgent className="text-lg text-white block mr-2" />{" "}
                  Ticket
                </ActionButton>
              </div>
            )}
            {(hasSmsSendPermission && clientInfo?.client?.phone) ? (
              <div>
                <ActionButton target="_blank" size={isMobile ? "xs" : "sm"} type="back" href={`/sms-send?phone=${clientInfo?.client.phone}`} >
                  <MdOutlineSms className="text-lg text-white block mr-2" />{" "}
                  SMS
                </ActionButton>
              </div>
            ) : (<ButtonSkeleton height={isMobile && "h-6"} width={isMobile && "w-20"} />)}
          </div>
        </div>
      </PageHeader>
      {/* <ClientGraph clientId={clientId} setGraph={setGraph} /> */}
      <div className="overflow-hidden min-h-96 dark:text-gray-200">
        {isLoading ? (<ClientInfoSkeleton />) : (
          <ClientBasicView client={clientInfo?.client} routerInfo={clientInfo?.router_info} />
        )}
      </div>
      <div className="mt-4 border-t">
        <div className="flex justify-between">
          <div className="font-semibold text-lg my-2">Invoice/Payments</div>
          <div className="text-lg font-semibold mt-2 flex">
            <div>
              Total Due:
            </div>
            <MoneyFormat iconClass="mt-1" amount={clientInfo?.client?.invoiceDue?.reduce((acc: number, curr: any) => acc + curr.after_discount_amount, 0)} /></div>
        </div>
        <ClientInvoices clientId={clientId} profileView={true} />
      </div>
      <div className="mt-4 border-t">
        <div className="font-semibold text-lg my-2">Support/Tickets</div>
        <TicketList filterValue={`client_uuid=${clientId}`} />
      </div>
      <div className="mt-4 border-t">
        <div className="font-semibold text-lg my-2">History</div>
        <ClientHistory clientId={clientId} />
      </div>
    </div>
  )
};

export default ClientView;