'use client';

import { useEffect, useState } from "react";
import { deleteUtilisateur, getUtilisateurs } from "../../../api/admin";
import UserForm from "../../../app/components/admin/users/UserForm";
import { getRoleBadge } from "../../../app/utils/mapRoleBadge";
import { measure } from "../../../app/utils/performance";
import Link from "next/link";

export default function AdminUsers() {
    const [users, setUsers] = useState<any[]>([]);
    const [selectedUser, setSelectedUser] = useState<any | null>(null);

    async function fetchUsers() {
        const data = await measure("Chargement liste utilisateurs", () => getUtilisateurs());
        setUsers(data);
    }

    useEffect(() => {
        fetchUsers();
    }, []);

    const handleDeleteUtilisateur = async (id: string) => {
        try {
            await deleteUtilisateur(id);
            await fetchUsers();
        } catch (error) {
            console.error(error);
        }
    };

    return (
        <div className="min-h-screen bg-[#f4f8f6] p-2">
            <Link
                href="/admin"
                className="
          px-1 py-1 rounded-xl
          bg-white border border-[#dce8e2]
          text-[#2f5d4b]
        "
            >
                ← Retour à l'espace admin
            </Link>
            <div className="max-w-8xl mx-auto flex flex-col gap-2 mt-4">

                <div className="bg-gradient-to-r from-[#2f7d5f] to-[#3f9b74] rounded-3xl p-4 shadow-xl text-white">

                    <h1 className="text-3xl font-bold">
                        Gestion des utilisateurs
                    </h1>

                    <p className="mt-1 text-white/90">
                        Administration des accès et rôles utilisateurs
                    </p>
                </div>

                <div className="grid grid-cols-1 xl:grid-cols-[2fr_380px] gap-1">
                    <div className="bg-white rounded-3xl shadow-sm border border-[#dce8e2] overflow-hidden">

                        <div className="p-3 border-b border-[#eef3f0]">
                            <h2 className="text-xl font-semibold text-[#1f5f4a]">
                                Utilisateurs
                            </h2>
                        </div>

                        <div className="overflow-auto">

                            <table className="w-full text-sm">

                                <thead className="bg-[#f4f8f6] text-[#2f5d4b]">

                                    <tr>
                                        <th className="text-left px-4 py-3">Nom</th>
                                        <th className="text-left px-4 py-3">Prénom</th>
                                        <th className="text-left px-4 py-3">Email</th>
                                        <th className="text-left px-4 py-3">Rôle</th>
                                        <th className="text-left px-4 py-3">Sécurité</th>
                                        <th className="text-left px-4 py-3">Actions</th>
                                    </tr>

                                </thead>

                                <tbody>

                                    {users.map((user) => {

                                        const mustChange = user.must_change_password;

                                        return (
                                            <tr
                                                key={user.id}
                                                className="border-b border-[#eef3f0] hover:bg-[#f9fcfa] transition"
                                            >

                                                <td className="px-4 py-3">
                                                    {user.nom}
                                                </td>

                                                <td className="px-4 py-3">
                                                    {user.prenom}
                                                </td>

                                                <td className="px-4 py-3">
                                                    {user.email}
                                                </td>

                                                <td className="px-4 py-3">
                                                    <span
                                                        className={`px-3 py-1 rounded-full text-xs font-semibold 
                                                            ${getRoleBadge(user.roles?.intitule)}`}>
                                                        {user.roles?.intitule}
                                                    </span>
                                                </td>

                                                <td className="px-4 py-3">

                                                    {mustChange ? (
                                                        <span className="px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-700">
                                                            Doit changer
                                                        </span>
                                                    ) : (
                                                        <span className="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700">
                                                            À jour
                                                        </span>
                                                    )}

                                                </td>

                                                <td className="px-4 py-3">

                                                    <div className="flex gap-2">

                                                        <button
                                                            onClick={() => setSelectedUser(user)}
                                                            className="px-1 py-1 rounded-lg text-xs bg-[#eef7f2] hover:bg-[#d9efe5] text-[#2f7d5f]
                                                            cursor-pointer"
                                                        >
                                                            Modifier
                                                        </button>

                                                        <button
                                                            className="px-3 py-1.5 rounded-lg text-xs bg-red-50 hover:bg-red-100 text-red-600
                                                            cursor-pointer"
                                                            onClick={() => handleDeleteUtilisateur(user.id)}
                                                        >
                                                            Supprimer
                                                        </button>

                                                    </div>

                                                </td>

                                            </tr>
                                        );
                                    })}

                                </tbody>

                            </table>

                        </div>
                    </div>

                    <UserForm
                        user={selectedUser}
                        onSaved={fetchUsers}
                    />

                </div>

            </div>

        </div>
    );
}