import { Badge, Card, List } from "flowbite-react";
import { FC, useState } from "react";
import { TSclientSchema } from "../forms/schema/client";
import { MdCall, MdContentCopy, MdNetworkWifi } from "react-icons/md";
import { toast } from "react-toastify";
import { twMerge } from "tailwind-merge";
import CallButton from "../phone-number";
import ClientSpeed from "./client-upload-download-speed";
import MoneyFormat from "../common/money";

type props = {
  client: TSclientSchema;
  routerInfo?: any
};

const ClientBasicView: FC<props> = ({ client, routerInfo }) => {
  const [copied, setCopied] = useState(false);
  const textToCopy = `Name: ${client?.name ?? ''}
  Phone: ${client?.phone ?? ''}
  UserId: ${client?.pppoe_username ?? ''}
  Password: ${client?.pppoe_password ?? ''}
  Zone: ${client?.zone?.name ?? ''}
  Address: ${client?.current_address ?? ''}`
    .trim();
  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(textToCopy);
      setCopied(true);
      toast.success(`Client info copy successfully`);
      setTimeout(() => setCopied(false), 2000); // reset after 2s
    } catch (err) {
      console.error("Failed to copy: ", err);
    }
  };
  return (
    <>
      <div className="grid grid-cols-1 gap-4 mt-4  relative md:grid-cols-3 lg:grid-cols-3 mb-5 dark:text-gray-200 mx-1">
        <div className="shadow rounded-md">
          <List className="list-none">
            <div>
              <div className="bg-gray-50 p-3 flex justify-between">
                <div className="font-semibold text-lg  text-gray-800 dark:text-gray-200">
                  Basic Information
                </div>
                <div className={twMerge("p-1 cursor-pointer", copied && "text-blue-600")} onClick={handleCopy}>
                  <MdContentCopy />
                </div>
              </div>

            </div>
            <List.Item className="px-3 pb-3">
              <List ordered nested className="list-none p-0">
                <List.Item>
                  <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-28 inline-block">
                    Name
                  </span>
                  <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                    :
                  </span>
                  <span>{client?.name}</span>
                </List.Item>
                <List.Item className="flex">
                  <div className="label text-md font-medium text-gray-800 dark:text-gray-200 w-28 inline-block">
                    Phone
                  </div>
                  <div className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                    :
                  </div>
                  <div className="flex">
                    <CallButton phone={client?.phone} />
                  </div>
                </List.Item>
                <List.Item>
                  <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-28 inline-block">
                    Username
                  </span>
                  <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                    :
                  </span>
                  <span>
                    {client?.pppoe_username}
                  </span>
                </List.Item>
                <List.Item>
                  <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-28 inline-block">
                    Password
                  </span>
                  <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                    :
                  </span>
                  <span>
                    {client?.pppoe_password}
                  </span>
                </List.Item>
                <List.Item>
                  <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-28 inline-block">
                    Zone
                  </span>
                  <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                    :
                  </span>
                  <span>{client?.zone?.name}</span>
                </List.Item>
                <List.Item>
                  <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-28 inline-block">
                    Address
                  </span>
                  <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                    :
                  </span>
                  <span>{client?.current_address}</span>
                </List.Item>
                <List.Item>
                  <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-28 inline-block">
                    Email
                  </span>
                  <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                    :
                  </span>
                  <span>{client?.email}</span>
                </List.Item>
                <List.Item className="flex">
                  <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-28 inline-block">
                    Balance
                  </span>
                  <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                    :
                  </span>
                  <div>
                    <MoneyFormat amount={client?.wallet?.balance ?? 0} />
                  </div>
                </List.Item>
              </List>
            </List.Item>
          </List>
        </div>
        <div className="shadow rounded-md">
          <List className="list-none">
            <h2 className="font-semibold text-lg bg-gray-50 p-3 text-gray-800 dark:text-gray-200">
              Billing Information
            </h2>
            <List.Item className="px-3 pb-3">
              <List ordered nested className="list-none p-0">
                <List.Item>
                  <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-36 inline-block">
                    Connection Type
                  </span>
                  <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                    :
                  </span>
                  <span>{"PPPOE"}</span>
                </List.Item>
                <List.Item>
                  <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-36 inline-block">
                    Package
                  </span>
                  <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                    :
                  </span>
                  <span>{client?.package?.name}</span>
                </List.Item>
                <List.Item>
                  <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-36 inline-block">
                    Price
                  </span>
                  <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                    :
                  </span>
                  <span>{client?.package?.price}/- TK.</span>
                </List.Item>
                <List.Item>
                  <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-36 inline-block">
                    Billing Deadline
                  </span>
                  <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                    :
                  </span>
                  <span>{client?.payment_deadline}</span>
                </List.Item>
                <List.Item>
                  <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-36 inline-block">
                    Billing term
                  </span>
                  <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                    :
                  </span>
                  <span>{"Monthly"}</span>
                </List.Item>

                <List.Item>
                  <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-36 inline-block">
                    Billing Type
                  </span>
                  <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                    :
                  </span>
                  <span>
                    {client?.billing_term}
                  </span>
                </List.Item>
                <List.Item>
                  <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-36 inline-block">
                    Invoice Day
                  </span>
                  <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                    :
                  </span>
                  <span>{client?.invoice_day}</span>
                </List.Item>
                <List.Item>
                  <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-36 inline-block">
                    Billing Type
                  </span>
                  <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                    :
                  </span>
                  <span>{client?.billing_type}</span>
                </List.Item>
                <List.Item>
                  <span className="label text-md font-medium text-gray-800 dark:text-gray-200 w-36 inline-block">
                    Discount
                  </span>
                  <span className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                    :
                  </span>
                  <span>{client?.discount}</span>
                </List.Item>
              </List>
            </List.Item>
          </List>
        </div>
        <div className="shadow rounded-md">
          <List className="list-none">
            <h2 className="font-semibold bg-gray-50 p-3 text-lg text-gray-800 dark:text-gray-200">
              Server Information
            </h2>
            <List.Item className="px-3 pb-3">
              <List ordered className="list-none">
                <List.Item>
                  <div className="flex h-8">
                    <div className="label text-md font-bold text-gray-800 dark:text-gray-200 w-[135px] inline-block">
                      Up/down
                    </div>
                    <div className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                      :
                    </div>
                    <ClientSpeed clientId={client?.id} />
                  </div>
                </List.Item>
                <List.Item>
                  <div className="flex">
                    <div className="label text-md font-medium text-gray-800 dark:text-gray-200 w-24">
                      IP Address
                    </div>
                    <div className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                      :
                    </div>
                    <span>
                      {routerInfo?.ip_address}
                    </span>
                  </div>
                </List.Item>
                <List.Item>
                  <div className="flex">
                    <div className="label text-md font-medium text-gray-800 dark:text-gray-200 w-24 inline-block">
                      Router Mac
                    </div>
                    <div className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                      :
                    </div>
                    <span>
                      {routerInfo?.user_mac_address}
                    </span>
                  </div>
                </List.Item>
                <List.Item>
                  <div className="flex">
                    <div className="label text-md font-medium text-gray-800 dark:text-gray-200 w-24 inline-block">
                      Uptime
                    </div>
                    <div className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                      :
                    </div>
                    <span>
                      {routerInfo?.uptime}
                    </span>
                  </div>
                </List.Item>
                <List.Item>
                  <div className="flex">
                    <div className="label text-md font-medium text-gray-800 dark:text-gray-200 w-24 inline-block">
                      Last logout
                    </div>
                    <div className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                      :
                    </div>
                    <div>
                      {routerInfo?.last_logout}
                    </div>
                  </div>
                </List.Item>
                <List.Item>
                  <div className="flex">
                    <div className="label text-md font-medium text-gray-800 dark:text-gray-200 w-24 inline-block">
                      Is Online
                    </div>
                    <div className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                      :
                    </div>
                    <div className="inline-block">
                      {routerInfo?.is_online ? (
                        <Badge color={"green"}>
                          <div className="flex gap-1">
                            <div className="mt-0.5">
                              <MdNetworkWifi />
                            </div>
                            <div>
                              Online
                            </div>
                          </div>
                        </Badge>
                      ) : (
                        <Badge color={"red"}>
                          Offline
                        </Badge>
                      )}
                    </div>
                  </div>

                </List.Item>
                <List.Item>
                  <div className="flex">
                    <div className="label text-md font-medium text-gray-800 dark:text-gray-200 w-24 inline-block">
                      Network
                    </div>
                    <div className="font-bold text-gray-900 dark:text-gray-200 mr-2">
                      :
                    </div>
                    <div>{client?.network?.name}</div>
                  </div>
                </List.Item>
              </List>
            </List.Item>
          </List>
        </div>
      </div>
    </>
  );
};

export default ClientBasicView;