/* ====================================================
 * Product Categories Section
 * Dùng Font Awesome icon_class và color từ API/Admin
 * ==================================================== */

'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';
import SectionHeader from '@/components/common/SectionHeader';
import ScrollReveal from '@/components/common/ScrollReveal';
import { Category } from '@/types/api';

/* ── Màu nền mặc định xen kẽ nếu chưa cài màu trong admin ── */
const DEFAULT_COLORS = ['#1a3a8c', '#3a7d44'];

export default function ProductCategories({ initialCategories = [] }: { initialCategories?: Category[] }) {
  if (!initialCategories || initialCategories.length === 0) return null;

  return (
    <section className="section-padding bg-surface-50">
      <div className="container-custom">
        <SectionHeader
          subtitle="Danh mục"
          title="Dòng Sản Phẩm"
          description="Đa dạng các nhóm sản phẩm dược phẩm, thực phẩm chức năng và thiết bị y tế chất lượng cao."
        />

        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-5">
          {initialCategories.map((category, index) => {
            // Ưu tiên màu từ admin, fallback xen kẽ navy/green
            const bgColor = category.color || DEFAULT_COLORS[index % 2];
            // Ưu tiên icon_class từ admin, fallback generic
            const iconClass = category.icon_class || 'fas fa-pills';

            return (
              <ScrollReveal key={category.id} animation="fadeUp" delay={index * 0.06}>
                <Link href={`/san-pham?category=${category.slug}`} className="block h-full">
                  <motion.div
                    className="group relative flex flex-col items-center justify-center gap-3 p-6 rounded-2xl cursor-pointer overflow-hidden text-white select-none"
                    style={{ backgroundColor: bgColor, minHeight: '148px' }}
                    whileHover={{ y: -6, scale: 1.03 }}
                    transition={{ type: 'spring', stiffness: 300, damping: 20 }}
                  >
                    {/* Hover glow overlay */}
                    <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"
                      style={{ background: 'radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 70%)' }}
                    />

                    {/* Font Awesome Icon */}
                    <div className="relative z-10 w-16 h-16 flex items-center justify-center">
                      <i
                        className={`${iconClass} text-white`}
                        style={{ fontSize: '2.6rem', filter: 'drop-shadow(0 2px 6px rgba(0,0,0,0.25))' }}
                        aria-hidden="true"
                      />
                    </div>

                    {/* Category name */}
                    <p className="relative z-10 text-xs sm:text-sm font-semibold text-center text-white leading-tight px-1">
                      {category.name}
                    </p>

                    {/* Product count */}
                    {(category.product_count ?? 0) > 0 && (
                      <span className="relative z-10 text-[10px] text-white/65">
                        {category.product_count} sản phẩm
                      </span>
                    )}
                  </motion.div>
                </Link>
              </ScrollReveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}