import { getProjectsAdmin, deleteProject } from '../../actions';
import { Trash2, Edit } from 'lucide-react';
import { revalidatePath } from 'next/cache';
import Image from 'next/image';

import Link from 'next/link';

export default async function ProjectsPage() {
    const projects = await getProjectsAdmin();

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

    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">Projeler</h1>
                    <p className="text-white/40">Sistemdeki tüm projelerin listesi.</p>
                </div>
                <Link href="/admin/projects/new" className="bg-[#1e9a83] text-white px-6 py-2 rounded-xl font-bold hover:bg-[#157a67] transition-colors">
                    Yeni Proje Ekle
                </Link>
            </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">Görsel</th>
                            <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40">Proje Adı</th>
                            <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40">Kategori</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">
                        {projects.map((project: any) => (
                            <tr key={project.id} className="hover:bg-white/[0.02] transition-colors">
                                <td className="px-6 py-4">
                                    <div className="w-16 h-12 relative rounded-lg overflow-hidden bg-white/10">
                                        {project.hero_image && (
                                            <Image src={project.hero_image} alt={project.title} fill className="object-cover" />
                                        )}
                                    </div>
                                </td>
                                <td className="px-6 py-4">
                                    <div className="font-bold text-white">{project.title}</div>
                                    <div className="text-xs text-white/40">{project.slug}</div>
                                </td>
                                <td className="px-6 py-4">
                                    <span className="bg-white/5 px-2 py-1 rounded-md text-xs text-white/60">{project.category}</span>
                                </td>
                                <td className="px-6 py-4">
                                    {project.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">
                                    <Link href={`/admin/projects/${project.id}`} 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" />
                                    </Link>
                                    <form action={handleDelete}>
                                        <input type="hidden" name="id" value={project.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>
                        ))}
                        {(!projects || projects.length === 0) && (
                            <tr>
                                <td colSpan={5} className="px-6 py-8 text-center text-white/40">
                                    Henüz proje eklenmemiş.
                                </td>
                            </tr>
                        )}
                    </tbody>
                </table>
            </div>
        </div>
    );
}