'use client';
import React, { useState } from 'react';
import { parse } from 'date-fns';
import Link from 'next/link';
import Image from 'next/image';
import CounDown from '@/components/Common/CounDown';
import { DealType } from '@/types';
import { formatCurrency } from '@/lib/formatPrice';

type ItemDealProps = {
  Item: DealType;
};

const ItemDeal: React.FC<ItemDealProps> = ({ Item }) => {
  const [now] = useState(() => Date.now());

  // ép kiểu to_time sang số (timestamp) hoặc Date
  const deadline = parse(Item.to_time, 'dd-MM-yyyy, h:mm a', new Date()).getTime();

  // chỉ hiển thị nếu deadline còn lớn hơn thời gian hiện tại
  if (deadline <= now) {
    return null;
  }

  return (
    <div className="product-item">
      <div className="item-deal">
        <Link href={Item.product_info.productUrl} className="product-image position-relative">
          <Image
            src={Item.product_info.productImage.large}
            width={250}
            height={250}
            alt={Item.product_info.productName}
          />
        </Link>
        <div className="product-info flex-1">
          <Link href={Item.product_info.productUrl}>
            <h3 className="product-title line-clamp-3">{Item.product_info.productName}</h3>
          </Link>
          <div className="product-martket-main flex items-center">
            {Item.product_info.marketPrice > 0 && (
              <>
                <p className="product-market-price">
                  {Item.product_info.marketPrice.toLocaleString()} ₫
                </p>
                <div className="product-percent-price">-{Item.product_info.price_off || 0}%</div>
              </>
            )}
          </div>
          <div className="product-price-main font-bold">
            {Item.product_info.price > '0'
              ? `${formatCurrency(Item.product_info.price)}đ`
              : 'Liên hệ'}
          </div>
          <div className="p-quantity-sale">
            <i className="sprite sprite-fire-deal"></i>
            <div className="bg-gradient"></div>
            {(() => {
              const percentRemaining =
                ((Number(Item.quantity) - Number(Item.sale_quantity)) / Number(Item.quantity)) *
                100;

              return (
                <>
                  <p className="js-line-deal-left" style={{ width: `${percentRemaining}%` }}></p>
                </>
              );
            })()}
            <span>
              Còn {Number(Item.quantity) - Number(Item.sale_quantity)}/{Number(Item.quantity)} sản
              phẩm
            </span>
          </div>
          <div className="js-item-deal-time js-item-time-25404">
            <div className="time-deal-page flex items-center justify-center gap-2">
              <div>Kết thúc sau: </div>
              <CounDown deadline={Item.to_time} />
            </div>
          </div>
          <a href="javascript:buyNow(25404)" className="buy-now-deal">
            Mua giá sốc
          </a>
          <Link
            href="/bts-gaming-02"
            className="text-deal-item color-primary mt-3 hidden font-bold"
          >
            Xem sản phẩm
          </Link>
        </div>
      </div>
    </div>
  );
};

export default ItemDeal;