import React, { useState, useEffect, useRef, useCallback } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import { isAutheticated } from "src/auth";
import swal from "sweetalert";
import debounce from "lodash.debounce";

const Inventory = () => {
  const token = isAutheticated();
  const [loading, setLoading] = useState(false);
  const [inventoryData, setInventoryData] = useState([]);
  const [filteredData, setFilteredData] = useState([]);

  const nameRef = useRef();
  const startDateRef = useRef();
  const endDateRef = useRef();

  const [currentPage, setCurrentPage] = useState(1);
  const [itemPerPage, setItemPerPage] = useState(10);
  const [totalData, setTotalData] = useState(0);

  const getInventoryData = async () => {
    setLoading(true);
    try {
      const response = await axios.get(`api/inventory/all`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
        params: {
          page: currentPage,
          show: itemPerPage,
          startDate: startDateRef.current?.value || "",
          endDate: endDateRef.current?.value || "",
        },
      });

      const transformedData =
        response.data?.inventories?.map((entry) => ({
          id: entry._id,
          tradeName:
            entry.addedForData?.shippingAddress?.tradeName ||
            entry.addedForData?.trade_name ||
            "N/A",
          designation: entry.addedFor === "PrincipalDistributor" ? "PD" : "RD",
          products: entry.products.map((product) => ({
            SKU: product.SKU,
            ProductName: product.ProductName,
            Sale: product.Sale,
            Inventory: product.Inventory,
          })),
          createdAt: entry.createdAt,
          updatedAt: entry.updatedAt,
        })) || [];
      
      setInventoryData(transformedData);
      setTotalData(response.data?.total_data || 0);

      // Apply the filter after data is fetched
      filterData(transformedData);

    } catch (err) {
      const msg = err?.response?.data?.msg || "Something went wrong!";
      swal({
        title: "Error",
        text: msg,
        icon: "error",
        button: "Retry",
        dangerMode: true,
      });
    } finally {
      setLoading(false);
    }
  };

  const filterData = (data) => {
    const tradeName = nameRef.current?.value || "";
    const filtered = data.filter((entry) =>
      entry.tradeName.toLowerCase().includes(tradeName.toLowerCase())
    );
    setFilteredData(filtered);
  };

  const debouncedSearch = useCallback(
    debounce(() => {
      setCurrentPage(1);
      getInventoryData();
    }, 500),
    []
  );

  const handleSearchChange = () => {
    debouncedSearch();
  };

  useEffect(() => {
    getInventoryData();
  }, [itemPerPage, currentPage]);

  return (
    <div className="main-content">
      <div className="page-content">
        <div className="container-fluid">
          <div className="row">
            <div className="col-12">
              <div
                className="
                    page-title-box
                    d-flex
                    align-items-center
                    justify-content-between
                  "
              >
                <div style={{ fontSize: "22px" }} className="fw-bold">
                  Inventory List
                </div>
              </div>
            </div>
          </div>

          <div className="row">
            <div className="col-lg-12">
              <div className="card">
                <div className="card-body">
                  <div className="row ml-0 mr-0 mb-10">
                    <div className="col-lg-1">
                      <div className="dataTables_length">
                        <label className="w-100">
                          Show
                          <select
                            onChange={(e) => {
                              setItemPerPage(e.target.value);
                              setCurrentPage(1);
                            }}
                            className="form-control"
                            disabled={loading}
                          >
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                          </select>
                          entries
                        </label>
                      </div>
                    </div>
                    <div className="col-lg-3">
                      <label>Trade Name:</label>
                      <input
                        type="text"
                        placeholder="Trade name"
                        className="form-control"
                        ref={nameRef}
                        onChange={handleSearchChange}
                        disabled={loading}
                      />
                    </div>
                    <div className="col-lg-3">
                      <label>Start Date:</label>
                      <input
                        type="date"
                        className="form-control"
                        ref={startDateRef}
                        onChange={handleSearchChange}
                        disabled={loading}
                      />
                    </div>
                    <div className="col-lg-3">
                      <label>End Date:</label>
                      <input
                        type="date"
                        className="form-control"
                        ref={endDateRef}
                        onChange={handleSearchChange}
                        disabled={loading}
                      />
                    </div>
                  </div>

                  <div className="table-responsive table-shoot mt-3">
                    <table
                      className="table table-centered table-nowrap"
                      style={{ border: "1px solid" }}
                    >
                      <thead
                        className="thead-light"
                        style={{ background: "#ecdddd" }}
                      >
                        <tr>
                          <th className="text-start">ID</th>
                          <th className="text-start">Date</th>
                          <th className="text-start">Time</th>
                          <th className="text-start">Trade Name</th>
                          <th className="text-start">PD/RD</th>
                          <th className="text-start">Product SKU</th>
                          <th className="text-start">Product Name</th>
                          <th className="text-start">Sale</th>
                          <th className="text-start">Inventory</th>
                          <th className="text-start">Actions</th>
                        </tr>
                      </thead>

                      <tbody>
                        {loading ? (
                          <tr>
                            <td className="text-center" colSpan="10">
                              Loading...
                            </td>
                          </tr>
                        ) : filteredData.length > 0 ? (
                          filteredData.map((entry, i) =>
                            entry.products.map((product, j) => (
                              <tr key={`${i}-${j}`}>
                                <td className="text-start">{entry.id}</td>
                                <td className="text-start">
                                  {new Date(entry.createdAt).toLocaleString(
                                    "en-IN",
                                    {
                                      month: "short",
                                      day: "numeric",
                                      year: "numeric",
                                    }
                                  )}
                                </td>
                                <td className="text-start">
                                  {new Date(entry.createdAt).toLocaleString(
                                    "en-IN",
                                    {
                                      hour: "numeric",
                                      minute: "numeric",
                                      hour12: true,
                                    }
                                  )}
                                </td>
                                <td className="text-start">
                                  {entry.tradeName}
                                </td>
                                <td className="text-start">
                                  {entry.designation}
                                </td>
                                <td className="text-start">{product.SKU}</td>
                                <td className="text-start">
                                  {product.ProductName}
                                </td>
                                <td className="text-start">{product.Sale}</td>
                                <td className="text-center">
                                  {product.Inventory}
                                </td>
                                <td className="text-start">
                                  <Link
                                    to={`/inventory/view/${entry.id}`}
                                    state={{ product }}
                                  >
                                    <button
                                      style={{
                                        color: "white",
                                        marginRight: "1rem",
                                      }}
                                      type="button"
                                      className="
                                      btn btn-primary btn-sm
                                    waves-effect waves-light
                                    btn-table
                                    mx-1
                                    mt-1
                                  "
                                    >
                                      View
                                    </button>
                                  </Link>
                                </td>
                              </tr>
                            ))
                          )
                        ) : (
                          !loading &&
                          filteredData.length === 0 && (
                            <tr className="text-center">
                              <td colSpan="10">
                                <h5>No Data Available...</h5>
                              </td>
                            </tr>
                          )
                        )}
                      </tbody>
                    </table>
                  </div>

                  <div className="row mt-20">
                    <div className="col-sm-12 col-md-6 mb-20">
                      <div
                        className="dataTables_info"
                        id="datatable_info"
                        role="status"
                        aria-live="polite"
                      >
                        Showing {Math.min(itemPerPage * currentPage, totalData)} of {totalData} entries
                      </div>
                    </div>
                    <div className="col-sm-12 col-md-6 text-md-end">
                      <div
                        className="dataTables_paginate paging_simple_numbers"
                        id="datatable_paginate"
                      >
                        <ul className="pagination pagination-rounded">
                          <li
                            className={`paginate_button page-item previous ${currentPage === 1 ? "disabled" : ""
                              }`}
                          >
                            <a
                              href="#"
                              className="page-link"
                              onClick={() => {
                                if (currentPage > 1) {
                                  setCurrentPage((prev) => prev - 1);
                                }
                              }}
                            >
                              Previous
                            </a>
                          </li>

                          {[...Array(Math.ceil(totalData / itemPerPage))].map(
                            (_, index) => (
                              <li
                                key={index}
                                className={`paginate_button page-item ${index + 1 === currentPage ? "active" : ""
                                  }`}
                              >
                                <a
                                  href="#"
                                  className="page-link"
                                  onClick={() => setCurrentPage(index + 1)}
                                >
                                  {index + 1}
                                </a>
                              </li>
                            )
                          )}

                          <li
                            className={`paginate_button page-item next ${currentPage === Math.ceil(totalData / itemPerPage) ? "disabled" : ""
                              }`}
                          >
                            <a
                              href="#"
                              className="page-link"
                              onClick={() => {
                                if (currentPage < Math.ceil(totalData / itemPerPage)) {
                                  setCurrentPage((prev) => prev + 1);
                                }
                              }}
                            >
                              Next
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Inventory;