import React from 'react';
import { Modal, Button, Message, Icon, Segment, Checkbox } from 'semantic-ui-react';

/**
 * One-time plaintext secret reveal modal.
 *
 * This modal is shown immediately after create or rotate. The plaintext is
 * only in-memory in this component state and the server response; it is
 * NEVER re-fetchable. The user must tick the acknowledgement box to dismiss.
 */
export default class OAuthClientSecretModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            acknowledged: false,
            copied: false
        };
    }

    copyToClipboard() {
        const secret = this.props.plaintextSecret;
        if (!secret) return;
        try {
            navigator.clipboard.writeText(secret).then(() => {
                this.setState({ copied: true });
                setTimeout(() => this.setState({ copied: false }), 2000);
            });
        } catch (e) {
            console.error('clipboard write failed', e);
        }
    }

    render() {
        const { open, onClose, clientId, plaintextSecret, title } = this.props;
        const { acknowledged, copied } = this.state;

        return (
            <Modal open={open} size="small" closeOnDimmerClick={false} closeOnEscape={false}>
                <Modal.Header>
                    <Icon name="key" /> {title || 'Client secret — save it now'}
                </Modal.Header>
                <Modal.Content>
                    <Message warning>
                        <Message.Header>This is the only time this secret will be shown.</Message.Header>
                        <p>Store it securely (1Password, encrypted channel). If you lose it, you'll need to rotate.</p>
                    </Message>

                    {clientId && (
                        <Segment secondary>
                            <strong>Client ID:</strong>{' '}
                            <code style={{ userSelect: 'all' }}>{clientId}</code>
                        </Segment>
                    )}

                    <Segment secondary>
                        <strong>Client Secret:</strong>
                        <div style={{
                            fontFamily: 'monospace',
                            padding: '0.75em',
                            marginTop: '0.5em',
                            background: '#f7f7f7',
                            border: '1px solid #ccc',
                            wordBreak: 'break-all',
                            userSelect: 'all'
                        }}>
                            {plaintextSecret}
                        </div>
                        <Button
                            icon labelPosition="left"
                            size="small"
                            style={{ marginTop: '0.5em' }}
                            onClick={() => this.copyToClipboard()}
                        >
                            <Icon name={copied ? 'check' : 'copy'} />
                            {copied ? 'Copied' : 'Copy to clipboard'}
                        </Button>
                    </Segment>

                    <Checkbox
                        checked={acknowledged}
                        onChange={(e, d) => this.setState({ acknowledged: d.checked })}
                        label="I have saved this secret in a secure location."
                    />
                </Modal.Content>
                <Modal.Actions>
                    <Button
                        primary
                        disabled={!acknowledged}
                        onClick={onClose}
                    >
                        Done
                    </Button>
                </Modal.Actions>
            </Modal>
        );
    }
}