import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import { X, User, Trash2, Shield, ShieldAlert, Lock, Unlock, Loader2 } from 'lucide-react';
export const UserManagementModal = ({ isOpen, onClose }) => {
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');
    const fetchUsers = async () => {
        setLoading(true);
        try {
            const API_BASE = `http://${window.location.hostname}:3001`;
            const response = await fetch(`${API_BASE}/api/v1/users`, {
                headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
            });
            if (!response.ok)
                throw new Error('Không thể tải danh sách người dùng');
            const data = await response.json();
            setUsers(data);
        }
        catch (err) {
            setError(err.message);
        }
        finally {
            setLoading(false);
        }
    };
    useEffect(() => {
        if (isOpen)
            fetchUsers();
    }, [isOpen]);
    const handleToggleBlock = async (id) => {
        try {
            const API_BASE = `http://${window.location.hostname}:3001`;
            await fetch(`${API_BASE}/api/v1/users/block/${id}`, {
                method: 'POST',
                headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
            });
            fetchUsers();
        }
        catch (err) {
            alert('Lỗi khi thay đổi trạng thái block');
        }
    };
    const handleDelete = async (id) => {
        if (!confirm('Bạn có chắc chắn muốn xóa người dùng này?'))
            return;
        try {
            const API_BASE = `http://${window.location.hostname}:3001`;
            const res = await fetch(`${API_BASE}/api/v1/users/${id}`, {
                method: 'DELETE',
                headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
            });
            if (!res.ok) {
                const data = await res.json();
                throw new Error(data.message);
            }
            fetchUsers();
        }
        catch (err) {
            alert(err.message);
        }
    };
    if (!isOpen)
        return null;
    return (_jsxs("div", { className: "fixed inset-0 z-[2000] flex items-center justify-center p-4", children: [_jsx("div", { className: "absolute inset-0 bg-gray-900/60 backdrop-blur-sm", onClick: onClose }), _jsxs("div", { className: "relative w-full max-w-4xl bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]", children: [_jsxs("div", { className: "p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50/50", children: [_jsxs("div", { children: [_jsxs("h2", { className: "text-2xl font-bold text-gray-900 flex items-center gap-2", children: [_jsx(Shield, { className: "w-6 h-6 text-blue-600" }), " Qu\u1EA3n l\u00FD ng\u01B0\u1EDDi d\u00F9ng"] }), _jsx("p", { className: "text-sm text-gray-500", children: "Qu\u1EA3n tr\u1ECB vi\u00EAn c\u00F3 quy\u1EC1n th\u00EAm, s\u1EEDa, x\u00F3a ho\u1EB7c kh\u00F3a t\u00E0i kho\u1EA3n." })] }), _jsx("button", { onClick: onClose, className: "p-2 hover:bg-gray-200 rounded-full transition-colors", children: _jsx(X, { className: "w-6 h-6 text-gray-400" }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-6", children: loading ? (_jsx("div", { className: "flex justify-center py-20", children: _jsx(Loader2, { className: "w-10 h-10 animate-spin text-blue-600" }) })) : error ? (_jsx("div", { className: "p-4 bg-red-50 text-red-600 rounded-xl font-bold", children: error })) : (_jsxs("table", { className: "w-full text-left border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "text-gray-400 text-xs uppercase tracking-wider border-b border-gray-100", children: [_jsx("th", { className: "pb-4 font-bold px-2", children: "Ng\u01B0\u1EDDi d\u00F9ng" }), _jsx("th", { className: "pb-4 font-bold", children: "Vai tr\u00F2" }), _jsx("th", { className: "pb-4 font-bold", children: "Tr\u1EA1ng th\u00E1i" }), _jsx("th", { className: "pb-4 font-bold text-right", children: "Thao t\u00E1c" })] }) }), _jsx("tbody", { className: "divide-y divide-gray-50", children: users.map(u => (_jsxs("tr", { className: "group hover:bg-gray-50/50 transition-colors", children: [_jsx("td", { className: "py-4 px-2", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold", children: u.name?.charAt(0) || _jsx(User, { className: "w-5 h-5" }) }), _jsxs("div", { children: [_jsx("div", { className: "font-bold text-gray-900", children: u.name || 'N/A' }), _jsx("div", { className: "text-xs text-gray-400", children: u.email })] })] }) }), _jsx("td", { className: "py-4", children: u.isAdmin ? (_jsx("span", { className: "px-2 py-1 bg-purple-50 text-purple-600 text-[10px] font-black rounded-md border border-purple-100", children: "ADMIN" })) : (_jsx("span", { className: "px-2 py-1 bg-gray-50 text-gray-500 text-[10px] font-black rounded-md border border-gray-100", children: "USER" })) }), _jsx("td", { className: "py-4", children: u.isBlocked ? (_jsxs("span", { className: "flex items-center gap-1 text-red-500 text-xs font-bold", children: [_jsx(ShieldAlert, { className: "w-3 h-3" }), " \u0110\u00E3 kh\u00F3a"] })) : (_jsx("span", { className: "text-green-500 text-xs font-bold", children: "\u0110ang ho\u1EA1t \u0111\u1ED9ng" })) }), _jsx("td", { className: "py-4 text-right", children: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx("button", { onClick: () => handleToggleBlock(u.id), className: `p-2 rounded-xl transition-all ${u.isBlocked ? 'bg-green-50 text-green-600 hover:bg-green-100' : 'bg-amber-50 text-amber-600 hover:bg-amber-100'}`, title: u.isBlocked ? 'Mở khóa' : 'Khóa tài khoản', children: u.isBlocked ? _jsx(Unlock, { className: "w-4 h-4" }) : _jsx(Lock, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => handleDelete(u.id), className: "p-2 bg-red-50 text-red-600 rounded-xl hover:bg-red-100 transition-all", title: "X\u00F3a ng\u01B0\u1EDDi d\u00F9ng", children: _jsx(Trash2, { className: "w-4 h-4" }) })] }) })] }, u.id))) })] })) })] })] }));
};
//# sourceMappingURL=UserManagementModal.js.map