import React from 'react';
import Link from 'next/link';
import { Metadata } from 'next';
import { Button } from '@/components/ui/Button';
import SeoJsonLd from '@/components/SeoJsonLd';
import { organizationSchema, reviewSchema, aggregateRatingSchema } from '@/lib/schema';
import { testimonials, getAggregateRating } from '@/lib/testimonial-data';
import { Testimonials } from '@/components/marketing/Testimonials';
import { Star } from 'lucide-react';

function truncateAtWord(text: string, maxLength: number): string {
    if (text.length <= maxLength) return text;
    const truncated = text.slice(0, maxLength);
    const lastSpace = truncated.lastIndexOf(' ');
    return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
}

export async function generateMetadata(): Promise<Metadata> {
    const title = truncateAtWord('Customer Testimonials | QR Master Reviews', 60);
    const description = truncateAtWord(
        'Read what our customers say about QR Master. Real reviews from businesses using dynamic QR codes for restaurants, pottery, retail, events, and more.',
        160
    );

    return {
        title,
        description,
        keywords: ['qr master reviews', 'qr code testimonials', 'customer reviews', 'qr code generator reviews', 'dynamic qr code reviews'],
        alternates: {
            canonical: 'https://www.qrmaster.net/testimonials',
        },
        openGraph: {
            title,
            description,
            url: 'https://www.qrmaster.net/testimonials',
            type: 'website',
            images: [
                {
                    url: 'https://www.qrmaster.net/og-image.png',
                    width: 1200,
                    height: 630,
                    alt: 'QR Master Customer Testimonials',
                },
            ],
        },
        twitter: {
            title,
            description,
        },
    };
}

export default function TestimonialsPage() {
    const aggregateRating = getAggregateRating();
    const reviewSchemas = testimonials.map(t => reviewSchema(t));

    return (
        <>
            <SeoJsonLd data={[
                organizationSchema(),
                aggregateRatingSchema(aggregateRating),
                ...reviewSchemas
            ]} />

            <div className="bg-white">
                {/* Hero Section with Aggregate Rating */}
                <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 py-20 sm:py-24">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl text-center">
                        <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 leading-tight mb-6">
                            Customer <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">Testimonials</span>
                        </h1>
                        <p className="text-xl text-gray-600 max-w-2xl mx-auto mb-8 leading-relaxed">
                            Real experiences from businesses using QR Master to create dynamic QR codes
                        </p>

                        {/* Aggregate Rating Display */}
                        <div className="flex flex-col items-center justify-center gap-3 mb-10">
                            <div className="flex gap-1" aria-label={`${aggregateRating.ratingValue} out of 5 stars`}>
                                {[...Array(5)].map((_, index) => (
                                    <Star
                                        key={index}
                                        className={`w-8 h-8 ${index < aggregateRating.ratingValue
                                            ? 'fill-yellow-400 text-yellow-400'
                                            : 'fill-gray-200 text-gray-200'
                                            }`}
                                    />
                                ))}
                            </div>
                            <p className="text-lg text-gray-700">
                                <span className="font-bold text-2xl">{aggregateRating.ratingValue}</span> out of 5 stars
                            </p>
                            <p className="text-sm text-gray-500">
                                Based on {aggregateRating.reviewCount} {aggregateRating.reviewCount === 1 ? 'review' : 'reviews'}
                            </p>
                        </div>

                        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
                            <Link href="/signup">
                                <Button size="lg" className="text-lg px-8 py-6 shadow-lg shadow-blue-500/25">
                                    Get Started Free
                                </Button>
                            </Link>
                        </div>
                    </div>
                </section>

                {/* Testimonials Grid */}
                <Testimonials
                    testimonials={testimonials}
                    showAll={true}
                    title="What Our Customers Are Saying"
                    subtitle="Discover how businesses use QR Master for their unique needs"
                />

                {/* CTA Section */}
                <section className="py-20 bg-gradient-to-br from-blue-50 via-white to-purple-50">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl text-center">
                        <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">
                            Ready to create your own QR codes?
                        </h2>
                        <p className="text-xl text-gray-600 mb-10 max-w-2xl mx-auto">
                            Join businesses using QR Master to create dynamic, trackable QR codes for their products, menus, events, and campaigns.
                        </p>
                        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
                            <Link href="/signup">
                                <Button size="lg" className="text-lg px-8 py-6">
                                    Start Free Today
                                </Button>
                            </Link>
                            <Link href="/pricing">
                                <Button variant="outline" size="lg" className="text-lg px-8 py-6">
                                    View Pricing
                                </Button>
                            </Link>
                        </div>
                    </div>
                </section>


            </div>
        </>
    );
}
