import { MapPin, Star, Users, Calendar, ExternalLink, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Park } from '@/types/database';

interface ParkListViewProps {
  parks: Park[];
  onParkClick: (park: Park) => void;
}

export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
  const getStatusColor = (status: string) => {
    switch (status) {
      case 'operating': return 'bg-green-500/20 text-green-400 border-green-500/30';
      case 'seasonal': return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
      case 'under_construction': return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
      default: return 'bg-red-500/20 text-red-400 border-red-500/30';
    }
  };

  const getParkTypeIcon = (type: string) => {
    switch (type) {
      case 'theme_park': return <Castle className="w-5 h-5" />;
      case 'amusement_park': return <FerrisWheel className="w-5 h-5" />;
      case 'water_park': return <Waves className="w-5 h-5" />;
      case 'family_entertainment': return <Tent className="w-5 h-5" />;
      default: return <FerrisWheel className="w-5 h-5" />;
    }
  };

  const formatParkType = (type: string) => {
    return type.split('_').map(word => 
      word.charAt(0).toUpperCase() + word.slice(1)
    ).join(' ');
  };

  return (
    <div className="space-y-4">
      {parks.map((park) => (
        <Card 
          key={park.id} 
          className="group overflow-hidden border-border/50 bg-gradient-to-r from-card via-card to-card/80 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 cursor-pointer"
          onClick={() => onParkClick(park)}
        >
          <CardContent className="p-0">
            <div className="flex">
              {/* Image */}
              <div className="w-32 h-32 md:w-48 md:h-32 flex-shrink-0 relative overflow-hidden">
                {park.card_image_url ? (
                  <img 
                    src={park.card_image_url} 
                    alt={park.name}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                ) : (
                  <div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center">
                    <span className="opacity-50">
                      {getParkTypeIcon(park.park_type)}
                    </span>
                  </div>
                )}
                
                {/* Status Badge */}
                <Badge 
                  className={`absolute top-2 left-2 text-xs ${getStatusColor(park.status)} border`}
                >
                  {park.status.replace('_', ' ').toUpperCase()}
                </Badge>
              </div>

              {/* Content */}
              <div className="flex-1 p-4 md:p-6 flex flex-col justify-between min-h-[128px]">
                <div className="space-y-2">
                  {/* Header */}
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-1">
                        <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
                          {park.name}
                        </h3>
                        {getParkTypeIcon(park.park_type)}
                      </div>
                      
                      {park.location && (
                        <div className="flex items-center text-sm text-muted-foreground">
                          <MapPin className="w-3 h-3 mr-1" />
                          {park.location.city && `${park.location.city}, `}
                          {park.location.state_province && `${park.location.state_province}, `}
                          {park.location.country}
                        </div>
                      )}
                    </div>

                    {/* Rating */}
                    {park.average_rating > 0 && (
                      <div className="flex items-center gap-1 ml-4">
                        <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                        <span className="font-medium">{park.average_rating.toFixed(1)}</span>
                        <span className="text-sm text-muted-foreground">({park.review_count})</span>
                      </div>
                    )}
                  </div>

                  {/* Description */}
                  {park.description && (
                    <p className="text-sm text-muted-foreground line-clamp-2">
                      {park.description}
                    </p>
                  )}

                  {/* Tags */}
                  <div className="flex items-center gap-2">
                    <Badge variant="outline" className="text-xs">
                      {formatParkType(park.park_type)}
                    </Badge>
                    {park.opening_date && (
                      <Badge variant="outline" className="text-xs">
                        <Calendar className="w-3 h-3 mr-1" />
                        Opened {park.opening_date.split('-')[0]}
                      </Badge>
                    )}
                  </div>
                </div>

                {/* Stats and Actions */}
                <div className="flex items-center justify-between mt-4">
                  <div className="flex items-center gap-6 text-sm">
                    <div className="flex items-center gap-1">
                      <span className="text-primary font-medium">{park.ride_count || 0}</span>
                      <span className="text-muted-foreground">rides</span>
                    </div>
                    <div className="flex items-center gap-1">
                      <span className="text-accent font-medium">{park.coaster_count || 0}</span>
                      <FerrisWheel className="w-3 h-3 text-muted-foreground" />
                    </div>
                    {park.review_count > 0 && (
                      <div className="flex items-center gap-1">
                        <Users className="w-3 h-3 text-muted-foreground" />
                        <span className="text-muted-foreground">{park.review_count} reviews</span>
                      </div>
                    )}
                  </div>

                  <Button 
                    size="sm" 
                    className="bg-gradient-to-r from-primary/80 to-secondary/80 hover:from-primary hover:to-secondary transition-all duration-300"
                  >
                    <ExternalLink className="w-3 h-3 mr-1" />
                    View Details
                  </Button>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}