/* Pagina /ordens — lista de ordens do user. */

const { useState, useEffect } = React;


function OrdersPage() {
    const [data, setData]       = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError]     = useState(null);
    const [side, setSide]       = useState('');
    const [statusF, setStatusF] = useState('');
    const [offset, setOffset]   = useState(0);
    const LIMIT = 20;

    async function load() {
        setLoading(true);
        setError(null);
        try {
            const params = new URLSearchParams();
            params.set('limit', LIMIT);
            params.set('offset', offset);
            if (side)    params.set('side', side);
            if (statusF) params.set('status', statusF);
            const res = await window.C7_API.get('/b2b/orders?' + params.toString());
            setData(res);
        } catch (e) {
            setError(e.message || 'erro');
        } finally {
            setLoading(false);
        }
    }

    useEffect(() => { load(); }, [side, statusF, offset]);

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

    return (
        <AppShell current_path="/ordens">
            <div className="c-card" style={{display:'flex', alignItems:'center', gap:12}}>
                <h2 style={{flex:1, margin:0}}>Minhas Ordens</h2>
                <a href="#/ordens/nova" className="c-btn">+ Nova ordem</a>
            </div>

            <div className="c-card">
                <div className="filter-bar">
                    <select value={side} onChange={e => { setOffset(0); setSide(e.target.value); }}>
                        <option value="">Tipo de Transação (todos)</option>
                        <option value="BUY">Compra</option>
                        <option value="SELL">Venda</option>
                    </select>
                    <select value={statusF} onChange={e => { setOffset(0); setStatusF(e.target.value); }}>
                        <option value="">Status (todos)</option>
                        <option value="created">Aguardando</option>
                        <option value="paid">Pago</option>
                        <option value="released">Liberada</option>
                        <option value="completed">Concluída</option>
                        <option value="cancelled">Cancelada</option>
                        <option value="expired">Expirada</option>
                        <option value="failed">Falhou</option>
                    </select>
                </div>

                <Alert kind="error">{error}</Alert>

                {loading && <p style={{color:'rgba(200,200,205,0.6)'}}>carregando…</p>}

                {!loading && data && data.items.length === 0 && (
                    <p style={{color:'rgba(200,200,205,0.6)', textAlign:'center', padding:24}}>
                        Nenhuma ordem com esse filtro.
                    </p>
                )}

                {!loading && data && data.items.length > 0 && (
                    <>
                        <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><th>Liberada</th>
                            </tr></thead>
                            <tbody>
                                {data.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, 22)}…</td>
                                        <td><window.C7_SideBadge side={o.side} /></td>
                                        <td>{Number(o.valor_usdt).toFixed(2)}</td>
                                        <td>R$ {Number(o.total_brl).toFixed(2)}</td>
                                        <td><window.C7_StatusBadge status={o.status} /></td>
                                        <td>{window.C7_fmt_dt(o.created_at)}</td>
                                        <td>{o.released_at ? window.C7_fmt_dt(o.released_at) : '—'}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                        <Pagination total={data.total} offset={offset} limit={LIMIT}
                                    onChange={setOffset} />
                    </>
                )}
            </div>

            <style>{`
                .filter-bar { display: flex; gap: 8px; margin-bottom: 14px; }
                .filter-bar select {
                    padding: 8px 10px; background: rgba(255,255,255,0.02);
                    color: var(--c7-platinum);
                    border: 1px solid rgba(200,200,205,0.12); border-radius: 4px;
                    font-family: inherit; font-size: 13px;
                }
                .pagination { display: flex; align-items: center; justify-content: space-between;
                              margin-top: 14px; font-size: 12px; color: rgba(200,200,205,0.6); }
                .pagination .pg-btns { display: flex; gap: 6px; }
            `}</style>
        </AppShell>
    );
}


function Pagination({ total, offset, limit, onChange }) {
    const page  = Math.floor(offset / limit) + 1;
    const pages = Math.ceil(total / limit);
    if (pages <= 1) return null;
    return (
        <div className="pagination">
            <span>{offset + 1}–{Math.min(offset + limit, total)} de {total}</span>
            <div className="pg-btns">
                <button className="c-btn c-btn-ghost"
                        disabled={offset === 0}
                        onClick={() => onChange(Math.max(0, offset - limit))}>
                    anterior
                </button>
                <span style={{padding:'0 8px'}}>{page} / {pages}</span>
                <button className="c-btn c-btn-ghost"
                        disabled={offset + limit >= total}
                        onClick={() => onChange(offset + limit)}>
                    próxima
                </button>
            </div>
        </div>
    );
}


window.C7_OrdersPage = OrdersPage;