import { useEffect, useState } from "react";
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 fetchProperties = async () => {
    try {
      const res = await axios.get(
        `${import.meta.env.VITE_REACT_APP_SECRET}/mysql/searchmysql`,
        {
          params: { limit, offset: page * limit },
          headers: { "Cache-Control": "no-cache" }, // Disable caching
        }
      );
      setProperties(res.data);
      setTotalRecords(res.data.total); // Get total records from backend
    } catch (err) {
      console.log("Error fetching data:", err);
    }
  };

  // Fetch data when page changes
  useEffect(() => {
    fetchProperties();
  }, [page]);

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

  return (
    <>
      <Navbar />
      <br /> <br /> <br /> <br /> <br /> <br />
      {/* Display properties */}
      {properties.length > 0 ? (
        <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"
                            />
                          </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">
                  <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}
                                  >
                                    Previous
                                  </button>
                                  <span>
                                    {" "}
                                    Page {page + 1} of {totalPages}{" "}
                                  </span>
                                  <button
                                    onClick={() => setPage(page + 1)}
                                    disabled={page + 1 >= totalPages}
                                  >
                                    Next
                                  </button>
                                </div>
                              </div>
                            </div>
                      
                          </div>
                        </div>
                        <div className="result-body">
                          <div className="table-responsive">
                            <table className="table widget-26">
                              <tbody>
                                {properties.map((property, index) => (
                                  <div key={index} className="property">
                                    <tr>
                                      <td>
                                        <div className="widget-26-job-emp-img">
                                          <img
                                            src="https://bootdey.com/img/Content/avatar/avatar2.png"
                                            alt="Company"
                                          />
                                        </div>
                                      </td>
                                      <td>
                                        <div className="widget-26-job-title">
                                          <a href="#">{property.address}</a>
                                          <p className="m-0">
                                            <span
                                              className="employer-name"
                                            >
                                              {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="type m-0">Total Living Square foot</p>
                                          <p className="text-muted m-0">
                                            is{" "}
                                            <span className="location">
                                             {property.total_living_sqft}
                                            </span>
                                          </p>
                                        </div>
                                      </td>
                                      <td>
                                        <div className="widget-26-job-salary">
                                          $  {property.cost_per_sqft}/sqft
                                        </div>
                                      </td>
                                      <td>
                                        <div className="widget-26-job-info">
                                          <p className="type m-0">Year built</p>
                                          <p className="text-muted m-0">
                                            
                                            <span className="location">
                                             {property.year_built}
                                            </span>
                                          </p>
                                        </div>
                                      </td>
                                    
                                      
                                      {/* <td>
                                        <div className="widget-26-job-starred">
                                          <a href="#">
                                            <svg
                                              xmlns="http://www.w3.org/2000/svg"
                                              width={24}
                                              height={24}
                                              viewBox="0 0 24 24"
                                              fill="none"
                                              stroke="currentColor"
                                              strokeWidth={2}
                                              strokeLinecap="round"
                                              strokeLinejoin="round"
                                              className="feather feather-star"
                                            >
                                              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
                                            </svg>
                                          </a>
                                        </div>
                                   
                                      </td> */}
                                  
                                    </tr>
                                    <hr style={{color: "#fda417"}} />
                                  </div>
                                  
                                ))}
                                {/* Pagination Controls */}
                                <div>
                                  <button
                                    onClick={() => setPage(page - 1)}
                                    disabled={page === 0}
                                  >
                                    Previous
                                  </button>
                                  <span>
                                    {" "}
                                    Page {page + 1} of {totalPages}{" "}
                                  </span>
                                  <button
                                    onClick={() => setPage(page + 1)}
                                    disabled={page + 1 >= totalPages}
                                  >
                                    Next
                                  </button>
                                </div>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <p>No properties found.</p>
      )}
      {/* Pagination Controls */}
      <Footer />
    </>
  );
};

export default SearchMysql;