import React from 'react';
import Styles from './styles.module.less';
import { Avatar } from 'antd';
const Authorize = (props) => {
    const { oakFullpath, loading, hasError, errorMsg, userInfo, response_type, client_id, redirect_uri, scope, state, clientInfo, name, nickname, mobile, avatarUrl } = props.data;
    const { t, handleGrant, handleDeny } = props.methods;
    // Loading state
    if (loading) {
        return (<div className={Styles.container}>
                <div className={Styles.loadingBox}>
                    <div className={Styles.spinner}></div>
                    <div className={Styles.loadingText}>{t('oauth.authorize.loading')}</div>
                </div>
            </div>);
    }
    // Error state
    if (hasError) {
        return (<div className={Styles.container}>
                <div className={Styles.errorBox}>
                    <div className={Styles.errorTitle}>{t('oauth.authorize.error.title')}</div>
                    <div className={Styles.errorMessage}>{t(errorMsg)}</div>
                </div>
            </div>);
    }
    // Logged in - show authorization confirmation
    return (<div className={Styles.container}>
            <div className={Styles.authorizeBox}>
                <div className={Styles.title}>{t('oauth.authorize.title')}</div>
                <div className={Styles.description}>
                    {t('oauth.authorize.description')}
                </div>

                <div className={Styles.appInfo}>
                    <div className={Styles.infoLabel}>{t('oauth.authorize.clientName')}:</div>
                    <div className={Styles.infoValue}>{clientInfo?.name || client_id}</div>
                    {clientInfo?.description && (<>
                            <div className={Styles.infoLabel}>{t('oauth.authorize.clientDescription')}:</div>
                            <div className={Styles.descValue}>{clientInfo.description}</div>
                        </>)}
                </div>

                <div className={Styles.scopeSection}>
                    <div className={Styles.scopeTitle}>{t('oauth.authorize.scope')}</div>
                    <div className={Styles.scopeItem}>
                        <span className={Styles.scopeIcon}>✓</span>
                        <span>{t('oauth.authorize.allPermissions')}</span>
                    </div>
                </div>

                <div className={Styles.userInfo}>
                    {avatarUrl ? (<Avatar className={Styles.avatar} src={avatarUrl}></Avatar>) : (<Avatar className={Styles.avatar}>
                            <span className={Styles.text}>
                                {nickname?.[0]}
                            </span>
                        </Avatar>)}
                    <div className={Styles.userDetails}>
                        <div className={Styles.userName}>{name || nickname}</div>
                        {mobile && <div className={Styles.userMobile}>{mobile}</div>}
                    </div>
                </div>

                <div className={Styles.actions}>
                    <button className={Styles.denyButton} onClick={handleDeny}>
                        {t('oauth.authorize.deny')}
                    </button>
                    <button className={Styles.grantButton} onClick={handleGrant}>
                        {t('oauth.authorize.confirm')}
                    </button>
                </div>
            </div>
        </div>);
};
export default Authorize;