import { useEffect, useState, useCallback } from "react";
import { NavLink } from "react-router-dom";
import axios from "axios";
import Navbar from "./Navbar";
import Footer from "./Footer";
import "../searchmysqlresults.css";

const SearchMysql = () => {
  const [properties, setProperties] = useState([]);
  const [totalRecords, setTotalRecords] = useState(0);
  const [page, setPage] = useState(0); // Page number
  const [limit] = useState(10); // Items per page
  const [search, setSearch] = useState(""); // Search query state
  const [loading, setLoading] = useState(false); // Loader state

  // Fetch properties from API
  const fetchProperties = async () => {
    setLoading(true);
    try {
      const res = await axios.get(
        `${import.meta.env.VITE_REACT_APP_SECRET}/mysql/searchmysql`,
        {
          params: { limit, offset: page * limit, search },
          headers: { "Cache-Control": "no-cache" }, // Disable caching
        }
      );
      setProperties(res.data.data); // Set properties
      setTotalRecords(res.data.totalRecords); // Set total records
    } catch (err) {
      console.log("Error fetching data:", err);
    } finally {
      setLoading(false);
    }
  };

  // Debounce the search input
  const debounce = (func, delay) => {
    let timer;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => func(...args), delay);
    };
  };

  // Debounced fetch properties
  const debouncedFetchProperties = useCallback(
    debounce(() => {
      if (search.trim() === "") {
        fetchProperties(); // Fetch default properties when search is empty
      } else {
        fetchProperties(); // Fetch properties with new search term
      }
    }, 3000), // 3 seconds delay
    [search, page]
  );

  // Handle search input change
  const handleSearchChange = (e) => {
    setSearch(e.target.value);
    // Trigger search only if input is non-empty
    if (e.target.value.trim() === "") {
      setPage(0); // Reset to first page
      fetchProperties(); // Fetch default properties immediately
    }
  };

  // Handle key press events (Enter)
  const handleKeyPress = (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      if (search.trim()) {
        debouncedFetchProperties(); // Fetch properties on Enter key
      }
    }
  };

  // Handle input blur to fetch results after typing
  const handleBlur = () => {
    if (search.trim() !== "") {
      debouncedFetchProperties(); // Fetch properties after typing is complete
    }
  };

  useEffect(() => {
    // Fetch default properties when the component mounts or page changes
    if (search.trim() === "") {
      fetchProperties(); // Fetch default properties
    }
  }, [page]);

  const totalPages = Math.ceil(totalRecords / limit);

  return (
    <>
      <Navbar />
      <br /> <br /> <br /> <br /> <br /> <br />
      {/* Display properties */}
      <div className="container col-12">
        <div className="row">
          <div className="col-lg-12 card-margin col-12">
            <div className="card search-form col-12">
              <div className="card-body p-0">
                <form id="search-form">
                  <div className="row">
                    <div className="col-12">
                      <div className="row no-gutters">
                        <div className="col-lg-8 col-md-6 col-sm-12 p-0">
                          <input
                            type="text"
                            placeholder="Search..."
                            className="form-control"
                            id="search"
                            name="search"
                            value={search}
                            onChange={handleSearchChange}
                            onKeyDown={handleKeyPress}
                            onBlur={handleBlur} // Trigger search on blur
                          />
                        </div>
                        <div className="col-lg-1 col-md-3 col-sm-12 p-0"></div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-12">
            <div className="card card-margin">
              <div className="card-body">
                {loading ? (
                  <div className="loader">Loading...</div> // Loader component
                ) : (
                  <div className="row search-body">
                    <div className="col-lg-12">
                      <div className="search-result col-12">
                        <div className="result-header">
                          <div className="row">
                            <div className="col-lg-6">
                              <div className="records">
                                {/* Pagination Controls */}
                                <div>
                                  <button
                                    onClick={() => setPage(page - 1)}
                                    disabled={page === 0}
                                    style={{
                                      backgroundColor: "#fda417",
                                      border: "#fda417",
                                    }}
                                  >
                                    Previous
                                  </button>
                                  <span>
                                    {" "}
                                    Page {page + 1} of {totalPages}{" "}
                                  </span>
                                  <button
                                    onClick={() => setPage(page + 1)}
                                    disabled={page + 1 >= totalPages}
                                    style={{
                                      backgroundColor: "#fda417",
                                      border: "#fda417",
                                    }}
                                  >
                                    Next
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div className="result-body">
                          <div className="table-responsive">
                            <table className="table widget-26">
                              {/* Add table headers */}
                              <thead>
                                <tr>
                                  <th>Details</th>
                                  <th>Total Living Square Foot</th>
                                  <th>Year Built</th>
                                  <th>Cost per Square Foot</th>
                                </tr>
                              </thead>
                              <tbody>
                                {properties.length > 0 ? (
                                  properties.map((property, index) => (
                                    <tr key={index}>
                                      <td>
                                        <div className="widget-26-job-title">
                                          <NavLink
                                            to={`/property/${property.house_id}`}
                                            className="link-primary text-decoration-none"
                                          >
                                            {property.address}
                                          </NavLink>
                                          <p className="m-0">
                                            <span className="employer-name">
                                              <i
                                                className="fa fa-map-marker"
                                                style={{ color: "#F74B02" }}
                                              />
                                              {property.city}, {property.county},
                                              {property.state}
                                            </span>{" "}
                                            <p className="text-muted m-0">
                                              House Id: {property.house_id}
                                            </p>
                                          </p>
                                        </div>
                                      </td>
                                      <td>
                                        <div className="widget-26-job-info">
                                          <p className="m-0">
                                            {property.total_living_sqft}
                                          </p>
                                        </div>
                                      </td>
                                      <td>
                                        <div className="widget-26-job-info">
                                          <p className="m-0">
                                            {property.year_built}
                                          </p>
                                        </div>
                                      </td>
                                      <td>
                                        <div className="widget-26-job-salary">
                                          $ {property.cost_per_sqft}/sqft
                                        </div>
                                      </td>
                                    </tr>
                                  ))
                                ) : (
                                  <tr>
                                    <td colSpan="4">No results found</td>
                                  </tr>
                                )}
                              </tbody>
                            </table>
                          </div>
                        </div>
                        {/* Pagination Controls */}
                        <div>
                          <button
                            onClick={() => setPage(page - 1)}
                            disabled={page === 0}
                            style={{
                              backgroundColor: "#fda417",
                              border: "#fda417",
                            }}
                          >
                            Previous
                          </button>
                          <span>
                            {" "}
                            Page {page + 1} of {totalPages}{" "}
                          </span>
                          <button
                            onClick={() => setPage(page + 1)}
                            disabled={page + 1 >= totalPages}
                            style={{
                              backgroundColor: "#fda417",
                              border: "#fda417",
                            }}
                          >
                            Next
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </>
  );
};

export default SearchMysql;