/* Pagina /perfil — dados pessoais + 2FA + LGPD. */

const { useState, useEffect } = React;


function ProfilePage() {
    const [me, setMe]           = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError]     = useState(null);

    async function reload() {
        try {
            const u = await window.C7_API.get('/auth/me');
            setMe(u);
            window.C7_STORE.set({ user: u });
        } catch (e) {
            setError(e.message || 'erro');
        } finally {
            setLoading(false);
        }
    }

    useEffect(() => { reload(); }, []);

    const { AppShell } = window.C7_Layout;
    const { Alert } = window.C7_Forms;

    if (loading) {
        return <AppShell current_path="/perfil">
            <div className="c-card"><p style={{color:'rgba(200,200,205,0.6)'}}>carregando…</p></div>
        </AppShell>;
    }
    if (!me) {
        return <AppShell current_path="/perfil">
            <Alert kind="error">{error}</Alert>
        </AppShell>;
    }

    return (
        <AppShell current_path="/perfil">
            <div className="c-card">
                <h2>Perfil</h2>
                <dl className="kv">
                    <dt>Nome</dt><dd>{me.nome}</dd>
                    <dt>Email</dt><dd>{me.email}</dd>
                    <dt>External ID</dt><dd className="c-mono">{me.external_id}</dd>
                    <dt>KYC</dt><dd>
                        <span className="c-badge" style={{
                            background: me.kyc_status === 'approved' ? 'rgba(55,178,77,0.15)'
                                      : me.kyc_status === 'rejected' ? 'rgba(217,54,44,0.15)'
                                      : 'rgba(255,200,87,0.15)',
                            color:      me.kyc_status === 'approved' ? '#51cf66'
                                      : me.kyc_status === 'rejected' ? '#ff6b6b'
                                      : '#ffc857',
                        }}>{window.C7_kycLabel(me.kyc_status)}</span>
                        {' '}— nível {me.kyc_level}
                    </dd>
                    <dt>2FA</dt><dd>
                        {me.totp_enabled
                            ? <span style={{color: '#51cf66'}}>✓ habilitado</span>
                            : <a href="#/setup-2fa">configurar agora</a>}
                    </dd>
                    <dt>Wallet destino</dt>
                    <dd className="c-mono" style={{wordBreak:'break-all'}}>
                        {me.usdt_wallet_destino || <em style={{color:'rgba(200,200,205,0.4)'}}>nao cadastrada</em>}
                    </dd>
                    <dt>Wallet origem</dt>
                    <dd className="c-mono" style={{wordBreak:'break-all'}}>
                        {me.usdt_wallet_origem || <em style={{color:'rgba(200,200,205,0.4)'}}>não cadastrado</em>}
                    </dd>
                </dl>

                <p style={{color:'rgba(200,200,205,0.55)', fontSize: 12, marginTop: 14}}>
                    Para alterar dados cadastrais ou wallets, entre em contato com o suporte.
                </p>
            </div>

            {/* Carteira USDT — liberada apos KYC approved */}
            <WalletCard me={me} reload={reload} />

            {/* Segurança */}
            <div className="c-card">
                <h3>Segurança</h3>
                <dl className="kv">
                    <dt>Senha</dt>
                    <dd>
                        <a href="#/change-password" className="c-link-btn">
                            Alterar senha
                        </a>
                    </dd>
                    <dt>2FA</dt>
                    <dd>
                        {me.totp_enabled
                            ? <span style={{color: '#51cf66'}}>✓ habilitado</span>
                            : <a href="#/setup-2fa" className="c-link-btn">Configurar 2FA</a>}
                    </dd>
                    <dt>Sessões</dt>
                    <dd>
                        <button className="c-link-btn"
                                onClick={async () => {
                                    if (!confirm('Encerrar todas as outras sessões? Você sairá em todos os dispositivos.')) return;
                                    try {
                                        await window.C7_API.post('/auth/logout-all');
                                        window.C7_STORE.set({ user: null });
                                        window.C7_ROUTER.navigate('/login');
                                    } catch (e) {
                                        window.C7_Toast.show('erro: ' + (e.message || ''), 'error');
                                    }
                                }}>
                            Encerrar todas as sessões
                        </button>
                    </dd>
                </dl>
            </div>

            {/* LGPD */}
            <div className="c-card">
                <h3>Seus Dados (LGPD)</h3>
                <p style={{color:'rgba(200,200,205,0.7)', fontSize: 13}}>
                    Pela Lei Geral de Proteção de Dados, você pode solicitar:
                </p>
                <ul style={{color:'rgba(200,200,205,0.7)', fontSize: 13, lineHeight: 1.8}}>
                    <li>Visualização dos seus dados (esta página).</li>
                    <li>Correção de dados incorretos.</li>
                    <li>Exportação dos seus dados em formato estruturado.</li>
                    <li>Exclusão da conta — atenção: dados de KYC e operações ficam retidos por
                        10 anos por obrigação legal (Lei 9.613/1998 — PLD).</li>
                </ul>
                <p style={{color:'rgba(200,200,205,0.55)', fontSize: 12, marginTop: 10}}>
                    Solicitações via email do DPO: <a href="mailto:suporte@core7cap.com">suporte@core7cap.com</a> —
                    prazo de resposta: 15 dias corridos.
                </p>
            </div>

            <style>{`
                .kv { display: grid; grid-template-columns: 160px 1fr; gap: 10px 16px;
                      font-size: 13px; margin: 0; }
                .kv dt { color: rgba(200,200,205,0.55); }
                .kv dd { margin: 0; color: var(--c7-platinum); }
                .c-link-btn {
                    display: inline-block;
                    padding: 6px 14px;
                    background: transparent;
                    color: var(--c7-platinum);
                    border: 1px solid rgba(200, 200, 205, 0.35);
                    border-radius: 2px;
                    text-decoration: none;
                    font-family: var(--c7-font-display, 'Inter Tight', sans-serif);
                    font-size: 11px;
                    letter-spacing: 0.16em;
                    text-transform: uppercase;
                    transition: all 0.15s;
                }
                .c-link-btn:hover {
                    background: linear-gradient(180deg, #e6e6ea 0%, #c8c8cd 100%);
                    color: #0b0b0d;
                    border-color: #c8c8cd;
                }
            `}</style>
        </AppShell>
    );
}


/* ─── Card de cadastro da carteira USDT ────────────────────────────── */
function WalletCard({ me, reload }) {
    const [addr, setAddr]       = useState(me.usdt_wallet_destino || '');
    const [totp, setTotp]       = useState('');
    const [editing, setEditing] = useState(false);
    const [loading, setLoading] = useState(false);
    const [err, setErr]         = useState(null);
    const [ok, setOk]           = useState(false);
    const [checking, setChecking] = useState(false);
    const [checked, setChecked]   = useState(null);  // info on-chain
    const [ackNew, setAckNew]     = useState(false);

    const can_register = me.kyc_status === 'approved';
    const has_wallet   = !!me.usdt_wallet_destino;
    const addr_valid = /^T[1-9A-HJ-NP-Za-km-z]{33}$/.test(addr);

    // Auto-checa on-chain quando endereco fica valido (debounce 500ms)
    React.useEffect(() => {
        if (!editing && has_wallet) return;
        if (!addr_valid) { setChecked(null); return; }
        const t = setTimeout(async () => {
            setChecking(true);
            try {
                const r = await window.C7_API.post('/auth/wallet-destino/check',
                                                   { address: addr.trim() });
                setChecked(r);
            } catch (e) { setChecked(null); }
            finally { setChecking(false); }
        }, 500);
        return () => clearTimeout(t);
    }, [addr, addr_valid, editing, has_wallet]);

    const is_new_wallet = checked && checked.valid_format && checked.exists === false;

    async function on_save(e) {
        e.preventDefault();
        if (!addr_valid || totp.length < 6 || loading) return;
        if (is_new_wallet && !ackNew) {
            setErr('Confirme que a carteira é sua marcando a opção abaixo.');
            return;
        }
        setErr(null);
        setLoading(true);
        setOk(false);
        try {
            await window.C7_API._request('PATCH', '/auth/wallet-destino', {
                address:          addr.trim(),
                totp_code:        totp.trim(),
                acknowledged_new: ackNew,
            });
            setOk(true);
            setTotp('');
            setEditing(false);
            setChecked(null);
            setAckNew(false);
            if (reload) await reload();
        } catch (e) {
            setErr(e.message || 'falha ao salvar');
        } finally {
            setLoading(false);
        }
    }

    return (
        <div className="c-card">
            <h3>Carteira USDT (destino)</h3>
            <p style={{color:'rgba(200,200,205,0.7)', fontSize: 13, lineHeight: 1.5}}>
                Endereço Tron onde você vai receber os USDT comprados.
                Apenas endereços válidos da rede TRC-20.
            </p>

            {!can_register ? (
                <div style={{background: 'rgba(255,200,87,0.08)', border: '1px solid rgba(255,200,87,0.25)',
                              borderRadius: 8, padding: 14, color: 'rgba(200,200,205,0.85)', fontSize: 13}}>
                    Disponível após aprovação do KYC.
                    Status atual: <strong>{window.C7_kycLabel(me.kyc_status)}</strong>.
                </div>
            ) : !has_wallet || editing ? (
                <form onSubmit={on_save} style={{marginTop: 14}}>
                    <label style={{display: 'block', marginBottom: 12}}>
                        <span style={{display: 'block', fontSize: 12, color: 'rgba(200,200,205,0.55)',
                                       marginBottom: 6}}>Endereço Tron (USDT-TRC20)</span>
                        <input type="text" value={addr}
                               onChange={(e) => setAddr(e.target.value.trim())}
                               placeholder="T..." required
                               style={{width: '100%', padding: '10px 12px',
                                        background: 'rgba(0,0,0,0.25)',
                                        border: '1px solid rgba(200,200,205,0.35)',
                                        borderRadius: 8, color: '#fff',
                                        fontFamily: 'monospace', fontSize: 14,
                                        boxSizing: 'border-box'}} />
                        {addr && (
                            addr_valid
                                ? <small style={{color:'#4ade80', fontSize: 12}}>✓ formato válido</small>
                                : <small style={{color:'#ff6b6b', fontSize: 12}}>endereço Tron inválido</small>
                        )}
                    </label>

                    {/* Status on-chain */}
                    {addr_valid && checking && (
                        <div style={{fontSize: 12, color: 'rgba(200,200,205,0.6)',
                                      padding: 8, marginBottom: 12}}>
                            consultando blockchain…
                        </div>
                    )}
                    {addr_valid && checked && !checking && (
                        <div style={{padding: 12, marginBottom: 12, borderRadius: 8,
                                      fontSize: 13, lineHeight: 1.5,
                                      background: checked.exists
                                          ? 'rgba(74,222,128,0.08)'
                                          : 'rgba(255,200,87,0.08)',
                                      border: '1px solid ' + (checked.exists
                                          ? 'rgba(74,222,128,0.3)'
                                          : 'rgba(255,200,87,0.3)')}}>
                            {checked.exists ? (
                                <>
                                    <strong style={{color: '#4ade80'}}>✓ Carteira ativa on-chain</strong>
                                    <div style={{color: 'rgba(200,200,205,0.8)', marginTop: 4}}>
                                        Saldo: {checked.balance_trx ?? '—'} TRX
                                        {checked.usdt_balance != null && (
                                            <> · {checked.usdt_balance} USDT</>
                                        )}
                                    </div>
                                </>
                            ) : (
                                <>
                                    <strong style={{color: '#ffc857'}}>⚠ Carteira nova (sem histórico on-chain)</strong>
                                    <div style={{color: 'rgba(200,200,205,0.8)', marginTop: 4}}>
                                        O endereço tem formato válido mas ainda não recebeu
                                        nenhuma transação na rede Tron. Confirme que é sua
                                        antes de salvar.
                                    </div>
                                </>
                            )}
                        </div>
                    )}

                    {/* Checkbox de confirmacao quando wallet e nova */}
                    {is_new_wallet && (
                        <label style={{display: 'flex', gap: 10, alignItems: 'flex-start',
                                        marginBottom: 14, fontSize: 13, cursor: 'pointer'}}>
                            <input type="checkbox" checked={ackNew}
                                   onChange={(e) => setAckNew(e.target.checked)}
                                   style={{marginTop: 3}} />
                            <span style={{color: 'rgba(255,200,200,0.9)'}}>
                                Confirmo que esta carteira é minha mesmo sendo nova
                                e que entendo o risco de enviar USDT pra ela.
                            </span>
                        </label>
                    )}
                    <label style={{display: 'block', marginBottom: 12}}>
                        <span style={{display: 'block', fontSize: 12, color: 'rgba(200,200,205,0.55)',
                                       marginBottom: 6}}>Código 2FA (6 dígitos)</span>
                        <input type="text" value={totp}
                               onChange={(e) => setTotp(e.target.value.replace(/\D/g,'').slice(0,6))}
                               inputMode="numeric" pattern="[0-9]{6}" maxLength={6}
                               placeholder="000000" required
                               style={{width: '100%', padding: '10px 12px',
                                        background: 'rgba(0,0,0,0.25)',
                                        border: '1px solid rgba(200,200,205,0.35)',
                                        borderRadius: 8, color: '#fff',
                                        fontFamily: 'monospace', fontSize: 16,
                                        letterSpacing: '4px', textAlign: 'center',
                                        boxSizing: 'border-box'}} />
                    </label>
                    {err && <div style={{background:'rgba(217,54,44,0.12)', borderRadius: 8,
                                          padding: 10, color: '#ff6b6b', fontSize: 13,
                                          marginBottom: 10}}>{err}</div>}
                    <div style={{display: 'flex', gap: 8}}>
                        <button type="submit" className="c-link-btn"
                                disabled={!addr_valid || totp.length < 6 || loading}>
                            {loading ? 'salvando…' : 'Salvar carteira'}
                        </button>
                        {has_wallet && (
                            <button type="button" className="c-link-btn"
                                    onClick={() => { setEditing(false); setAddr(me.usdt_wallet_destino); }}>
                                Cancelar
                            </button>
                        )}
                    </div>
                </form>
            ) : (
                <div style={{marginTop: 14}}>
                    <div className="c-mono" style={{wordBreak: 'break-all', fontSize: 14,
                                                      padding: 10, background: 'rgba(0,0,0,0.25)',
                                                      borderRadius: 8, marginBottom: 10}}>
                        {me.usdt_wallet_destino}
                    </div>
                    {ok && <div style={{color:'#4ade80', fontSize: 13, marginBottom: 8}}>
                        ✓ Carteira atualizada
                    </div>}
                    <button className="c-link-btn" onClick={() => { setEditing(true); setOk(false); }}>
                        Alterar carteira
                    </button>
                </div>
            )}
        </div>
    );
}


window.C7_ProfilePage = ProfilePage;