"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;
}) {
  const discount = product.originalPrice && 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:", selectedColor); // 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")}.00</span>
        {product.originalPrice && product.originalPrice > product.price && (
          <>
            <span className="crossprice">₹{product.originalPrice.toLocaleString("en-IN")}.00</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}
      />
      
      <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
            width="12"
            height="12"
            viewBox="0 0 12 12"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M0.113281 2.47842V9.13248C0.113281 10.439 1.17237 11.498 2.47885 11.498H9.13291C10.4394 11.498 11.4985 10.439 11.4985 9.13248V2.47842C11.4985 1.17195 10.4394 0.112854 9.13291 0.112854H2.47885C1.17237 0.112854 0.113281 1.17195 0.113281 2.47842Z"
              fill="currentColor"
            />
          </svg>
        </a>
      </div>
    </div>
  );
}