import {Trash2} from 'lucide-react'
import {useMutation, useQueryClient, type UseQueryResult} from '@tanstack/react-query'
import {useState} from 'react'
import {createUserPoolGroup, deleteUserPoolGroup} from '@/api/cloudProxyClient'
import type {UserPoolGroup} from '@/types/resource'

type Props = {
    poolId: string
    groupsQuery: UseQueryResult<UserPoolGroup[]>
    groupsKey: unknown[]
    runtimeReachable: boolean
}

export function CognitoGroupsSection({poolId, groupsQuery, groupsKey, runtimeReachable}: Props) {
    const queryClient = useQueryClient()
    const [name, setName] = useState('')
    const [description, setDescription] = useState('')
    const [precedence, setPrecedence] = useState('')
    const refresh = () => queryClient.invalidateQueries({queryKey: groupsKey})

    const createMutation = useMutation({
        mutationFn: () => createUserPoolGroup('aws', poolId, {
            name: name.trim(),
            ...(description.trim() ? {description: description.trim()} : {}),
            ...(precedence.trim() ? {precedence: Number(precedence)} : {}),
        }),
        onSuccess: () => {
            setName('')
            setDescription('')
            setPrecedence('')
            return refresh()
        },
    })
    const deleteMutation = useMutation({
        mutationFn: (groupName: string) => deleteUserPoolGroup('aws', poolId, groupName),
        onSuccess: refresh,
    })

    const groups = groupsQuery.data ?? []
    const pending = createMutation.isPending || deleteMutation.isPending
    const error = groupsQuery.error ?? createMutation.error ?? deleteMutation.error

    return <>
        <div className="input-row resource-table-bar">
            <div><p className="eyebrow">Groups</p><span className="muted">Group names appear in the <code>cognito:groups</code> token claim, so apps can check roles</span></div>
        </div>
        <form className="dynamic-form" aria-label="Create group" onSubmit={(event) => { event.preventDefault(); if (name.trim()) createMutation.mutate() }}>
            <label className="dynamic-field"><span>Group name</span><input className="input" value={name} onChange={(event) => setName(event.target.value)} placeholder="admins" disabled={pending} required/></label>
            <label className="dynamic-field"><span>Description</span><input className="input" value={description} onChange={(event) => setDescription(event.target.value)} disabled={pending}/></label>
            <label className="dynamic-field"><span>Precedence</span><input className="input" type="number" min={0} step={1} value={precedence} onChange={(event) => setPrecedence(event.target.value)} disabled={pending}/><small className="muted">Lower wins when a user is in several groups.</small></label>
            <div style={{alignSelf: 'end'}}><button className="button primary" type="submit" disabled={!runtimeReachable || !name.trim() || pending}>{createMutation.isPending ? 'Creating' : 'Create group'}</button></div>
        </form>
        {error instanceof Error && <p className="error-text compact-text" role="alert">{error.message}</p>}
        {groupsQuery.isSuccess && groups.length === 0 && <p className="muted padded">No groups yet.</p>}
        {groups.length > 0 && <div className="cognito-table"><table className="table"><thead><tr><th>Name</th><th>Description</th><th>Precedence</th><th/></tr></thead><tbody>{groups.map((group) => (
            <tr key={group.name}>
                <td><code>{group.name}</code></td>
                <td>{group.description || '—'}</td>
                <td>{group.precedence ?? '—'}</td>
                <td><button className="icon-btn danger" type="button" title="Delete group" aria-label={`Delete group ${group.name}`} disabled={!runtimeReachable || pending} onClick={() => deleteMutation.mutate(group.name)}><Trash2 size={14}/></button></td>
            </tr>
        ))}</tbody></table></div>}
    </>
}