'use client'

import { removeUserRole, updateUserRole } from '../../actions'
import { useState } from 'react'

export function UserRoleActions({ ur, orgId }: { ur: { id: string, role: string, user: { email: string } }, orgId: string }) {
    const [isPending, setIsPending] = useState(false)

    const handleRemove = async () => {
        if (!confirm(`Möchten Sie den Zugriff für ${ur.user.email} wirklich entfernen?`)) return
        setIsPending(true)
        await removeUserRole(ur.id, orgId)
        setIsPending(false)
    }

    const handleToggleRole = async () => {
        const newRole = ur.role === 'admin' ? 'member' : 'admin'
        setIsPending(true)
        await updateUserRole(ur.id, orgId, newRole)
        setIsPending(false)
    }

    return (
        <div className="flex items-center gap-2">
            <button
                onClick={handleToggleRole}
                disabled={isPending}
                className="text-xs text-gray-600 hover:text-brand-600 font-medium transition-colors"
                title={ur.role === 'admin' ? 'Zum Mitglied machen' : 'Zum Admin machen'}
            >
                {ur.role === 'admin' ? 'Rolle: Admin' : 'Rolle: Mitglied'}
            </button>
            <button
                onClick={handleRemove}
                disabled={isPending}
                className="text-xs text-red-600 hover:text-red-700 font-medium transition-colors"
            >
                Entfernen
            </button>
        </div>
    )
}