import { getLeadsAdmin, deleteLead } from '../../actions';
import { Trash2, Mail, User, Briefcase, Calendar } from 'lucide-react';
import { revalidatePath } from 'next/cache';

export default async function LeadsPage() {
    const leads = await getLeadsAdmin();

    async function handleDelete(formData: FormData) {
        'use server';
        const id = Number(formData.get('id'));
        await deleteLead(id);
        revalidatePath('/admin/leads');
    }

    return (
        <div className="space-y-8">
            <div>
                <h1 className="text-3xl font-black uppercase tracking-widest text-white mb-2">Mesajlar & Başvurular</h1>
                <p className="text-white/40">İletişim formundan gelen müşteri talepleri.</p>
            </div>

            <div className="space-y-4">
                {leads.map((lead: any) => (
                    <div key={lead.id} className="bg-zinc-950 border border-white/10 rounded-2xl p-6 flex flex-col md:flex-row gap-6 justify-between md:items-center group hover:border-[#1e9a83]/50 transition-colors">
                        <div className="space-y-3 flex-1">
                            <div className="flex items-center gap-4">
                                <h3 className="text-lg font-bold text-white flex items-center gap-2">
                                    <User className="w-4 h-4 text-[#1e9a83]" />
                                    {lead.full_name}
                                </h3>
                                <span className="bg-white/5 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest text-white/60 flex items-center gap-2">
                                    <Briefcase className="w-3 h-3" />
                                    {lead.service_type}
                                </span>
                            </div>
                            
                            <div className="flex flex-col md:flex-row gap-4 text-sm text-white/60">
                                <a href={`mailto:${lead.email}`} className="flex items-center gap-2 hover:text-white transition-colors">
                                    <Mail className="w-4 h-4" /> {lead.email}
                                </a>
                                <div className="flex items-center gap-2">
                                    <Calendar className="w-4 h-4" /> 
                                    {new Date(lead.created_at).toLocaleDateString('tr-TR', { day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit' })}
                                </div>
                            </div>

                            <div className="bg-white/5 p-4 rounded-xl mt-4">
                                <p className="text-white/80 text-sm leading-relaxed">{lead.message}</p>
                            </div>
                        </div>

                        <div>
                            <form action={handleDelete}>
                                <input type="hidden" name="id" value={lead.id} />
                                <button type="submit" className="p-3 bg-red-500/10 text-red-500 rounded-xl hover:bg-red-500 hover:text-white transition-colors">
                                    <Trash2 className="w-5 h-5" />
                                </button>
                            </form>
                        </div>
                    </div>
                ))}

                {(!leads || leads.length === 0) && (
                    <div className="text-center py-12 bg-white/5 rounded-2xl border border-white/10 border-dashed">
                        <p className="text-white/40">Henüz bir mesaj bulunmuyor.</p>
                    </div>
                )}
            </div>
        </div>
    );
}