import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { MapPin, Heart, MessageCircle, Eye, Star } from 'lucide-react';
import { type ExploreItem } from '@/types/explore';
import { cn } from '@/lib/utils';
import { useState } from 'react';

interface ExploreItemCardProps {
    item: ExploreItem;
    isSelected?: boolean;
    isHovered?: boolean;
    onMouseEnter?: () => void;
    onMouseLeave?: () => void;
    onClick?: () => void;
}

export default function ExploreItemCard({
    item,
    isSelected = false,
    isHovered = false,
    onMouseEnter,
    onMouseLeave,
    onClick,
}: ExploreItemCardProps) {
    const [imageError, setImageError] = useState(false);
    const [imageLoading, setImageLoading] = useState(true);

    const fallbackImage = 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop&crop=center';
    const displayImage = imageError || !item.image_url ? fallbackImage : item.image_url;

    const typeColor = item.type === 'experience' ? 'text-green-600' : 'text-purple-600';
    const typeBg = item.type === 'experience' ? 'bg-green-50 dark:bg-green-950' : 'bg-purple-50 dark:bg-purple-950';
    const typeLabel = item.type === 'experience' ? 'Experience' : 'Place';

    return (
        <Card
            className={cn(
                "overflow-hidden border-0 shadow-lg bg-white dark:bg-card backdrop-blur-sm transition-all duration-300 cursor-pointer rounded-2xl pt-0",
                isSelected && "ring-2 ring-blue-500",
                isHovered && "scale-[1.02] shadow-2xl ring-2 ring-blue-400"
            )}
            onMouseEnter={onMouseEnter}
            onMouseLeave={onMouseLeave}
            onClick={onClick}
        >
            {/* Image */}
            <div className="relative aspect-[4/3] overflow-hidden bg-muted">
                {imageLoading && (
                    <div className="absolute inset-0 animate-pulse bg-muted" />
                )}
                <img
                    src={displayImage}
                    alt={item.title}
                    loading="lazy"
                    className={cn(
                        "h-full w-full object-cover transition-opacity duration-300",
                        imageLoading ? "opacity-0" : "opacity-100"
                    )}
                    onLoad={() => setImageLoading(false)}
                    onError={() => {
                        setImageError(true);
                        setImageLoading(false);
                    }}
                />

                {/* Type Badge */}
                <div className="absolute top-3 right-3">
                    <Badge className={cn("border-0", typeBg, typeColor)}>
                        {typeLabel}
                    </Badge>
                </div>

                {/* Featured Badge */}
                {item.is_featured && (
                    <div className="absolute top-3 left-3">
                        <Badge className="bg-gradient-to-r from-blue-600 to-purple-600 text-white border-0">
                            <Star className="h-3 w-3 mr-1" />
                            Featured
                        </Badge>
                    </div>
                )}
            </div>

            <CardContent className="p-4">
                {/* Category/User */}
                {item.type === 'poi' && item.category && (
                    <Badge variant="secondary" className="mb-2 text-xs">
                        {item.category.name}
                    </Badge>
                )}
                {item.type === 'experience' && item.user && (
                    <p className="text-xs text-muted-foreground mb-2">
                        by {item.user.full_name}
                    </p>
                )}

                {/* Title */}
                <h3 className="font-semibold text-lg mb-2 line-clamp-2">
                    {item.title}
                </h3>

                {/* Description */}
                <p className="text-sm text-muted-foreground mb-3 line-clamp-2">
                    {item.description}
                </p>

                {/* Location */}
                {item.location && (
                    <div className="flex items-center text-sm text-muted-foreground mb-3">
                        <MapPin className="h-4 w-4 mr-1 flex-shrink-0" />
                        <span className="truncate">{item.location}</span>
                    </div>
                )}

                {/* Stats */}
                <div className="flex items-center gap-4 text-xs text-muted-foreground">
                    <div className="flex items-center gap-1">
                        <Heart className="h-3 w-3" />
                        <span>{item.likes_count}</span>
                    </div>
                    <div className="flex items-center gap-1">
                        <MessageCircle className="h-3 w-3" />
                        <span>{item.comments_count}</span>
                    </div>
                    <div className="flex items-center gap-1">
                        <Eye className="h-3 w-3" />
                        <span>{item.views_count}</span>
                    </div>
                    <span className="ml-auto">{item.time_ago}</span>
                </div>
            </CardContent>
        </Card>
    );
}