import { useQuery } from '@tanstack/react-query';
import { Link } from '@tanstack/react-router';
import { CheckCircle2, ChevronRight } from 'lucide-react';
import StarRating from '@/components/StarRating';
import { wc } from '@/lib/woocommerce';
import { useReviewStats } from '@/hooks/useReviewStats';
import { useT, useLang, locale } from '@/lib/i18n';

const strip = (s: string) => s.replace(/<[^>]*>/g, ' ').replace(/&[a-z#0-9]+;/gi, ' ').replace(/\s+/g, ' ').trim();

/**
 * Live, approved WooCommerce/CusRev reviews with real average, source and date.
 * The page builder passes its own heading; the homepage uses the defaults.
 */
export default function HomeReviews({ heading, eyebrow }: { heading?: string; eyebrow?: string } = {}) {
  const t = useT();
  const lang = useLang();
  const { data: stats } = useReviewStats();
  const { data } = useQuery({
    queryKey: ['home-reviews', 'v1'],
    queryFn: () => wc.getProductReviews(undefined, { per_page: 12, orderby: 'date', order: 'desc' }),
    staleTime: 30 * 60 * 1000,
  });
  const reviews = (data?.data ?? []).filter((r) => r.rating >= 4 && strip(r.review).length >= 20).slice(0, 3);
  return (
    <section className="bg-surface/50" aria-labelledby="reviews-heading">
      <div className="container py-20">
        <div className="text-center max-w-2xl mx-auto mb-12">
          <p className="text-primary text-xs font-bold uppercase tracking-[0.24em] mb-2">{eyebrow ?? t('Klantbeoordelingen', 'Customer reviews')}</p>
          <h2 id="reviews-heading" className="text-display text-4xl md:text-5xl uppercase tracking-tighter mb-3">{heading ?? t('Beoordeeld door klanten', 'Rated by customers')}</h2>
          {stats && stats.total > 0 && <div className="flex items-center justify-center gap-2 flex-wrap">
            <StarRating rating={stats.average} sizeClass="w-4 h-4" />
            <span className="text-sm text-muted-foreground">{stats.average.toFixed(1).replace('.', lang === 'en' ? '.' : ',')} / 5 {t('op basis van', 'based on')} {stats.total} reviews · <Link to="/reviews" className="text-primary font-semibold hover:underline">{t('verzameld via CusRev', 'collected via CusRev')}</Link></span>
          </div>}
        </div>
        {reviews.length === 0 && <p className="text-center text-sm text-muted-foreground max-w-xl mx-auto">{t('We tonen hier alleen echte, goedgekeurde klantreviews. Er staan er nog geen online.', 'We only show real, approved customer reviews here. There are none online yet.')}</p>}
        {reviews.length > 0 && <div className="grid md:grid-cols-3 gap-5">{reviews.map((r) => <figure key={r.id} className="bg-card border border-border/60 rounded-2xl p-6 shadow-card flex flex-col">
          <StarRating rating={r.rating} sizeClass="w-3.5 h-3.5" className="mb-3" />
          <blockquote className="text-sm text-foreground leading-relaxed mb-4 line-clamp-5 flex-1">"{strip(r.review)}"</blockquote>
          <figcaption className="text-xs space-y-1">
            <div className="flex items-center gap-1.5"><span className="font-semibold text-foreground">{r.reviewer}</span>{r.verified && <span className="inline-flex items-center gap-1 text-primary"><CheckCircle2 className="w-3.5 h-3.5" /> {t('Geverifieerde aankoop', 'Verified purchase')}</span>}</div>
            <div className="text-muted-foreground">{new Date(r.date_created).toLocaleDateString(locale(lang), { day: 'numeric', month: 'long', year: 'numeric' })}{r.product_name ? ` · ${strip(r.product_name)}` : ''}</div>
          </figcaption>
        </figure>)}</div>}
        <div className="mt-8 text-center">
          <Link to="/reviews" className="inline-flex items-center gap-1 text-sm text-primary font-semibold hover:underline">{t('Alle reviews bekijken', 'View all reviews')} <ChevronRight className="w-4 h-4" /></Link>
          <p className="mt-2 text-xs text-muted-foreground">{t('"Geverifieerde aankoop" betekent: de reviewer heeft het product aantoonbaar bij ons besteld (gekoppeld aan een bestelling in onze webshop).', '"Verified purchase" means: the reviewer has demonstrably ordered the product from us (linked to an order in our webshop).')}</p>
        </div>
      </div>
    </section>
  );
}