"use client";
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { getIvoryProducts } from '@/services/ivoryProductsService';

// Fallback products in case API fails
const fallbackProducts = [
  { id: 1, title: 'routes.learning-solutions', icon: '/assets/icons/product-2.png', route: '/services/learning-solutions' },
  { id: 2, title: 'routes.cmi', icon: '/assets/icons/product-1.png', route: '/products/cmi' },
  { id: 3, title: 'routes.leadership-solutions', icon: '/assets/icons/product-3.png', route: '/services/leadership-solutions' },
  { id: 4, title: 'routes.diploma', icon: '/assets/used-icons/diploma.png', route: '/ivory-diploma' },
];

export default function IvoryProducts() {
  const { t, i18n } = useTranslation();
  const [products, setProducts] = useState<Array<{
    id: number;
    title: string;
    icon: string;
    route: string;
  }>>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        setLoading(true);
        const apiProducts = await getIvoryProducts();
        
        if (apiProducts && apiProducts.length > 0) {
          // Map API data to our product format
          const mappedProducts = apiProducts.map(product => ({
            id: product.id,
            title: product.title?.trim() || '',
            icon: product.image || `https://e-training.ivorytraining.com/attachments/ivoryProducts/ijIafpp9jVpIpjjkdBXg6a6MBe7lsPJ2Rpsu9MFu.png`,
            route: product.link || `#${product.id}`
          }));
          setProducts(mappedProducts);
        } else {
          // Use fallback products if API returns empty
          setProducts(fallbackProducts.map(p => ({
            ...p,
            title: t(p.title)
          })));
        }
      } catch (err) {
        console.error('Error loading products:', err);
        setError('Failed to load products');
        // Use fallback products
        setProducts(fallbackProducts.map(p => ({
          ...p,
          title: t(p.title)
        })));
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();
  }, [i18n.language]); // Re-fetch when language changes

  // Handle loading state
  if (loading) {
    return (
      <section className="layout !pb-14">
        <div className="flex justify-center mb-4">
          <h2 className="services-header after:-bottom-2 flex justify-center">
            {t('home.ivory-products')}
          </h2>
        </div>
        <div className="grid gap-8 lg:grid-cols-2 xl:grid-cols-4">
          {[1, 2, 3, 4,5,6,7].map((i) => (
            <div key={i} className="h-24 bg-gray-100 rounded-lg animate-pulse"></div>
          ))}
        </div>
      </section>
    );
  }

  // Handle error state
  if (error) {
    return (
      <section className="layout !pb-14">
        <div className="text-center py-10">
          <p className="text-red-500">{error}</p>
          <p className="text-gray-500">{t('common.showing-fallback-content')}</p>
        </div>
      </section>
    );
  }

  return (
    <section className="layout !pb-14">
      <div className="flex justify-center mb-4">
        <h2 className="services-header after:-bottom-2 flex justify-center">
          {t('home.ivory-products')}
        </h2>
      </div>
      <div className="flex justify-center gap-6 flex-wrap ">
        {products.map((product) => (
          <Link 
            to={product.route} 
            key={product.id} 
            className="h-full bg-secondary-tw/5 hover:bg-secondary-tw/10 transition-colors duration-200 lg:w-1/5 md:w-1/3 sm:w-1/2 w-full max-w-sm"
          >
            <div className="flex items-center gap-4 px-4 py-2 border border-secondary-tw rounded-lg h-full shadow-[0_8px_0_var(--secondary-color)]">
              <span className="w-12 h-12 flex items-center justify-center">
                <img 
                  src={product.icon} 
                  alt={product.title} 
                  className="w-full h-full object-contain"
                  onError={(e) => {
                    // Fallback to a default icon if image fails to load
                    e.currentTarget.src = '/assets/icons/product-1.png';
                  }}
                />
              </span>
              <p className="text-md font-medium text-center flex-1">
                {product.title}
              </p>
            </div>
          </Link>
        ))}
      </div>
    </section>
  );
};