import Link from 'next/link'
import type { ListingWithRelations } from '@/lib/listings'
import { COUNTRY_LABELS } from '@/lib/constants'
import { formatHa } from '@/lib/format'
import { Thumb } from '@/components/ui/Thumb'
import { CommodityBadge } from '@/components/ui/CommodityBadge'
import { StageBadge } from '@/components/ui/StageBadge'
import { DealTypeBadge } from '@/components/ui/DealTypeBadge'
import { PriceTag } from '@/components/ui/PriceTag'
import { VerifiedBadge } from '@/components/ui/VerifiedBadge'

export function ListingCard({ listing }: { listing: ListingWithRelations }) {
  const place = [listing.city, COUNTRY_LABELS[listing.country] ?? listing.country].filter(Boolean).join(', ')
  return (
    <Link
      href={`/marketplace/${listing.slug}`}
      className="group flex flex-col overflow-hidden rounded-xl border border-white/5 bg-night-700 transition-colors hover:border-amber-brand/40"
    >
      <div className="relative h-40">
        <Thumb seed={listing.imageSeed ?? listing.slug} className="h-full w-full" />
        {listing.dealTypes[0] && (
          <div className="absolute left-3 top-3">
            <DealTypeBadge deal={listing.dealTypes[0].dealType} />
          </div>
        )}
      </div>
      <div className="flex flex-1 flex-col gap-3 p-4">
        <h3 className="line-clamp-2 text-sm font-semibold text-white">{listing.title}</h3>
        <p className="text-xs text-slatey">
          📍 {place} {listing.surfaceHa ? `· ${formatHa(listing.surfaceHa)}` : ''}
        </p>
        <div className="flex flex-wrap items-center gap-1.5">
          {listing.commodities.map((c) => (
            <CommodityBadge key={c.id} code={c.commodity} />
          ))}
          <StageBadge stage={listing.stage} />
        </div>
        <div className="mt-auto flex items-center justify-between pt-2">
          <PriceTag value={listing.priceUsd} />
          <VerifiedBadge verified={listing.verified} />
        </div>
        <span className="rounded-md bg-amber-brand/10 py-2 text-center text-sm font-semibold text-amber-brand group-hover:bg-amber-brand/20">
          Ver oportunidad
        </span>
      </div>
    </Link>
  )
}