// productdetails/components/ProductAccordion.tsx
"use client";

import React, { useState } from "react";
import { apiCall } from "@/utils/callApi";

interface ProductAccordionProps {
  description?: string;
  reviews?: any[];
  weight?: number;
  dimensions?: any;
  productId: string;
}

export default function ProductAccordion({
  description,
  reviews,
  weight,
  dimensions,
  productId,
}: ProductAccordionProps) {
  const [openAccordion, setOpenAccordion] = useState<number | null>(null);

  const toggleAccordion = (index: number) => {
    setOpenAccordion(openAccordion === index ? null : index);
  };

  return (
    <div className="dltaccordion">
      {/* Product Details Accordion */}
      <div className="dltaccordionitem">
        <button
          onClick={() => toggleAccordion(1)}
          className="dltaccordionheader w-full flex justify-between items-center"
        >
          <span className="flex items-center gap-2">
            <span>Product Details</span>
          </span>

          <span
            className={`transition-transform duration-300 ${
              openAccordion === 1 ? "rotate-180" : ""
            }`}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              className="w-4 h-4"
            >
              <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
            </svg>
          </span>
        </button>

        {openAccordion === 1 && (
          <div className="dltaccordionbody transition-all duration-300 ease-in-out">
            <div className="pb-5 text-sm text-slate-500">
              <div className="flex flex-wrap -mx-3">
                {weight && (
                  <div className="w-6/12 px-3 mb-3 2xl:mb-5">
                    <h4>Weight</h4>
                    <p>{weight} g</p>
                  </div>
                )}

                {dimensions && (
                  <div className="w-6/12 px-3 mb-3 2xl:mb-5">
                    <h4>Dimensions</h4>
                    <p>
                      {dimensions.length} x {dimensions.width} x{" "}
                      {dimensions.height} cm
                    </p>
                  </div>
                )}

                {description && (
                  <div className="w-full px-3 mb-3 2xl:mb-5">
                    <h4>Description</h4>

                    <div
                      dangerouslySetInnerHTML={{ __html: description }}
                    />
                  </div>
                )}
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Reviews Accordion */}
      {/* <div className="dltaccordionitem">
        <button
          onClick={() => toggleAccordion(2)}
          className="dltaccordionheader w-full flex justify-between items-center"
        >
          <span className="flex items-center gap-2">
            <span>Reviews ({reviews?.length || 0})</span>
          </span>

          <span
            className={`transition-transform duration-300 ${
              openAccordion === 2 ? "rotate-180" : ""
            }`}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              className="w-4 h-4"
            >
              <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
            </svg>
          </span>
        </button>

        {openAccordion === 2 && (
          <div className="dltaccordionbody transition-all duration-300 ease-in-out">
            <div className="pb-5">
              {reviews && reviews.length > 0 ? (
                <ReviewsList reviews={reviews}  productId={productId}/>
              ) : (
                <div className="text-center py-8">
                  <p className="text-gray-500">
                    No reviews yet. Be the first to review this product!
                  </p>
                </div>
              )}

              <ReviewForm productId={productId} />
            </div>
          </div>
        )}
      </div> */}
    </div>
  );
}

function ReviewsList({ reviews, productId }: { reviews: any[]; productId: string }) {
  const getInitials = (name: string) => {
    if (!name) return "?";

    return name.charAt(0).toUpperCase();
  };

  const getAvatarColor = (name: string) => {
    const colors = [
      "#FF6B6B",
      "#4ECDC4",
      "#45B7D1",
      "#96CEB4",
      "#FFEAA7",
      "#DDA16B",
      "#C44569",
      "#786FA6",
      "#F8A5C2",
      "#63CDDA",
      "#EA868F",
      "#6C5CE7",
      "#00CEC9",
      "#FFB8B8",
      "#85C1E9",
    ];

    let hash = 0;

    for (let i = 0; i < name.length; i++) {
      hash = name.charCodeAt(i) + ((hash << 5) - hash);
    }

    const index = Math.abs(hash) % colors.length;

    return colors[index];
  };

  return (
    <div className="ratingouter">
      {reviews.map((review) => (
        <div className="reviewslistbx mb-4 flex gap-4" key={review._id}>
          <div className="reviewsuserimg flex-shrink-0">
            <div
              className="w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-xl uppercase"
              style={{
                backgroundColor: getAvatarColor(review.authorName),
              }}
            >
              {getInitials(review.authorName)}
            </div>
          </div>

          <div className="reviewsuserct flex-1">
            <h6 className="font-semibold text-base">
              {review.authorName}
            </h6>

            <div className="rating mb-2 flex gap-1">
              {[...Array(5)].map((_, i) => (
                <i
                  key={i}
                  className={`fa ${
                    i < review.rating
                      ? "fa-star"
                      : "fa-star-o"
                  } text-yellow-400`}
                ></i>
              ))}
            </div>

            {review.reviewTitle && (
              <h5 className="font-semibold mb-1 text-gray-800">
                {review.reviewTitle}
              </h5>
            )}

            <div
              className="text-gray-600"
              dangerouslySetInnerHTML={{
                __html: review.reviewDescription,
              }}
            />

            <small className="text-gray-400 block mt-2">
              {new Date(review.createdAt).toLocaleDateString(
                "en-IN",
                {
                  year: "numeric",
                  month: "long",
                  day: "numeric",
                }
              )}
            </small>
          </div>
        </div>
      ))}
    </div>
  );
}

function ReviewForm({ productId }: { productId: string }) {
  const [rating, setRating] = useState(0);
  const [hoverRating, setHoverRating] = useState(0);

  const [formData, setFormData] = useState({
    authorName: "",
    authorEmail: "",
    reviewTitle: "",
    reviewDescription: "",
  });

  const [errors, setErrors] = useState<any>({});
  const [loading, setLoading] = useState(false);
  const [successMessage, setSuccessMessage] = useState("");

  const validate = () => {
    const newErrors: any = {};

    if (!rating) {
      newErrors.rating = "Please select rating";
    }

    if (!formData.authorName.trim()) {
      newErrors.authorName = "Name is required";
    }

    if (!formData.authorEmail.trim()) {
      newErrors.authorEmail = "Email is required";
    } else if (
      !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.authorEmail)
    ) {
      newErrors.authorEmail = "Invalid email address";
    }

    if (!formData.reviewTitle.trim()) {
      newErrors.reviewTitle = "Review title is required";
    }

    if (!formData.reviewDescription.trim()) {
      newErrors.reviewDescription =
        "Review description is required";
    }

    setErrors(newErrors);

    return Object.keys(newErrors).length === 0;
  };

const handleSubmit = async () => {
  setSuccessMessage("");

  if (!validate()) return;

  try {
    setLoading(true);
    
    const payload = {
      product: productId,
      authorName: formData.authorName,
      authorEmail: formData.authorEmail,
      reviewTitle: formData.reviewTitle,
      reviewDescription: formData.reviewDescription,
      rating,
    };

    const response = await apiCall<any>("/clientapi/addreview", {
      method: "POST",
      body: payload,
    });

    if (response?.data?.success) {
      setSuccessMessage(
        "Review submitted successfully. Waiting for approval."
      );

      setFormData({
        authorName: "",
        authorEmail: "",
        reviewTitle: "",
        reviewDescription: "",
      });

      setRating(0);
      setErrors({});
    } else {
      alert(response?.error || "Something went wrong");
    }
  } catch (error: any) {
    console.error(error);

    alert("Something went wrong");
  } finally {
    setLoading(false);
  }
};

  return (
    <div className="reviewformbx mt-6">
      <h3>Add Reviews</h3>

      {successMessage && (
        <div className="mb-4 p-3 rounded bg-green-100 text-green-700">
          {successMessage}
        </div>
      )}

      <div className="revarea mb-4">
        <label className="control-label">Your Rating :</label>

        <div className="rating-area">
          <div className="starpanel flex gap-1">
            {[1, 2, 3, 4, 5].map((star) => (
              <React.Fragment key={star}>
                <input
                  type="radio"
                  name="rating"
                  id={`st${star}`}
                  value={star}
                  className="hidden"
                  onChange={() => setRating(star)}
                />

                <label
                  htmlFor={`st${star}`}
                  className={`cursor-pointer text-2xl ${
                    star <= (hoverRating || rating)
                      ? "text-yellow-400"
                      : "text-gray-300"
                  }`}
                  onMouseEnter={() => setHoverRating(star)}
                  onMouseLeave={() => setHoverRating(0)}
                >
                  ★
                </label>
              </React.Fragment>
            ))}
          </div>

          {errors.rating && (
            <p className="text-red-500 text-sm mt-1">
              {errors.rating}
            </p>
          )}
        </div>
      </div>

      <div className="p-0">
        <div className="row">
          <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
            <div className="form-group mb-3">
              <label className="block mb-1">Name</label>

              <input
                type="text"
                value={formData.authorName}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    authorName: e.target.value,
                  })
                }
                className="form-control w-full border rounded-md p-2"
              />

              {errors.authorName && (
                <p className="text-red-500 text-sm mt-1">
                  {errors.authorName}
                </p>
              )}
            </div>
          </div>

          <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
            <div className="form-group mb-3">
              <label className="block mb-1">Email</label>

              <input
                type="email"
                value={formData.authorEmail}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    authorEmail: e.target.value,
                  })
                }
                className="form-control w-full border rounded-md p-2"
              />

              {errors.authorEmail && (
                <p className="text-red-500 text-sm mt-1">
                  {errors.authorEmail}
                </p>
              )}
            </div>
          </div>

          <div className="col-12">
            <div className="form-group mb-3">
              <label className="block mb-1">
                Review Title
              </label>

              <input
                type="text"
                value={formData.reviewTitle}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    reviewTitle: e.target.value,
                  })
                }
                className="form-control w-full border rounded-md p-2"
              />

              {errors.reviewTitle && (
                <p className="text-red-500 text-sm mt-1">
                  {errors.reviewTitle}
                </p>
              )}
            </div>
          </div>

          <div className="col-12">
            <div className="form-group mb-3">
              <label className="block mb-1">
                Your Review
              </label>

              <textarea
                rows={4}
                value={formData.reviewDescription}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    reviewDescription: e.target.value,
                  })
                }
                className="form-control w-full border rounded-md p-2"
              />

              {errors.reviewDescription && (
                <p className="text-red-500 text-sm mt-1">
                  {errors.reviewDescription}
                </p>
              )}
            </div>
          </div>
        </div>

        <div className="row">
          <div className="col-12">
            <button
              className="theme-btn"
              type="button"
              disabled={loading}
              onClick={handleSubmit}
            >
              {loading
                ? "Submitting..."
                : "Submit Your Review"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}