import { Quote, Star } from 'lucide-react';
import { type Brand, PublicShell } from '@/components/public/PublicShell';
import { date } from '@/lib/format';

type Review = { rating: number; comment: string | null; name: string | null; role: string | null; featured: boolean; date: string | null };

export function Stars({ n, color, empty, size = 16 }: { n: number; color: string; empty: string; size?: number }) {
    return (
        <span className="inline-flex" aria-label={`${n} out of 5 stars`} role="img">
            {[1, 2, 3, 4, 5].map((i) => <Star key={i} style={{ width: size, height: size, color: i <= Math.round(n) ? color : empty, fill: i <= Math.round(n) ? color : 'transparent' }} strokeWidth={1.5} aria-hidden />)}
        </span>
    );
}

/** A company's published client reviews (public page, or the compact ?embed=1 widget). */
export default function Reviews({ brand, reviews, stats, embed, pageUrl }: { brand: Brand; reviews: Review[]; stats: { count: number; average: number }; embed: boolean; pageUrl: string }) {
    return (
        <PublicShell brand={brand} title="Client reviews" embed={embed} width={embed ? 'max-w-5xl' : 'max-w-3xl'}>
            {({ p, hf }) => (
                <div>
                    <div className={embed ? 'mb-3 flex flex-wrap items-center gap-3' : 'mb-6 text-center'}>
                        {!embed && <h1 className="text-3xl font-semibold" style={hf}>What our clients say</h1>}
                        {stats.count > 0 && (
                            <div className={embed ? 'flex items-center gap-2' : 'mt-3 flex items-center justify-center gap-2'} data-testid="reviews-summary">
                                <Stars n={stats.average} color={p.accent} empty={p.cardLine} size={20} />
                                <span className="text-sm font-medium">{stats.average.toFixed(1)} from {stats.count} review{stats.count === 1 ? '' : 's'}</span>
                            </div>
                        )}
                    </div>
                    {reviews.length === 0 && <p className="text-center text-sm" style={{ color: p.muted }}>No reviews yet.</p>}
                    <div className={embed ? 'grid gap-3 sm:grid-cols-2 lg:grid-cols-3' : 'grid gap-4'}>
                        {reviews.map((r, i) => (
                            <figure key={i} className="rounded-2xl p-5" style={{ background: p.bg, border: `1px solid ${p.cardLine}` }} data-testid="public-review">
                                <div className="flex items-center justify-between gap-2">
                                    <Stars n={r.rating} color={p.accent} empty={p.cardLine} />
                                    {!embed && r.date && <span className="text-xs" style={{ color: p.muted }}>{date(r.date)}</span>}
                                </div>
                                {r.comment && <blockquote className="mt-3 text-[15px] leading-relaxed"><Quote className="mb-1 h-4 w-4 opacity-40" aria-hidden />{r.comment}</blockquote>}
                                <figcaption className="mt-3 text-sm"><span className="font-semibold" style={hf}>{r.name}</span>{r.role && <span style={{ color: p.muted }}>, {r.role}</span>}</figcaption>
                            </figure>
                        ))}
                    </div>
                    {embed && stats.count > reviews.length && (
                        <p className="mt-3 text-sm"><a href={pageUrl} target="_blank" rel="noopener" className="underline" style={{ color: p.accentInk }}>Read all {stats.count} reviews</a></p>
                    )}
                </div>
            )}
        </PublicShell>
    );
}