import { useState, useEffect } from 'react';
import Head from 'next/head';
import Layout from '../../components/Layout';
import { adminAPI } from '../../services/api';

export default function AdminUsers() {
    const [users, setUsers] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);

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

    const loadUsers = async () => {
        try {
            const { data } = await adminAPI.getUsers({ page: '1', limit: '50' });
            setUsers(data.data.users || []);
        } catch (err) { console.error(err); }
        setLoading(false);
    };

    const handleSuspend = async (id: string) => {
        if (!confirm('Suspend user ini?')) return;
        await adminAPI.suspendUser(id);
        loadUsers();
    };

    const handleActivate = async (id: string) => {
        await adminAPI.activateUser(id);
        loadUsers();
    };

    if (loading) return <Layout requireAdmin><div className="flex justify-center py-20"><div className="animate-spin w-8 h-8 border-4 border-brand-primary border-t-transparent rounded-full" /></div></Layout>;

    return (
        <>
            <Head><title>Manage Users – MarketScope Admin</title></Head>
            <Layout requireAdmin>
                <div className="animate-fade-in">
                    <h1 className="text-2xl font-bold mb-6">👥 Manage Users</h1>

                    <div className="card">
                        <div className="overflow-x-auto">
                            <table className="w-full">
                                <thead>
                                    <tr className="text-left text-xs text-gray-500 uppercase border-b border-dark-border">
                                        <th className="pb-3">Name</th>
                                        <th className="pb-3">Email</th>
                                        <th className="pb-3">Role</th>
                                        <th className="pb-3">Status</th>
                                        <th className="pb-3">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {users.map((u) => (
                                        <tr key={u.id} className="border-b border-dark-border/50 text-sm hover:bg-dark-hover/10 transition-colors">
                                            <td className="py-4 font-medium">{u.name}</td>
                                            <td className="py-4 text-gray-400">{u.email}</td>
                                            <td className="py-4">
                                                <span className={`px-2.5 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider ${u.role === 'ADMIN' ? 'bg-purple-500/10 text-purple-400 border border-purple-500/20' :
                                                        u.role === 'USER_PRO' ? 'bg-yellow-500/10 text-yellow-400 border border-yellow-500/20' :
                                                            'bg-blue-500/10 text-blue-400 border border-blue-500/20'
                                                    }`}>
                                                    {u.role.replace('USER_', '')}
                                                </span>
                                            </td>
                                            <td className="py-4">
                                                <span className={`flex items-center gap-1.5 text-xs ${u.status === 'ACTIVE' ? 'text-green-400' : 'text-red-400'}`}>
                                                    <div className={`w-1.5 h-1.5 rounded-full ${u.status === 'ACTIVE' ? 'bg-green-500' : 'bg-red-500'}`} />
                                                    {u.status}
                                                </span>
                                            </td>
                                            <td className="py-4">
                                                {u.status === 'ACTIVE' ? (
                                                    <button onClick={() => handleSuspend(u.id)} className="text-xs text-red-400 hover:text-red-300 transition-colors">Suspend</button>
                                                ) : (
                                                    <button onClick={() => handleActivate(u.id)} className="text-xs text-green-400 hover:text-green-300 transition-colors">Activate</button>
                                                )}
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </Layout>
        </>
    );
}
