/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import { useEffect, useState } from "react";
import { router } from "@inertiajs/react";
import MembersLayout from "@/layouts/members";
import DashboardHeader from "@/components/shared/DashPageHeader";
import NoResults from "@/components/dashboard/no-results";
import HomeCellCard from "@/components/shared/HomeCellCard";

import styles from "./members-home-cells.module.scss";

const MembersHomeCell = ({ homeCells }: any) => {
  /* ================= LOADING ================= */
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 2000);
    return () => clearTimeout(timer);
  }, []);



  return (
    <div className={styles.page}>
      {/* ================= HEADER ================= */}
      <DashboardHeader
        title="Home Cells"
        description="Connect, grow, and stay engaged with your church family"
        actionButton={{
          label: "Join a Cell",
          onClick: () => router.visit("/members/home-cell/join"),
        }}
      />

      <div className={styles.content}>
        {/* ================= GRID ================= */}
        <div className={styles.grid}>
          {loading ? (
            /* 🔥 SKELETON CARDS */
            Array.from({ length: 6 }).map((cell, i) => (
              <HomeCellCard cell={cell} key={i} loading />
            ))
          ) : homeCells?.data?.length > 0 ? (
            homeCells.data.map((cell: any) => (
              <HomeCellCard key={cell.id} cell={cell} />
            ))
          ) : (
            <NoResults
              title="No Home Cells Found"
              remark="Try adjusting your filters or join a new cell"
            />
          )}
        </div>

        {/* ================= PAGINATION ================= */}
        {!loading && (
          <div className={styles.pagination}>
            {homeCells?.links?.map((link: any, i: number) => (
              <button
                key={i}
                dangerouslySetInnerHTML={{ __html: link.label }}
                disabled={!link.url}
                className={link.active ? styles.activePage : ""}
                onClick={() => {
                  if (link.url) {
                    router.visit(link.url, { preserveState: true });
                  }
                }}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

MembersHomeCell.layout = (page: any) => (
  <MembersLayout title="Home Cells">{page}</MembersLayout>
);

export default MembersHomeCell;