"use client";

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

import InputItem from "@/app/Components/FormItems";
import { handleChange } from "@/app/utils/form";
import { CardTitle } from "@/app/utils/CardTitle";
import SelectCustomer from "../SelectCustomer";
import SectionValidator from "../SectionValidator";
import LineItemFormTable from "../LineItemFormTable";

import { useSiteContext } from "@/app/Context/SiteContext";
import { getStatusById } from "@/app/utils/status";
import { parseArrayField } from "@/app/utils/parseArrayField";

export default function DeliveryNoteForm({
  form,
  setForm,
  settings,
  isEditMode,
  allInventory,
  type,
}) {
  const {
    editLineData,
    setEditLineData,
    quoteLineItems,
    setQuoteLineItems,
    customerRelatedData,
  } = useSiteContext();

  /* ===============================
     HELPERS
  ================================ */

  const getSingleSalesOrderId = (salesorder_id) =>
    Array.isArray(salesorder_id) ? salesorder_id[0] : salesorder_id;

  const selectedSalesOrderId = getSingleSalesOrderId(form.salesorder_id);

  /* ===============================
     LOAD SALESORDER DATA
  ================================ */

  // useEffect(() => {
  //   if (!form.salesorder_id) return;

  //   const mergeLineItemsByItemId = (items = []) => {
  //     const map = new Map();

  //     for (const item of items) {
  //       if (!item?.item_id) continue;

  //       if (!map.has(item.item_id)) {
  //         map.set(item.item_id, { ...item });
  //       } else {
  //         const existing = map.get(item.item_id);
  //         map.set(item.item_id, {
  //           ...existing,
  //           qty: Number(existing.qty || 0) + Number(item.qty || 0),
  //         });
  //       }
  //     }

  //     return Array.from(map.values());
  //   };

  //   const reduceLineItemsByUpdated = (
  //     lineItems = [],
  //     updatedItems = []
  //   ) => {
  //     const usedMap = updatedItems.reduce((acc, item) => {
  //       acc[item.item_id] =
  //         (acc[item.item_id] || 0) + Number(item.qty || 0);
  //       return acc;
  //     }, {});

  //     return lineItems
  //       .map((item) => {
  //         const usedQty = usedMap[item.item_id] || 0;
  //         const remainingQty = Number(item.qty || 0) - usedQty;

  //         if (remainingQty <= 0) return null;

  //         return {
  //           ...item,
  //           qty: remainingQty,
  //           total: (remainingQty * Number(item.price || 0)).toFixed(2),
  //         };
  //       })
  //       .filter(Boolean);
  //   };

  //   const fetchSalesOrders = async () => {
  //     try {
  //       const numbers = Array.isArray(form.salesorder_id)
  //         ? form.salesorder_id.join(",")
  //         : form.salesorder_id;

  //       if (!numbers) return;

  //       const res = await fetch(
  //         `/api/salesorder?salesorder_number=${encodeURIComponent(
  //           numbers
  //         )}`,
  //         { credentials: "same-origin" }
  //       );

  //       if (!res.ok) return;

  //       const data = await res.json();
  //       if (!data?.success) return;

  //       const orders = Array.isArray(data.salesorder)
  //         ? data.salesorder
  //         : [data.salesorder];

  //       const allLineItems = orders.flatMap(
  //         (o) => o?.line_items || []
  //       );

  //       const allUpdatedLineItems = orders.flatMap(
  //         (o) => o?.updated_line_items || []
  //       );

  //       const merged = mergeLineItemsByItemId(allLineItems);
  //       const remaining = reduceLineItemsByUpdated(
  //         merged,
  //         allUpdatedLineItems
  //       );

  //       setQuoteLineItems(remaining);

  //       const lpoNumber = orders[0]?.lpo_number ?? "";
  //       setForm((prev) => ({
  //         ...prev,
  //         lpo_number: lpoNumber ? Number(lpoNumber) || lpoNumber : "",
  //       }));
  //     } catch (err) {
  //       console.error("Fetch salesorder failed:", err);
  //     }
  //   };

  //   fetchSalesOrders();
  // }, [form.salesorder_id, setForm, setQuoteLineItems]);

  useEffect(() => {
    if (!form.salesorder_id) return;

    const reduceLineItemsByUpdated = (lineItems = [], updatedItems = []) => {
      const usedMap = updatedItems.reduce((acc, item) => {
        acc[item.item_id] = (acc[item.item_id] || 0) + Number(item.qty || 0);
        return acc;
      }, {});

      return lineItems
        .map((item) => {
          const usedQty = usedMap[item.item_id] || 0;
          const remainingQty = Number(item.qty || 0) - usedQty;

          if (remainingQty <= 0) return null; // If no remaining quantity, don't include this item

          return {
            ...item,
            qty: remainingQty, // Update the remaining quantity
            total: (remainingQty * Number(item.price || 0)).toFixed(2), // Recalculate the total based on remaining quantity
          };
        })
        .filter(Boolean); // Remove nulls if any
    };

    const fetchSalesOrders = async () => {
      try {
        const numbers = Array.isArray(form.salesorder_id)
          ? form.salesorder_id.join(",")
          : form.salesorder_id;

        if (!numbers) return;

        const res = await fetch(
          `/api/salesorder?salesorder_number=${encodeURIComponent(numbers)}`,
          { credentials: "same-origin" },
        );

        if (!res.ok) return;

        const data = await res.json();
        if (!data?.success) return;

        const orders = Array.isArray(data.salesorder)
          ? data.salesorder
          : [data.salesorder];

        // Flat map the line items and updated line items without merging them
        const allLineItems = orders.flatMap((o) => o?.line_items || []);
        const allUpdatedLineItems = orders.flatMap(
          (o) => o?.updated_line_items || [],
        );

        // Don't merge, just preserve all line items
        const remainingLineItems = reduceLineItemsByUpdated(
          allLineItems,
          allUpdatedLineItems,
        );

        // Update the state with the remaining line items
        setQuoteLineItems(remainingLineItems);

        const lpoNumber = orders[0]?.lpo_number ?? "";
        setForm((prev) => ({
          ...prev,
          lpo_number: lpoNumber ? Number(lpoNumber) || lpoNumber : "",
        }));
      } catch (err) {
        console.error("Fetch salesorder failed:", err);
      }
    };

    fetchSalesOrders();
  }, [form.salesorder_id, setForm, setQuoteLineItems]);

  /* ===============================
     FILTER APPROVED SALESORDERS
  ================================ */

  const filteredSalesOrders =
    customerRelatedData?.[0]?.salesorder?.filter((order) => {
      const statusId = parseArrayField(order?.status)?.[0]?.id;
      return (
        statusId === getStatusById(2)?.id || statusId === getStatusById(18)?.id
      );
    }) || [];

  /* ===============================
     EDIT MODE
  ================================ */

  useEffect(() => {
    const parsed = parseArrayField(form.line_items);
    if (parsed.length) {
      setEditLineData(parsed);
    }
  }, [form, setEditLineData]);

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

  return (
    <div className="container  grid gap-6">

      {/* ================= PRIMARY INFO ================= */}
      <div className="grid gap-6">

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <SelectCustomer
            name="customer_name"
            value={form.customer_name}
            onChange={(e) => handleChange(e, setForm)}
            setForm={setForm}
            form={form}
            customerId={form?.customer_id}
          />

          <InputItem
            type="textspecial"
            typeField="number"
            label="Delivery Note Number"
            name="itemNumber"
            value={(form?.customer_name && form?.itemNumber) || "-"}
            disabled
          />

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

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <InputItem
            type="tag_ant"
            label="Select Sales Order"
            name="salesorder_id"
            value={form.salesorder_id}
            onChange={(e) => handleChange(e, setForm)}
            options={filteredSalesOrders.map((o) => ({
              label: o.salesorder_number,
              value: o.salesorder_number,
            }))}
            disabled={!form?.customer_name}
          />

          <InputItem
            type="textspecial"
            label="LPO Number"
            name="lpo_number"
            value={form.lpo_number}
            disabled={Boolean(form.lpo_number)}
            onChange={(e) => handleChange(e, setForm)}
          />
        </div>

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

        <InputItem
          type="editor"
          label="Internal Notes"
          name="notes"
          value={form.notes}
          onChange={(e) => handleChange(e, setForm)}
        />

      </div>

      {/* ================= LINE ITEMS ================= */}
      {selectedSalesOrderId && (
        <div className="grid gap-4">

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

          <LineItemFormTable
            tax={false}
            activelineItems={
              isEditMode
                ? quoteLineItems.length
                  ? quoteLineItems
                  : parseArrayField(editLineData)
                : quoteLineItems.length
                  ? quoteLineItems
                  : allInventory
            }
            refdata={quoteLineItems.length !== 0}
            editable={false}
            customercurrency={form?.currency}
            form={form}
            setForm={setForm}
            type={type}
          />

        </div>
      )}

    </div>
  );

}