/* eslint-disable @typescript-eslint/no-explicit-any */
import { router } from "@inertiajs/react";
import { useEffect, useState, useRef } from "react";
import styles from "./programs.module.scss";
import SingleProgram from "../program";
import { FaLongArrowAltRight } from "react-icons/fa";
import CreateProgramModal from "../../modals/create-program-modal";
import NoResults from "../no-results";
import Pagination from "../pagination";
import ResultsPerPage from "../results-per-page";

interface programProps {
  programs: {
    id: number;
    name: string;
    description: string;
  }[];
  links: any;
  onSuccess?: (message: string) => void;
  perPage?: number;
}

const SpecialPrograms: React.FC<programProps> = ({
  programs,
  links,
  onSuccess,
  perPage: initialPerPage = 10,
}) => {
  const [loading, setLoading] = useState(true);
  const [programModal, setProgramModal] = useState(false);
  const [perPage, setPerPage] = useState(initialPerPage);
  const loadingTimeout = useRef<NodeJS.Timeout | null>(null);

  const toggleProgramModal = () => setProgramModal(!programModal);

  // Initial load skeleton
  useEffect(() => {
    loadingTimeout.current = setTimeout(() => setLoading(false), 100);
    return () => {
      if (loadingTimeout.current) clearTimeout(loadingTimeout.current);
    };
  }, []);

  // Handle pagination buttons
  const handlePageChange = (url: string | null) => {
    if (!url) return;

    setLoading(true);
    if (loadingTimeout.current) clearTimeout(loadingTimeout.current);
    loadingTimeout.current = setTimeout(() => setLoading(false), 500);

    // Inertia GET request for the page
    router.get(url, {}, { preserveState: true, preserveScroll: true });
  };

  // Handle per-page change
  const handlePerPageChange = (value: number) => {
    setPerPage(value);
    setLoading(true);
    if (loadingTimeout.current) clearTimeout(loadingTimeout.current);
    loadingTimeout.current = setTimeout(() => setLoading(false), 500);

    router.get(window.location.pathname, { perPage: value }, { preserveState: true, preserveScroll: true });
  };

  console.log("Special programs", programs)

  return (
    <>
      {programModal && (
        <CreateProgramModal
          type="add"
          closeModal={toggleProgramModal}
          onSuccess={onSuccess}
        />
      )}

      <div className={styles.programs}>
        <div className={styles["programs--text"]}>
          <div>
            <h2>Special Programs</h2>
            <p>You can view and manage all special programs you have created</p>
            <ResultsPerPage
              current={perPage}
              options={[5, 10, 25, 50]}
              onChange={handlePerPageChange}
            />
          </div>
          <button onClick={toggleProgramModal}>
            Create A New Program<FaLongArrowAltRight />
          </button>
        </div>

        <div className={styles["programs--programs"]}>
          <div className={styles["programs--programs--table"]}>
            <span>Name</span>
            <span>Theme</span>
            <span>Start Date</span>
            <span>End Date</span>
            <span>Actions</span>
          </div>

          <div className={styles["programs--programs--children"]}>
            {loading ? (
              [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((n) => (
                <div key={n} className={styles["skeleton-row"]}>
                  <div className={styles["skeleton-name"]}></div>
                  <div className={styles["skeleton-desc"]}></div>
                  <div className={styles["skeleton-action"]}></div>
                </div>
              ))
            ) : programs.length > 0 ? (
              programs.map((service) => <SingleProgram key={service.id} program={service} />)
            ) : null}
          </div>

          {!loading && programs.length === 0 && (
            <div className={styles["no-results-wrapper"]}>
                <NoResults
                    title="No Programs Found"
                    remark="You haven’t added any programs yet. Click the button above to create one."
                    />
                </div>
            )}

          {/* Pagination */}
          <div className={styles["programs--programs--pagination"]}>
            {programs?.length > 0 ?links && links.length > 0 && (
              <Pagination links={links} onChange={handlePageChange} />
            ) : null}
          </div>
        </div>
      </div>
    </>
  );
};

export default SpecialPrograms;