"use client";
import { FC, useCallback, useRef, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Modal } from "flowbite-react";
import { MdEditSquare } from "react-icons/md";
import { toast } from "react-toastify";
import { z } from "zod";
import { putData } from "@/utils/fetch";
import { useParseError } from "@/utils/lib/helpers";
import MoneyFormat from "../common/money";
import ActionButton from "../action-button";
import { InputField } from "../forms/Inputs";

type InvoiceItem = {
  uuid: string;
  invoice_type: string;
  discount: number;
  line_total_discount: number;
  total_amount: number;
  after_discount_amount: number;
  amount_paid: number;
};

type Props = {
  invoice: InvoiceItem;
  onDiscountUpdated?: () => void;
};

const invoiceDiscountSchema = z.object({
  discount_amount: z.coerce
    .number({ invalid_type_error: "Discount amount is required" })
    .positive("Discount amount must be greater than 0"),
});

type TSInvoiceDiscountSchema = z.infer<typeof invoiceDiscountSchema>;

const InvoiceDiscount: FC<Props> = ({ invoice, onDiscountUpdated }) => {
  const [isOpen, setIsOpen] = useState(false);
  const queryClient = useQueryClient();
  const inputRef = useRef<HTMLInputElement>(null);

  const currentDiscount = invoice.discount + invoice.line_total_discount;
  const maxDiscount = invoice.after_discount_amount - invoice.amount_paid;

  const discountForm = useForm<TSInvoiceDiscountSchema>({
    resolver: zodResolver(invoiceDiscountSchema),
    mode: "onChange",
    defaultValues: {
      discount_amount: undefined,
    },
  });

  const {
    handleSubmit,
    reset,
    setError,
    formState: { errors },
  } = discountForm;

  const { mutate: updateDiscount, isPending } = useMutation({
    mutationFn: async (data: TSInvoiceDiscountSchema) => {
      const api_url = `/api/v1/invoice-discount/${invoice.uuid}`;
      const response = await putData(api_url, data);
      if (response?.errors?.length > 0 || response?.error) {
        throw response;
      }
      return response;
    },
    onSuccess: () => {
      toast.success("Discount updated successfully!");
      queryClient.invalidateQueries({ queryKey: ["clients"] });
      setIsOpen(false);
      reset();
      onDiscountUpdated?.();
    },
    onError: (error: any) => {
      const errorMessage = useParseError(error);
      if (errorMessage) {
        toast.error(errorMessage);
      } else {
        toast.error("Unable to update discount. Please try again.");
      }
    },
  });

  const onSubmit = async (data: TSInvoiceDiscountSchema) => {
    if (data.discount_amount > maxDiscount) {
      setError("discount_amount", {
        type: "manual",
        message: `Discount amount cannot exceed ${maxDiscount}`,
      });
      return;
    }
    updateDiscount(data);
  };

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

  const handleClose = useCallback(() => {
    setIsOpen(false);
    reset();
  }, [reset]);

  return (
    <>
      <div onClick={() => setIsOpen(true)}>
        <MdEditSquare className="text-lg text-blue-600" />
      </div>

      <Modal show={isOpen} onClose={handleClose} size="md">
        <Modal.Header className="border-b border-gray-200 dark:border-gray-700">
          Apply Invoice Discount
        </Modal.Header>
        <Modal.Body>
          <div className="bg-gray-50 dark:bg-gray-800 p-3 rounded-lg space-y-2 mb-4">
            <div className="flex justify-between text-sm">
              <span className="text-gray-600 dark:text-gray-400">Invoice Type:</span>
              <span className="font-medium">{invoice.invoice_type}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-600 dark:text-gray-400">Total Amount:</span>
              <MoneyFormat amount={invoice.total_amount} className="!w-auto text-sm font-medium" icon={false} />
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-600 dark:text-gray-400">Current Discount:</span>
              <MoneyFormat amount={currentDiscount} className="!w-auto text-sm font-medium text-green-600" icon={false} />
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-600 dark:text-gray-400">Amount Paid:</span>
              <MoneyFormat amount={invoice.amount_paid} className="!w-auto text-sm font-medium text-green-600" icon={false} />
            </div>
            <div className="flex justify-between text-sm border-t pt-2">
              <span className="text-gray-600 dark:text-gray-400">Amount Due:</span>
              <MoneyFormat amount={maxDiscount} className="!w-auto text-sm font-medium text-red-600" icon={false} />
            </div>
          </div>

          <FormProvider {...discountForm}>
            <form onSubmit={handleSubmit(onSubmit, onError)}>
              <div className="mb-4">
                <InputField
                  labelText="Additional Discount Amount"
                  name="discount_amount"
                  inputType="number"
                  placeholder="Enter discount amount"
                  errors={errors}
                />
                <p className="mt-1 text-xs text-gray-500">
                  Maximum discount allowed: <MoneyFormat amount={maxDiscount} className="!w-auto !inline-flex text-xs" icon={false} />
                </p>
              </div>
              <input className="opacity-0 h-0" type="submit" ref={inputRef} />
            </form>
          </FormProvider>
        </Modal.Body>
        <Modal.Footer className="flex justify-end gap-2">
          <ActionButton
            type="any"
            color="gray"
            onClick={handleClose}
            title="Cancel"
          />
          <ActionButton
            type="submit"
            isLoading={isPending}
            onClick={() => inputRef.current?.click()}
            title="Apply Discount"
          />
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default InvoiceDiscount;