/* Dashboard — resumo da conta + últimas ordens. */

const { useState, useEffect } = React;


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

    useEffect(() => {
        (async () => {
            // /auth/me sempre carrega — nao depende de KYC
            try {
                const user = await window.C7_API.get('/auth/me');
                setMe(user);
                window.C7_STORE.set({ user });
            } catch (e) {
                setError('Falha ao carregar perfil: ' + (e.message || 'erro'));
                setLoading(false);
                return;
            }
            // /b2b/orders so funciona com KYC approved. Falha silenciosa
            // se nao aprovado — o card de KYC pending ja avisa o user.
            try {
                const list = await window.C7_API.get('/b2b/orders?limit=5');
                setOrders(list);
            } catch (e) {
                if (e.status !== 403) {
                    setError('Falha ao carregar ordens: ' + (e.message || 'erro'));
                }
            } finally {
                setLoading(false);
            }
        })();
    }, []);

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

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

    return (
        <AppShell current_path="/dashboard">
            <Alert kind="error">{error}</Alert>

            {/* Saude da conta */}
            <div className="c-card">
                <h2>Olá, {me.nome}</h2>
                <div className="info-grid">
                    <InfoTile label="KYC"
                              value={window.C7_kycLabel(me.kyc_status)}
                              tone={me.kyc_status === 'approved' ? 'ok'
                                  : me.kyc_status === 'rejected' ? 'error' : 'warn'} />
                    <InfoTile label="Nível"
                              value={'Nível ' + me.kyc_level}
                              tone="info" />
                    <InfoTile label="2FA"
                              value={me.totp_enabled ? 'ativo' : 'desativado'}
                              tone={me.totp_enabled ? 'ok' : 'warn'} />
                    <InfoTile label="Conta"
                              value={me.ativo ? 'ativa' : 'inativa'}
                              tone={me.ativo ? 'ok' : 'error'} />
                </div>

                {!me.totp_enabled && (
                    <Alert kind="warn">
                        Você ainda não habilitou 2FA. <a href="#/setup-2fa">Configurar agora</a> —
                        é obrigatório pra criar ordens.
                    </Alert>
                )}
                {me.kyc_status !== 'approved' && (
                    <Alert kind={me.kyc_status === 'rejected' ? 'error' : 'warn'}>
                        <b>{window.C7_kycLabel(me.kyc_status)}</b>.
                        {me.kyc_status === 'rejected'
                            ? ' Entre em contato com o suporte para reenvio dos documentos.'
                            : ' Você não pode criar ordens até a equipe aprovar.'}
                    </Alert>
                )}
            </div>

            {/* Acoes rapidas */}
            <div className="c-card">
                <h3>Ações</h3>
                <div className="quick-actions">
                    <a href="#/ordens/nova" className="c-btn">+ Nova ordem</a>
                    <a href="#/ordens"      className="c-btn c-btn-ghost">Ver todas ordens</a>
                    <a href="#/perfil"      className="c-btn c-btn-ghost">Meu perfil</a>
                </div>
            </div>

            {/* Ultimas ordens — so se KYC aprovado (endpoint exige) */}
            {me.kyc_status === 'approved' && (
            <div className="c-card">
                <h3>Últimas ordens</h3>
                {orders && orders.items.length === 0 ? (
                    <p style={{color:'rgba(200,200,205,0.6)', textAlign:'center', padding:14}}>
                        Nenhuma ordem ainda. <a href="#/ordens/nova">Criar a primeira</a>
                    </p>
                ) : (
                    <table className="c-table">
                        <thead><tr>
                            <th>Order ID</th><th>Side</th><th>USDT</th><th>BRL</th>
                            <th>Status</th><th>Criada</th>
                        </tr></thead>
                        <tbody>
                            {orders.items.map(o => (
                                <tr key={o.order_id} style={{cursor:'pointer'}}
                                    onClick={() => window.C7_ROUTER.navigate('/ordens/' + o.order_id)}>
                                    <td className="c-mono">{o.order_id.slice(0, 20)}…</td>
                                    <td><SideBadge side={o.side} /></td>
                                    <td>{Number(o.valor_usdt).toFixed(2)}</td>
                                    <td>R$ {Number(o.total_brl).toFixed(2)}</td>
                                    <td><StatusBadge status={o.status} /></td>
                                    <td>{fmt_dt(o.created_at)}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                )}
            </div>
            )}

            <style>{`
                .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
                             gap: 12px; margin-bottom: 14px; }
                .info-tile { background: rgba(255,255,255,0.02); border: 1px solid rgba(200,200,205,0.06);
                             padding: 12px 14px; border-radius: 6px; }
                .info-tile .lbl { font-size: 10px; color: rgba(200,200,205,0.5);
                                  text-transform: uppercase; letter-spacing: 0.6px; }
                .info-tile .val { font-size: 16px; margin-top: 4px; color: var(--c7-platinum); }
                .quick-actions { display: flex; gap: 10px; flex-wrap: wrap; }
                .quick-actions .c-btn { text-decoration: none; }
            `}</style>
        </AppShell>
    );
}


function InfoTile({ label, value, tone }) {
    const color = tone === 'ok'    ? '#51cf66'
                : tone === 'warn'  ? '#ffc857'
                : tone === 'error' ? '#ff6b6b' : '#4dabf7';
    return (
        <div className="info-tile">
            <div className="lbl">{label}</div>
            <div className="val" style={{color}}>{value}</div>
        </div>
    );
}


function SideBadge({ side }) {
    return <span className={'c-badge ' + (side === 'BUY' ? 'c-badge-info' : 'c-badge-warn')}>
        {side === 'BUY' ? 'COMPRA' : 'VENDA'}
    </span>;
}


function StatusBadge({ status }) {
    const map = {
        'created':       ['c-badge-muted', 'aguardando'],
        'paid':          ['c-badge-info',  'pago'],
        'broadcasted':   ['c-badge-info',  'liberando'],
        'released':      ['c-badge-ok',    'liberada'],
        'completed':     ['c-badge-ok',    'concluída'],
        'cancelled':     ['c-badge-muted', 'cancelada'],
        'expired':       ['c-badge-muted', 'expirada'],
        'failed':        ['c-badge-error', 'falhou'],
        'awaiting_pay':  ['c-badge-warn',  'aguardando confirmação do PIX'],
    };
    const [cls, label] = map[status] || ['c-badge-muted', status];
    return <span className={'c-badge ' + cls}>{label}</span>;
}


function fmt_dt(iso) {
    if (!iso) return '—';
    try {
        const d = new Date(iso);
        return d.toLocaleString('pt-BR', { hour12: false });
    } catch (e) { return iso; }
}


window.C7_DashboardPage = DashboardPage;
window.C7_SideBadge     = SideBadge;
window.C7_StatusBadge   = StatusBadge;
window.C7_fmt_dt        = fmt_dt;
