import Link from 'next/link';
import { ArrowUpRight, Calendar } from 'lucide-react';
import { decodeHtmlEntities } from '@/lib/utils';

interface NewsCardProps {
    id: string;
    slug: string;
    titulo: string;
    resumen: string;
    tipo?: string;
    fecha: string;
    imagenUrl?: string | null;
    showCategory?: boolean;
    showFooterDate?: boolean;
    showFooterButton?: boolean;
    footerText?: string;
    isAdmin?: boolean;
    imageAspect?: string;
}

export const NewsCard = ({ 
    id, 
    slug, 
    titulo: rawTitulo, 
    resumen: rawResumen, 
    tipo, 
    fecha, 
    imagenUrl,
    showCategory = false,
    showFooterDate = false,
    showFooterButton = false,
    footerText,
    isAdmin = false,
    imageAspect = 'aspect-[16/10]'
}: NewsCardProps) => {
    const titulo = decodeHtmlEntities(rawTitulo);
    const resumen = decodeHtmlEntities(rawResumen);

    // Formatear fecha
    const fechaObj = new Date(fecha);
    const fechaFormateada = fechaObj.toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' });

    return (
        <div className="group relative flex flex-col h-full bg-slate-900/40 backdrop-blur-xl border border-white/10 rounded-3xl overflow-hidden transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_20px_40px_-15px_rgba(6,182,212,0.3)] hover:border-cyan-500/50">
            {/* Click Frontal */}
            <Link href={`/${slug}`} className="absolute inset-0 z-10" prefetch={false}>
                <span className="sr-only">Ver {titulo}</span>
            </Link>

            {/* Edit Button for Admins (Elevado en el stacking context) */}
            {isAdmin && (
                <div className="absolute top-4 right-4 z-30 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-auto">
                        <Link 
                        href={`/dashboard/posts/${id}`} 
                        className="flex items-center gap-2 px-3 py-1.5 rounded-full text-[10px] font-black uppercase tracking-wider bg-slate-950/80 backdrop-blur border border-cyan-500/50 text-cyan-400 hover:bg-cyan-500 hover:text-slate-950 transition-all shadow-lg cursor-pointer hover:scale-105"
                        title="Editar en Dashboard"
                        >
                        <span className="hidden sm:inline pointer-events-none">Editar</span>
                        </Link>
                </div>
            )}

            {/* Imagen Destacada */}
            <div className={`relative ${imageAspect} w-full overflow-hidden bg-slate-800 z-0`}>
                <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent z-10 opacity-90 pointer-events-none"></div>
                {imagenUrl ? (
                    <img src={imagenUrl} alt={titulo} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
                ) : (
                    <div className="w-full h-full flex items-center justify-center bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-slate-800 to-slate-900">
                        {/* No placeholder text as per user request */}
                    </div>
                )}
                
                {/* Badge/Tag - Habilitable por prop */}
                {showCategory && (
                    <div className="absolute top-4 left-4 z-20">
                        <span className="px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider backdrop-blur-md border border-white/20 bg-black/40 text-cyan-300 shadow-[0_0_10px_rgba(6,182,212,0.2)]">
                            {tipo?.toUpperCase() || 'NOTICIA'}
                        </span>
                    </div>
                )}

                {/* No button here */}
            </div>

            {/* Contenido */}
            <div className="flex flex-col flex-grow p-6 relative z-20">
                <h3 className="text-xl font-bold font-outfit text-white leading-snug mb-3 group-hover:text-cyan-400 transition-colors line-clamp-2">
                    {titulo}
                </h3>
                
                <p className="text-slate-400 text-sm leading-relaxed mb-6 line-clamp-3">
                    {resumen}
                </p>

                {/* Footer del card */}
                {(showFooterDate || footerText) && (
                    <div className="mt-auto pt-5 border-t border-white/10 flex items-center justify-between">
                        <span className="text-xs font-black tracking-widest uppercase text-cyan-500 group-hover:text-cyan-300 transition-colors">
                            {showFooterDate ? (
                                 <div className="flex items-center gap-2">
                                    <Calendar size={12} />
                                    {fechaFormateada}
                                 </div>
                            ) : (
                                footerText || ""
                            )}
                        </span>
                        {showFooterButton && footerText && (
                            <div className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center border border-white/10 group-hover:bg-cyan-500 group-hover:border-cyan-400 group-hover:text-slate-950 transition-all">
                                <ArrowUpRight size={16} className="transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                            </div>
                        )}
                    </div>
                )}
            </div>
        </div>
    );
};