'use client';
import { useRouter } from 'next/navigation';
import type { ProductDetailData } from '@/types';
import Link from 'next/link';

import { BoxPrice } from './BoxPrice';
import { BoxBought } from './BoxBought';

// thêm giỏ hàng
import { addToCart } from '@/lib/ButtonCart';

export const BoxInfoRight = (item: ProductDetailData) => {
  const router = useRouter();

  const handleBuyNow = () => {
    router.push('/cart');
    addToCart(item.product_info.productId);
  };

  return (
    <>
      <h1 className="product-name color-black line-clamp-3 font-bold">
        {item.product_info.productName}
      </h1>
      <div className="list-basic-product-info flex flex-wrap items-center">
        <div className="item-basic">
          Mã SP: <span className="color-primary">{item.product_info.productSKU}</span>
        </div>
        <div className="item-basic">
          Đánh giá: <span className="color-primary">{item.product_info.review.summary.total}</span>
        </div>
        <div className="item-basic">
          Bình luận:{' '}
          <span className="color-primary">{item.product_info.comment.summary.total}</span>
        </div>
        <div className="item-basic">
          Lượt xem: <span className="color-primary">{item.product_info.visit}</span>
        </div>

        {item.product_info.extend.buy_count?.length > 0 && (
          <div className="item-basic last-item-basic position-relative">
            Đã bán: <span className="color-primary">{item.product_info.extend.buy_count}</span>
          </div>
        )}
      </div>
      {/*  tình trạng */}
      <div className="list-basic-product-info flex flex-wrap items-center gap-6">
        <div className="item-basic">
          Bảo hành: <span className="color-red">{item.product_info.warranty}</span>
        </div>

        {item.product_info.quantity > '0' && (
          <div className="item-basic last-item-basic position-relative">
            Tình trạng: <span className="color-green">Còn hàng</span>
          </div>
        )}
      </div>
      {/* giá */}
      <BoxPrice {...item} />
      {item.product_info.specialOffer.all.length > 0 && (
        <div className="box-offer-detail border-radius-10">
          <div className="title-offer-detail flex items-center">
            <i className="sprite sprite-gift-detail"></i>
            <p className="font-weight-600">Khuyến mãi</p>
          </div>
          <div className="list-info-offter">
            {item.product_info.specialOffer.all.map((_item, idx) => (
              <div key={idx} className="item-offer">
                <i className="icon"></i>
                <div dangerouslySetInnerHTML={{ __html: _item.title }} />
              </div>
            ))}
          </div>
        </div>
      )}
      {/*  mua hàng */}
      {(item.product_info.quantity > '0' || item.product_info.price > '0') && (
        <>
          <div className="product-buy-quantity flex items-center">
            <p className="title-quantity">Số lượng:</p>
            <div className="cart-quantity-select flex items-center justify-center">
              <p className="js-quantity-change" data-value="-1">
                {' '}
                −{' '}
              </p>
              <input
                type="text"
                className="js-buy-quantity js-quantity-change bk-product-qty font-bold"
                defaultValue={1}
              />
              <p className="js-quantity-change" data-value="1">
                {' '}
                +{' '}
              </p>
            </div>
            <button
              className="addCart flex cursor-pointer flex-wrap items-center justify-center gap-3"
              onClick={() => {
                addToCart(item.product_info.productId);
                alert('Sản phẩm đã được thêm vào giỏ hàng!');
              }}
            >
              <i className="sprite sprite-cart-detail"></i>
              <p className="title-cart">Thêm vào giỏ hàng</p>
            </button>
            <input type="hidden" className="js-buy-quantity-temp" value="1" />
          </div>

          <div
            id="detail-buy-ads"
            className="detail-buy grid grid-cols-2 gap-2"
            onClick={() => handleBuyNow()}
          >
            <button className="detail-buy-now col-span-2 cursor-pointer">
              <span>ĐẶT MUA NGAY</span>
              Giao hàng tận nơi nhanh chóng
            </button>

            <button className="detail-add-cart">
              <span>TRẢ GÓP QUA HỒ SƠ</span>
              Chỉ từ 2.665.000₫/ tháng
            </button>

            <button className="detail-add-cart">
              <span>TRẢ GÓP QUA THẺ</span>
              Chỉ từ 1.332.500₫/ tháng
            </button>
          </div>
        </>
      )}
      {/*  yên tâm mua hàng */}
      <div className="box-product-policy-detal boder-radius-10" style={{ marginTop: '24px' }}>
        <h2 className="title font-[600]">Yên tâm mua hàng</h2>
        <div className="list-showroom-detail flex flex-wrap justify-between">
          <div className="item flex items-center gap-2">
            <i className="sprite sprite-camket-detail"></i>
            <p>Cam kết giá tốt nhất thị trường.</p>
          </div>
          <div className="item flex items-center gap-2">
            <i className="sprite sprite-sanphammoi-detail"></i>
            <p>Sản phẩm mới 100%.</p>
          </div>
          <div className="item flex items-center gap-2">
            <i className="sprite sprite-1doi1-detail"></i>
            <p>Lỗi 1 đổi 1 ngay lập tức.</p>
          </div>
          <div className="item flex items-center gap-2">
            <i className="sprite sprite-hotrotragop-detail"></i>
            <p>Hỗ trợ trả góp - Thủ tục nhanh gọn.</p>
          </div>
        </div>
      </div>
      <BoxBought />
    </>
  );
};