
import { Suspense } from 'react';
import { getServerSession } from 'next-auth';
import { redirect } from 'next/navigation';
import { authOptions } from '@/lib/auth';
import { ReviewList } from '@/components/reviews/review-list';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { Star, TrendingUp, Users, MessageSquare } from 'lucide-react';

export const metadata = {
  title: 'Customer Reviews | Quote2Contract',
  description: 'Read verified customer reviews and testimonials',
};

export default async function ReviewsPage() {
  const session = await getServerSession(authOptions);

  return (
    <div className="min-h-screen bg-background">
      {/* Hero Section */}
      <div className="bg-gradient-to-r from-emerald-600 to-teal-600 text-white">
        <div className="container mx-auto px-4 py-16">
          <div className="max-w-3xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">
              Customer Reviews & Testimonials
            </h1>
            <p className="text-xl text-emerald-100">
              See what our customers say about their experience with our verified contractors
            </p>

            {/* Stats */}
            <div className="grid grid-cols-3 gap-6 mt-12">
              <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6">
                <Star className="w-8 h-8 mx-auto mb-2 text-amber-300 fill-amber-300" />
                <div className="text-3xl font-bold">4.8</div>
                <div className="text-sm text-emerald-100">Average Rating</div>
              </div>
              <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6">
                <MessageSquare className="w-8 h-8 mx-auto mb-2" />
                <div className="text-3xl font-bold">500+</div>
                <div className="text-sm text-emerald-100">Reviews</div>
              </div>
              <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6">
                <TrendingUp className="w-8 h-8 mx-auto mb-2" />
                <div className="text-3xl font-bold">98%</div>
                <div className="text-sm text-emerald-100">Satisfaction</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Reviews Section */}
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-5xl mx-auto">
          {/* Filters could go here */}
          
          <Suspense fallback={<LoadingSkeleton />}>
            {/* Show all reviews - you can filter by contractor if needed */}
            <ReviewList contractorId="all" limit={50} showStats={false} />
          </Suspense>
        </div>
      </div>
    </div>
  );
}

function LoadingSkeleton() {
  return (
    <div className="space-y-4">
      {[1, 2, 3, 4, 5].map((i) => (
        <Card key={i}>
          <CardContent className="p-6">
            <Skeleton className="h-32" />
          </CardContent>
        </Card>
      ))}
    </div>
  );
}
