import React from 'react';
import { Star, Heart } from 'lucide-react';
import SectionHeader from '../SectionHeader';
import ImageWithFallback from '@/components/UiComponents/ImageWithFallback';
import FavBtnProvider from './FavBtn';
import LocalePath from '@/components/UiComponents/LocalePath';
import { AddIcon, CartIcon, FullStarIcon } from '@/assets/svgs/Icons';
import { useTranslations } from 'next-intl';
import Price from './Price';
import { formatNumber } from '@/utils/helpers';
import { Product } from '@/interfaces/types';

const ProductComparisonTable = () => {
  const t = useTranslations();

  const sampleProducts = [
    {
      id: 68,
      main: "https://multi-vendors-989.saied.aait-d.com/storage/images/products/GFsrfzowMJdpElfTYy5c5pfjxuEp2vOtTjfoR6OP.jpg",
      video: "https://multi-vendors-989.saied.aait-d.com/storage/files/products/dddd",
      rate: 4.5,
      rate_count: 125,
      is_favorite: false,
      name: "Baby car seat (child car seat)",
      description: "<p>Comes with a fully covered metal handle</p><p>High-quality removable inner padding for easy cleaning</p><p>Made from imported, child-safe materials</p><p>Available in multiple attractive colors to suit all preferences</p><p>Equipped with a safety belt to protect the child</p><p>Can be used in fixed and rocking positions</p><p>Suitable for ages 0 to 2 years</p><p>Supports up to 13 kg</p>",
      slug: "baby-car-seat-child-car-seat",
      sku: "En940D9C",
      barcode: "oFOkIlDcYj",
      default_detail_stock: 114,
      is_out_of_stock: false,
      stock: 0,
      default_detail: 83,
      price: 150,
      original_price: 200,
      discount: "25%",
      brand: "BabySafe",
      category: "مقاعد الأطفال",
      shipping_days: "3-5 أيام",
      color: "متعدد الألوان"
    },
    {
      id: 69,
      main: "https://multi-vendors-989.saied.aait-d.com/storage/images/products/GFsrfzowMJdpElfTYy5c5pfjxuEp2vOtTjfoR6OP.jpg",
      rate: 3.8,
      rate_count: 89,
      is_favorite: true,
      name: "كرسي أطفال للسيارة - Premium",
      price: 180,
      original_price: null,
      discount: "15%",
      brand: "SafeRide",
      category: "مقاعد الأطفال",
      shipping_days: "2-4 أيام",
      color: "أسود - رمادي",
      stock:10
    },
    {
      id: 70,
      main: "https://multi-vendors-989.saied.aait-d.com/storage/images/products/GFsrfzowMJdpElfTYy5c5pfjxuEp2vOtTjfoR6OP.jpg",
      rate: 4.2,
      rate_count: 156,
      is_favorite: false,
      name: "مقعد سيارة للأطفال - Deluxe",
      price: 220,
      original_price: 280,
      discount: "20%",
      brand: "KidSafe",
      category: "مقاعد الأطفال",
      shipping_days: "1-3 أيام",
      color: "أزرق - أبيض",
      stock:10
    },
    {
      id: 71,
      main: "https://multi-vendors-989.saied.aait-d.com/storage/images/products/GFsrfzowMJdpElfTYy5c5pfjxuEp2vOtTjfoR6OP.jpg",
      rate: 4.0,
      rate_count: 203,
      is_favorite: false,
      name: "مقعد أطفال محمول للسيارة",
      price: 130,
      original_price: null,
      discount: "10%",
      brand: "TinyRider",
      category: "مقاعد الأطفال",
      shipping_days: "4-6 أيام",
      color: "وردي - أبيض",
      stock:10
    }
  ];

  const comparisonRows = [
    { label: t("Text.price"), key: "price" },
    { label: t("Text.rating"), key: "rating" },
    { label: t("Text.category"), key: "category" },
    { label: t("Text.productDiscount"), key: "discount" },
    { label: t("Text.brand"), key: "brand" },
    { label: t("Text.availablePieces"), key: "stock" },
    { label: t("Text.color"), key: "color" }
  ];

  const renderStars = (product:Product) => {
    return (
      <div className="flex items-center gap-1">
        <div className=" text-[#FFB01D] text-sm font-medium flex gap-1 items-center">
          <FullStarIcon />
          {formatNumber(product?.rate)}
        </div>
        <span className="text-xs text-gray-600" dir='ltr'>
           (+{product?.rate_count})
        </span>
      </div>
    );
  };

  const renderCellContent = (product:Product, rowKey:any) => {
    switch (rowKey) {
      case 'price':
        return <Price product={product} isSmall/>;
      case 'rating':
        return renderStars(product);
      default:
        return (
          <div >
            {product[rowKey]}
          </div>
        );
    }
  };

  return (
    <div className=" container p-4">
        <SectionHeader title={t("Text.compareProducts")} />

        {/* Comparison Table */}
        <div className="overflow-x-auto">
          <table className="w-full">
            {/* Product Headers */}
            <thead>
              <tr >
                <th className=" min-w-[250px] p-4 text-right font-medium text-gray-600">
                  {/* Empty header for row labels */}
                </th>
                {sampleProducts.map((product) => (
                  <th key={product.id} className="p-4 min-w-48">
                      <div className="relative w-full h-[304px] bg-white border border-solid border-greynormal rounded-[10px] overflow-hidden">
                            <LocalePath href={`/products/${product?.slug}`} className='absolute inset-0 size-full bg-white'>
                                <ImageWithFallback
                                    src={product?.main}
                                    style={{mixBlendMode:"multiply"}}
                                    width={350}
                                    height={350}
                                    className="size-full object-contain"
                                    alt={product?.name}
                                />
                            </LocalePath>
                            {/* <div className="flex items-center justify-between w-full absolute top-1.5 px-1.5">
                                <div className="text-2xl font-bold flex gap-3">
                                    <FavBtnProvider type="product" product={product} />
                                </div>
                            </div> */}
                      </div>
                      
                      <div className="flex flex-col gap-1 mt-2.5 mb-5">
                        <span className="text-xs font-normal leading-4 text-start text-gray-300">
                          {product?.brand}
                        </span>
                        <div className="flex flex-col gap-2">
                          <LocalePath href={`/products/${product?.slug}`}>
                              <h2 className="text-sm font-bold leading-5 text-start truncate  line-clamp-1  ">
                              {product?.name}
                              </h2>
                          </LocalePath>
                        </div>
                      </div>
                      {/* Add to Cart Button */}
                      {product?.is_out_of_stock ? (
                          <div className="app-btn !min-h-12 !flex-1 !w-full  !mb-6">
                            {t("Text.out_of_stock")}
                          </div>
                      ):(
                        <LocalePath href={`/products/${product?.slug}`}
                          className="app-btn !min-h-12 !flex-1 !w-full group !mb-6"
                          aria-label={t("buttons.addCart")}
                        >
                          {t("buttons.addCart")}
                          <CartIcon className="*:fill-white group-hover:*:!fill-primary" />
                        </LocalePath>
                      )}
                  </th>
                ))}
              </tr>
            </thead>

            {/* Comparison Rows */}
            <tbody>
              {comparisonRows.map((row, index) => (
                <tr key={row.key} className={`font-semibold text-text-gray border border-solid border-gray-100 odd:bg-gray-50 even:bg-white`}>
                  <td className="p-4">
                    {row.label}
                  </td>
                  {sampleProducts.map((product:any) => (
                    <td key={product.id} className="p-4 ">
                      {renderCellContent(product, row.key)}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
    </div>
  );
};

export default ProductComparisonTable;