import Button from "@/UI/Button";
import Card from "@/UI/Card";
import List from "@/UI/List";
import Menu from "@/UI/Menu";
import Tabs, { Tab } from "@/UI/Tabs";
import usePurchaseEmailTemplate from "@/utils/EmailTemplate/usePurchaseEmailTemplate";
import { Drawer, Popover, Tag } from "antd";
import moment from "moment";
import { useEffect, useState } from "react";
import { BsThreeDotsVertical } from "react-icons/bs";
import { FaRegPaperPlane } from "react-icons/fa";
import { useDispatch, useSelector } from "react-redux";
import { Link, useParams } from "react-router-dom";
import {
  clearPurchase,
  loadSinglePurchase,
} from "../../redux/rtk/features/purchase/purchaseSlice";
import PurchaseProductListCard from "../Card/purchaseInvoice/PurchaseProductListCard";
import ReturnPurchaseInvoiceList from "../Card/purchaseInvoice/ReturnPurchaseInvoiceList";
import TransactionPurchaseList from "../Card/purchaseInvoice/TransactionPurchaseList";
import NewPurchaseInvoice from "../Invoice/NewPurchaseInvoice";
import Loader from "../Loader/Loader";
import AddTransaction from "../Transaction/AddTransaction";
import SendPurchaseInvoice from "./SendPurchaseInvoice";

const DetailsPurchase = () => {
  const { id } = useParams();
  const [sendForm, setSendForm] = useState(false);
  const [visibleTransactionCreate, setVisibleTransactionCreate] =
    useState(false);

  const dispatch = useDispatch();
  const purchase = useSelector((state) => state.purchases.purchase);
  const { subject, body } = usePurchaseEmailTemplate(purchase);

  const {
    status,
    totalPaidAmount,
    totalReturnAmount,
    instantPaidReturnAmount,
    dueAmount,
    singlePurchaseInvoice,
    returnPurchaseInvoice,
    transactions,
  } = purchase || {};

  const {
    totalAmount,
    totalTax,
    purchaseInvoiceProduct,
    store,
    supplier,
    note,
    createdAt,
    id: purchaseId,
  } = singlePurchaseInvoice || {};

  const calculatedGrandTotal =
    (totalAmount || 0) +
    (totalTax || 0) +
    (instantPaidReturnAmount || 0) -
    (totalReturnAmount || 0);

  useEffect(() => {
    dispatch(loadSinglePurchase(id));
    return () => {
      dispatch(clearPurchase());
    };
  }, [dispatch, id]);

  return (
    <div className="px-2 sm:px-4">
      <div>
        {singlePurchaseInvoice ? (
          <div className="flex flex-col lg:flex-row gap-2 md:gap-4">
            <Card className="w-full lg:w-2/3" bodyClass={"p-0"}>
              <div className="flex flex-col sm:flex-row justify-between mx-2 py-2 border-b items-start sm:items-center gap-2">
                <div className="flex flex-wrap gap-2 sm:gap-3 w-full sm:w-auto">
                  <div className="w-full sm:w-auto">
                    <NewPurchaseInvoice
                      title={"Purchase Invoice"}
                      data={purchase}
                    />
                  </div>
                  <Button
                    className="flex-row-reverse w-full sm:w-auto"
                    color="gray"
                    icon={<FaRegPaperPlane size={15} />}
                    onClick={() => {
                      setSendForm(true);
                    }}>
                    Send
                  </Button>

                  <Popover
                    content={
                      <Menu
                        items={[
                          {
                            key: "status",
                            label: (
                              <Link to={`/admin/purchase/${id}/return`}>
                                Return Product{" "}
                              </Link>
                            ),
                          },
                        ]}
                      />
                    }
                    placement="bottomRight"
                    arrow={false}
                    trigger="click">
                    <Button
                      color={"gray"}
                      icon={<BsThreeDotsVertical size={15} />}
                      className="px-3 w-full sm:w-auto"></Button>
                  </Popover>
                </div>
              </div>
              {sendForm ? (
                <div className="p-2 sm:p-4">
                  <SendPurchaseInvoice
                    subject={subject}
                    body={body}
                    setSendForm={setSendForm}
                    supplierEmail={supplier?.email}
                    invoice={singlePurchaseInvoice}
                  />
                </div>
              ) : (
                <Tabs className="mt-2 sm:mt-4">
                  <Tab label="Products">
                    <PurchaseProductListCard list={purchaseInvoiceProduct} />
                  </Tab>
                  <Tab label="Return products">
                    <ReturnPurchaseInvoiceList list={returnPurchaseInvoice} />
                  </Tab>
                  <Tab label="Transactions">
                    <TransactionPurchaseList list={transactions} />
                  </Tab>
                </Tabs>
              )}
            </Card>
            <div className="w-full lg:w-1/3 flex flex-col gap-2">
              <Card
                title={
                  <div className="flex items-center">
                    <span className="text-sm sm:text-base font-normal">
                      Invoice No{" "}
                      <span className="font-semibold">#{purchaseId}</span>
                    </span>
                  </div>
                }>
                <>
                  <List
                    labelClassName="w-[40%] text-xs sm:text-sm"
                    list={[
                      {
                        label: "Invoice Date",
                        value: moment(createdAt).format("ll"),
                      },

                      {
                        label: "Payment",
                        value: (
                          <Tag color={status === "PAID" ? "green" : "red"}>
                            {status}
                          </Tag>
                        ),
                      },
                      {
                        label: "Store",
                        value: store?.name,
                      },
                    ]}
                  />
                </>
              </Card>

              <Card title="Payment Details">
                <List
                  labelClassName="text-xs sm:text-sm"
                  list={[
                    {
                      label: "Total Amount",
                      value: singlePurchaseInvoice?.totalAmount
                        ? Number(singlePurchaseInvoice.totalAmount).toFixed(2)
                        : 0,
                    },

                    {
                      label: "Total Tax",
                      value: (
                        <div className="before:content-['+'] relative before:absolute before:text-green-500 before:font-bold before:-left-3 before:top-0">
                          {singlePurchaseInvoice?.totalTax
                            ? Number(singlePurchaseInvoice.totalTax).toFixed(2)
                            : 0}
                        </div>
                      ),
                      hidden: singlePurchaseInvoice?.totalTaxAmount === 0,
                    },

                    {
                      label: "Return Product Value",
                      value: (
                        <div className="before:content-['-'] relative before:absolute before:text-red-500 before:font-bold before:-left-3 before:top-0">
                          {totalReturnAmount
                            ? Number(totalReturnAmount).toFixed(2)
                            : 0}
                        </div>
                      ),
                      hidden: Boolean(
                        totalReturnAmount === 0 && instantPaidReturnAmount === 0
                      ),
                    },
                    {
                      label: "Return Amount",
                      value: (
                        <div className="before:content-['+'] relative before:absolute before:text-green-500 before:font-bold before:-left-3 before:top-0 pr-2 sm:pr-0">
                          {instantPaidReturnAmount
                            ? Number(instantPaidReturnAmount).toFixed(2)
                            : 0}
                          {totalReturnAmount != instantPaidReturnAmount &&
                            dueAmount < 0 && (
                              <Button
                                onClick={() =>
                                  setVisibleTransactionCreate(true)
                                }
                                className="static sm:absolute sm:right-4 sm:-top-[23px] inline-block w-full sm:w-auto min-w-full sm:min-w-[100px] border-blue-400 border-[1.5px] rounded px-3 mt-2 sm:mt-0 text-xs sm:text-sm">
                                Get Refund
                              </Button>
                            )}
                        </div>
                      ),
                      hidden: Boolean(
                        totalReturnAmount === 0 && instantPaidReturnAmount === 0
                      ),
                    },
                    {
                      label: "Grand Total",
                      value: (
                        <div className="before:content-['='] relative before:absolute before:text-blue-500 before:font-bold before:-left-3 before:top-0">
                          {calculatedGrandTotal.toFixed(2)}
                        </div>
                      ),
                      className: "border-t pt-1",
                    },
                    {
                      label: "Paid Amount",
                      value: (
                        <div className="before:content-['-'] relative before:absolute before:text-red-500 before:font-bold before:-left-3 before:top-0">
                          {totalPaidAmount
                            ? Number(totalPaidAmount).toFixed(2)
                            : 0}
                        </div>
                      ),
                      className: "border-b pb-1",
                    },
                    {
                      label: "Due Amount",
                      value: dueAmount ? Number(dueAmount).toFixed(2) : 0,
                    },
                  ]}
                />
              </Card>
              <Card title="Supplier Details">
                <List
                  labelClassName="w-[40%] text-xs sm:text-sm"
                  list={[
                    {
                      label: "Name",
                      value: (
                        <Link to={`/admin/supplier/${supplier.id}`} className="break-words">
                          {supplier.name}
                        </Link>
                      ),
                    },
                    {
                      label: "Phone",
                      value: supplier.phone,
                    },
                    {
                      label: "Address",
                      value: <span className="break-words">{supplier.address}</span>,
                    },
                  ]}
                />
              </Card>
              <Card>
                <List
                  labelClassName="w-[40%] font-bold text-xs sm:text-sm"
                  list={[
                    {
                      label: "Note",
                      value: <span className="break-words text-xs sm:text-sm">{note}</span>,
                      className: "flex-col gap-1",
                    },
                  ]}
                />
              </Card>
            </div>
          </div>
        ) : (
          <Loader />
        )}
      </div>
      <Drawer
        title={`Get Refund`}
        width={window.innerWidth < 768 ? "90%" : window.innerWidth < 1024 ? "60%" : "40%"}
        onClose={() => setVisibleTransactionCreate(false)}
        open={visibleTransactionCreate}
        bodyStyle={{
          paddingBottom: 80,
        }}>
        <AddTransaction
          dueAmount={Math.abs(dueAmount)}
          id={id}
          preFieldValue={{
            relatedId: purchaseId,
            type: "purchase_return",
          }}
        />
      </Drawer>
    </div>
  );
};

export default DetailsPurchase;
