import Link from "next/link";
import { Clock, Heart } from "lucide-react";
import type { TourData } from "@/components/home/TourSection";
import { motion } from "framer-motion";
import { useTranslations } from "next-intl";

const MotionLink = motion.create(Link);

const FALLBACK_IMAGE =
  "https://images.unsplash.com/photo-1518548419970-58e3b4079ab2?auto=format&fit=crop&w=800&q=80";

export function TourCard({ tour }: { tour: TourData }) {
  const t = useTranslations("TourPackages.card");

  // Convert price string to number for formatting if it's a valid string
  const currentPriceNumeric =
    tour.price && !isNaN(Number(tour.price)) ? Number(tour.price) : 0;

  // Format price helper
  const formatPrice = (num: number) => `Rp ${num.toLocaleString("id-ID")}`;

  const currentPrice = currentPriceNumeric > 0 ? formatPrice(currentPriceNumeric) : tour.price;

  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={`/tour/${tour.id}`} className="block w-full h-full">
          <img
            src={tour.imageUrl || FALLBACK_IMAGE}
            alt={tour.title}
            className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
          />
        </Link>

        {/* Badge */}
        {tour.badge && (
          <div className="absolute top-4 left-4 z-10">
            <span className="bg-[#7a0f0f] text-white text-[11px] font-bold px-3 py-1.5 rounded-md shadow-sm">
              {tour.badge}
            </span>
          </div>
        )}

        {/* Wishlist Icon */}
        <motion.button
          whileTap={{ scale: 0.9 }}
          className="absolute top-4 right-4 p-2 rounded-full bg-black/20 text-white backdrop-blur-sm transition-colors hover:bg-merah-ranata hover:text-white z-10"
        >
          <Heart className="w-4 h-4" />
        </motion.button>
      </div>

      {/* Content */}
      <div className="flex flex-col flex-1 p-5">
        <Link href={`/tour/${tour.id}`} className="block flex-1">
          <h3 className="text-[17px] font-bold text-slate-900 mb-1.5 line-clamp-1 group-hover:text-merah-ranata transition-colors">
            {tour.title}
          </h3>
          <p className="text-[13px] text-slate-500 mb-5 line-clamp-2 leading-relaxed">
            {tour.excerpt || `Jelajahi keindahan dan pesona ${tour.title} dengan pengalaman wisata eksklusif kami.`}
          </p>

          <div className="flex items-center gap-1.5 text-[13px] text-slate-500 mb-4">
            <Clock className="w-3.5 h-3.5" />
            <span>{tour.duration || "4 Hari 3 Malam"}</span>
          </div>
        </Link>

        {/* Price & Action */}
        <div className="flex items-end justify-between mt-auto pt-4 border-t border-gray-100">
          <div>
            <p className="text-[17px] font-extrabold text-[#7a0f0f] leading-none">
              {currentPrice || "Hubungi Kami"}
            </p>
          </div>

          <MotionLink
            href={`/tour/${tour.id}`}
            whileTap={{ scale: 0.95 }}
            className="px-4 py-1.5 text-[12px] font-bold rounded-lg transition-colors border inline-block border-[#7a0f0f] text-[#7a0f0f] hover:bg-red-50"
          >
            {t('details')}
          </MotionLink>
        </div>
      </div>
    </div>
  );
}