import { MapPin, Star, Zap, Ruler, Clock, Factory, Castle } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Ride } from '@/types/database';
import { cn } from '@/lib/utils';

interface RideListViewProps {
  rides: Ride[];
  onRideClick: (ride: Ride) => void;
}

export function RideListView({ rides, onRideClick }: RideListViewProps) {
  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';
      case 'closed': return 'bg-red-500/20 text-red-400 border-red-500/30';
      default: return 'bg-gray-500/20 text-gray-400 border-gray-500/30';
    }
  };

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

  return (
    <div className="space-y-3">
      {rides.map((ride, index) => (
        <Card 
          key={ride.id}
          className={cn(
            "group overflow-hidden cursor-pointer",
            "border-border/40 bg-gradient-to-br from-card via-card/95 to-card/90",
            "hover:border-primary/30 hover:shadow-2xl hover:shadow-primary/5",
            "transition-all duration-500 animate-fade-in-up"
          )}
          style={{ animationDelay: `${index * 50}ms` }}
          onClick={() => onRideClick(ride)}
        >
          <CardContent className="p-0">
            <div className="flex flex-col sm:flex-row">
              {/* Image */}
              <div className="w-full h-40 sm:w-40 sm:h-auto md:w-48 flex-shrink-0 self-stretch relative overflow-hidden">
                {ride.card_image_url ? (
                  <>
                    <img 
                      src={ride.card_image_url} 
                      alt={ride.name}
                      className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                  </>
                ) : (
                  <div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative overflow-hidden">
                    <Castle className="w-12 h-12 opacity-50 z-10 relative" />
                    <div className="absolute inset-0 bg-gradient-to-tr from-primary/10 to-transparent group-hover:scale-110 transition-transform duration-700" />
                  </div>
                )}
                
                {/* Status Badge */}
                <Badge 
                  className={cn(
                    "absolute top-2 left-2 text-xs border backdrop-blur-sm",
                    getStatusColor(ride.status)
                  )}
                >
                  {ride.status.replace('_', ' ').toUpperCase()}
                </Badge>
              </div>

              {/* Content */}
              <div className="flex-1 p-4 md:p-6 flex flex-col justify-between min-h-[160px]">
                <div className="space-y-3">
                  {/* Header */}
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex-1 min-w-0">
                      <h3 className="font-bold text-lg md:text-xl group-hover:text-primary transition-colors duration-300 line-clamp-1 mb-1.5">
                        {ride.name}
                      </h3>
                      
                      {ride.park && (
                        <div className="flex items-center text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300 mb-1">
                          <Castle className="w-3.5 h-3.5 mr-1.5 flex-shrink-0" />
                          <span className="line-clamp-1 font-medium">{ride.park.name}</span>
                        </div>
                      )}

                      {ride.park?.location && (
                        <div className="flex items-center text-xs text-muted-foreground">
                          <MapPin className="w-3 h-3 mr-1 flex-shrink-0" />
                          <span className="line-clamp-1">
                            {ride.park.location.city && `${ride.park.location.city}, `}
                            {ride.park.location.country}
                          </span>
                        </div>
                      )}
                    </div>

                    {/* Rating */}
                    {(ride.average_rating != null && ride.average_rating > 0) && (
                      <div className="flex items-center gap-1.5 ml-4 flex-shrink-0 bg-yellow-400/10 px-3 py-1.5 rounded-full group-hover:bg-yellow-400/20 transition-colors duration-300">
                        <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                        <span className="font-semibold text-foreground">{ride.average_rating.toFixed(1)}</span>
                      </div>
                    )}
                  </div>

                  {/* Tags */}
                  <div className="flex items-center gap-2 flex-wrap">
                    <Badge variant="outline" className="text-xs backdrop-blur-sm border-primary/20 group-hover:border-primary/40 transition-colors duration-300">
                      {formatCategory(ride.category)}
                    </Badge>
                    {ride.manufacturer && (
                      <Badge variant="outline" className="text-xs backdrop-blur-sm border-accent/20 group-hover:border-accent/40 transition-colors duration-300">
                        <Factory className="w-3 h-3 mr-1" />
                        {ride.manufacturer.name}
                      </Badge>
                    )}
                  </div>
                </div>

                {/* Actions */}
                <div className="flex items-center justify-between mt-4 pt-3 border-t border-border/50">
                  <div className="flex items-center gap-3 text-sm text-muted-foreground">
                    {ride.review_count && ride.review_count > 0 && (
                      <span className="text-xs">{ride.review_count} reviews</span>
                    )}
                  </div>

                  <Button 
                    size="sm" 
                    className="bg-gradient-to-r from-primary to-secondary hover:shadow-lg hover:shadow-primary/20 hover:scale-105 transition-all duration-300 flex-shrink-0"
                  >
                    <span className="hidden sm:inline">View Details</span>
                    <span className="sm:hidden">View</span>
                  </Button>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}