"use client";
import { User } from "@/interfaces/User";
import { usePermission } from "@/utils/auth/permission";
import { useParseError } from "@/utils/lib/helpers";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
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 PageHeader from "../PageHeder";
import ActionButton from "../action-button";
import DropdownList from "../common/Dropdown";
import MoneyFormat from "../common/money";
import {
  Datepicker,
  InputField,
  Radio,
  Select,
  Textarea,
} from "../forms/Inputs";
import {
  TSinvoicePaySchema,
  invoicePaySchema,
} from "../forms/schema/invoice-pay";

type Props = {
  invoice?: TSinvoicePaySchema;
};

const InvoicePayForm: FC<Props> = ({ invoice }) => {
  const queryClient = useQueryClient();
  const [status, setStatus] = useState("paid");
  const route = useRouter();
  const zoneForm = useForm<TSinvoicePaySchema>({
    resolver: zodResolver(invoicePaySchema),
    mode: "onChange",
    defaultValues: invoice as TSinvoicePaySchema,
  });

  const inputRef = useRef<HTMLInputElement>(null);

  const {
    handleSubmit,
    reset,
    setValue,
    register,
    setError,
    formState: { errors },
  } = zoneForm;

  const {
    mutate: submitInvoice,
    isPending,
    error,
    isError,
    isSuccess,
  } = useMutation({
    mutationFn: async (invoiceData: TSinvoicePaySchema) => {
      const api_url = `/api/invoices/pay/${invoice?.id}`;
      const { data } = await axios({
        method: "put",
        url: api_url,
        data: invoiceData,
      });
      return data.data as User;
    },
    onSuccess: (data) => {
      toast.success(`Invoice complete successfully!`);
      route.push("/invoices");
      reset();
      queryClient.invalidateQueries({ queryKey: ["clients"] });
    },
    onError: (error: any) => {
      if (useParseError(error)) {
        toast.error(useParseError(error));
      } else {
        toast.error(
          "Unable to complete the request, please check all information is correct and try again"
        );
      }
    },
  });
  const onSubmit = async (data: TSinvoicePaySchema) => {
    delete data.id;
    console.log(data);
    //return;
    if (!data.fund_id) {
      setError("fund_id", {
        type: "manual",
        message: "Payment method is required!",
      });
      return;
    }
    if (data.status === "partial_paid" && data?.partial_amount <= 0) {
      setError("partial_amount", {
        type: "manual",
        message: "Amount must be grater then 0",
      });
      return;
    }
    submitInvoice(data);
  };

  const onError = async (data: any) => {
    console.log(data);
  };

  useEffect(() => {
    setValue("status", status);
    if (invoice?.total_amount) {
      setValue("total_amount", invoice?.total_amount);
    }
  }, [setValue, invoice]);

  return (
    <>
      <PageHeader>
        <div className="flex justify-between !p-0">
          <h2 className="text-xl font-semibold">Invoice Pay</h2>
          {usePermission("invoices.create") && (
            <div>
              <ActionButton href="/invoices" type="back" />
            </div>
          )}
        </div>
      </PageHeader>
      <div className="p-5 pb-20 bg-white">
        <div className="grid grid-cols-1 gap-6 sm:grid-cols-3 border-b pb-3">
          <div className="flex justify-start md:justify-start sm:justify-start lg:justify-start">
            <div>
              <div className="flex font-medium text-gray-900">
                <div>Total Due :</div>{" "}
                <MoneyFormat amount={invoice?.total_amount} iconClass="mt-1" />
              </div>
              <div className="flex font-medium text-green-600">
                <div>Paid :</div>{" "}
                <MoneyFormat amount={invoice?.amount_paid} iconClass="mt-1" />
              </div>
              <div className="flex font-medium text-green-600">
                <div>Discount :</div>{" "}
                <MoneyFormat
                  amount={invoice?.total_discount}
                  iconClass="mt-1"
                />
              </div>
              <div className="flex font-medium text-red-600 divide-y-2 mt-1">
                <hr />
                <div>Actual Due : </div>
                <MoneyFormat amount={invoice?.amount_due} iconClass="mt-1" />
              </div>
            </div>
          </div>
          <div className="flex justify-start md:justify-center lg:justify-center sm:justify-center">
            <div>
              {invoice?.reseller ? (
                <>
                  <p>
                    Name :{" "}
                    {invoice?.reseller?.company
                      ? invoice?.reseller?.company
                      : invoice?.reseller?.name}
                  </p>
                </>
              ) : (
                <>
                  <p>ID : {invoice?.client?.pppoe_username}</p>
                  <p>Name : {invoice?.client?.name}</p>
                </>
              )}
              <p>Create Date : {invoice?.create_date}</p>
            </div>
          </div>
          <div className="flex md:justify-end lg:justify-end sm:justify-end justify-start">
            <div>
              {invoice?.reseller ? (
                <>
                  <p>
                    Phone :{" "}
                    {invoice?.reseller?.company_phone
                      ? invoice?.reseller?.company_phone
                      : invoice?.reseller?.phone}
                  </p>
                  <p>Address : {invoice?.reseller?.company_address}</p>
                </>
              ) : (
                <>
                  <p>Phone : {invoice?.client?.phone}</p>
                  <p>Address : {invoice?.client?.current_address}</p>
                </>
              )}
              <p>Due Date : {invoice?.due_date}</p>
            </div>
          </div>
        </div>
        <FormProvider {...zoneForm}>
          <form onSubmit={handleSubmit(onSubmit, onError)} className="mt-3">
            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
              <div className="left">
                <div className="mt-1">
                  <label htmlFor="" className="block mb-2">
                    Invoice Type
                  </label>
                  <DropdownList
                    name="invoice_type"
                    idName="invoice_type_id"
                    getLabel={(invoiceType: any) => invoiceType?.name}
                    placeholder="Invoice Type"
                    isMulti={false}
                    defaultItems={invoice?.invoice_type}
                  />
                </div>
                <div className="mt-1">
                  <InputField
                    labelText="Amount"
                    name="total_amount"
                    placeholder="Amount of Taka"
                    errors={errors}
                    readonly={true}
                  />
                </div>
                <div className="mt-1">
                  <InputField
                    labelText="Discount"
                    name="total_discount"
                    placeholder="Discount"
                    readonly={true}
                    errors={errors}
                  />
                </div>
                <div className="mt-1">
                  <label htmlFor="" className="block mb-2">
                    Payment Method (Fund)
                  </label>
                  <DropdownList
                    name="fund"
                    idName="fund_id"
                    getLabel={(method: any) => method?.name}
                    placeholder="Fund"
                    isMulti={false}
                    defaultItems={invoice?.fund}
                  />
                </div>
                <div className="mt-1">
                  <label htmlFor="" className="block mb-2">
                    Client
                  </label>
                  <DropdownList
                    name="client"
                    placeholder="Client"
                    idName="client_id"
                    isMulti={false}
                    getLabel={(dropdownClient) => dropdownClient.name}
                    defaultItems={invoice?.client}
                    isDisabled={true}
                  />
                </div>
                <div className="mt-3">
                  <Radio
                    groupLabel="Send SMS"
                    name="confirmation_sms"
                    options={[
                      { label: "Yes", value: 1 },
                      { label: "No", value: 0 },
                    ]}
                    defaultValue={1}
                    labelFlex={true}
                  />
                </div>
              </div>
              <div className="right">
                <div className="mt-1">
                  <InputField
                    labelText="Transaction ID"
                    name="transaction_id"
                    placeholder="Transaction ID"
                    errors={errors}
                  />
                </div>
                <div className="mt-1">
                  <InputField
                    labelText="Reference"
                    name="reference"
                    placeholder="reference"
                    errors={errors}
                  />
                </div>
                <div className="mt-1">
                  <Select
                    defaultValue={status}
                    options={[
                      { value: "paid", label: "Paid" },
                      { value: "partial_paid", label: "Partial Paid" },
                    ]}
                    labelText="Status"
                    name="status"
                    errors={errors}
                    onChange={(e) => setStatus(e.target.value)}
                  />
                </div>
                {status === "partial_paid" && (
                  <div className="mt-1">
                    <InputField
                      labelText="Partial Amount paid"
                      name="partial_amount"
                      placeholder="Partial amount"
                      errors={errors}
                    />
                  </div>
                )}
                <div className="mt-1">
                  <Datepicker
                    name="payment_date"
                    labelText="Payment Date"
                    defaultDate={invoice?.payment_date}
                  />
                </div>
              </div>
            </div>
            <div className="mt-2">
              <Textarea
                labelText="Note"
                name="note"
                rows={2}
                placeholder="Note"
              />
            </div>
            <div className="grid grid-cols-1 gap-6 sm:grid-cols-1"></div>
            <input className="opacity-0" type="submit" ref={inputRef} />
          </form>
        </FormProvider>
        {usePermission("invoices.edit") && (
          <ActionButton
            isLoading={isPending}
            type="submit"
            onClick={() => inputRef.current?.click()}
          />
        )}
      </div>
    </>
  );
};

export default InvoicePayForm;