"use client";

import { useState } from "react";
import { FaStar } from "react-icons/fa";
import Button from "../Button";
import MiddleDrawer from "../MiddleDrawer";
import { useTranslations } from "next-intl";

// interface Seller {
//   name: string;
//   imageUrl?: string;
//   sellerId?: string;
//   isFollowing?: boolean;
//   rating?: number;
// }

interface ReviewModalProps {
  isOpen: boolean;
  onClose: () => void;
  rating: number;
  setRating: (num: number) => void;
  review: string;
  setReview: (val: string) => void;
  handleSubmitReview: () => void;
  seller?: any;
}

export default function ReviewModal({
  isOpen,
  onClose,
  rating,
  setRating,
  review,
  setReview,
  handleSubmitReview,
  seller,
}: ReviewModalProps) {
  const t = useTranslations();

  // Separate validation messages
  const [ratingError, setRatingError] = useState("");
  const [reviewError, setReviewError] = useState("");

  const handleValidateAndSubmit = () => {
    let valid = true;

    // Validate rating
    if (rating === 0) {
      setRatingError(t("review_modal.validation.rating_required"));
      valid = false;
    } else {
      setRatingError("");
    }

    // Validate review
    if (!review.trim()) {
      setReviewError(t("review_modal.validation.review_required"));
      valid = false;
    } else if (review.trim().length < 5) {
      setReviewError(t("review_modal.validation.review_min_length"));
      valid = false;
    } else {
      setReviewError("");
    }

    if (!valid) return;

    handleSubmitReview();
  };

  return (
    <MiddleDrawer
      isOpen={isOpen}
      onClose={onClose}
      title={t("review_modal.give_review")}
      footer={
        <div className="flex justify-end gap-2">
          <Button label={t("review_modal.not_now")} onClick={onClose} variant="fadoutline" />
          <Button
            type="button"
             label={t("review_modal.submit")}
            variant="secondary"
            onClick={handleValidateAndSubmit}
          />
        </div>
      }
    >
      <div className="text-center">
        <h2 className="text-lg font-bold text-neutrals900 mb-4 max-sm:text-base">
          {t("review_modal.experience_with_seller")}
        </h2>

        {seller && (
          <div className="flex items-center w-fit mx-auto justify-center gap-3 bg-neutrals50 p-3 px-4 rounded-md mb-5 dark:bg-cardfooter">
            <img
              src={seller?.imageUrl || "/user-img.png"}
              alt={seller?.name || "Seller"}
              onError={(e) => {
                e.currentTarget.onerror = null;
                e.currentTarget.src = "/profile-avatar.png";
              }}
              className="w-10 h-10 rounded-full border-2 border-primary100 dark:border-neutral-800 object-cover"
            />

            <div className="text-left">
              <p className="font-bold text-neutrals900 text-base dark:text-white">
                {seller?.name}
              </p>
              {seller?.sellerAverageRating ? (
                <p className="text-xs text-gray-500 flex items-center gap-1 dark:text-neutrals400">
                  <FaStar size={12} className="text-kzyellow" />{" "}
                  {seller?.sellerAverageRating.toFixed(1)}/5
                </p>
              ) : (
                <p className="text-xs text-gray-400 dark:text-neutrals500">
                  {t("review_modal.no_ratings_yet")}
                </p>
              )}
            </div>
          </div>
        )}

        <p className="text-sm text-gray-500 mb-5 dark:text-neutrals400">
          {t("review_modal.take_moment")}
        </p>

        {/* ⭐ Rating Section */}
        <div className="flex flex-col items-center mb-5">
          <div className="flex justify-center gap-1 mb-2">
            {[1, 2, 3, 4, 5].map((num) => (
              <FaStar
                key={num}
                size={24}
                className={
                  num <= rating
                    ? "text-kzyellow cursor-pointer"
                    : "text-neutrals200 dark:text-neutrals400 cursor-pointer"
                }
                onClick={() => {
                  setRating(num);
                  setRatingError("");
                }}
                role="button"
              />
            ))}
          </div>
          {ratingError && (
            <p className="text-red-500 text-sm mt-1">{ratingError}</p>
          )}
        </div>

        {/* ✍️ Review Input */}
        <div className="relative mb-2">
          <input
            type="text"
            value={review}
            onChange={(e) => {
              setReview(e.target.value);
              setReviewError("");
            }}
            placeholder="Write your review here..."
            className={`w-full px-4 py-2.5 border rounded-md text-sm placeholder:text-neutrals400 focus:outline-none focus:ring-1 ${
              reviewError
                ? "border-red-400 focus:ring-red-400"
                : "border-neutrals100 focus:ring-primary500 dark:border-darkborder dark:focus:ring-primary400"
            } dark:bg-darkbg dark:text-neutrals400 dark:placeholder:text-neutrals500`}
          />
          {reviewError && (
            <p className="text-red-500 text-sm mt-1 text-left">{reviewError}</p>
          )}
        </div>
      </div>
    </MiddleDrawer>
  );
}