"use client";

import Link from "next/link";
import DynamicButton from "@/components/button";
import AuctionUnifiedTimer from "@/components/count/AuctionUnifiedTimer";
import { Tag, Handshake, Hash, MapPin, Clock } from "lucide-react";
import { motion } from "framer-motion";
import { useTranslations } from "next-intl";
import { cardHover, cardTap } from "@/lib/animations";

export type AnnualAuctionCard = {
  /** Stable id for list keys / pagination merge */
  id: string;
  title: string;
  badge: string;
  badgeColor: string;
  img: string;
  type: string;
  animalType?: "horse" | "camel";
  animalUsage?: string | null;
  auctionType: string;
  sponsor: string;
  horses: number;
  location: string;
  date: string | null;
  countdownDate?: string | null;
  countdownLabel?: string | null;
  status: string;
  link: string;
  btn: string;
};

export interface AnnualAuctionCardTheme {
  accentBar: string;
  badge: string;
}

interface AnnualAuctionCardItemProps {
  card: AnnualAuctionCard;
  theme: AnnualAuctionCardTheme;
  countLabel: string;
  iconColor: string;
  formatCardDate: (value: string | null | undefined) => string;
  formatLiveCardDate: (value: string | null | undefined) => string;
}

export default function AnnualAuctionCardItem({
  card,
  theme,
  countLabel,
  iconColor,
  formatCardDate,
  formatLiveCardDate,
}: AnnualAuctionCardItemProps) {
  const t = useTranslations("auctionCard");
  const isEnded = card.badgeColor === "closed" || card.badgeColor === "ended";

  return (
    <motion.div
      whileHover={cardHover}
      whileTap={cardTap}
      className="h-full"
    >
      {/* Desktop Card */}
      <div className="hidden sm:flex h-full group bg-white rounded-2xl shadow-sm hover:shadow-lg overflow-hidden flex-col cursor-pointer transition-all duration-300 border border-slate-200">
        <div className={`h-1.5 w-full ${theme.accentBar}`} />

        <div className="p-4 flex flex-col gap-3 flex-1">
          <div className="flex items-start justify-between gap-2">
            <div className="min-w-0">
              <h3 className="text-[#0f5132] text-lg font-bold leading-snug line-clamp-2">
                {card.title}
              </h3>
            </div>
            <span
              className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-xs font-semibold whitespace-nowrap ${theme.badge}`}
            >
              {card.badgeColor === "live" && (
                <span className="w-1.5 h-1.5 rounded-full bg-current animate-pulse" />
              )}
              {card.badge}
            </span>
          </div>

          <div className="text-sm text-slate-600 leading-relaxed space-y-1.5">
            <div className="flex items-center gap-1.5 min-w-0">
              <strong className="shrink-0">{t("type")}:</strong>
              <span className="min-w-0 truncate">{card.type}</span>
            </div>

            {card.animalUsage && (
              <div className="flex items-center gap-1.5 min-w-0">
                <strong className="shrink-0">{t("usage")}:</strong>
                <span className="min-w-0 truncate" title={card.animalUsage}>
                  {card.animalUsage}
                </span>
              </div>
            )}

            <div className="flex items-center gap-1.5 min-w-0">
              <Tag size={15} color={iconColor} className="shrink-0" />
              <strong className="shrink-0">{t("auctionType")}:</strong>
              <span className="min-w-0 truncate">{card.auctionType}</span>
            </div>

            <div className="flex items-center gap-1.5 min-w-0">
              <Handshake size={15} color={iconColor} className="shrink-0" />
              <strong className="shrink-0">{t("sponsor")}:</strong>
              <span className="min-w-0 truncate">{card.sponsor}</span>
            </div>

            <div className="flex items-center gap-1.5">
              <Hash size={15} color={iconColor} className="shrink-0" />
              <strong>{countLabel}:</strong> {card.horses}
            </div>

            <div className="flex items-center gap-1.5 min-w-0">
              <MapPin size={15} color={iconColor} className="shrink-0" />
              <strong className="shrink-0">{t("location")}:</strong>
              <span className="min-w-0 truncate" title={card.location}>
                {card.location}
              </span>
            </div>

            <div className="flex items-center gap-1.5">
              <Clock size={15} color={iconColor} className="shrink-0" />
              <strong>{t("date")}:</strong>
              <span>
                {card.badgeColor === "live"
                  ? formatLiveCardDate(card.date)
                  : formatCardDate(card.date)}
              </span>
            </div>
          </div>

          <div className="mt-auto space-y-3">
            {isEnded ? (
              <div className="rounded-xl border border-slate-200 bg-slate-100 px-3 py-3 text-center text-sm font-semibold text-slate-600">
                {card.badge}
              </div>
            ) : (
              <AuctionUnifiedTimer
                targetDate={card.countdownDate || card.date || new Date().toISOString()}
                label={card.countdownLabel || t("countdown_label")}
                variant="surface"
              />
            )}

            <Link
              href={card.link}
              onClick={(e) => {
                if (card.link === "#") e.preventDefault();
              }}
            >
              <DynamicButton color="primary" className="!mt-0" fullWidth>
                {card.btn}
              </DynamicButton>
            </Link>
          </div>
        </div>
      </div>

      {/* Mobile Card */}
      <Link
        href={card.link}
        onClick={(e) => {
          if (card.link === "#") e.preventDefault();
        }}
      >
        <div className="sm:hidden bg-white rounded-xl overflow-hidden shadow-sm border border-slate-200 cursor-pointer active:bg-gray-50 transition-colors">
          <div className={`h-1.5 w-full ${theme.accentBar}`} />

          <div className="p-3.5 space-y-3">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-[#0f5132] text-sm font-bold leading-snug line-clamp-2">
                {card.title}
              </h3>
              <span
                className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full border text-[10px] font-semibold whitespace-nowrap ${theme.badge}`}
              >
                {card.badgeColor === "live" && (
                  <span className="w-1.5 h-1.5 rounded-full bg-current animate-pulse" />
                )}
                {card.badge}
              </span>
            </div>

            <p className="text-xs text-slate-500">{card.type}</p>

            <div className="grid grid-cols-1 gap-y-1.5 text-xs text-slate-600">
              {card.animalUsage && (
                <div className="flex items-center gap-1.5 min-w-0">
                  <strong className="shrink-0">{t("usage")}:</strong>
                  <span className="min-w-0 truncate">{card.animalUsage}</span>
                </div>
              )}

              <div className="flex items-center gap-1.5 min-w-0">
                <Tag size={12} color={iconColor} className="shrink-0" />
                <strong className="shrink-0">{t("auctionType")}:</strong>
                <span className="min-w-0 truncate">{card.auctionType}</span>
              </div>

              <div className="flex items-center gap-1.5 min-w-0">
                <Handshake size={12} color={iconColor} className="shrink-0" />
                <strong className="shrink-0">{t("sponsor")}:</strong>
                <span className="min-w-0 truncate">{card.sponsor}</span>
              </div>

              <div className="flex items-center gap-1.5">
                <Hash size={12} color={iconColor} className="shrink-0" />
                <strong>{countLabel}:</strong>
                <span>{card.horses}</span>
              </div>

              <div className="flex items-center gap-1.5 min-w-0">
                <MapPin size={12} color={iconColor} className="shrink-0" />
                <strong className="shrink-0">{t("location")}:</strong>
                <span className="min-w-0 truncate">{card.location}</span>
              </div>

              <div className="flex items-center gap-1.5 min-w-0">
                <Clock size={12} color={iconColor} className="shrink-0" />
                <strong className="shrink-0">{t("date")}:</strong>
                <span className="min-w-0 truncate">
                  {card.badgeColor === "live"
                    ? formatLiveCardDate(card.date)
                    : formatCardDate(card.date)}
                </span>
              </div>
            </div>

            {isEnded ? (
              <div className="rounded-lg border border-slate-200 bg-slate-100 px-2.5 py-2 text-center text-xs font-semibold text-slate-600">
                {card.badge}
              </div>
            ) : (
              <AuctionUnifiedTimer
                targetDate={card.countdownDate || card.date || new Date().toISOString()}
                label={card.countdownLabel || t("countdown_label")}
                variant="surface"
                compact
              />
            )}

            <div className="flex items-center justify-end gap-1 text-[#0F5132] text-sm font-medium">
              <span>{card.btn}</span>
              <svg
                className="w-3 h-3 rtl:rotate-180"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 5l7 7-7 7"
                />
              </svg>
            </div>
          </div>
        </div>
      </Link>
    </motion.div>
  );
}