import { React, useState, useContext } from "react";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Button } from "primereact/button";
import { InputText } from "primereact/inputtext";
import { Dialog } from "primereact/dialog";
import { Checkbox } from "primereact/checkbox";
import { useRef } from "react";
import { Controller, useForm, useFieldArray } from "react-hook-form";
import axios from "axios";
import { Toast } from "primereact/toast";
import { useEffect } from "react";
import { ConfirmPopup, confirmPopup } from "primereact/confirmpopup";
import { InputTextarea } from "primereact/inputtextarea";
import { authUser } from "@/Components/AuthProvider";
import { Calendar } from "primereact/calendar";
import { Dropdown } from "primereact/dropdown";
import { can } from "../../Utils/helper";
import DataTable from "@/Components/DataTable";
import ListTable from "@/Components/ListTable";
import ListTableTopBar from "@/Components/ListTableTopBar";
import InlineFormLayout from "@/Components/RepeatedForm";
import FormBasicSection from "@/Components/FormBasicSection";
import ProductFormFooter from "@/Components/ProductFormFooter";
import FormFieldRenderer from "@/Components/FormFieldRenderer";
import { getFormConfig } from "@/configs/formConfigs";


function Customer({ auth }) {
  const { permission } = useContext(authUser);
  const [status, setStatus] = useState("create");
  const [visible, setVisible] = useState(false);
  const [customer, setCustomer] = useState([]);
  const [id, setId] = useState();
  const [code, setCode] = useState();
  const [departments, setDepartments] = useState([]);
  const [designations, setDesignations] = useState([]);
  const formSubmit = useRef(null);
  const toast = useRef(null);
  const [branchModalVisible, setBranchModalVisible] = useState(false);
  const [selectedCustomerForBranches, setSelectedCustomerForBranches] = useState(null);
  const [branches, setBranches] = useState([]);
  const [branchStatus, setBranchStatus] = useState("create");
  const [branchId, setBranchId] = useState();
  const [branchCode, setBranchCode] = useState("");
  const [refreshTrigger, setRefreshTrigger] = useState(0);
  const [showAnalytics, setShowAnalytics] = useState(false);
  const [externalFilterValues, setExternalFilterValues] = useState({});
  const [isSaving, setIsSaving] = useState(false);
  const {
    control,
    register,
    handleSubmit,
    formState: { errors },
    setValue,
    watch,
    reset,
    setError,
  } = useForm({
    code: "",
    name: "",
    email: "",
    number: "",
    nid: "",
    address: "",
    user_type: "",
    status: "",
    invoice_type: "",
    opening_balance: "",
    opening_date: "",
    contact_persons: [],
  });

  const formdata = watch();

  const {
    control: branchControl,
    register: branchRegister,
    handleSubmit: branchHandleSubmit,
    formState: { errors: branchErrors },
    reset: branchReset,
    setValue: branchSetValue,
    watch: branchWatch,
  } = useForm({
    branch_name: "",
    branch_code: "",
    contact_person: "",
    phone: "",
    email: "",
    address: "",
    status: "1",
  });

  // Contact persons field array
  const { fields: contactFields, append: appendContact, remove: removeContact, replace: replaceContacts } = useFieldArray({
    control,
    name: "contact_persons",
  });

  useEffect(() => {
    axios.get(route("customer.view")).then((response) => {
      setCustomer(response.data.customer);
      setCode(response.data.code);
    });

    // Load departments and designations
    axios.get(route("department.view")).then((response) => {
      setDepartments(response.data.departments || []);
    }).catch((error) => {
      console.error("Error loading departments:", error);
    });

    axios.get(route("designation.view")).then((response) => {
      setDesignations(response.data.designations || []);
    }).catch((error) => {
      console.error("Error loading designations:", error);
    });
  }, []);

  // Store Data
  const StoreData = (data) => {
    setIsSaving(true);
    axios
      .post(route("customer.store", data))
      .then((response) => {
        toast.current.show({
          severity: "info",
          summary: "Confirmed",
          detail: response.data.success,
          life: 3000,
        });
        setCustomer(response.data.customer);
        setCode(response.data.code);
        reset({
          name: "",
          email: "",
          number: "",
          nid: "",
          address: "",
          user_type: "",
          status: "",
          invoice_type: "",
          opening_balance: "",
          opening_date: "",
          contact_persons: [],
        });
        replaceContacts([]);
        setVisible(false);
        setId(null);
        // trigger server-side table to refetch
        setRefreshTrigger((prev) => prev + 1);
      })
      .catch((error) => {
        let errors = error.response.data.errors;
        Object.keys(errors).forEach((field) => {
          setError(field, {
            type: "manual",
            message: errors[field][0],
          });
        });
      })
      .finally(() => setIsSaving(false));
  };

  // Data Delete (supports both confirmPopup(event) and confirm(id))
  const handelDelete = (arg) => {
    const isEvent = typeof arg === "object" && arg?.currentTarget?.getAttribute;
    const deleteId = isEvent ? arg.currentTarget.getAttribute("data-id") : arg;

    if (!deleteId) return;

    const doDelete = () => {
      axios
        .delete(route("customer.destroy", deleteId))
        .then((response) => {
          setCustomer(response.data.customer);
          setCode(response.data.code);
          setRefreshTrigger((prev) => prev + 1); // refresh server-side table
          toast.current.show({
            severity: "info",
            summary: "Confirmed",
            detail: response.data.success,
            life: 3000,
          });
        })
        .catch((error) => {
          const msg = error?.response?.data?.error || "Failed to delete";
          toast.current.show({
            severity: "warn",
            summary: "Rejected",
            detail: msg,
            life: 3000,
          });
        });
    };

    if (isEvent) {
      confirmPopup({
        target: arg.currentTarget,
        message: "Do you want to delete this record?",
        icon: "pi pi-info-circle",
        acceptClassName: "p-button-danger",
        accept: doDelete,
        reject() {
          toast.current.show({
            severity: "warn",
            summary: "Rejected",
            detail: "You have rejected",
            life: 3000,
          });
        },
      });
    } else {
      if (confirm("Do you want to delete this record?")) {
        doDelete();
      }
    }
  };
  // Data Update
  const UpdateData = (data) => {
    setIsSaving(true);
    axios
      .put(route("customer.update", id), data)
      .then((response) => {
        toast.current.show({
          severity: "info",
          summary: "Confirmed",
          detail: response.data.success,
          life: 3000,
        });
        setCustomer(response.data.customer);
        setCode(response.data.code);
        reset({
          name: "",
          email: "",
          number: "",
          nid: "",
          address: "",
          user_type: "",
          status: "",
          invoice_type: "",
          opening_balance: "",
          opening_date: "",
          contact_persons: [],
        });
        replaceContacts([]);
        setVisible(false);
        setId(null);
        // trigger server-side table to refetch
        setRefreshTrigger((prev) => prev + 1);
      })
      .catch((error) => {
        let errors = error.response.data.errors;
        Object.keys(errors).forEach((field) => {
          setError(field, {
            type: "manual",
            message: errors[field][0],
          });
        });
      })
      .finally(() => setIsSaving(false));
  };

  // Branch Management Functions
  const fetchBranches = (customerId) => {
    axios
      .get(route("customer.branches.view", customerId))
      .then((response) => {
        setBranches(response.data.branches);
        setBranchCode(response.data.branchCode);
      })
      .catch((error) => {
        console.error("Error fetching branches:", error);
      });
  };

  const openBranchModal = (rowData) => {
    setSelectedCustomerForBranches(rowData);
    setBranchModalVisible(true);
    setBranchStatus("create");
    branchReset({
      branch_name: "",
      branch_code: "",
      contact_person: "",
      phone: "",
      email: "",
      address: "",
      status: "1",
    });
    fetchBranches(rowData.id);
  };

  const branchStore = (data) => {
    axios
      .post(route("customer.branches.store"), {
        ...data,
        customer_id: selectedCustomerForBranches.id,
      })
      .then((response) => {
        toast.current.show({
          severity: "success",
          summary: "Success",
          detail: response.data.success,
          life: 3000,
        });
        fetchBranches(selectedCustomerForBranches.id);
        branchReset({
          branch_name: "",
          branch_code: "",
          contact_person: "",
          phone: "",
          email: "",
          address: "",
          status: "1",
        });
        setBranchStatus("create");
        setBranchId(null);
      })
      .catch((error) => {
        const errors = error.response?.data?.errors || {};
        Object.keys(errors).forEach((field) => {
          toast.current.show({
            severity: "error",
            summary: "Error",
            detail: errors[field][0],
            life: 3000,
          });
        });
      });
  };

  const branchUpdate = (data) => {
    axios
      .put(route("customer.branches.update", branchId), data)
      .then((response) => {
        toast.current.show({
          severity: "success",
          summary: "Success",
          detail: response.data.success,
          life: 3000,
        });
        fetchBranches(selectedCustomerForBranches.id);
        branchReset({
          branch_name: "",
          branch_code: "",
          contact_person: "",
          phone: "",
          email: "",
          address: "",
          status: "1",
        });
        setBranchStatus("create");
        setBranchId(null);
      })
      .catch((error) => {
        const errors = error.response?.data?.errors || {};
        Object.keys(errors).forEach((field) => {
          toast.current.show({
            severity: "error",
            summary: "Error",
            detail: errors[field][0],
            life: 3000,
          });
        });
      });
  };

  const branchDelete = (e, branchId) => {
    confirmPopup({
      target: e.currentTarget,
      message: "Do you want to delete this branch?",
      icon: "pi pi-info-circle",
      acceptClassName: "p-button-danger",
      accept: () => {
        axios
          .delete(route("customer.branches.destroy", branchId))
          .then((response) => {
            toast.current.show({
              severity: "success",
              summary: "Success",
              detail: response.data.success,
              life: 3000,
            });
            fetchBranches(selectedCustomerForBranches.id);
          })
          .catch((error) => {
            toast.current.show({
              severity: "error",
              summary: "Error",
              detail: error.response?.data?.message || "Failed to delete branch",
              life: 3000,
            });
          });
      },
    });
  };

  const resetCustomerForm = () => {
    reset({
      name: "",
      email: "",
      number: "",
      nid: "",
      address: "",
      user_type: "customer",
      code: code || "",
      status: "1",
      invoice_type: "MRP",
      opening_balance: "",
      opening_date: "",
      contact_persons: [],
    });
    replaceContacts([]);
    setId(null);
  };

  const closeCustomerForm = () => {
    setVisible(false);
    resetCustomerForm();
  };

  const handleSubmitFromFooter = () => {
    formSubmit.current?.dispatchEvent(new Event("submit", { bubbles: true }));
  };

  const openCreateCustomer = () => {
    setVisible(true);
    setStatus("create");
    resetCustomerForm();
  };

  const openEditCustomer = (rowData) => {
    setVisible(true);
    setStatus("update");
    setId(rowData.id);

    const contactPersonsData =
      Array.isArray(rowData.contact_persons) &&
        rowData.contact_persons.length > 0
        ? rowData.contact_persons.map((cp) => ({
          name: cp.name || "",
          designation_id: cp.designation_id ? Number(cp.designation_id) : null,
          department_id: cp.department_id ? Number(cp.department_id) : null,
          email: cp.email || "",
          number: cp.number || "",
        }))
        : [];

    const formData = {
      name: rowData.name || "",
      email: rowData.email || "",
      number: rowData.number || "",
      nid: rowData.nid || "",
      opening_date: rowData.opening_date || "",
      opening_balance: rowData.opening_balance || "",
      credit: rowData.credit || "",
      credit_limit: rowData.credit_limit || "",
      address: rowData.address || "",
      user_type: rowData.user_type || "",
      status: rowData.status || "",
      proprietor: rowData.proprietor || "",
      invoice_type: rowData.invoice_type || "",
      code: rowData.code || "",
      contact_persons: contactPersonsData,
    };

    reset(formData);
    replaceContacts(contactPersonsData);
  };

  return (
    <AuthenticatedLayout
      user={auth.user}
      header={
        <>
          <h2 className="text-skin-header font-medium ">
            {(() => {
              return can('for_labware') ? 'Company' : 'Customer & Retailer';
            })()}

          </h2>{" "}
          <p className="text-skin-sub-header font-semibold text-xs">
            {" "}
            Home -
            {(() => {
              return can('for_labware') ? 'Company' : 'Customer & Retailer';
            })()}


          </p>
        </>
      }
      headerButton={<></>}
    >
      <Toast ref={toast} />
      <div className="w-full">
        <ListTable
          key={`customer-list-${refreshTrigger}`}
          tableConfigName="customerTable"
          tableHidden={visible}
          belowToolbar={
            <InlineFormLayout
              visible={visible}
              containerRef={null}
              formRef={formSubmit}
              onSubmit={handleSubmit(status == "create" ? StoreData : UpdateData)}
              formClassName="product-form flex max-h-[min(85vh,900px)] w-full min-w-0 flex-col overflow-y-auto p-4"
            >
              <FormBasicSection>

                <FormFieldRenderer
                  formName="customer"
                  firstFieldClassName="min-w-0"
                  className="min-w-0"
                  formData={formdata}
                  setFormData={() => { }}
                  errors={errors}
                  context={{ control, permission, productEntryLayout: true, productFlexRow: false }}
                />

                {permission.includes("client_contact_person_view") && (
                  <div className="col-span-12 mt-4">
                    <div className="mb-4 flex items-center justify-between">
                      <h3 className="text-sm font-semibold text-gray-700">
                        Contact Persons
                      </h3>
                      {permission.includes("client_contact_person_create") && (
                        <Button
                          type="button"
                          icon="pi pi-plus"
                          label="Add Contact Person"
                          onClick={() =>
                            appendContact({
                              name: "",
                              designation_id: "",
                              department_id: "",
                              email: "",
                              number: "",
                            })
                          }
                          className="p-button-sm p-button-outlined p-button-secondary"
                        />
                      )}
                    </div>

                    {contactFields.map((field, index) => (
                      <div
                        key={field.id}
                        className="mb-4 grid grid-cols-12 gap-x-2 gap-y-6 rounded-lg border border-gray-200 bg-white p-4"
                      >
                        <div className="col-span-12 mb-2 flex items-center justify-between">
                          <h4 className="text-sm font-medium text-gray-700">
                            Contact Person {index + 1}
                          </h4>
                          {permission.includes("client_contact_person_delete") && (
                            <Button
                              type="button"
                              icon="pi pi-trash"
                              onClick={() => removeContact(index)}
                              className="p-button-sm p-button-text p-button-danger"
                              severity="danger"
                            />
                          )}
                        </div>

                        <FormFieldRenderer
                          config={getFormConfig("customerContactPerson").map(
                            (f) => ({
                              ...f,
                              name: `contact_persons.${index}.${f.name}`,
                            })
                          )}
                          formData={formdata}
                          setFormData={() => { }}
                          errors={errors}
                          context={{ control, designations, departments }}
                        />
                      </div>
                    ))}

                    {contactFields.length === 0 && (
                      <div className="rounded-lg border border-dashed border-gray-300 py-4 text-center text-sm text-gray-500">
                        No contact persons added.{" "}
                        {permission.includes("client_contact_person_create") &&
                          'Click "Add Contact Person" to add one.'}
                      </div>
                    )}
                  </div>
                )}

              </FormBasicSection>

              <ProductFormFooter
                isSaving={isSaving}
                onCancel={closeCustomerForm}
                onSave={handleSubmitFromFooter}
              />
            </InlineFormLayout>
          }
          fetchUrl={route("customer.view")}
          filterConfigName="customerList"
          filterValues={externalFilterValues}
          refreshTrigger={refreshTrigger}
          renderTopContent={({ responseMeta }) => {
            if (responseMeta?.code) {
              setCode(responseMeta.code);
            }
            return null;
          }}
          renderToolbar={(ctx) => (
            <ListTableTopBar
              canAdd={permission.includes("customer_retailer_create")}
              onAdd={openCreateCustomer}
              search={ctx.search}
              onSearchChange={ctx.setSearch}
              showAnalytics={showAnalytics}
              onToggleAnalytics={() => setShowAnalytics((v) => !v)}
              stats={ctx.stats}
              filters={ctx.filters}
              onFiltersChange={(next) => {
                ctx.onFiltersChange(next);
                setExternalFilterValues(next);
              }}
              filterConfigName="customerList"
              resourceLabel={can("for_labware") ? "Company" : "Customer & Retailer"}
              filtersPanelTitle="Filter customers"
            />
          )}
          emptyMessage="No customer found."
          emptyHint='Click "Add" to create your first customer.'
          onEdit={(row) => openEditCustomer(row)}
          onDelete={(pid) => handelDelete(pid)}
          actionHandlers={{
            onManageBranches: (row) => openBranchModal(row),
          }}
          permissions={permission}
          defaultRows={10}
        />
      </div>

      {/* Branch Management Dialog */}
      <Dialog
        header={`Manage Branches - ${selectedCustomerForBranches?.name || ""}`}
        visible={branchModalVisible}
        style={{ width: "90vw", maxWidth: "1000px" }}
        onHide={() => {
          setBranchModalVisible(false);
          setSelectedCustomerForBranches(null);
          setBranchStatus("create");
          branchReset();
        }}
        footer={
          <div className="flex justify-end">
            <Button
              label="Close"
              icon="pi pi-times"
              className="p-button-text"
              onClick={() => {
                setBranchModalVisible(false);
                setSelectedCustomerForBranches(null);
                setBranchStatus("create");
                branchReset();
              }}
            />
          </div>
        }
      >
        {selectedCustomerForBranches && (
          <div className="p-4">
            <div className="mb-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
              <div className="text-sm font-semibold text-blue-900">
                Customer: {selectedCustomerForBranches.name} ({selectedCustomerForBranches.code})
              </div>
            </div>

            {/* Branch Form */}
            {((branchStatus === "create" && permission.includes("customer_branch_create")) ||
              (branchStatus === "update" && permission.includes("customer_branch_edit"))) && (
                <div className="mb-4 p-4 border rounded-lg bg-gray-50">
                  <h3 className="text-lg font-semibold mb-3">
                    {branchStatus === "create" ? "Add New Branch" : "Edit Branch"}
                  </h3>
                  <form onSubmit={branchHandleSubmit(branchStatus === "create" ? branchStore : branchUpdate)}>
                    <div className="grid grid-cols-12 gap-x-4 gap-y-7 pt-5">
                      <div className="col-span-6">
                        <div className="p-float-label">
                          <InputText
                            id="branch_name"
                            className={`w-full ${branchErrors.branch_name && "p-invalid"}`}
                            {...branchRegister("branch_name", { required: "Branch name is required" })}
                          />
                          <label htmlFor="branch_name">Branch Name *</label>
                        </div>
                        {branchErrors.branch_name && (
                          <small className="p-error">{branchErrors.branch_name.message}</small>
                        )}
                      </div>
                      <div className="col-span-6">
                        <div className="p-float-label">
                          <InputText
                            id="branch_code"
                            className="w-full"
                            value={branchWatch("branch_code") || branchCode}
                            onChange={(e) => branchSetValue("branch_code", e.target.value)}
                          />
                          <label htmlFor="branch_code">Branch Code</label>
                        </div>
                      </div>
                      <div className="col-span-6">
                        <div className="p-float-label">
                          <InputText
                            id="contact_person"
                            className="w-full"
                            {...branchRegister("contact_person")}
                          />
                          <label htmlFor="contact_person">Contact Person</label>
                        </div>
                      </div>
                      <div className="col-span-6">
                        <div className="p-float-label">
                          <InputText
                            id="phone"
                            className="w-full"
                            {...branchRegister("phone")}
                          />
                          <label htmlFor="phone">Contact Number</label>
                        </div>
                      </div>
                      <div className="col-span-6">
                        <div className="p-float-label">
                          <InputText
                            id="email"
                            type="email"
                            className="w-full"
                            {...branchRegister("email")}
                          />
                          <label htmlFor="email">Email</label>
                        </div>
                      </div>
                      <div className="col-span-6">
                        <div className="p-float-label">
                          <Controller
                            name="status"
                            control={branchControl}
                            render={({ field }) => (
                              <Dropdown
                                {...field}
                                options={[
                                  { label: "Active", value: "1" },
                                  { label: "Inactive", value: "0" },
                                ]}
                                optionLabel="label"
                                optionValue="value"
                                className="w-full"
                                placeholder="Select Status"
                              />
                            )}
                          />
                          <label htmlFor="status">Status</label>
                        </div>
                      </div>
                      <div className="col-span-12">
                        <div className="p-float-label">
                          <InputTextarea
                            id="address"
                            rows={3}
                            className="w-full"
                            {...branchRegister("address")}
                          />
                          <label htmlFor="address">Address</label>
                        </div>
                      </div>
                      <div className="col-span-12 flex justify-end gap-2">
                        {branchStatus === "update" && (
                          <Button
                            type="button"
                            label="Cancel"
                            icon="pi pi-times"
                            className="p-button-text"
                            onClick={() => {
                              setBranchStatus("create");
                              branchReset();
                              setBranchId(null);
                            }}
                          />
                        )}
                        {((branchStatus === "create" && permission.includes("customer_branch_create")) ||
                          (branchStatus === "update" && permission.includes("customer_branch_edit"))) && (
                            <Button
                              type="submit"
                              label={branchStatus === "create" ? "Add Branch" : "Update Branch"}
                              icon={branchStatus === "create" ? "pi pi-plus" : "pi pi-check"}
                            />
                          )}
                      </div>
                    </div>
                  </form>
                </div>
              )}

            {/* Branches List */}
            <div>
              <h3 className="text-lg font-semibold mb-3">Branches List</h3>
              <DataTable
                value={branches}
                emptyMessage="No branches found"
                className="p-datatable-sm"
              >
                <Column field="branch_name" header="Branch Name" />
                <Column field="branch_code" header="Code" />
                <Column field="contact_person" header="Contact Person" />
                <Column field="phone" header="Phone" />
                <Column field="email" header="Email" />
                <Column
                  field="status"
                  header="Status"
                  body={(rowData) => (
                    <span className={rowData.status === "1" ? "text-green-600" : "text-red-600"}>
                      {rowData.status === "1" ? "Active" : "Inactive"}
                    </span>
                  )}
                />
                <Column
                  header="Action"
                  body={(rowData) => (
                    <>
                      <ConfirmPopup />
                      <Button
                        icon="pi pi-pencil"
                        className="p-button-rounded p-button-success mr-2 w-8 h-8"
                        onClick={() => {
                          setBranchStatus("update");
                          setBranchId(rowData.id);
                          branchReset({
                            branch_name: rowData.branch_name,
                            branch_code: rowData.branch_code,
                            contact_person: rowData.contact_person || "",
                            phone: rowData.phone || "",
                            email: rowData.email || "",
                            address: rowData.address || "",
                            status: rowData.status || "1",
                          });
                        }}
                      />
                      <Button
                        icon="pi pi-trash"
                        className="p-button-rounded p-button-danger w-8 h-8"
                        onClick={(e) => branchDelete(e, rowData.id)}
                      />
                    </>
                  )}
                />
              </DataTable>
            </div>
          </div>
        )}
      </Dialog>
    </AuthenticatedLayout>
  );
}

export default Customer;