import { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Star, ThumbsUp, Calendar, MapPin } from 'lucide-react';
import { supabase } from '@/integrations/supabase/client';

interface ReviewWithProfile {
  id: string;
  user_id: string;
  park_id: string | null;
  ride_id: string | null;
  rating: number;
  title: string | null;
  content: string | null;
  visit_date: string | null;
  wait_time_minutes: number | null;
  helpful_votes: number;
  total_votes: number;
  moderation_status: string;
  created_at: string;
  updated_at: string;
  profiles?: {
    username: string;
    avatar_url: string | null;
    display_name: string | null;
  } | null;
}

interface ReviewsListProps {
  entityType: 'park' | 'ride';
  entityId: string;
  entityName: string;
}

export function ReviewsList({ entityType, entityId, entityName }: ReviewsListProps) {
  const [reviews, setReviews] = useState<ReviewWithProfile[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchReviews();
  }, [entityType, entityId]);

  const fetchReviews = async () => {
    try {
      const query = supabase
        .from('reviews')
        .select(`
          *,
          profiles:user_id(username, avatar_url, display_name)
        `)
        .eq('moderation_status', 'approved')
        .order('created_at', { ascending: false });

      if (entityType === 'park') {
        query.eq('park_id', entityId);
      } else {
        query.eq('ride_id', entityId);
      }

      const { data } = await query;
      setReviews(data as any || []);
    } catch (error) {
      console.error('Error fetching reviews:', error);
    } finally {
      setLoading(false);
    }
  };

  const renderStars = (rating: number) => {
    return Array.from({ length: 5 }, (_, i) => (
      <Star
        key={i}
        className={`w-4 h-4 ${
          i < rating 
            ? 'fill-yellow-400 text-yellow-400' 
            : 'text-muted-foreground'
        }`}
      />
    ));
  };

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  };

  if (loading) {
    return (
      <div className="space-y-4">
        {Array.from({ length: 3 }, (_, i) => (
          <Card key={i} className="animate-pulse">
            <CardContent className="p-6">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-muted rounded-full"></div>
                <div className="flex-1 space-y-2">
                  <div className="h-4 bg-muted rounded w-1/4"></div>
                  <div className="h-4 bg-muted rounded w-1/6"></div>
                  <div className="h-20 bg-muted rounded"></div>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    );
  }

  if (reviews.length === 0) {
    return (
      <div className="text-center py-12">
        <Star className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
        <h3 className="text-xl font-semibold mb-2">No Reviews Yet</h3>
        <p className="text-muted-foreground">
          Be the first to share your experience with {entityName}!
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold">
          {reviews.length} Review{reviews.length !== 1 ? 's' : ''}
        </h3>
      </div>

      <div className="space-y-4">
        {reviews.map((review) => (
          <Card key={review.id}>
            <CardContent className="p-6">
              <div className="flex items-start gap-4">
                <Avatar className="w-12 h-12">
                  <AvatarImage src={review.profiles?.avatar_url || ''} />
                  <AvatarFallback>
                    {(review.profiles?.display_name || review.profiles?.username || 'U').charAt(0).toUpperCase()}
                  </AvatarFallback>
                </Avatar>

                <div className="flex-1 space-y-3">
                  <div className="flex items-center justify-between">
                    <div>
                      <div className="font-medium">
                        {review.profiles?.display_name || review.profiles?.username || 'Anonymous User'}
                      </div>
                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
                        <Calendar className="w-3 h-3" />
                        {formatDate(review.created_at)}
                        {review.visit_date && (
                          <>
                            <span>•</span>
                            <span>Visited {formatDate(review.visit_date)}</span>
                          </>
                        )}
                      </div>
                    </div>
                    <div className="flex items-center gap-1">
                      {renderStars(review.rating)}
                    </div>
                  </div>

                  {review.title && (
                    <h4 className="font-medium text-lg">{review.title}</h4>
                  )}

                  {review.content && (
                    <p className="text-muted-foreground leading-relaxed">
                      {review.content}
                    </p>
                  )}

                  <div className="flex items-center gap-4 text-sm">
                    {review.wait_time_minutes && (
                      <div className="flex items-center gap-1 text-muted-foreground">
                        <MapPin className="w-3 h-3" />
                        <span>Wait time: {review.wait_time_minutes} min</span>
                      </div>
                    )}
                    
                    <div className="flex items-center gap-1 text-muted-foreground">
                      <ThumbsUp className="w-3 h-3" />
                      <span>{review.helpful_votes} helpful</span>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}