"use client";

import { Card, Space } from "antd";
import InputItem from "@/app/Components/FormItems";
import { handleChange } from "@/app/utils/form";
import {
  CardTitle,
} from "@/app/utils/CardTitle";
import { parseArrayField } from "@/app/utils/parseArrayField";
import { useSiteContext } from "@/app/Context/SiteContext";
import { useEffect, useState } from "react";
import SelectCustomer from "../SelectCustomer";
import SectionValidator from "../SectionValidator";
import SendingOptions from "../SendingOptions";
import LineItemFormTable from "../LineItemFormTable";
import Summary from "../Summary";
import { AlertMessage } from "../AlertMessage";
import { getStatusById } from "@/app/utils/status";

export default function ProformaForm({
  form,
  setForm,
  currency,
  enableGlobalDiscount = false,
  onReferenceChange,
  brandSettings,
  settings,
  allQuotes,
  allInventory,
  isEditMode,
  type
}) {
  const {
    customerRelatedData,
    setLineItems,
    lineItems,
    editLineData,
    setEditLineData,
    quoteLineItems,
    setQuoteLineItems,
    brandData,
  } = useSiteContext();

  useEffect(() => {
    try {
      const getFirst = (val) => (Array.isArray(val) ? val[0] : val);

      // Find the quote by reference
      const quote = allQuotes.find(
        (q) => q.quote_number === getFirst(form?.quote_ref_number)
      );

      // Parse line_items if it's a JSON string
      const rawItems = quote?.line_items;
      const parsedItems =
        typeof rawItems === "string" ? JSON.parse(rawItems) : rawItems;

      const finalItems = Array.isArray(parsedItems) ? parsedItems : [];

      setLineItems(finalItems);
      setQuoteLineItems(finalItems);
    } catch (e) {
      console.warn("Invalid JSON in line_items:", e);
      setLineItems([]);
    }
  }, [form?.quote_ref_number, allQuotes, isEditMode, form?.line_items]);



  const filteredQuotes = customerRelatedData?.[0]?.quotes?.filter((quote) => {
    if (parseArrayField(quote?.status)?.[0]?.id !== getStatusById(1)?.id) {
      return false;
    }
    return true;
  });




  const handleQuoteRefChange = (selectedValues) => {
    if (onReferenceChange) {
      onReferenceChange("quote", selectedValues);
    } else {
      setForm((prev) => ({
        ...prev,
        quote_ref_number: selectedValues || [],
      }));
    }
  };

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

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

  if (!form?.itemNumber || form?.itemNumber === "-NaN") {
    return (
      <div className={`container sm:!my-5 !my-3 grid sm:gap-5 gap-3`}>
        <AlertMessage
          type="error"
          message={`Item number is not valid. Please go to Settings to set up the prefix and padding.`}
        />
      </div>
    );
  }

  const [filteredNonEmpty, setFilteredNonEmpty] = useState([]);

  useEffect(() => {
    const filtered = customerRelatedData?.[0]?.delivery_notes?.filter(
      (item) => item.proforma_id === form.itemNumber
    );

    setFilteredNonEmpty(filtered || []);
  }, [customerRelatedData, form.itemNumber]);

  const selectedQuote = customerRelatedData?.[0]?.quotes.find(
    (item) => item.quote_number === form.quote_ref_number
  );

  useEffect(() => {
    if (selectedQuote?.lpo_number) {
      setForm((prev) => ({
        ...prev,
        lpo_number:
          Number(selectedQuote.lpo_number) || selectedQuote.lpo_number,
      }));
    } else {
      setForm((prev) => ({
        ...prev,
        lpo_number: prev.lpo_number || "",
      }));
    }
  }, [selectedQuote]);

  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 w-full">
          <SelectCustomer
            name="customer_name"
            value={form.customer_name}
            onChange={(e) => handleChange(e, setForm)}
            setForm={setForm}
            form={form}
            customerId={form?.customer_id}
          />

          <InputItem
            type="textspecial"
            label="Proforma Number"
            name="itemNumber"
            value={(form.customer_name && form.itemNumber) || "-"}
            onChange={(e) => handleChange(e, setForm)}
            disabled
          />

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

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 w-full">
          <InputItem
            type="multiselect"
            label="Select Quote"
            name="quote_ref_number"
            value={form.quote_ref_number || []}
            onChange={handleQuoteRefChange}
            options={filteredQuotes?.map((q) => q.quote_number)}
            placeholder="Select customer first"
            disabled={!form.customer_name}
            mode="multiple"
            allowClear
            showSearch
            filterOption={(input, option) =>
              option.label.toLowerCase().includes(input.toLowerCase())
            }
          />

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

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 w-full">
          <InputItem
            type="editor"
            label="Terms and Conditions"
            name="proforma_terms"
            value={form.proforma_terms || settings?.proforma_terms_conditions}
            onChange={(e) => handleChange(e, setForm)}
          />

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

        <div className="flex gap-6 flex-wrap">
          <InputItem
            type="checkbox"
            label="Add eSignature"
            name="digital_signature"
            className="no-width"
            value={form?.digital_signature}
            onChange={(e) => handleChange(e, setForm)}
          />

          <InputItem
            type="checkbox"
            label="Add Attachments?"
            name="attachments"
            value={form.attachments}
            className="no-width"
            onChange={(e) => handleChange(e, setForm)}
          />

          <SendingOptions />
        </div>

      </div>

      {/* ================= LINE ITEMS ================= */}
      {form.customer_name !== "" && form.quote_ref_number && (
        <div className="grid gap-4">

          <SectionValidator
            item="line_items"
            field={lineItems}
            text="At least one line item is required."
          />

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

        </div>
      )}

      {/* ================= SUMMARY ================= */}
      {lineItems?.length !== 0 && (
        <div className="flex justify-end w-full">
          <div className="lg:w-[50%]">
            <Summary
              type="proforma"
              form={form}
              setForm={setForm}
              currency={currency}
              enableGlobalDiscount={enableGlobalDiscount}
              brandSettings={brandSettings}
              advancePayment={
                parseArrayField(form?.status)?.[0]?.id === getStatusById(2)?.id
              }
            />
          </div>
        </div>
      )}

    </div>
  );

}