"use client";

import axiosInstance from "@/lib/axiosInstance";
import axios from "axios";
import React, { useEffect, useRef, useState } from "react";

interface MarqueeItem {
  text: string;
  href: string;
  active: boolean;
}

const MobileMarquee: React.FC = () => {
  const marqueeRef = useRef<HTMLDivElement>(null);
  const [items, setItems] = useState<MarqueeItem[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchMarquee = async () => {
      try {
        const response = await axiosInstance.get("/cms/marquee");
        const result = response.data;

        if (result.success && result.data) {
          const mapped: MarqueeItem[] = result.data.map(
            (item: {
              title: string;
              link: string | null;
              highlight: boolean | null;
            }) => ({
              text: item.title,
              href: item.link || "javascript:void(0);",
              active: item.highlight ?? false,
            })
          );

          setItems(mapped);
        }
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    };

    fetchMarquee();
  }, []);

  useEffect(() => {
    const marquee = marqueeRef.current;

    if (!marquee || loading || items.length === 0) return;

    // Duplicate content
    marquee.innerHTML += marquee.innerHTML;

    let position = 0;
    const speed = 0.5;
    let animationId: number;

    const animate = () => {
      position -= speed;
      if (Math.abs(position) >= marquee.scrollWidth / 2) {
        position = 0;
      }
      marquee.style.transform = `translateX(${position}px)`;
      animationId = requestAnimationFrame(animate);
    };

    animate();

    return () => cancelAnimationFrame(animationId);
  }, [loading, items]);

  if (loading || items.length === 0) return null;

  return (
    <div className="mobilemarquee d-lg-none">
      <div className="container container-xxl">
        <div className="row">
          <div className="col-12">
            <div className="marquee-wrapper">
              <div className="margueetext" ref={marqueeRef}>
                {items.map((item, index) => (
                  <a
                    key={index}
                    href={item.href}
                    className={item.active ? "active" : ""}
                  >
                    {item.text}
                  </a>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MobileMarquee;