import { getAdminsAdmin, deleteAdminAdmin, getCurrentAdmin } from '../../actions';
import { revalidatePath } from 'next/cache';
import { Shield, KeyRound, Trash2 } from 'lucide-react';
import AddAdminModal from './AddAdminModal';
import ChangePasswordModal from './ChangePasswordModal';

export default async function AdminsAdminPage() {
    const admins = await getAdminsAdmin();
    const currentAdmin = await getCurrentAdmin();

    async function handleDelete(formData: FormData) {
        'use server';
        const id = Number(formData.get('id'));
        const res = await deleteAdminAdmin(id);
        if (res.error) {
            // Usually we want to return feedback, but a simple redirect/refresh works
            console.error(res.error);
        }
        revalidatePath('/admin/users');
    }

    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">Yöneticiler</h1>
                    <p className="text-white/40">Sistem yöneticileri ve erişim kontrolü.</p>
                </div>
                <AddAdminModal />
            </div>

            <div className="bg-zinc-950 border border-white/10 rounded-2xl overflow-hidden shadow-2xl">
                <table className="w-full text-left border-collapse">
                    <thead>
                        <tr className="border-b border-white/10 bg-white/[0.02]">
                            <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40">ID</th>
                            <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40">Kullanıcı Adı</th>
                            <th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40">Oluşturulma Tarihi</th>
                            <th className="px-6 py-4 text-right text-[10px] font-bold uppercase tracking-widest text-white/40">İşlemler</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-white/5">
                        {admins.map((admin: any) => {
                            const isSelf = admin.username === currentAdmin;
                            return (
                                <tr key={admin.id} className="hover:bg-white/[0.01] transition-colors">
                                    <td className="px-6 py-4 text-sm text-white/40 font-mono">#{admin.id}</td>
                                    <td className="px-6 py-4">
                                        <div className="flex items-center gap-3">
                                            <div className={`p-1.5 rounded-lg ${isSelf ? 'bg-primary/20 text-primary' : 'bg-white/5 text-white/60'}`}>
                                                <Shield className="w-4 h-4" />
                                            </div>
                                            <div className="font-bold text-white tracking-wide">
                                                {admin.username}
                                                {isSelf && (
                                                    <span className="ml-2 bg-primary/20 text-primary text-[9px] font-black uppercase tracking-widest px-2 py-0.5 rounded-md">
                                                        Siz
                                                    </span>
                                                )}
                                            </div>
                                        </div>
                                    </td>
                                    <td className="px-6 py-4 text-sm text-white/60">
                                        {new Date(admin.created_at).toLocaleDateString('tr-TR', {
                                            year: 'numeric',
                                            month: 'long',
                                            day: 'numeric',
                                            hour: '2-digit',
                                            minute: '2-digit'
                                        })}
                                    </td>
                                    <td className="px-6 py-4 text-right">
                                        <div className="flex justify-end items-center gap-3">
                                            {/* Change Password */}
                                            <ChangePasswordModal admin={admin} />

                                            {/* Delete Admin */}
                                            {!isSelf && (
                                                <form action={handleDelete} onSubmit={(e) => {
                                                    if (!confirm(`${admin.username} yöneticisini silmek istediğinize emin misiniz?`)) {
                                                        e.preventDefault();
                                                    }
                                                }} className="inline">
                                                    <input type="hidden" name="id" value={admin.id} />
                                                    <button 
                                                        type="submit" 
                                                        className="p-2 bg-red-500/10 text-red-500 rounded-lg hover:bg-red-500 hover:text-white transition-all cursor-pointer"
                                                        title="Yöneticiyi Sil"
                                                    >
                                                        <Trash2 className="w-4.5 h-4.5" />
                                                    </button>
                                                </form>
                                            )}
                                        </div>
                                    </td>
                                </tr>
                            );
                        })}
                    </tbody>
                </table>
            </div>
        </div>
    );
}