import React from 'react';
import superagent from 'superagent';
import { Segment, Table, Message, Loader, Label } from 'semantic-ui-react';

/**
 * Lists user grants for a given OAuth client. Empty in Phase A (no OAuth flow
 * yet to produce grants); ships alongside so the detail page layout is stable.
 */
export default class OAuthGrantsList extends React.Component {
    constructor(props) {
        super(props);
        this.state = { loading: true, grants: [], error: null };
    }

    async componentDidMount() {
        if (!this.props.uniqueId) return;
        try {
            const res = await superagent
                .get(`/api/admin/oauth/clients/${this.props.uniqueId}/grants`)
                .accept('json');
            this.setState({ grants: res.body.grants || [], loading: false });
        } catch (e) {
            this.setState({ error: e.response?.body?.message || e.message, loading: false });
        }
    }

    render() {
        const { loading, grants, error } = this.state;

        if (loading) return <Loader active inline="centered">Loading grants…</Loader>;
        if (error) return <Message negative>{error}</Message>;

        if (grants.length === 0) {
            return (
                <Segment placeholder>
                    <Message info>
                        <Message.Header>No grants yet</Message.Header>
                        <p>User grants appear here once Phase B (authorize + consent) ships and real users start authorizing this client.</p>
                    </Message>
                </Segment>
            );
        }

        return (
            <Table compact selectable>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>User</Table.HeaderCell>
                        <Table.HeaderCell>Scopes</Table.HeaderCell>
                        <Table.HeaderCell>Granted</Table.HeaderCell>
                        <Table.HeaderCell>Status</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>
                <Table.Body>
                    {grants.map(g => (
                        <Table.Row key={g.uniqueId}>
                            <Table.Cell><code>{g.userId}</code></Table.Cell>
                            <Table.Cell>
                                {(g.scopes || []).map(s => (
                                    <Label key={s} size="mini" style={{ margin: 2 }}>{s}</Label>
                                ))}
                            </Table.Cell>
                            <Table.Cell>{new Date(g.grantedAt).toLocaleString()}</Table.Cell>
                            <Table.Cell>
                                {g.revokedAt
                                    ? <Label color="red" size="mini">revoked</Label>
                                    : <Label color="green" size="mini">active</Label>}
                            </Table.Cell>
                        </Table.Row>
                    ))}
                </Table.Body>
            </Table>
        );
    }
}