/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./attend.module.scss";
import AttendanceItem from "../attendance-item";
import { BsSearch } from "react-icons/bs";
import { LuRefreshCcw } from "react-icons/lu";
import { useEffect, useRef, useState } from "react";

// ✅ Skeleton Loader (placed outside render)
const SkeletonLoader = () => {
  const rows = Array.from({ length: 10 });
  return (
    <div className={styles["skeleton__wrapper"]}>
      {rows.map((_, i) => (
        <div key={i} className={styles["skeleton__row"]}>
          <div className={styles["skeleton__cell"]}></div>
          <div className={styles["skeleton__cell"]}></div>
          <div className={styles["skeleton__cell"]}></div>
          <div className={styles["skeleton__cell"]}></div>
          <div className={styles["skeleton__cell"]}></div>
        </div>
      ))}
    </div>
  );
};

const AttendanceComponent = () => {
  const dateInputRef = useRef<HTMLInputElement | null>(null);
  const [selectedDate, setSelectedDate] = useState<string>("");
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [isFading, setIsFading] = useState<boolean>(false);


  // Sample attendance data
  const attendance = [
    { id: 1, date: "Sun 10th October, 2025", confirmed_by: "Ukah Janny C", service: "Sunday (First Service at 06:30am)", count: 1000, remark: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nihil vitae quisquam ex! Eos, beatae." },
    { id: 2, date: "Wed 10th October, 2025", confirmed_by: "Ukah Janny C", service: "Wednesday (Morning Service)", count: 800, remark: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nihil vitae quisquam ex! Eos, beatae." },
    { id: 3, date: "Wed 10th October, 2025", confirmed_by: "Ukah Janny C", service: "Wednesday (Evening Service)", count: 1500, remark: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nihil vitae quisquam ex! Eos, beatae." },
    { id: 4, date: "Sun 10th October, 2025", confirmed_by: "Ukah Janny C", service: "Sunday (First Service at 06:30am)", count: 1800, remark: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nihil vitae quisquam ex! Eos, beatae." },
    { id: 5, date: "Sun 10th October, 2025", confirmed_by: "Ukah Janny C", service: "Sunday (Second Service at 10:30am)", count: 400, remark: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nihil vitae quisquam ex! Eos, beatae." },
    { id: 6, date: "Wed 10th October, 2025", confirmed_by: "Ukah Janny C", service: "Wednesday (First Service at 06:30am)", count: 920, remark: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nihil vitae quisquam ex! Eos, beatae." },
    { id: 7, date: "Sun 10th October, 2025", confirmed_by: "Ukah Janny C", service: "Sunday (First Service at 06:30am)", count: 1250, remark: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nihil vitae quisquam ex! Eos, beatae." },
    { id: 8, date: "Wed 10th October, 2025", confirmed_by: "Ukah Janny C", service: "Wednesday (Second Service at 10:30am)", count: 850, remark: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nihil vitae quisquam ex! Eos, beatae." },
    { id: 9, date: "Sun 10th October, 2025", confirmed_by: "Ukah Janny C", service: "Sunday (First Service at 06:30am)", count: 550, remark: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nihil vitae quisquam ex! Eos, beatae." },
    { id: 10, date: "Wed 10th October, 2025", confirmed_by: "Ukah Janny C", service: "Wednesday (First Service at 06:30am)", count: 210, remark: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nihil vitae quisquam ex! Eos, beatae." },
  ];

  // Simulate loading on mount
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsFading(true);
      setTimeout(() => setIsLoading(false), 400); // wait for fade transition
    }, 3000);
    return () => clearTimeout(timer);
  }, []);

  const triggerReload = () => {
    setIsLoading(true);
    setIsFading(false);
    setTimeout(() => {
      setIsFading(true);
      setTimeout(() => setIsLoading(false), 400);
    }, 3000);
  };

  const handleRefresh = () => {
    triggerReload();
  };

  const openDatePicker = () => {
    requestAnimationFrame(() => {
      if (!dateInputRef.current) return;
      const anyRef: any = dateInputRef.current;
      if (typeof anyRef.showPicker === "function") {
        try {
          anyRef.showPicker();
        } catch {
          dateInputRef.current.focus();
        }
      } else {
        dateInputRef.current.focus();
      }
    });
  };

  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newDate = e.target.value;
    setSelectedDate(newDate);
    triggerReload();
  };

  return (
    <div className={styles["attend"]}>
      <div className={styles["attend__toolbar"]}>
        <form action="/attendance" method="GET">
          <div className={styles["attend__toolbar--search"]}>
            <BsSearch color="#040A17" />
            <input type="text" name="created_by" placeholder="Search by created by..." />
          </div>

          <div className={styles["attend__toolbar--helpers"]}>
            <input
              ref={dateInputRef}
              type="date"
              name="date"
              onChange={handleDateChange}
              style={{ position: "absolute", opacity: 0, pointerEvents: "none" }}
            />

            <span onClick={openDatePicker} className={styles["attend__toolbar--helpers--date"]}>
              <LuRefreshCcw />
              Select Date
            </span>

            <span onClick={handleRefresh} className={styles["attend__toolbar--helpers--refresh"]}>
              <LuRefreshCcw />
              Refresh
            </span>
          </div>
        </form>
      </div>

      {selectedDate && (
        <p style={{ marginTop: "0.5rem", fontWeight: 500 }}>
          Showing records for: <strong>{selectedDate}</strong>
        </p>
      )}

      <div className={styles["attend__table"]}>
        <div className={styles["attend__table--header"]}>
          <span>Service Date</span>
          <span>Confirmed By</span>
          <span>Service</span>
          <span>Total</span>
          <span>Action</span>
        </div>

        <div className={styles["attend__table--children"]}>
          {isLoading ? (
            <div
              className={`${styles["skeleton__container"]} ${
                isFading ? styles.fadeOut : ""
              }`}
            >
              <SkeletonLoader />
            </div>
          ) : (
            <div className={`${styles["data__container"]} ${styles.fadeIn}`}>
              {attendance.map((single_attendance: any) => (
                <AttendanceItem
                  key={single_attendance.id}
                  attendance={single_attendance}
                />
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default AttendanceComponent;