"use client";

/* eslint-disable @typescript-eslint/no-explicit-any */

import { useState } from "react";
import { router } from "@inertiajs/react";
import styles from "./locate.module.scss";

import HomeNavbar from "@/components/homepages/home-nav";
import PageBanner from "@/components/shared/page-banner";
import Footer from "@/components/shared/footer";
import HomeBranchCard from "@/components/homepages/home-branch-cards";
import Pagination from "@/components/dashboard/pagination";
import NoResults from "@/components/dashboard/no-results";
import Badge from "@/components/shared/HomePageBadge";
import { usePaginatedData } from "@/hooks/usePaginatedData";

interface Props {
  branches: any;
  states: string[];
  filters: {
    search?: string;
    state?: string;
  };
  perPage?: number;
}

export const nigeriaStates = [
  "Abia",
  "Adamawa",
  "Akwa Ibom",
  "Anambra",
  "Bauchi",
  "Bayelsa",
  "Benue",
  "Borno",
  "Cross River",
  "Delta",
  "Ebonyi",
  "Edo",
  "Ekiti",
  "Enugu",
  "Gombe",
  "Imo",
  "Jigawa",
  "Kaduna",
  "Kano",
  "Katsina",
  "Kebbi",
  "Kogi",
  "Kwara",
  "Lagos",
  "Nasarawa",
  "Niger",
  "Ogun",
  "Ondo",
  "Osun",
  "Oyo",
  "Plateau",
  "Rivers",
  "Sokoto",
  "Taraba",
  "Yobe",
  "Zamfara",
  "FCT (Abuja)"
];

const LocateBranch = ({
  branches,
  filters,
  perPage: initialPerPage = 10,
}: Props) => {
  const [search, setSearch] = useState(filters?.search || "");
  const [state, setState] = useState(filters?.state || "");

  const { handlePageChange } = usePaginatedData(initialPerPage);

  /* ================= APPLY FILTER ================= */
 const applyFilter = () => {
  router.get(
    route("branch.locate"),
    {
      search,
      state,
    },
    {
      preserveState: true,
      preserveScroll: true,
    }
  );
};

  /* ================= CLEAR FILTER ================= */
  const clearFilter = () => {
    setSearch("");
    setState("");

    router.get(route("locate-branch"), {}, { preserveState: true });
  };

  return (
    <div className={styles.page}>
      <HomeNavbar />

      <PageBanner
        title="Locate A Branch Today"
        // subtitle="Find a branch near you and become part of our growing family."
      />

      <section className={styles.wrapper}>
        <div className={styles.container}>
          
          {/* ================= TEXT HEADER ================= */}
          <div className={styles.header}>
            <Badge text="Find a Branch" />

            <h2>Censers Churches Worldwide</h2>

            <p>
              Use the search and filters below to find a branch in your
              state and connect with our growing community.
            </p>
          </div>

          {/* ================= FILTER ================= */}
          <div className={styles.filters}>
            
            <input
              type="text"
              placeholder="Search branch..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className={styles.search}
            />

            <select
              value={state}
              onChange={(e) => setState(e.target.value)}
              className={styles.select}
            >
              <option value="">All States</option>

              {nigeriaStates.map((s: string, i: number) => (
                <option key={i} value={s}>
                  {s}
                </option>
              ))}
            </select>

            <button onClick={applyFilter} className={styles.applyBtn}>
              Apply
            </button>

            <button onClick={clearFilter} className={styles.clearBtn}>
              Clear
            </button>
          </div>

          {/* ================= GRID ================= */}
          <div className={styles.grid}>
            {branches?.data?.length > 0 && (
              branches.data.map((branch: any) => (
                <div key={branch.id} className={styles.cardWrap}>
                  <HomeBranchCard branch={branch} />
                </div>
              ))
            )}
          </div>

           { branches?.data?.length == 0 && <NoResults title="No Results Found" remark="No branches found matching your search criteria. Please try again." /> }

          {/* ================= PAGINATION ================= */}
          {branches?.data?.length > 0 && (
            <div className={styles.paginate}>
              <Pagination
                links={branches?.links}
                onChange={handlePageChange}
              />
            </div>
          )}

        </div>
      </section>

      <Footer />
    </div>
  );
};

export default LocateBranch;