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

import { useEffect, useRef, useState } from "react";
import styles from "./members-commerce.module.scss";
import BusinessCard from "../member-business-card";
import MembersPageIntro from "../members-page-intro";

const MembersCommerce = ({ businesses }: any) => {
  const sectionRef = useRef<HTMLElement | null>(null);
  const scrollRef = useRef<HTMLDivElement | null>(null);

  const [activeTab, setActiveTab] = useState("business");
  const [inView, setInView] = useState(false);
  const [loading, setLoading] = useState(true);

  /* ================= LOADING ================= */
  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 1500);
    return () => clearTimeout(timer);
  }, []);

  /* ================= INTERSECTION ================= */
  useEffect(() => {
    const el = sectionRef.current;
    if (!el) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setInView(true);
          observer.unobserve(entry.target);
        }
      },
      { threshold: 0.80 }
    );

    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  /* ================= AUTOSLIDE ================= */
  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;

    const interval = setInterval(() => {
      el.scrollBy({ left: 300, behavior: "smooth" });

      if (el.scrollLeft + el.clientWidth >= el.scrollWidth - 5) {
        el.scrollTo({ left: 0, behavior: "smooth" });
      }
    }, 3000);

    return () => clearInterval(interval);
  }, [activeTab]);

  return (
    <section
      ref={sectionRef}
      className={`${styles.wrapper} ${inView ? styles.visible : ""}`}
    >
      <div className={styles.container}>

        {/* ================= INTRO ================= */}
        <MembersPageIntro
          title="Discover Businesses"
          description="Find and patronize businesses of your fellow Censers members"
        />

        {/* ================= SLIDER ================= */}
        <div className={styles.sliderWrapper}>
          <div ref={scrollRef} className={styles.scroll}>

            {loading
              ? Array.from({ length: 5 }).map((_, i) => (
                  <div key={i} className={styles.cardWrap}>
                    <div className={styles.skeletonCard}>
                      
                      {/* TOP */}
                      <div className={styles.skelTop}>
                        <div className={styles.skelLogo} />
                        <div className={styles.skelInfo}>
                          <div className={styles.skelName} />
                          <div className={styles.skelMeta} />
                        </div>
                      </div>

                      {/* DESCRIPTION */}
                      <div className={styles.skelDesc} />
                      <div className={styles.skelDescSmall} />

                      {/* DIVIDER */}
                      <div className={styles.skelDivider} />

                      {/* FOOTER */}
                      <div className={styles.skelFooter}>
                        <div className={styles.skelAvatar} />
                        <div className={styles.skelBy} />
                      </div>

                    </div>
                  </div>
                ))
              : businesses?.map((business: any, index: number) => (
                  <div
                    key={`${activeTab}-${business.id}`}
                    className={styles.cardWrap}
                    style={{ transitionDelay: `${index * 0.06}s` }}
                  >
                    <BusinessCard business={business} />
                  </div>
                ))}

          </div>
        </div>

      </div>
    </section>
  );
};

export default MembersCommerce;