import AppLayout from '@/Layouts/AppLayout';
import { MasterCrudPage } from '@/Components/MasterCrudPage';

interface UserRow {
    id: number;
    name: string;
    email: string;
    role: string;
    tarif_honor: number | null;
    status: string;
}

function StatusBadge({ status }: { status: string }) {
    const color = status === 'Aktif' ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-100 text-gray-500';
    return <span className={`inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ${color}`}>{status}</span>;
}

export default function UsersPage() {
    return (
        <AppLayout>
            <MasterCrudPage<UserRow>
                title="Manajemen User"
                resourceKey="users"
                apiPath="/users"
                menuKey="users"
                emptyForm={{ name: '', email: '', password: '', role: 'PA', tarif_honor: null, status: 'Aktif' }}
                columns={[
                    { header: 'Nama', cell: (r) => r.name, sortKey: (r) => r.name },
                    { header: 'Email', cell: (r) => r.email, sortKey: (r) => r.email },
                    { header: 'Role', cell: (r) => r.role, sortKey: (r) => r.role },
                    { header: 'Tarif Honor', cell: (r) => (r.tarif_honor != null ? `Rp ${r.tarif_honor.toLocaleString('id-ID')}` : '-'), sortKey: (r) => r.tarif_honor },
                    { header: 'Status', cell: (r) => <StatusBadge status={r.status} />, sortKey: (r) => r.status },
                ]}
                fields={[
                    { name: 'name', label: 'Nama', required: true },
                    { name: 'email', label: 'Email', type: 'email', required: true },
                    { name: 'password', label: 'Password', type: 'password' },
                    {
                        name: 'role', label: 'Role', type: 'select', required: true,
                        options: ['Superadmin', 'Admin', 'Koordinator', 'PA'].map((v) => ({ id: v, label: v })),
                    },
                    { name: 'tarif_honor', label: 'Tarif Honor (khusus PA)', type: 'number' },
                    {
                        name: 'status', label: 'Status', type: 'select',
                        options: ['Aktif', 'Tidak Aktif'].map((v) => ({ id: v, label: v })),
                    },
                ]}
            />
        </AppLayout>
    );
}