import { getServicesAdmin, deleteService } from '../../actions';
import { Trash2, Edit } from 'lucide-react';
import { revalidatePath } from 'next/cache';

export default async function ServicesPage() {
    const services = await getServicesAdmin();

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

    return (
        <div className="space-y-8">
            <div className="flex justify-between items-center">
                <div>
                    <h1 className="text-3xl font-black uppercase tracking-widest text-white mb-2">Hizmetler</h1>
                    <p className="text-white/40">Sistemdeki tüm hizmetlerin listesi.</p>
                </div>
                <button className="bg-[#1e9a83] text-white px-6 py-2 rounded-xl font-bold hover:bg-[#157a67] transition-colors">
                    Yeni Hizmet Ekle
                </button>
            </div>

            <div className="bg-zinc-950 border border-white/10 rounded-2xl overflow-hidden">
                <table className="w-full text-left">
                    <thead className="bg-white/5 border-b border-white/10">
                        <tr>
                            <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40 w-16">Sıra</th>
                            <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40">İkon Adı</th>
                            <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40">Hizmet Adı</th>
                            <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40">Öne Çıkan</th>
                            <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40 text-right">İşlemler</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-white/10">
                        {services.map((service: any) => (
                            <tr key={service.id} className="hover:bg-white/[0.02] transition-colors">
                                <td className="px-6 py-4">
                                    <span className="font-bold text-white/40">{service.display_order}</span>
                                </td>
                                <td className="px-6 py-4">
                                    <span className="bg-white/5 px-2 py-1 rounded-md text-xs text-[#1e9a83] font-mono">{service.icon_name || '-'}</span>
                                </td>
                                <td className="px-6 py-4">
                                    <div className="font-bold text-white">{service.title}</div>
                                </td>
                                <td className="px-6 py-4">
                                    {service.is_featured ? (
                                        <span className="text-green-500 text-xs font-bold uppercase tracking-widest">Evet</span>
                                    ) : (
                                        <span className="text-white/20 text-xs font-bold uppercase tracking-widest">Hayır</span>
                                    )}
                                </td>
                                <td className="px-6 py-4 text-right flex justify-end gap-2">
                                    <button className="p-2 bg-blue-500/10 text-blue-500 rounded-lg hover:bg-blue-500 hover:text-white transition-colors">
                                        <Edit className="w-4 h-4" />
                                    </button>
                                    <form action={handleDelete}>
                                        <input type="hidden" name="id" value={service.id} />
                                        <button type="submit" className="p-2 bg-red-500/10 text-red-500 rounded-lg hover:bg-red-500 hover:text-white transition-colors">
                                            <Trash2 className="w-4 h-4" />
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        ))}
                        {(!services || services.length === 0) && (
                            <tr>
                                <td colSpan={5} className="px-6 py-8 text-center text-white/40">
                                    Henüz hizmet eklenmemiş.
                                </td>
                            </tr>
                        )}
                    </tbody>
                </table>
            </div>
        </div>
    );
}