import Link from "next/link";
import { MapPin, Calendar, Heart } from "lucide-react";

interface EventData {
  id: number;
  title: string;
  badge: string | null;
  date: string | null;
  location: string | null;
  price: string | null;
  imageUrl: string | null;
  excerpt?: string | null;
}

export function EventCard({ event }: { event: EventData }) {
  // Convert price string to number for formatting if it's a valid string
  const currentPriceNumeric =
    event.price && !isNaN(Number(event.price)) ? Number(event.price) : 0;
  const currentPrice = currentPriceNumeric > 0 ? `Rp ${currentPriceNumeric.toLocaleString("id-ID")}` : event.price;

  const category = event.badge || "Event";

  // Determine Badge Color based on category
  let badgeColor = "bg-gray-500 text-white"; // default
  const lowerCategory = category.toLowerCase();
  if (lowerCategory.includes("konser")) {
    badgeColor = "bg-[#d32f2f] text-white"; // Red
  } else if (lowerCategory.includes("festival")) {
    badgeColor = "bg-[#8b5cf6] text-white"; // Purple
  } else if (lowerCategory.includes("workshop")) {
    badgeColor = "bg-[#f59e0b] text-white"; // Orange
  } else if (lowerCategory.includes("wisata") || lowerCategory.includes("budaya")) {
    badgeColor = "bg-[#10b981] text-white"; // Green
  }

  // Fallback images matching the screenshot roughly
  const fallbackImages = [
    "https://images.unsplash.com/photo-1540039155732-6761b54f94f9?auto=format&fit=crop&w=800&q=80",
    "https://images.unsplash.com/photo-1533105079780-92b9be482077?auto=format&fit=crop&w=800&q=80",
    "https://images.unsplash.com/photo-1544928147-79a2dbc1f389?auto=format&fit=crop&w=800&q=80",
    "https://images.unsplash.com/photo-1518548419970-58e3b4079ab2?auto=format&fit=crop&w=800&q=80"
  ];
  const imageUrl = event.imageUrl || fallbackImages[event.id % fallbackImages.length];

  return (
    <div className="group flex flex-col h-full overflow-hidden rounded-[20px] bg-white border border-gray-100 shadow-sm transition-all hover:shadow-xl hover:-translate-y-1 relative">
      {/* Image Container */}
      <div className="relative aspect-[16/10] overflow-hidden bg-gray-100">
        <Link href={`/event/${event.id}`} className="block w-full h-full">
          <img
            src={imageUrl}
            alt={event.title}
            className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
          />
        </Link>
        
        {/* Category Badge */}
        <div className="absolute top-4 left-4 z-10">
          <span className={`${badgeColor} text-[11px] font-bold px-3 py-1.5 rounded-lg shadow-md capitalize tracking-wide`}>
            {category}
          </span>
        </div>

        {/* Wishlist Icon */}
        <button className="absolute top-4 right-4 p-2 rounded-full bg-black/20 text-white backdrop-blur-sm transition-colors hover:bg-[#d32f2f] hover:text-white z-10">
          <Heart className="w-4 h-4" />
        </button>
      </div>

      {/* Content */}
      <div className="flex flex-col flex-1 p-5">
        <Link href={`/event/${event.id}`} className="block flex-1 mb-4">
          <h3 className="text-lg font-bold text-slate-900 mb-3 line-clamp-2 group-hover:text-[#d32f2f] transition-colors leading-snug">
            {event.title}
          </h3>
          
          <div className="flex items-center gap-2 text-[13px] text-slate-500 mb-2">
            <MapPin className="w-4 h-4 text-gray-400 shrink-0" />
            <span className="truncate">{event.location || "Lokasi belum ditentukan"}</span>
          </div>
          <div className="flex items-center gap-2 text-[13px] text-slate-500">
            <Calendar className="w-4 h-4 text-gray-400 shrink-0" />
            <span className="truncate">{event.date || "Tanggal segera hadir"}</span>
          </div>
        </Link>

        {/* Footer: Price & Action */}
        <div className="flex items-end justify-between mt-auto pt-4 border-t border-gray-100">
          <div>
            <p className="text-[10px] uppercase tracking-wider text-gray-400 mb-1">Mulai dari</p>
            <p className="text-[16px] font-extrabold text-[#d32f2f] leading-none">
              {currentPrice || "Hubungi Kami"}
            </p>
          </div>
          
          <Link
            href={`/event/${event.id}`}
            className="px-4 py-2 text-[12px] font-bold rounded-lg border border-red-200 text-[#d32f2f] hover:bg-red-50 hover:border-[#d32f2f] transition-colors shadow-sm"
          >
            Lihat Detail
          </Link>
        </div>
      </div>
    </div>
  );
}