"use client"; import { useMemo, useState } from "react"; import Image from "next/image"; import Link from "next/link"; import { CheckCircle2, Clock3, Loader2, MessageSquareText, Send, Star, UserCircle2, XCircle } from "lucide-react"; type ReviewStatus = "pending" | "approved" | "rejected"; type ReviewItem = { id: string; client_id: string; rating: number; comment: string; status: ReviewStatus; created_at: string; updated_at?: string | null; client_name: string; client_avatar_url: string | null; }; function formatReviewDate(value?: string | null) { if (!value) return ""; return new Date(value).toLocaleDateString("pt-BR", { day: "2-digit", month: "short", year: "numeric", }); } function statusMeta(status: ReviewStatus) { if (status === "approved") { return { label: "Aprovado", className: "border-emerald-200 bg-emerald-50 text-emerald-700", icon: CheckCircle2, }; } if (status === "rejected") { return { label: "Ajuste necessário", className: "border-rose-200 bg-rose-50 text-rose-700", icon: XCircle, }; } return { label: "Aguardando aprovação", className: "border-amber-200 bg-amber-50 text-amber-700", icon: Clock3, }; } function Stars({ value, interactive = false, onChange, size = 18, }: { value: number; interactive?: boolean; onChange?: (value: number) => void; size?: number; }) { return (
{Array.from({ length: 5 }).map((_, index) => { const starValue = index + 1; const filled = starValue <= Math.round(value); const Icon = Star; if (interactive) { return ( ); } return ( ); })}
); } export default function ProductReviewsSection({ slug, productId, loggedClient, approvedReviews, ownReview, reviewCount, averageRating, loginHref, }: { slug: string; productId: string; loggedClient?: { id: string; name: string; avatar_url: string | null } | null; approvedReviews: ReviewItem[]; ownReview: ReviewItem | null; reviewCount: number; averageRating: number; loginHref: string; }) { const [currentApprovedReviews, setCurrentApprovedReviews] = useState(approvedReviews); const [currentOwnReview, setCurrentOwnReview] = useState(ownReview); const [rating, setRating] = useState(ownReview?.rating || 5); const [comment, setComment] = useState(ownReview?.comment || ""); const [submitting, setSubmitting] = useState(false); const [feedback, setFeedback] = useState<{ type: "success" | "error"; text: string } | null>(null); const summary = useMemo(() => { const total = currentApprovedReviews.length; const average = total ? currentApprovedReviews.reduce((sum, review) => sum + Number(review.rating || 0), 0) / total : averageRating; const distribution = Array.from({ length: 5 }).map((_, index) => { const star = 5 - index; const count = currentApprovedReviews.filter((review) => review.rating === star).length; const percentage = total ? (count / total) * 100 : 0; return { star, count, percentage }; }); return { total, average: total ? average : averageRating, distribution, }; }, [averageRating, currentApprovedReviews]); const currentStatus = currentOwnReview ? statusMeta(currentOwnReview.status) : null; async function handleSubmit(event: React.FormEvent) { event.preventDefault(); if (!loggedClient?.id) return; if (rating < 1 || rating > 5) { setFeedback({ type: "error", text: "Selecione uma nota de 1 a 5 estrelas." }); return; } if (comment.trim().length < 8) { setFeedback({ type: "error", text: "Escreva um comentário mais completo para enviar." }); return; } setSubmitting(true); setFeedback(null); try { const response = await fetch("/api/client-portal/reviews", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ slug, productId, reviewId: currentOwnReview?.id || null, rating, comment, }), }); const data = (await response.json()) as { error?: string; review?: ReviewItem; }; if (!response.ok || data.error || !data.review) { throw new Error(data.error || "Não foi possível enviar sua avaliação."); } setCurrentOwnReview(data.review); setFeedback({ type: "success", text: "Avaliação enviada e aguardando aprovação da loja.", }); } catch (error) { setFeedback({ type: "error", text: error instanceof Error ? error.message : "Não foi possível enviar sua avaliação.", }); } finally { setSubmitting(false); } } return (

Avaliações

{summary.average > 0 ? summary.average.toFixed(1) : "0.0"}
{reviewCount} avaliaç{reviewCount === 1 ? "ão" : "ões"} {currentStatus && currentOwnReview?.status !== "approved" ? ( {currentStatus.label} ) : null}
{summary.distribution.map((item) => (
{item.star}★
{item.count}
))}
{currentApprovedReviews.length === 0 ? (
Ainda não há comentários aprovados.
) : (
{currentApprovedReviews.map((review, index) => (
{review.client_avatar_url ? ( {review.client_name} ) : ( )}
{review.client_name}
{formatReviewDate(review.created_at)}

{review.comment}

))}
)}