import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Star, Plus } from 'lucide-react';
import { ReviewsList } from './ReviewsList';
import { ReviewForm } from './ReviewForm';

interface ReviewsSectionProps {
  entityType: 'park' | 'ride';
  entityId: string;
  entityName: string;
  averageRating: number;
  reviewCount: number;
}

export function ReviewsSection({ 
  entityType, 
  entityId, 
  entityName, 
  averageRating, 
  reviewCount 
}: ReviewsSectionProps) {
  const [showForm, setShowForm] = useState(false);
  const [refreshKey, setRefreshKey] = useState(0);

  const handleReviewSubmitted = () => {
    setShowForm(false);
    setRefreshKey(prev => prev + 1);
  };

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

  return (
    <div className="space-y-6">
      {/* Reviews Summary */}
      {reviewCount > 0 && (
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="text-center">
                  <div className="text-3xl font-bold">{averageRating.toFixed(1)}</div>
                  <div className="flex items-center gap-1 justify-center">
                    {renderStars(averageRating)}
                  </div>
                  <div className="text-sm text-muted-foreground">
                    {reviewCount} review{reviewCount !== 1 ? 's' : ''}
                  </div>
                </div>
              </div>
              
              <Button onClick={() => setShowForm(!showForm)}>
                <Plus className="w-4 h-4 mr-2" />
                Write Review
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Review Form */}
      {showForm && (
        <ReviewForm
          entityType={entityType}
          entityId={entityId}
          entityName={entityName}
          onReviewSubmitted={handleReviewSubmitted}
        />
      )}

      {/* Show write review button if no reviews yet and form not shown */}
      {reviewCount === 0 && !showForm && (
        <Card>
          <CardContent className="p-6 text-center">
            <Star className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
            <h3 className="text-lg font-semibold mb-2">No Reviews Yet</h3>
            <p className="text-muted-foreground mb-4">
              Be the first to share your experience with {entityName}!
            </p>
            <Button onClick={() => setShowForm(true)}>
              <Plus className="w-4 h-4 mr-2" />
              Write First Review
            </Button>
          </CardContent>
        </Card>
      )}

      {/* Reviews List */}
      <ReviewsList
        key={refreshKey}
        entityType={entityType}
        entityId={entityId}
        entityName={entityName}
      />
    </div>
  );
}