'use client'

import * as React from 'react'
import { Heart, Bed, Bath, Car, Maximize2, RefreshCw } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Property } from '@/lib/types'
import { PropertyGallery } from './property-gallery'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'

interface PropertyCardProps {
  property: Property
  onSelect?: (property: Property) => void
  onFavorite?: (property: Property) => void
  isFavorite?: boolean
  className?: string
}

function formatPrice(value: number): string {
  return new Intl.NumberFormat('pt-BR', {
    style: 'currency',
    currency: 'BRL',
    maximumFractionDigits: 0,
  }).format(value)
}

function formatArea(value: number): string {
  return `${value}m²`
}

export function PropertyCard({ 
  property, 
  onSelect, 
  onFavorite,
  isFavorite = false,
  className 
}: PropertyCardProps) {
  const handleCardClick = () => {
    onSelect?.(property)
  }

  const handleFavoriteClick = (e: React.MouseEvent) => {
    e.stopPropagation()
    onFavorite?.(property)
  }

  return (
    <article
      className={cn(
        'group relative bg-card rounded-xl overflow-hidden shadow-sm border border-border/50 transition-all duration-300 hover:shadow-lg hover:border-primary/20 cursor-pointer',
        className
      )}
      onClick={handleCardClick}
    >
      {/* Gallery */}
      <div className="relative">
        <PropertyGallery 
          images={property.images} 
          title={property.title}
          onImageClick={() => onSelect?.(property)}
        />
        
        {/* Badges */}
        <div className="absolute top-3 left-3 flex flex-wrap gap-2 z-10">
          {property.isPremium && (
            <Badge className="bg-primary text-primary-foreground hover:bg-primary/90 text-xs font-medium">
              Premium
            </Badge>
          )}
          {property.isNew && (
            <Badge className="bg-secondary text-secondary-foreground hover:bg-secondary/90 text-xs font-medium">
              Novo
            </Badge>
          )}
          {property.acceptsTrade && (
            <Badge variant="outline" className="bg-card/90 border-primary text-primary hover:bg-card text-xs font-medium">
              <RefreshCw className="size-3 mr-1" />
              Aceita Permuta
            </Badge>
          )}
        </div>

        {/* Favorite button */}
        <Button
          variant="ghost"
          size="icon"
          className={cn(
            'absolute top-3 right-3 z-10 size-9 rounded-full bg-card/90 hover:bg-card shadow-sm',
            isFavorite && 'text-primary'
          )}
          onClick={handleFavoriteClick}
          aria-label={isFavorite ? 'Remover dos favoritos' : 'Adicionar aos favoritos'}
        >
          <Heart className={cn('size-5', isFavorite && 'fill-current')} />
        </Button>
      </div>

      {/* Content */}
      <div className="p-4">
        {/* Price */}
        <div className="mb-2">
          <p className="text-xl font-bold text-foreground">
            {formatPrice(property.price)}
          </p>
          {property.rentPrice && (
            <p className="text-sm text-muted-foreground">
              Aluguel: {formatPrice(property.rentPrice)}/mês
            </p>
          )}
          {property.condoFee && (
            <p className="text-xs text-muted-foreground">
              Condomínio: {formatPrice(property.condoFee)} | IPTU: {formatPrice(property.iptu || 0)}
            </p>
          )}
        </div>

        {/* Title */}
        <h3 className="font-semibold text-foreground text-balance leading-tight mb-1 line-clamp-2 group-hover:text-primary transition-colors">
          {property.title}
        </h3>

        {/* Location */}
        <p className="text-sm text-muted-foreground mb-3">
          {property.neighborhood}, {property.city} - {property.state}
        </p>

        {/* Features */}
        <div className="flex items-center gap-4 text-sm text-muted-foreground">
          <span className="flex items-center gap-1.5">
            <Maximize2 className="size-4" />
            <span>{formatArea(property.area)}</span>
          </span>
          {property.bedrooms > 0 && (
            <span className="flex items-center gap-1.5">
              <Bed className="size-4" />
              <span>{property.bedrooms} {property.bedrooms === 1 ? 'quarto' : 'quartos'}</span>
            </span>
          )}
          {property.bathrooms > 0 && (
            <span className="flex items-center gap-1.5">
              <Bath className="size-4" />
              <span>{property.bathrooms}</span>
            </span>
          )}
          {property.parkingSpaces > 0 && (
            <span className="flex items-center gap-1.5">
              <Car className="size-4" />
              <span>{property.parkingSpaces}</span>
            </span>
          )}
        </div>
      </div>
    </article>
  )
}