/** خلاصه امتیاز و فهرست نظرات کاربران */
import type { Review } from "@/types/catalog";
import { skinTypes } from "@/data/taxonomy";
import { faNumber, formatJalali } from "@/lib/format";
import { Icon } from "@/components/ui/Icon";
import { ReviewForm } from "./ReviewForm";
import { Stars } from "@/components/ui/Stars";

export function ReviewsSection({ reviews, rating, productPath, productId, signedIn }: { reviews: Review[]; rating: number; productPath: string; productId: number; signedIn: boolean }) {
  const dist = [5, 4, 3, 2, 1].map((star) => ({ star, count: reviews.filter((r) => r.rating === star).length }));
  const recommend = Math.round((reviews.filter((r) => r.rating >= 4).length / Math.max(1, reviews.length)) * 100);

  return (
    <section id="reviews" className="scroll-mt-32">
      <h2 className="section-title mb-6">نظرات و امتیاز</h2>
      <div className="grid gap-8 md:grid-cols-[280px_1fr] md:gap-14">
        <div className="space-y-5">
          <div className="flex items-end gap-3">
            <span className="text-5xl font-extrabold">{faNumber(rating)}</span>
            <div className="pb-1.5">
              <Stars rating={rating} size={15} />
              <p className="mt-1 text-xs text-muted">از {faNumber(reviews.length)} نظر</p>
            </div>
          </div>
          <ul className="space-y-1.5">
            {dist.map((d) => (
              <li key={d.star} className="flex items-center gap-3 text-xs">
                <span className="w-3">{faNumber(d.star)}</span>
                <span className="h-1.5 flex-1 overflow-hidden rounded-full bg-fog">
                  <span className="block h-full rounded-full bg-ink" style={{ width: `${(d.count / Math.max(1, reviews.length)) * 100}%` }} />
                </span>
                <span className="w-4 text-muted">{faNumber(d.count)}</span>
              </li>
            ))}
          </ul>
          <p className="text-sm">
            <span className="font-bold">٪{faNumber(recommend)}</span> از خریداران این محصول را پیشنهاد می‌کنند.
          </p>
          <ReviewForm productId={productId} signedIn={signedIn} productPath={productPath} />
        </div>

        <ul className="divide-y divide-line">
          {reviews.map((r) => (
            <li key={r.id} className="py-5 first:pt-0">
              <div className="flex items-center justify-between gap-3">
                <Stars rating={r.rating} size={12} />
                <time dateTime={r.createdAt} className="text-xs text-muted">{formatJalali(r.createdAt)}</time>
              </div>
              <h3 className="mt-2 text-sm font-bold">{r.title}</h3>
              <p className="mt-1 text-sm leading-7 text-ink-soft">{r.body}</p>
              <p className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted">
                <span>{r.author}</span>
                {r.skinTypeId && <span>پوست {skinTypes.find((s) => s.id === r.skinTypeId)?.name}</span>}
                {r.verifiedPurchase && (
                  <span className="flex items-center gap-1 text-ink">
                    <Icon name="check" size={12} strokeWidth={2} />
                    خریدار این کالا
                  </span>
                )}
              </p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}