import { MapPin, Star, Users, Clock, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
import { formatLocationShort } from '@/lib/locationFormatter';
import { useNavigate } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Park } from '@/types/database';
import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';

interface ParkCardProps {
  park: Park;
}
export function ParkCard({ park }: ParkCardProps) {
  const navigate = useNavigate();
  
  const handleClick = () => {
    navigate(`/parks/${park.slug}`);
  };
  const getStatusColor = (status: string) => {
    switch (status) {
      case 'operating':
        return 'bg-green-500/50 text-green-200 border-green-500/50';
      case 'seasonal':
        return 'bg-yellow-500/50 text-yellow-200 border-yellow-500/50';
      case 'under_construction':
        return 'bg-blue-500/50 text-blue-200 border-blue-500/50';
      default:
        return 'bg-red-500/50 text-red-200 border-red-500/50';
    }
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'operating':
        return <Clock className="w-3 h-3" />;
      case 'seasonal':
        return <Clock className="w-3 h-3" />;
      case 'under_construction':
        return <Clock className="w-3 h-3" />;
      default:
        return <Clock className="w-3 h-3" />;
    }
  };
  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 <Card className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 hover:border-primary/30 transition-all duration-300 cursor-pointer hover:scale-[1.02] relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300" onClick={handleClick}>
      <div className="relative overflow-hidden">
        {/* Image Placeholder with Gradient */}
        <div className="aspect-[3/2] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
          {(park.card_image_url || park.card_image_id) ? (
            <img 
              src={park.card_image_url || getCloudflareImageUrl(park.card_image_id || '', 'card')}
              srcSet={park.card_image_id ? `
                ${getCloudflareImageUrl(park.card_image_id, 'cardthumb')} 600w,
                ${getCloudflareImageUrl(park.card_image_id, 'card')} 1200w
              ` : undefined}
              sizes="(max-width: 640px) 600px, 1200px"
              alt={park.name} 
              className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
              loading="lazy"
            />
          ) : (
            <div className="relative flex items-center justify-center">
              <div className="absolute inset-0 rounded-full bg-primary/20 blur-xl animate-pulse" />
              <div className="relative w-16 h-16 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center border border-primary/20">
                {getParkTypeIcon(park.park_type)}
              </div>
            </div>
          )}
          
          {/* Gradient Overlay */}
          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
          
          {/* Status Badge */}
          <Badge className={`absolute top-3 right-3 ${getStatusColor(park.status)} backdrop-blur-sm border shadow-lg font-medium text-xs px-2.5 py-1 inline-flex items-center gap-1.5`}>
            {getStatusIcon(park.status)}
            <span>{park.status.replace('_', ' ').toUpperCase()}</span>
          </Badge>
        </div>

      <CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
        {/* Header */}
        <div className="space-y-0.5 min-w-0">
          <h3 className="font-bold text-base group-hover:text-primary transition-all duration-300 line-clamp-2 break-words group-hover:drop-shadow-[0_0_8px_rgba(139,92,246,0.5)]">
            {park.name}
          </h3>
          
        {park.location && (
          <div className="flex items-center gap-1 text-sm text-muted-foreground min-w-0">
            <MapPin className="w-3 h-3 flex-shrink-0" />
            <span className="truncate">
              {formatLocationShort(park.location)}
            </span>
          </div>
        )}
        </div>

        {/* Stats & Rating */}
        <div className="flex items-center justify-between text-sm">
          <div className="flex items-center gap-3">
            {(park.ride_count != null && park.ride_count > 0) && (
              <div className="flex items-center gap-1">
                <FerrisWheel className="w-4 h-4 text-primary/70 flex-shrink-0" />
                <span className="font-medium">{park.ride_count}</span>
                <span className="text-muted-foreground">rides</span>
              </div>
            )}
          </div>
          
          {(park.average_rating != null && park.average_rating > 0) && (
            <div className="inline-flex items-center gap-1">
              <Star className="w-4 h-4 fill-yellow-500 text-yellow-500" />
              <span className="font-semibold">{park.average_rating.toFixed(1)}</span>
              {(park.review_count != null && park.review_count > 0) && (
                <span className="text-muted-foreground">({park.review_count})</span>
              )}
            </div>
          )}
        </div>
        </CardContent>
      </div>
    </Card>;
}