"use client";

import { useState } from "react";
import { RiStarFill, RiVerifiedBadgeFill, RiStarLine } from "@remixicon/react";
import { useProduct } from "@/app/(users)/product/[slug]/product-page-client";
import { submitReview } from "@/lib/actions/reviews";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

function RatingStars({ rating }: { rating: number }) {
  return (
    <div className="flex items-center gap-0.5 text-primary">
      {Array.from({ length: 5 }).map((_, index) => (
        <RiStarFill
          key={index}
          className={`h-4 w-4 ${
            index < rating ? "fill-current" : "text-outline"
          }`}
        />
      ))}
    </div>
  );
}

export default function ProductReviews() {
  const product = useProduct();
  const { reviews } = product;

  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const [rating, setRating] = useState(0);
  const [hover, setHover] = useState(0);
  const [submitting, setSubmitting] = useState(false);
  const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(
    null,
  );

  // Build rating distribution from review items
  const distribution = [5, 4, 3, 2, 1].map((stars) => {
    const count = reviews.items.filter((r) => r.rating === stars).length;
    const pct = reviews.count > 0 ? Math.round((count / reviews.count) * 100) : 0;
    return { stars, percentage: pct };
  });

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setMessage(null);
    if (rating === 0) {
      setMessage({ ok: false, text: "Please select a star rating." });
      return;
    }
    setSubmitting(true);
    const res = await submitReview({
      productId: product.id,
      name,
      email,
      title: title || undefined,
      body,
      rating,
    });
    setSubmitting(false);
    if (res.ok) {
      setMessage({
        ok: true,
        text: res.message ?? "Thanks for your review!",
      });
      setName("");
      setEmail("");
      setTitle("");
      setBody("");
      setRating(0);
    } else {
      setMessage({ ok: false, text: res.error });
    }
  }

  return (
    <section className="p-20">
      <div className="grid gap-12 lg:grid-cols-[320px_1fr]">
        <aside className="top-24 h-fit rounded-2xl border border-outline-variant bg-surface p-6">
          <h2 className="mb-6 text-xl font-bold">Customer Reviews</h2>

          {reviews.count > 0 ? (
            <>
              <div className="mb-8 flex items-center gap-4">
                <span className="text-6xl font-bold">{reviews.average}</span>

                <div>
                  <RatingStars rating={Math.round(reviews.average)} />

                  <p className="mt-2 text-sm text-on-surface-variant">
                    Based on <span className="font-semibold">{reviews.count.toLocaleString()}</span> reviews
                  </p>
                </div>
              </div>

              <div className="space-y-4">
                {distribution.map((item) => (
                  <div key={item.stars} className="flex items-center gap-3">
                    <span className="w-3 text-sm font-medium">{item.stars}</span>

                    <div className="h-2 flex-1 overflow-hidden rounded-full bg-surface-container">
                      <div
                        className="h-full rounded-full bg-primary transition-all duration-500"
                        style={{ width: `${item.percentage}%` }}
                      />
                    </div>

                    <span className="w-10 text-right text-sm text-on-surface-variant">
                      {item.percentage}%
                    </span>
                  </div>
                ))}
              </div>
            </>
          ) : (
            <p className="text-sm text-on-surface-variant">
              No reviews yet for this product.
            </p>
          )}
        </aside>

        <div className="space-y-6">
          {/* Write a review */}
          <form
            onSubmit={handleSubmit}
            className="rounded-2xl border border-outline-variant bg-surface p-6"
          >
            <h3 className="mb-4 text-lg font-bold">Write a Review</h3>

            <div className="mb-4 flex items-center gap-1">
              {[1, 2, 3, 4, 5].map((star) => {
                const active = star <= (hover || rating);
                return (
                  <button
                    key={star}
                    type="button"
                    onMouseEnter={() => setHover(star)}
                    onMouseLeave={() => setHover(0)}
                    onClick={() => setRating(star)}
                    aria-label={`${star} star${star > 1 ? "s" : ""}`}
                    className="text-primary"
                  >
                    {active ? (
                      <RiStarFill className="h-6 w-6 fill-current" />
                    ) : (
                      <RiStarLine className="h-6 w-6" />
                    )}
                  </button>
                );
              })}
            </div>

            <div className="mb-4 grid gap-4 md:grid-cols-2">
              <div>
                <label
                  htmlFor="review-name"
                  className="mb-1 block text-sm font-medium"
                >
                  Name *
                </label>
                <Input
                  id="review-name"
                  required
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  placeholder="Your name"
                />
              </div>
              <div>
                <label
                  htmlFor="review-email"
                  className="mb-1 block text-sm font-medium"
                >
                  Email
                </label>
                <Input
                  id="review-email"
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="you@example.com"
                />
              </div>
            </div>

            <div className="mb-4">
              <label
                htmlFor="review-title"
                className="mb-1 block text-sm font-medium"
              >
                Title
              </label>
              <Input
                id="review-title"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                placeholder="Short summary of your experience"
              />
            </div>

            <div className="mb-4">
              <label
                htmlFor="review-body"
                className="mb-1 block text-sm font-medium"
              >
                Review *
              </label>
              <Textarea
                id="review-body"
                required
                value={body}
                onChange={(e) => setBody(e.target.value)}
                placeholder="What did you like or dislike?"
                className="min-h-28 resize-none"
              />
            </div>

            {message && (
              <p
                role="alert"
                className={`mb-4 text-sm ${
                  message.ok ? "text-green-600" : "text-red-600"
                }`}
              >
                {message.text}
              </p>
            )}

            <Button type="submit" disabled={submitting}>
              {submitting ? "Submitting..." : "Submit Review"}
            </Button>
          </form>

          {reviews.items.length === 0 ? (
            <p className="text-center text-muted-foreground py-12">
              No reviews yet. Be the first to review this product!
            </p>
          ) : (
            reviews.items.map((review) => (
              <article
                key={review.id}
                className="rounded-2xl border border-outline-variant bg-surface p-6"
              >
                <div className="mb-4 flex items-start justify-between gap-4">
                  <div>
                    <RatingStars rating={review.rating} />

                    {review.title && (
                      <h3 className="mt-2 font-semibold">{review.title}</h3>
                    )}
                  </div>

                  {review.createdAt && (
                    <span className="text-sm text-on-surface-variant">
                      {new Date(review.createdAt).toLocaleDateString("en-US", {
                        month: "short",
                        day: "numeric",
                        year: "numeric",
                      })}
                    </span>
                  )}
                </div>

                <p className="mb-5 leading-7 text-on-surface-variant">
                  {review.body}
                </p>

                <div className="flex items-center gap-2">
                  <span className="font-medium">{review.name}</span>

                  {review.isVerified && (
                    <>
                      <RiVerifiedBadgeFill className="h-5 w-5 text-green-600" />
                      <span className="text-sm font-medium text-green-600">
                        Verified Buyer
                      </span>
                    </>
                  )}
                </div>
              </article>
            ))
          )}
        </div>
      </div>
    </section>
  );
}