"use client";
import { usePermission } from "@/utils/auth/permission";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { Button, List, Tabs } from "flowbite-react";
import { useSession } from "next-auth/react";
import { FC, useEffect, useRef, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { GrMap, GrUpdate } from "react-icons/gr";
import { HiCog, HiPhoneIncoming, HiPhoneMissedCall } from "react-icons/hi";
import { IoChatbubblesSharp, IoClose, IoWalletSharp } from "react-icons/io5";
import { MdEditSquare, MdSms } from "react-icons/md";
import { toast } from "react-toastify";
import PageHeader from "../PageHeder";
import { InputField } from "../forms/Inputs";
import { TSsettingSchema, settingSchema, telegram } from "../forms/schema/setting";
import ChannelSelector from "./channel-selector";
import ReminderDayBefore from "./invoice-reminder-before";
import ListItems from "./list-items";
import Payments from "./payment";
import SmsSchedule from "./sms-shedule-time";
import Switcher from "./switcher";
import SwitcherList from "./switcher-list";
import Spinner from "../spinner";
import { convertSchemaToArray } from "@/utils/lib/helpers";
type Options = { name: string, value: string };

const SettingView: FC = () => {
  const [isEdit, setEdit] = useState(false);
  const [loading, setLoading] = useState(false);
  const queryClient = useQueryClient();
  const inputRef = useRef<HTMLInputElement>(null);
  const telegramSchema = convertSchemaToArray(telegram);
  const settingForm = useForm<TSsettingSchema>({
    resolver: zodResolver(settingSchema),
    mode: "onChange",
    defaultValues: {},
  });
  const { data: session }: any = useSession();
  const {
    handleSubmit,
    setValue,
    formState: { errors },
  } = settingForm;

  const getCompany = async () => {
    const { data } = await axios.get("/api/company");
    return data?.data;
  };

  const { data: setting, isLoading, refetch } = useQuery({
    queryKey: ["setting"],
    queryFn: () => getCompany(),
    retry: 0,
  });
  const {
    mutate: updateSettings,
    isPending,
  } = useMutation<TSsettingSchema, any>({
    mutationFn: async (companyData) => {
      const { data } = await axios({
        method: "post",
        url: "/api/company",
        data: companyData,
      });
      return data.data;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["setting"] });
      setEdit(false);
      toast.success("Setting update successfully!");
    },
    onError: () => { },
  });

  const onSubmit = (data: any) => {
    updateSettings(data);
    console.log(data);
  };

  const onError = (data: any) => {
    console.log("error", data);
  };

  useEffect(() => {
    if (setting) {
      setValue("settings", setting.settings);
    }
  }, [setting]);

  return (
    <>
      <PageHeader>
        <div className="flex justify-between">
          <div>
            <h1 className="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
              Settings
            </h1>
          </div>
          {usePermission("company-settings.edit") && (
            <div className="flex">
              {!isEdit && (
                <div onClick={() => setEdit(true)}>
                  <Button className="mr-1" color="blue" size={"sm"}>
                    <MdEditSquare className="mr-1 mt-1" /> Edit
                  </Button>
                </div>
              )}
              {isEdit && (
                <div className="flex">
                  <Button
                    color="blue"
                    className="mr-2"
                    onClick={() => inputRef.current?.click()}
                    disabled={isPending}
                  >
                    <div className="flex">
                      <GrUpdate className="mt-1 mr-1 text-xs" />
                      <span>Update</span>
                    </div>
                  </Button>
                  <Button onClick={() => setEdit(false)} size={"sm"}>
                    <IoClose className="mr-1 mt-1" /> Cancel
                  </Button>
                </div>
              )}
            </div>
          )}
        </div>
      </PageHeader>
      {(isLoading || loading) && (
        <div className="relative">
          <div className="grid fixed left-2/4 top-1/2 z-50">
            <Spinner size="xl" color="purple" />
          </div>
        </div>
      )}
      {setting && (
        <div className="relative z-5">
          {isPending && (
            <div className="text-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
              <Spinner
                aria-label="Center-aligned spinner example"
                className="mt-20"
                size="xl"
              />
            </div>
          )}
          <FormProvider {...settingForm}>
            <form action="" onSubmit={handleSubmit(onSubmit, onError)}>
              <Tabs
                aria-label="Tabs with icons dark:text-gray-200"
                style="default"
              >
                <Tabs.Item title="SMS" icon={MdSms}>
                  <List className="list-none">
                    <div className="font-bold text-black">
                      SMS Notifications:
                    </div>
                    <List.Item>
                      <List ordered nested className="list-none p-0">
                        <List.Item
                          className={`flex ${isEdit ? "!mt-5" : ""} mb-2`}
                        >
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Client Create
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            <Switcher
                              setting={setting}
                              option={"sms_after_client_create"}
                            />
                          </div>
                        </List.Item>
                        <List.Item
                          className={`flex ${isEdit ? "!mt-5" : ""} mt-4 pb-2`}
                        >
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Client Activated
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            <Switcher
                              setting={setting}
                              option={"sms_after_client_activated"}
                            />
                          </div>
                        </List.Item>
                        <List.Item
                          className={`flex ${isEdit ? "!mt-5" : ""} pb-2`}
                        >
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Client Deactivated
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            <Switcher
                              setting={setting}
                              option={"sms_after_client_deactivated"}
                            />
                          </div>
                        </List.Item>
                        <List.Item
                          className={`flex ${isEdit ? "!mt-5" : ""} pb-2`}
                        >
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Payment Received
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            <Switcher
                              setting={setting}
                              option={"sms_after_payment_received"}
                            />
                          </div>
                        </List.Item>
                        <List.Item
                          className={`flex ${isEdit ? "!mt-5" : ""} pb-2`}
                        >
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Manual Invoice Generate
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            <Switcher
                              setting={setting}
                              option={"sms_after_manual_invoice_generate"}
                            />
                          </div>
                        </List.Item>
                        <List.Item
                          className={`flex ${isEdit ? "!mt-5" : ""} pb-2`}
                        >
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Client Auto Invoice Generate
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            <Switcher
                              setting={setting}
                              option={"sms_after_auto_invoice_generate_client"}
                            />
                          </div>
                        </List.Item>
                        <List.Item
                          className={`flex ${isEdit ? "!mt-5" : ""} pb-2`}
                        >
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Client Invoice wallet paid
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            <Switcher
                              setting={setting}
                              option={"sms_after_auto_invoice_paid_from_wallet"}
                            />
                          </div>
                        </List.Item>
                        <List.Item
                          className={`flex ${isEdit ? "!mt-5" : ""} pb-2`}
                        >
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Reseller Auto Invoice Generate
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            <Switcher
                              setting={setting}
                              option={
                                "sms_after_auto_invoice_generate_reseller"
                              }
                            />
                          </div>
                        </List.Item>
                        <List.Item
                          className={`flex ${isEdit ? "!mt-5" : ""} pt-2`}
                        >
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Auto Invoice SMS Schedule
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div className="-mt-2">
                            <SmsSchedule
                              setting={setting}
                              option={"sms_auto_invoice_schedule"}
                            />
                          </div>
                        </List.Item>
                        <List.Item
                          className={`flex ${isEdit ? "!mt-5" : ""} pb-2 pt-4`}
                        >
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Client Invoice Due Reminder
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            <Switcher
                              setting={setting}
                              option={"sms_auto_invoice_due_reminder"}
                            />
                          </div>
                        </List.Item>
                        <List.Item
                          className={`flex ${isEdit ? "!mt-5" : ""} pb-2 pt-4`}
                        >
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Reminder Channel
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div className="-mt-2">
                            <ChannelSelector
                              setting={setting}
                              option={"invoice_due_reminder_channel"}
                            />
                          </div>
                        </List.Item>
                        <List.Item
                          className={`flex ${isEdit ? "!mt-5" : ""} pb-2 pt-4`}
                        >
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Voice Campaign Name
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="settings.invoice_due_reminder_voice_campaign_name" />
                              </div>
                            ) : (
                              <span>
                                {setting?.settings?.invoice_due_reminder_voice_campaign_name}
                              </span>
                            )}
                          </div>
                        </List.Item>
                        <List.Item
                          className={`flex ${isEdit ? "!mt-5" : ""} pb-2 pt-4`}
                        >
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Voice Call Invoice Reminder
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            <Switcher
                              setting={setting}
                              option={"voice_call_invoice_reminder"}
                            />
                          </div>
                        </List.Item>
                        <List.Item
                          className={`flex ${isEdit ? "!mt-5" : ""} pb-2 pt-4`}
                        >
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Invoice Reminder
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div className="-mt-2">
                            <ReminderDayBefore
                              setting={setting}
                              option={"sms_invoice_reminder_before_day"}
                            />
                          </div>
                        </List.Item>
                      </List>
                    </List.Item>
                  </List>
                </Tabs.Item>
                <Tabs.Item title="Voice call" icon={HiPhoneIncoming}>
                  <List className="list-none pl-3">
                    <List.Item>
                      <List ordered nested className="list-none p-0">
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Api url
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="settings.voice_call_api" />
                              </div>
                            ) : (
                              <span>{setting?.settings?.voice_call_api}</span>
                            )}
                          </div>
                        </List.Item>
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Api key
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="settings.voice_call_api_key" />
                              </div>
                            ) : (
                              <span>{setting?.settings?.voice_call_api_key}</span>
                            )}
                          </div>
                        </List.Item>
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Campaign ID
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="settings.voice_call_campaign_id" />
                              </div>
                            ) : (
                              <span>{setting?.settings?.voice_call_campaign_id}</span>
                            )}
                          </div>
                        </List.Item>
                      </List>
                    </List.Item>
                  </List>
                </Tabs.Item>
                <Tabs.Item title="Map" icon={GrMap}>
                  <List className="list-none pl-3">
                    <List.Item>
                      <List ordered nested className="list-none p-0">
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Google Map api
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="settings.gmap_api" />
                              </div>
                            ) : (
                              <span>{setting?.settings?.gmap_api}</span>
                            )}
                          </div>
                        </List.Item>
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Default Lat
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="settings.lat" />
                              </div>
                            ) : (
                              <span>{setting?.settings?.lat}</span>
                            )}
                          </div>
                        </List.Item>
                        <List.Item className={`flex ${isEdit ? "!mt-5" : ""}`}>
                          <div>
                            <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                              Default Lon
                            </span>
                            <span className="font-bold text-gray-900 mr-2">
                              :
                            </span>
                          </div>
                          <div>
                            {isEdit ? (
                              <div className="-mt-4 w-96">
                                <InputField name="settings.lon" />
                              </div>
                            ) : (
                              <span>{setting?.settings?.lon}</span>
                            )}
                          </div>
                        </List.Item>
                      </List>
                    </List.Item>
                  </List>
                </Tabs.Item>
                <Tabs.Item title="Setting" icon={HiCog}>
                  <List className="list-none pl-3">
                    <ListItems
                      title="Invoice prefix"
                      field="invoice_prefix"
                      isEdit={isEdit}
                      setting={setting}
                    />
                  </List>
                  <List.Item
                    className={`flex ${isEdit ? "!mt-5" : ""} pb-2 pt-4`}
                  >
                    <div>
                      <span className="label dark:text-gray-200 text-md font-medium text-gray-800 w-64 inline-block">
                        Auto inactive client invoice due
                      </span>
                      <span className="font-bold text-gray-900 mr-2">
                        :
                      </span>
                    </div>
                    <div>
                      <Switcher
                        setting={setting}
                        option={"auto_inactive_client_invoice_due"}
                      />
                    </div>
                  </List.Item>
                </Tabs.Item>
                <Tabs.Item title="Payments" icon={IoWalletSharp}>
                  <Payments setting={setting} isEdit={isEdit} />
                </Tabs.Item>
                <Tabs.Item title="Telegram" icon={IoChatbubblesSharp}>
                  <List className="list-none">
                    <ListItems
                      title="Telegram Token"
                      field="telegram_bot_token"
                      isEdit={isEdit}
                      setting={setting}
                    />
                    <ListItems
                      title="Channel ID"
                      field="telegram_channel_id"
                      isEdit={isEdit}
                      setting={setting}
                    />
                  </List>
                  <div className="border-t mt-2">
                    {telegramSchema.map((option: Options) => (
                      <SwitcherList key={option.value} setLoading={setLoading} setting={setting} option={option} />
                    ))}
                  </div>
                </Tabs.Item>
              </Tabs>
              {isEdit && (
                <>
                  <div className="py-4">
                    <hr />
                  </div>
                  <div className="flex justify-end">
                    <Button type="submit" color="blue" disabled={isPending}>
                      {isPending && (
                        <Spinner
                          aria-label="Spinner button"
                          size="sm"
                          className="mr-1"
                        />
                      )}
                      <div className="flex">
                        <GrUpdate className="mt-1 mr-1 text-xs" />
                        <span>Update</span>
                      </div>
                    </Button>
                  </div>
                </>
              )}
              <input className="opacity-0" type="submit" ref={inputRef} />
            </form>
          </FormProvider>
        </div>
      )}
    </>
  );
};

export default SettingView;