"use client";

import { Space } from "antd";
import { useEffect } from "react";

import InputItem from "@/app/Components/FormItems";
import { handleChange } from "@/app/utils/form";
import { parseArrayField } from "@/app/utils/parseArrayField";
import { useSiteContext } from "@/app/Context/SiteContext";

import SectionValidator from "../SectionValidator";
import LineItemFormTable from "../LineItemFormTable";
import SelectSupplier from "../SelectSupplier";
import Summary from "../Summary";
import { getTaxById } from "@/app/utils/getTaxById";

export default function PurchaseOrderForm({
  form,
  setForm,
  allSuppliers,
  isEditMode,
  allInventory,
  brandSettings,
  allProformas,
  allPayments,
  enableGlobalDiscount,
  type,
  settings,
}) {
  const {
    lineItems,
    selectedSupplier,
    activeCurrency,
    setSelectedSupplierCurrency,
    setEditLineData,
    quoteLineItems,
    newTax,
  } = useSiteContext();

  /* ======================
     SUPPLIER CURRENCY
  ====================== */

  const supplier = allSuppliers?.find(
    (s) => s.supplier_id === selectedSupplier?.id
  );

  useEffect(() => {
    if (supplier?.currency) {
      setSelectedSupplierCurrency(supplier.currency);
    }
  }, [supplier?.currency]);

  /* ======================
     TAX RATE
  ====================== */

  const taxRate = form.add_tax
    ? Number(getTaxById(newTax, brandSettings?.global_tax)?.value)
    : 0;

  /* ======================
     TOTAL CALCULATION
  ====================== */

  const sumTotal = Array.isArray(lineItems)
    ? lineItems.reduce((acc, item) => {
        const itemTotal = parseFloat(item.total || 0);
        const itemTax =
          form.add_tax && taxRate ? (itemTotal * taxRate) / 100 : 0;

        return acc + itemTotal + itemTax;
      }, 0)
    : 0;

  /* ======================
     SYNC TOTAL TO FORM
  ====================== */

  useEffect(() => {
    if (parseArrayField(form.line_items).length !== 0) {
      setEditLineData(parseArrayField(form.line_items));
    }

    setForm((prev) => ({
      ...prev,
      total_value: sumTotal || "",
    }));
  }, [lineItems, form.add_tax, taxRate]);

  /* ======================
     RENDER
  ====================== */

  return (
    <div className="container !my-5 grid gap-8">

      {/* ================= PURCHASE DETAILS ================= */}

 
      <div className="grid grid-cols-1 lg:grid-cols-2  gap-6">

        <SelectSupplier
          supplierId={form.supplier_id}
          form={form}
          setForm={setForm}
          value={form.name}
        />

        <InputItem
          type="textspecial"
          typeField="number"
          label="Purchase Order Number"
          name="itemNumber"
          value={(form.supplier_name && form.itemNumber) || "-"}
          disabled
        />

        <InputItem
          type="date"
          label="Purchase Order Date"
          name="purchaseorder_date"
          value={form.purchaseorder_date}
          onChange={(e) => handleChange(e, setForm)}
        />

        <InputItem
          type="text"
          label="Quote Reference"
          name="quote_reference"
          value={form.quote_reference}
          onChange={(e) => handleChange(e, setForm)}
        />

        <InputItem
          type="text"
          label="Ship Via"
          name="ship_via"
          value={form.ship_via}
          onChange={(e) => handleChange(e, setForm)}
        />

        <InputItem
          type="text"
          label="F.O.B"
          name="fob"
          value={form.fob}
          onChange={(e) => handleChange(e, setForm)}
        />

        <InputItem
          type="text"
          label="Payment Terms"
          name="po_payment_terms"
          value={form.po_payment_terms}
          onChange={(e) => handleChange(e, setForm)}
        />
      </div>

      <InputItem
        type="editor"
        label="Terms and Conditions"
        name="po_terms_conditions"
        value={form.po_terms_conditions || settings?.po_terms_conditions}
        onChange={(e) => handleChange(e, setForm)}
      />

      {/* ================= LINE ITEMS ================= */}

      {form.supplier_name !== "" && (
        <div className="grid gap-4">

          <h3 className="text-lg font-semibold">Line Items</h3>

          {parseArrayField(form.line_items).length === 0 && (
            <SectionValidator
              item="line_items"
              field={lineItems}
              text="At least one line item is required."
            />
          )}

          <InputItem
            type="checkbox"
            label="Include Tax"
            name="add_tax"
            value={form.add_tax}
            onChange={(e) => handleChange(e, setForm)}
          />

          <LineItemFormTable
            seletedcurrency={activeCurrency}
            tax={!!form.add_tax}
            activelineItems={
              isEditMode
                ? quoteLineItems.length
                  ? quoteLineItems
                  : parseArrayField(form.line_items)
                : quoteLineItems.length
                ? quoteLineItems
                : allInventory
            }
            customercurrency={form.currency}
            priceMethod="buying"
            form={form}
            setForm={setForm}
            type={type}
          />
        </div>
      )}

      {/* ================= SUMMARY ================= */}

      {lineItems?.length !== 0 && (
        <div className="flex justify-end">
          <div className="lg:w-[50%] w-full">
            <Summary
              type="purchase"
              form={form}
              setForm={setForm}
              currency={activeCurrency}
              enableGlobalDiscount={enableGlobalDiscount}
              brandSettings={brandSettings}
              proformas={allProformas}
              allPayments={allPayments}
              tax={!!form.add_tax}
            />
          </div>
        </div>
      )}
    </div>
  );
}