import { Link } from "react-router-dom"
import { scoreToHeat } from "../../utils/heat"
import type { SimilarDeal } from "../../models/Shared/SimilarDeal"

type SimilarDealsProps = {
  deals: SimilarDeal[]
}

function formatTryPrice(p?: number) {
  if (typeof p !== "number") return null
  return `${p.toLocaleString("tr-TR")}₺`
}
export default function SimilarDeals({ deals }: SimilarDealsProps) {
  if (!deals || deals.length === 0) return null

  return (
    <section className="rounded-3xl bg-surface border border-white/10 p-4">
      <div className="flex items-center justify-between mb-3">
        <h3 className="text-sm font-semibold text-text">Benzer fırsatlar</h3>
        <Link to="/" className="text-xs text-text-muted hover:text-text transition">
          Tümünü gör
        </Link>
      </div>

      <div
        className="
          -mx-4 px-4
          flex gap-3 overflow-x-auto pb-1
          snap-x snap-mandatory
          md:mx-0 md:px-0 md:overflow-x-hidden md:pb-0 md:snap-none
          md:grid md:grid-cols-5 md:gap-3
          [scrollbar-width:none] [-ms-overflow-style:none]
        "
      >
        {deals.slice(0, 5).map((d) => {
          const { degree, color } = scoreToHeat(d.score ?? 0)

          return (
            <Link
              key={d.id}
              to={`/deal/${d.id}`}
              className="
                snap-start
                min-w-[240px] max-w-[240px]
                md:min-w-0 md:max-w-none md:w-full
                rounded-2xl border border-white/10
                bg-background/30 hover:bg-background/40 hover:border-white/20
                transition
                overflow-hidden
                flex-shrink-0
                flex flex-col
                min-h-[350px]  // Minimum height to ensure consistent sizing
              "
            >
              {/* Image Section */}
              <div className="relative w-full bg-background border-b border-white/10 overflow-hidden flex-shrink-0">
                <img
                  src={d.imageUrl || "/placeholder.png"}
                  alt={d.title}
                  className="w-full h-full object-cover"
                  loading="lazy"
                />
                <div className="absolute top-2 right-2">
                  <span
                    style={{ color }}
                    className="inline-flex items-center px-2 py-1 text-[12px] font-extrabold leading-none tracking-wide"
                    aria-label={`Sıcaklık ${degree}°`}
                    title={`Sıcaklık: ${degree}°`}
                  >
                    {degree}°
                  </span>
                </div>
              </div>

              {/* Details Section */}
              <div className="p-3 flex flex-col flex-grow relative">
                {/* Title - Always 2 lines max */}
                <div className="text-sm font-semibold text-text line-clamp-2 overflow-hidden text-ellipsis hover:text-primary transition min-h-[2.2em]">
                  {d.title}
                </div>

                {/* Seller and Price */}
                <div className="absolute bottom-3 left-3 flex flex-col space-y-1">
                  {/* Seller Name */}
                  <span className="text-xs text-text-muted truncate">{d.sellerName ?? "Bilinmiyor"}</span>
                  {/* Price */}
                  {typeof d.price === "number" && (
                    <div className="text-primary font-semibold">{formatTryPrice(d.price)}</div>
                  )}
                </div>
              </div>
            </Link>
          )
        })}
      </div>
    </section>
  )
}