"use client";

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

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

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

interface Props {
  projects: any;
  filters: {
    search?: string;
    state?: string;
    status?: string;
  };
  perPage?: number;
}

/* ================= STATES ================= */
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)"
];

/* ================= STATUS ================= */
export const projectStatuses = [
  { label: "Completed", value: "completed" },
  { label: "Ongoing", value: "ongoing" },
  { label: "Pending", value: "pending" },
  { label: "Planning", value: "planning" },
];

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

  const { handlePageChange } = usePaginatedData(initialPerPage);

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

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

    router.get(route("projects.support"), {}, { preserveState: true });
  };

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

      <PageBanner title="Support Projects" />

      <section className={styles.wrapper}>
        <div className={styles.container}>
          
          {/* ================= HEADER ================= */}
          <div className={styles.header}>
            <Badge text="Make an Impact" />

            <h2>Support Ongoing Projects</h2>

            <p>
              Explore impactful projects across our branches and support what God
              is doing in different communities.
            </p>
          </div>

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

            {/* STATE */}
            <select
              value={state}
              onChange={(e) => setState(e.target.value)}
              className={styles.select}
            >
              <option value="">All States</option>
              {nigeriaStates.map((s, i) => (
                <option key={i} value={s}>
                  {s}
                </option>
              ))}
            </select>

            {/* STATUS */}
            <select
              value={status}
              onChange={(e) => setStatus(e.target.value)}
              className={styles.select}
            >
              <option value="">All Status</option>
              {projectStatuses.map((s, i) => (
                <option key={i} value={s.value}>
                  {s.label}
                </option>
              ))}
            </select>

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

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

          {/* ================= GRID ================= */}
          <div className={styles.grid}>
            {projects?.data?.length > 0 &&
              projects.data.map((project: any) => (
                <div key={project.id} className={styles.cardWrap}>
                  <HomeProjectCard route={(p) => `/single-project/${p.id}`}key={project.id} project={project} />
                </div>
              ))}
          </div>

          {/* ================= EMPTY ================= */}
          {projects?.data?.length === 0 && (
            <NoResults
              title="No Projects Found"
              remark="No projects match your search or filter. Try adjusting your filters."
            />
          )}

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

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

export default SupportProjects;