import Link from 'next/link'
import { ListingThumb } from './ListingThumb'
import { MineralChip } from './MineralChip'
import { Icon } from './Icon'
import { formatUsd, formatHa } from '@/lib/format'
import { COUNTRY_LABELS } from '@/lib/constants'
import {
  assetTypeLabel,
  stageLabel,
  modalityLabel,
  primaryCommodity,
  secondaryCommodities,
} from '@/lib/listing-view'
import type { ListingWithRelations } from '@/lib/listings'

function Mini({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <div
        className="mono uppercase-wide"
        style={{ fontSize: 9, color: 'var(--muted)', letterSpacing: '0.08em' }}
      >
        {label}
      </div>
      <div className="mono" style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)' }}>
        {value}
      </div>
    </div>
  )
}

export function ListingCard({
  listing,
  priority = false,
}: {
  listing: ListingWithRelations
  priority?: boolean
}) {
  const primary = primaryCommodity(listing)
  const secondary = secondaryCommodities(listing).slice(0, 2)
  const country = COUNTRY_LABELS[listing.country] ?? listing.country

  return (
    <Link
      href={`/marketplace/${listing.slug}`}
      className="card group"
      style={{ display: 'flex', flexDirection: 'column', transition: 'border-color .12s' }}
    >
      <div style={{ position: 'relative' }}>
        <ListingThumb listing={listing} height={180} priority={priority} />
        <div style={{ position: 'absolute', top: 10, left: 10, display: 'flex', gap: 4 }}>
          {primary && <MineralChip commodity={primary} size="sm" />}
          {listing.verified && (
            <span
              className="mono"
              style={{
                fontSize: 9.5,
                padding: '2px 6px',
                background: 'var(--accent)',
                color: '#fff',
                letterSpacing: '0.08em',
                display: 'inline-flex',
                alignItems: 'center',
              }}
            >
              ✓
            </span>
          )}
        </div>
      </div>

      <div style={{ padding: 16, display: 'flex', flexDirection: 'column', flex: 1 }}>
        <div
          className="mono uppercase-wide"
          style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.08em', marginBottom: 6 }}
        >
          {assetTypeLabel(listing.assetType)}
        </div>
        <div
          className="display"
          style={{ fontSize: 16, fontWeight: 600, lineHeight: 1.2, marginBottom: 10 }}
        >
          {listing.title}
        </div>

        <div
          style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: '6px 12px',
            padding: '10px 0',
            borderTop: '1px solid var(--line-softer)',
            borderBottom: '1px solid var(--line-softer)',
            margin: '0 0 12px',
          }}
        >
          <Mini label="Hectáreas" value={formatHa(listing.surfaceHa)} />
          <Mini label="Concesiones" value={listing.concessionCount?.toString() ?? '—'} />
          <Mini label="Etapa" value={stageLabel(listing.stage) ?? '—'} />
          <Mini label="País" value={country} />
        </div>

        {secondary.length > 0 && (
          <div style={{ display: 'flex', gap: 4, marginBottom: 10, flexWrap: 'wrap' }}>
            {secondary.map((c) => (
              <MineralChip key={c} commodity={c} size="sm" />
            ))}
          </div>
        )}

        <div
          style={{
            marginTop: 'auto',
            display: 'flex',
            alignItems: 'flex-end',
            justifyContent: 'space-between',
          }}
        >
          <div>
            <div
              className="mono uppercase-wide"
              style={{ fontSize: 9.5, color: 'var(--muted)', letterSpacing: '0.08em' }}
            >
              {modalityLabel(listing.dealTypes)}
            </div>
            <div className="display" style={{ fontSize: 20, fontWeight: 600 }}>
              {formatUsd(listing.priceUsd)}
            </div>
          </div>
          <Icon name="arrow-right" size={18} color="var(--accent)" />
        </div>
      </div>
    </Link>
  )
}