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

/**
 * Audit log viewer for a single OAuth client. Paged.
 */
export default class OAuthAuditLog extends React.Component {
    constructor(props) {
        super(props);
        this.state = { loading: true, events: [], error: null };
    }

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

    eventColor(eventType) {
        if (eventType.includes('failure') || eventType.includes('denied') || eventType.includes('reuse')) return 'red';
        if (eventType === 'client_disabled' || eventType === 'client_deleted' || eventType.includes('revoked')) return 'orange';
        if (eventType === 'client_created' || eventType === 'client_enabled') return 'green';
        return 'grey';
    }

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

        if (loading) return <Loader active inline="centered">Loading audit log…</Loader>;
        if (error) return <Message negative>{error}</Message>;
        if (events.length === 0) return <Message info>No audit events yet.</Message>;

        return (
            <Table compact striped>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell>When</Table.HeaderCell>
                        <Table.HeaderCell>Event</Table.HeaderCell>
                        <Table.HeaderCell>Actor</Table.HeaderCell>
                        <Table.HeaderCell>IP</Table.HeaderCell>
                        <Table.HeaderCell>Details</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>
                <Table.Body>
                    {events.map(ev => (
                        <Table.Row key={ev.uniqueId}>
                            <Table.Cell>{new Date(ev.at).toLocaleString()}</Table.Cell>
                            <Table.Cell>
                                <Label size="mini" color={this.eventColor(ev.eventType)}>{ev.eventType}</Label>
                            </Table.Cell>
                            <Table.Cell><code style={{ fontSize: '0.85em' }}>{ev.actorAccountId || '—'}</code></Table.Cell>
                            <Table.Cell>{ev.ip || '—'}</Table.Cell>
                            <Table.Cell>
                                <pre style={{ fontSize: '0.75em', margin: 0 }}>
                                    {ev.details ? JSON.stringify(ev.details, null, 0) : ''}
                                </pre>
                            </Table.Cell>
                        </Table.Row>
                    ))}
                </Table.Body>
            </Table>
        );
    }
}