"use client";

import { useEffect } from "react";
import Image from "next/image";
import { motion } from "framer-motion";
import { useCompanyStore } from "@/store/company.store";

export function CompanyTicker() {
  const { companies, isLoading, fetchTopCompanies } = useCompanyStore();

  useEffect(() => {
    fetchTopCompanies();
  }, [fetchTopCompanies]);

  if (isLoading) {
    return (
      <div className="flex-1 w-full overflow-hidden py-4 sm:py-0 px-4 sm:px-6 flex items-center justify-center">
        <div className="text-gray-400 text-sm animate-pulse">Loading companies...</div>
      </div>
    );
  }

  // Duplicate the companies list to create a seamless infinite scrolling effect.
  // Using 3 sets ensures the screen is fully covered during the animation loop.
  const duplicatedCompanies = [...companies, ...companies, ...companies];

  return (
    <div className="flex-1 w-full overflow-hidden py-4 sm:py-0 px-4 sm:px-6 relative flex items-center">
      {/* 
        We use framer-motion to smoothly translate the container infinitely.
        The container translates from 0 to -33.33% because we duplicated the items 3 times.
      */}
      {companies.length > 0 ? (
        <motion.div
          className="flex items-center gap-4 sm:gap-6 min-w-max"
          animate={{
            x: ["0%", "-33.3333%"],
          }}
          transition={{
            repeat: Infinity,
            ease: "linear",
            duration: Math.max(15, companies.length * 4), // Adjust speed dynamically based on logo count
          }}
        >
          {duplicatedCompanies.map((company, index) => {
            // Prepend the live backend URL if it's a relative path, making sure to include /api/
            const logoUrl = company.logo
              ? company.logo.startsWith("http")
                ? company.logo
                : `https://jobvumi.com/api/${company.logo.replace(/^\//, "")}`
              : null;

            return (
              <div 
                key={`${company.company_id}-${index}`} 
                className="transition-all duration-300 flex items-center justify-center shrink-0 min-w-[100px] md:min-w-[120px] px-2"
              >
                {logoUrl ? (
                  <Image 
                    src={logoUrl} 
                    alt={company.company_name} 
                    width={180} 
                    height={60} 
                    className="object-contain h-12 md:h-16 w-auto max-w-[180px]" 
                  />
                ) : (
                  // Fallback text rendering if no logo image is available
                  <div className="text-lg md:text-xl font-black text-gray-800 tracking-wider flex items-center gap-1 font-serif">
                    {company.company_name}
                  </div>
                )}
              </div>
            );
          })}
        </motion.div>
      ) : (
        <div className="text-gray-400 text-sm mx-auto">No companies available</div>
      )}
    </div>
  );
}