"use client";
import ValidationError from "@/components/ValidationError";
import { postData, putData } from "@/utils/fetch";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Spinner } from "flowbite-react";
import dynamic from "next/dynamic";
import { useRouter } from "next/navigation";
import { FC, useEffect, useRef, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { toast } from "react-toastify";
import Button from "../Button";
import { Modal } from "../Modal";
import { InputField, Select, Textarea } from "../forms/Inputs";
import { useSession } from "next-auth/react";
import {
  CHANNEL_TYPES,
  TSCommunicationGatewaySchema,
  communicationGatewaySchema,
} from "../forms/schema/communication-gateway";
import MyWallet from "../wallets/my-wallet";

const DropdownList = dynamic(() => import("../common/Dropdown"));

type Props = {
  gateway?: TSCommunicationGatewaySchema;
  mode?: string;
  isOpen: boolean;
  setOpen: (x: boolean) => void;
};

const CHANNEL_OPTIONS = CHANNEL_TYPES.map((t) => ({
  value: t,
  label: t.charAt(0).toUpperCase() + t.slice(1),
}));

const STATUS_OPTIONS = [
  { value: "active", label: "Active" },
  { value: "inactive", label: "Inactive" },
  { value: "test", label: "Test mode" },
];
const ACCESS_TYPE = [
  { value: "view", label: "View" },
  { value: "edit", label: "Edit" },
  { value: "delete", label: "Delete" },
];

const CommunicationGatewayForm: FC<Props> = ({
  gateway,
  isOpen,
  setOpen,
  mode = "create",
}) => {
  const { data: session }: any = useSession();
  const queryClient = useQueryClient();
  const route = useRouter();
  const inputRef = useRef<HTMLInputElement>(null);
  const [companyId, setCompany] = useState<string | number | undefined>(undefined);

  const form = useForm<TSCommunicationGatewaySchema>({
    resolver: zodResolver(communicationGatewaySchema),
    mode: "onChange",
    defaultValues: gateway as TSCommunicationGatewaySchema,
  });

  const {
    handleSubmit,
    reset,
    setValue,
    watch,
    formState: { errors },
  } = form;

  const selectedType = watch("type");

  const { mutate: submitGateway, isPending, error, isError } = useMutation({
    mutationFn: async (data: TSCommunicationGatewaySchema) => {
      if (mode === "create") {
        return postData(`/api/v1/communication-gateways`, data as any);
      }
      const { data: res } = await putData(
        `/api/v1/communication-gateways/${gateway?.id}`,
        data
      );
      return res;
    },
    onSuccess: (data) => {
      setOpen(false);
      if (data?.errors) {
        const key = Object.keys(data.errors)[0];
        toast.error(data.errors[key][0]);
      } else {
        toast.success(`Communication gateway ${mode}d successfully!`);
      }
      queryClient.invalidateQueries({ queryKey: ["communicationGateways"] });
      reset();
      handleCloseModal();
    },
    onError: () => {
      setOpen(false);
      reset();
    },
  });

  const onSubmit = (data: TSCommunicationGatewaySchema) => {
    delete data.id;
    submitGateway(data);
  };

  useEffect(() => {
    if (mode === "edit") setOpen(true);
  }, [mode]);

  const handleCloseModal = () => {
    setOpen(false);
    route.push("/communication-gateways");
  };

  const isSuperAdmin =
    session?.company?.domain === "localhost" ||
    session?.company?.domain === "app.isptik.com" ||
    session?.company?.domain === "softwarebd.net";

  return (
    <>
      {isError && (
        <ValidationError
          message={(error as any)?.message}
          data={(error as any)?.response?.data?.error?.errors}
        />
      )}
      <Modal onClose={handleCloseModal} show={isOpen} size="4xl">
        <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
          {mode === "create" ? (
            <p className="font-normal">Add new communication gateway</p>
          ) : (
            <div className="flex">
              <p className="font-normal mr-12">Edit communication gateway</p>
              {gateway?.balance_api && (
                <MyWallet label={false} />
              )}
            </div>
          )}
        </Modal.Header>
        <Modal.Body>
          <FormProvider {...form}>
            <form onSubmit={handleSubmit(onSubmit)}>
              {isSuperAdmin && (
                <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 mb-6">
                  <div>
                    <label className="mb-1 block">Company</label>
                    <DropdownList
                      defaultItems={gateway?.company}
                      name="companie"
                      idName="company_id"
                      getLabel={(c: { name?: string }) => c?.name}
                      onChange={(c) => setCompany(c?.value)}
                      isMulti={false}
                    />
                  </div>
                  <div>
                    <label className="mb-1 block">Reseller</label>
                    <DropdownList
                      defaultItems={gateway?.reseller}
                      name="reseller"
                      idName="reseller_id"
                      getLabel={(r: { name?: string }) => r?.name}
                      isMulti={false}
                      placeholder="Reseller"
                      isEnabled={!!gateway?.company}
                      depend_on={companyId ?? gateway?.company?.id}
                      onChange={(r: { id?: number }) => setValue("reseller_id", r?.id)}
                    />
                  </div>
                </div>
              )}
              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <InputField
                  labelText="Name"
                  name="name"
                  placeholder="Gateway name"
                  errors={errors}
                />
                <Select
                  options={CHANNEL_OPTIONS}
                  labelText="Type"
                  name="type"
                  errors={errors}
                />
                <InputField
                  labelText="API Endpoint"
                  name="api"
                  placeholder="https://provider.example.com/send"
                  errors={errors}
                />
                <InputField
                  labelText="Balance API"
                  name="balance_api"
                  placeholder="https://provider.example.com/balance"
                  errors={errors}
                />
                <InputField
                  labelText="Rate per unit"
                  name="rates_per_unit"
                  placeholder="0.00"
                  errors={errors}
                />
                <Select
                  options={STATUS_OPTIONS}
                  labelText="Status"
                  name="status"
                  errors={errors}
                />
                {isSuperAdmin && (
                  <Select
                    options={ACCESS_TYPE}
                    labelText="Access Type"
                    name="access_type"
                    errors={errors}
                  />
                )}
                <InputField labelText="API Key" name="api_key" errors={errors} />
                <InputField labelText="API Secret" name="api_secret" errors={errors} />
                <InputField labelText="API Token" name="api_token" errors={errors} />
                <InputField labelText="API Username" name="api_username" errors={errors} />
                <InputField labelText="API Password" name="api_password" errors={errors} />
                <InputField labelText="API Host" name="api_host" errors={errors} />
                <InputField labelText="API Port" name="api_port" errors={errors} />
                <InputField
                  labelText="Campaign ID"
                  name="campaign_id"
                  placeholder={
                    selectedType === "voice"
                      ? "Campaign identifier for voice calls (required)"
                      : "Campaign identifier (optional)"
                  }
                  errors={errors}
                />
                <div className="col-span-full">
                  <Textarea
                    labelText="Note"
                    name="note"
                    placeholder="Optional note"
                    rows={3}
                    errors={errors}
                  />
                </div>
              </div>
              <input className="opacity-0" type="submit" ref={inputRef} />
            </form>
          </FormProvider>
        </Modal.Body>
        <Modal.Footer>
          <Button color="blue" onClick={() => inputRef.current?.click()}>
            {isPending && <Spinner aria-label="submitting" size="sm" className="mr-1" />}
            Submit
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default CommunicationGatewayForm;