"use client";

import React from "react";
import ProductActions from "./ProductActions";
import ProductAccordion from "./ProductAccordion";

export default function ProductInfo({
  product,
  selectedColor,
  setSelectedColor,
}: {
  product: any;
  selectedColor: any;
  setSelectedColor: any;
}) {
  // console.log("is this comming here??", product);

  const discount =
    product.productprice && product.originalPrice > product.price
      ? Math.round(
          ((product.originalPrice - product.price) / product.originalPrice) *
            100,
        )
      : 0;

  // Calculate average rating from reviews
  const averageRating =
    product.reviews && product.reviews.length > 0
      ? product.reviews.reduce(
          (sum: number, review: any) => sum + review.rating,
          0,
        ) / product.reviews.length
      : 0;

  // console.log("ProductInfo - Selected Color:", product); // Debug log

  return (
    <div className="productltcontent">
      <div className="productcontentheading mb-2">
        <div className="subheading">{product.category}</div>
        <ShareButtons />
      </div>

      <h2>{product.name}</h2>

      {/* Rating Section */}
      {/* {product.reviews && product.reviews.length > 0 && (
        <div className="rating-section mb-3 flex items-center gap-2">
          <div className="rating">
            {[...Array(5)].map((_, i) => (
              <i key={i} className={`fa ${i < Math.round(averageRating) ? 'fa-star' : 'fa-star-o'}`}></i>
            ))}
          </div>
          <span className="text-sm text-gray-600">({product.reviews.length} reviews)</span>
        </div>
      )} */}

      <div className="priceouter">
        <span className="price">₹{product.price.toLocaleString("en-IN")}</span>
        {product.originalPrice && product.originalPrice > product.price && (
          <>
            <span className="crossprice">
              ₹{product.originalPrice.toLocaleString("en-IN")}
            </span>
            {/* <span className="offtext">{discount}% Off</span> */}
          </>
        )}
        <span className="offtext">( Inclusive of all taxes )</span>
      </div>

      {/* <div className="skutxt">SKU: {product.sku}</div> */}

      <ProductActions
        colors={product.colors}
        sizes={product.sizes}
        variants={product.variants}
        productId={product.id}
        selectedColor={selectedColor}
        onColorChange={setSelectedColor}
        product={product}
      />

      <ProductAccordion
        productId={product.id}
        description={product.description}
        reviews={product.reviews}
        weight={product.weight}
        dimensions={product.dimensions}
      />
    </div>
  );
}

function ShareButtons() {
  const currentUrl = typeof window !== "undefined" ? window.location.href : "";

  return (
    <div className="dltshare">
      <label>Share On</label>

      <div className="socialsharebtx">
        {/* Facebook */}
        <a
          className="socialshare"
          href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(currentUrl)}`}
          target="_blank"
          rel="noopener noreferrer"
        >
          <svg
            width="7"
            height="12"
            viewBox="0 0 7 12"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M5.10448 2.45246H6.14377V0.642213C5.96447 0.617545 5.34782 0.562042 4.62966 0.562042C3.13121 0.562042 2.10473 1.50464 2.10473 3.23709V4.83149H0.451172V6.85521H2.10473V11.9472H4.13208V6.85568H5.71876L5.97063 4.83196H4.1316V3.43775C4.13208 2.85284 4.28956 2.45246 5.10448 2.45246Z"
              fill="currentColor"
            />
          </svg>
        </a>

        {/* Instagram */}
        <a
          className="socialshare"
          href="https://www.instagram.com/"
          target="_blank"
          rel="noopener noreferrer"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="20"
            viewBox="0 0 24 24"
            fill="currentColor"
          >
            <path d="M7 2C4.24 2 2 4.24 2 7v10c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5V7c0-2.76-2.24-5-5-5H7zm10 2c1.66 0 3 1.34 3 3v10c0 1.66-1.34 3-3 3H7c-1.66 0-3-1.34-3-3V7c0-1.66 1.34-3 3-3h10zm-5 3.5A4.5 4.5 0 1 0 16.5 12 4.5 4.5 0 0 0 12 7.5zm0 2A2.5 2.5 0 1 1 9.5 12 2.5 2.5 0 0 1 12 9.5zM17.5 6a1 1 0 1 0 1 1 1 1 0 0 0-1-1z" />
          </svg>
        </a>
      </div>
    </div>
  );
}
