"use client";

import Link from "next/link";
import { BadgeCheck, MessageSquareText } from "lucide-react";
import { useEffect, useState } from "react";
import { StarRating } from "@/components/product/star-rating";

type Review = { id: string; author_name: string; rating: number; title: string | null; content: string; created_at: string; verified_purchase: boolean };

// Reseñas de la ficha: solo las aprobadas por el dueño (el backend no
// devuelve las pendientes), siempre de compradores verificados.
export function ProductReviews({ productId }: { productId: string }) {
  const [data, setData] = useState<{ reviews: Review[]; average: number; count: number } | null>(null);

  useEffect(() => {
    fetch(`/api/reviews?product_id=${encodeURIComponent(productId)}`)
      .then((response) => response.json())
      .then(setData)
      .catch(() => setData({ reviews: [], average: 0, count: 0 }));
  }, [productId]);

  return (
    <section id="resenas" aria-labelledby="resenas-titulo" className="mt-10 scroll-mt-40">
      <h2 id="resenas-titulo" className="flex items-center gap-2 text-sm font-black uppercase tracking-wide text-slate-500">
        <MessageSquareText className="size-4" />
        Reseñas de clientes
      </h2>
      {!data ? (
        <p className="mt-4 text-sm text-slate-400">Cargando reseñas…</p>
      ) : data.count === 0 ? (
        <div className="mt-4 rounded-2xl border border-dashed border-slate-300 p-5 text-sm text-slate-600">
          Aún no hay reseñas de este producto. ¿Ya lo compraste?{" "}
          <Link href="/cuenta/pedidos" className="font-bold text-ari-marino underline decoration-ari-coral-claro underline-offset-2">Califícalo desde Mis pedidos</Link>.
        </div>
      ) : (
        <>
          <div className="mt-4 flex items-center gap-3">
            <StarRating value={data.average} size="lg" />
            <span className="text-2xl font-black text-ari-marino">{data.average.toLocaleString("es-CO", { minimumFractionDigits: 1 })}</span>
            <span className="text-sm text-slate-500">de 5 · {data.count} {data.count === 1 ? "reseña" : "reseñas"}</span>
          </div>
          <ul className="mt-6 grid gap-4">
            {data.reviews.map((review) => (
              <li key={review.id} className="rounded-2xl border border-slate-200 p-5">
                <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
                  <StarRating value={review.rating} />
                  {review.title && <strong className="text-slate-900">{review.title}</strong>}
                </div>
                <p className="mt-2 whitespace-pre-line text-sm leading-6 text-slate-700">{review.content}</p>
                <p className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-500">
                  <span className="font-bold text-slate-700">{review.author_name}</span>
                  <span>{new Date(review.created_at).toLocaleDateString("es-CO", { year: "numeric", month: "long", day: "numeric" })}</span>
                  {review.verified_purchase && (
                    <span className="inline-flex items-center gap-1 font-bold text-emerald-700"><BadgeCheck className="size-3.5" />Compra verificada</span>
                  )}
                </p>
              </li>
            ))}
          </ul>
        </>
      )}
    </section>
  );
}