import { Link } from 'react-router-dom';
import HeartButton from './HeartButton';

export interface FavoriteCardEntry {
    id: string;
    slug: string;
    title: string;
    price: string;
    type: 'venda' | 'aluguel';
    photo: string | null;
    city: string | null;
    bedrooms: number;
    area_m2: number;
}

function formatPrice(price: string, type: 'venda' | 'aluguel') {
    const num = parseFloat(price);
    if (isNaN(num)) return price;
    const formatted = num.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL', maximumFractionDigits: 0 });
    return type === 'aluguel' ? `${formatted}/mês` : formatted;
}

interface FavoritesCardsGridProps {
    entries: FavoriteCardEntry[];
}

export default function FavoritesCardsGrid({ entries }: FavoritesCardsGridProps) {
    if (entries.length === 0) {
        return (
            <div className="rounded-xl border border-borderSubtle bg-panel p-16 text-center">
                <svg className="mx-auto mb-4 text-textTertiary" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
                </svg>
                <p className="text-textTertiary mb-4">Nenhum favorito ainda</p>
                <Link to="/imoveis" className="text-sm text-accent hover:text-accentHover transition">
                    Explorar imóveis →
                </Link>
            </div>
        );
    }

    return (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {entries.map(entry => (
                <div
                    key={entry.id}
                    className="relative rounded-xl border border-borderSubtle bg-panel overflow-hidden hover:border-borderStandard transition group"
                >
                    <div className="relative h-40 bg-surface">
                        {entry.photo ? (
                            <img
                                src={entry.photo}
                                alt={entry.title}
                                className="w-full h-full object-cover group-hover:scale-[1.02] transition-transform duration-300"
                                loading="lazy"
                            />
                        ) : (
                            <div className="w-full h-full flex items-center justify-center text-textTertiary">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                                    <rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="M21 15l-5-5L5 21" />
                                </svg>
                            </div>
                        )}
                        <div className="absolute top-2 right-2 z-10">
                            <HeartButton propertyId={entry.id} />
                        </div>
                        <span className={`absolute bottom-2 left-2 rounded-full text-[11px] font-semibold px-2 py-0.5 backdrop-blur-sm ${entry.type === 'venda' ? 'bg-brand/80 text-white' : 'bg-black/50 text-white/90 border border-white/20'}`}>
                            {entry.type === 'venda' ? 'Venda' : 'Aluguel'}
                        </span>
                    </div>

                    <div className="p-4">
                        <Link to={entry.slug ? `/imoveis/${entry.slug}` : '#'} className="block">
                            <p className="text-sm font-semibold text-textPrimary line-clamp-2 leading-snug">
                                {entry.title}
                            </p>
                            {entry.city && (
                                <p className="text-xs text-textTertiary mt-1 truncate">{entry.city}</p>
                            )}
                            {entry.price && (
                                <p className="text-sm font-semibold text-textPrimary mt-2">
                                    {formatPrice(entry.price, entry.type)}
                                </p>
                            )}
                            <div className="flex gap-3 mt-2 text-xs text-textTertiary">
                                {entry.bedrooms > 0 && <span>{entry.bedrooms} qto{entry.bedrooms !== 1 ? 's' : ''}</span>}
                                {entry.area_m2 > 0 && <span>{entry.area_m2} m²</span>}
                            </div>
                        </Link>
                    </div>
                </div>
            ))}
        </div>
    );
}