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

import { useState, useEffect } 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 ProgramCard from "@/components/shared/ProgramCard";

import styles from "./members-programs.module.scss";

const MembersProgramsPage = () => {

  /* 🔥 ONLY ADDITION */
  const [loading, setLoading] = useState(true);

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

  /* ================= SAMPLE PROGRAM DATA ================= */
  const programs = {
    data: Array.from({ length: 12 }).map((_, i) => ({
      id: i + 1,
      name:
        i % 3 === 0
          ? "Sunday Worship Experience"
          : i % 3 === 1
          ? "Midweek Prayer & Revival"
          : "Youth Empowerment Summit",

      location:
        i % 2 === 0
          ? "Censers Church Auditorium, Port Harcourt"
          : "Censers Event Center, GRA Phase 2",

      status:
        i % 3 === 0
          ? "on-going"
          : i % 3 === 1
          ? "upcoming"
          : "completed",

      description:
        i % 3 === 0
          ? "Join us for a powerful worship experience filled with the Word, prayer, and divine encounters."
          : i % 3 === 1
          ? "A time of intense prayer, revival fire, and spiritual impartation for breakthrough."
          : "An impactful gathering focused on raising leaders, purpose discovery, and kingdom influence.",

      created_at: new Date(
        Date.now() - (i + 1) * 86400000
      ).toISOString(),

      image: `https://picsum.photos/seed/program-${i}/600/400`,
    })),

    links: [
      { url: null, label: "« Previous", active: false },
      { url: "#", label: "1", active: true },
      { url: "#", label: "2", active: false },
      { url: "#", label: "3", active: false },
      { url: "#", label: "Next »", active: false },
    ],
  };

  return (
    <div className={styles.page}>
      {/* ================= HEADER ================= */}
      <DashboardHeader
        title="Programs & Events"
        description="Stay connected with upcoming services, programs, and impactful church gatherings"
      />

      <div className={styles.content}>
        {/* ================= GRID ================= */}
        <div className={styles.grid}>
          {loading ? (
            /* 🔥 SKELETON CARDS */
            Array.from({ length: 6 }).map((_, i) => (
              <ProgramCard key={i} loading />
            ))
          ) : programs?.data?.length > 0 ? (
            programs.data.map((program: any) => (
              <ProgramCard key={program.id} program={program} />
            ))
          ) : (
            <NoResults
              title="No Programs Found"
              remark="Check back later for upcoming church programs and events"
            />
          )}
        </div>

        {/* ================= PAGINATION ================= */}
        {!loading && (
          <div className={styles.pagination}>
            {programs?.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>
  );
};

MembersProgramsPage.layout = (page: any) => (
  <MembersLayout title="Programs & Events">{page}</MembersLayout>
);

export default MembersProgramsPage;