"use client";

import React, { useEffect, useState } from "react";
import "./Product_details.css";
import Breadcrumb_comp from "../common-components/breadcrumb-comp/Breadcrumb_comp";
import Our_choices from "./our_choices/Our_choices";

import Product_details_swiper from "./product_details_swiper/Product_details_swiper";
import Product_info from "./product_info/Product_info";
import Product_overview from "./product_overview/Product_overview";
import Product_Rating from "./product_Rating/Product_Rating";
import {
  getCommonVariant,
  getProduct,
  getSizeVariant,
} from "../../features/products/productsSlice";
import { decodeId, variant_type } from "../../utils/common";

import { useDispatch, useSelector } from "react-redux";
import { AvgReviewRating } from "../../features/review_rating/review_ratingSlice";
import { useParams, useSearchParams } from "next/navigation";
import { myAccount } from "../../features/my_account/Slice";

function Product_details() {
  const breadcrumbs = [
    { label: "Home", link: "/", isActive: false },
    { label: "Product", link: "", isActive: true },
  ];

  const { id } = useParams(); // encoded ID from URL
  const [productId, setProductId] = useState(null); // decoded ID

  useEffect(() => {
    if (id) {
      const decoded = decodeId(id);
      setProductId(decoded);
    }
  }, [id]);

  const [selectedVariant, setselectedVariant] = useState({});

  const dispatch = useDispatch();
  const product = useSelector((state) => state.product.product);

  useEffect(() => {
    if (productId) {
      dispatch(getProduct(productId));
    }
  }, [dispatch, productId]);

  const [activeMetal, setActiveMetal] = useState(null);
  const [activeSize, setActiveSize] = useState(null);
  const [activeTriple, setActiveTriple] = useState(null);

  // Auto select first available variant
  useEffect(() => {
    let firstMetal;
    let firstSize;
    let firstTriple;
    if (Number(product.variant_type_id) === variant_type.Single) {
      firstMetal = product?.Product_Variants?.[0];
    } else if (Number(product.variant_type_id) === variant_type.Double) {
      firstMetal = product?.Product_Variants?.[0];
      firstSize = firstMetal?.Double_Variants?.[0];
    } else if (Number(product.variant_type_id) === variant_type.Single) {
      firstMetal = product?.Product_Variants?.[0];
      firstSize = firstMetal?.Double_Variants?.[0];
      firstTriple = firstSize?.Triple_Variants?.[0] || null;
    }

    setActiveMetal(firstMetal || null);
    setActiveSize(firstSize || null);
    setActiveTriple(firstTriple || null);
    setselectedVariant(firstTriple || firstSize || firstMetal);
  }, [product]);

  const avg_rating = useSelector((state) => state.reviewRating.avg_rating);
  useEffect(() => {
    dispatch(
      AvgReviewRating({
        product_id: product.id,
      }),
    );
  }, [dispatch, product]);

  const category = useSelector((state) => state.master.categories);

  const breakpoints = {
    320: { slidesPerView: 3 },
    485: { slidesPerView: 5 },
    768: { slidesPerView: 4 },
    992: { slidesPerView: 4 },
    1024: { slidesPerView: 5 },
  };

  const searchParams = useSearchParams();
  const quantity = Number(searchParams.get("qty")) || 1;

  useEffect(() => {
    dispatch(myAccount());
  }, [dispatch]);
  return (
    <>
      <section className="Product_details">
        {" "}
        <Breadcrumb_comp breadcrumbs={breadcrumbs} />
        <div className="container">
          <div className="row">
            <div className="col-xl-5 col-md-6">
              <Product_details_swiper product={product} />
            </div>
            <div className="col-xl-7 col-md-6">
              <div className="Product_details_info_holder">
                <Product_info
                  product={product}
                  avg_rating={avg_rating}
                  selectedVariant={selectedVariant}
                  setSelectedVariant={setselectedVariant}
                  activeTriple={activeTriple}
                  activeSize={activeSize}
                  activeMetal={activeMetal}
                  setActiveTriple={setActiveTriple}
                  setActiveSize={setActiveSize}
                  setActiveMetal={setActiveMetal}
                  qty={quantity}
                />

                <div className="overview_tab">
                  <Product_overview product={product} />
                </div>
              </div>
            </div>
          </div>

          {/* <div className="demo_product_list_holder">
            <Demo_ProductCategory
              products={category}
              breakpoints={breakpoints}
            />
          </div> */}

          {/* <Product_vdo_preview product={product} /> */}

          <Our_choices product={product} />

          <Product_Rating product={product} avg_rating={avg_rating} />

          {/* <Stay_Connected product={product} /> */}
        </div>
      </section>
    </>
  );
}

export default Product_details;
