/* Pagina /ordens/:id — detalhe da ordem com polling enquanto status pending. */

const { useState, useEffect, useRef } = React;


function OrderDetailPage({ order_id }) {
    const [order, setOrder]     = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError]     = useState(null);
    const poll_ref = useRef(null);

    async function load() {
        try {
            const o = await window.C7_API.get('/b2b/orders/' + encodeURIComponent(order_id));
            setOrder(o);
            // Para de poll se status final
            const final = ['released', 'completed', 'cancelled', 'expired', 'failed']
                .includes(o.status);
            if (final && poll_ref.current) {
                clearInterval(poll_ref.current);
                poll_ref.current = null;
            }
        } catch (e) {
            setError(e.message || 'erro');
            if (poll_ref.current) clearInterval(poll_ref.current);
        } finally {
            setLoading(false);
        }
    }

    useEffect(() => {
        load();
        poll_ref.current = setInterval(load, 5000);
        return () => { if (poll_ref.current) clearInterval(poll_ref.current); };
    }, [order_id]);

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

    if (loading && !order) {
        return <AppShell current_path="/ordens">
            <div className="c-card"><p style={{color:'rgba(200,200,205,0.6)'}}>carregando…</p></div>
        </AppShell>;
    }
    if (!order) {
        return <AppShell current_path="/ordens">
            <Alert kind="error">{error || 'ordem nao encontrada'}</Alert>
            <a href="#/ordens" className="c-btn c-btn-ghost">← voltar</a>
        </AppShell>;
    }

    const tx_explorer = order.tx_hash
        ? 'https://tronscan.org/transaction/' + order.tx_hash
        : null;

    return (
        <AppShell current_path="/ordens">
            <div className="c-card" style={{display:'flex', alignItems:'center', gap:12}}>
                <h2 style={{flex:1, margin:0}}>
                    Ordem <span className="c-mono">{order.order_id}</span>
                </h2>
                <window.C7_StatusBadge status={order.status} />
            </div>

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

            {/* Bloqueio: wallet invalida (release nao prossegue ate corrigir) */}
            {order.raw_status === 'wallet_invalid' && (
                <div className="c-card" style={{
                    border: '1px solid rgba(255,107,107,0.4)',
                    background: 'rgba(217,54,44,0.08)',
                }}>
                    <h3 style={{color: '#ff6b6b'}}>⚠ Ordem bloqueada — carteira inválida</h3>
                    <p style={{color: 'rgba(255,200,200,0.85)', lineHeight: 1.5, fontSize: 14}}>
                        Sua ordem ficou bloqueada porque o endereço de carteira USDT
                        cadastrado não passou pela validação. Corrija no seu perfil e
                        contate o suporte para retomar a liberação.
                    </p>
                    <div style={{display: 'flex', gap: 8, marginTop: 10}}>
                        <a href="#/perfil" className="c-btn">Atualizar carteira</a>
                        <a href="mailto:suporte@core7cap.com" className="c-btn c-btn-ghost">
                            Contatar suporte
                        </a>
                    </div>
                </div>
            )}

            {/* Pagamento — só enquanto aguardando */}
            {order.pagamento && <PaymentCard pagamento={order.pagamento}
                                              order={order} on_reload={load} />}

            {/* Timeline — usa order.status (paid/broadcasted/completed) como fonte */}
            <div className="c-card">
                <h3>Linha do tempo</h3>
                <HorizontalTimeline steps={timeline_steps(order)} />
            </div>

            {/* Dados */}
            <div className="c-card">
                <h3>Detalhes</h3>
                <dl className="kv">
                    <dt>Tipo</dt><dd><window.C7_SideBadge side={order.side} /></dd>
                    <dt>Quantidade</dt><dd>{Number(order.valor_usdt).toFixed(3)} USDT</dd>
                    <dt>Total BRL</dt><dd>R$ {Number(order.total_brl).toFixed(2)}</dd>
                    <dt>Status</dt><dd><window.C7_StatusBadge status={order.status} /></dd>
                    <dt>Criada em</dt><dd>{window.C7_fmt_dt(order.created_at)}</dd>
                    {order.paid_at && (<>
                        <dt>Paga em</dt><dd>{window.C7_fmt_dt(order.paid_at)}</dd>
                    </>)}
                    {order.released_at && (<>
                        <dt>Liberada em</dt><dd>{window.C7_fmt_dt(order.released_at)}</dd>
                    </>)}
                    {order.tx_hash && (<>
                        <dt>TX Hash</dt>
                        <dd style={{wordBreak:'break-all'}} className="c-mono">
                            {order.tx_hash}
                            {tx_explorer && (
                                <a href={tx_explorer} target="_blank" rel="noopener"
                                   style={{marginLeft: 10}}>ver no explorer →</a>
                            )}
                        </dd>
                    </>)}
                </dl>
            </div>

            <style>{`
                .timeline-h { display: flex; align-items: flex-start; padding: 8px 4px 4px; }
                .tl-step {
                    display: flex; flex-direction: column; align-items: center;
                    flex: 0 0 auto; min-width: 80px; text-align: center;
                }
                .tl-step .dot {
                    width: 14px; height: 14px; border-radius: 50%;
                    background: rgba(200,200,205,0.15);
                    border: 2px solid rgba(200,200,205,0.15);
                    box-sizing: border-box;
                    transition: background 0.2s, border-color 0.2s;
                }
                .tl-step.done .dot { background: #37b24d; border-color: #37b24d; }
                .tl-step .label {
                    margin-top: 10px; font-size: 12px;
                    color: rgba(200,200,205,0.55); line-height: 1.3;
                }
                .tl-step.done .label { color: var(--c7-platinum); }
                .tl-step .when {
                    font-size: 10px; color: rgba(200,200,205,0.4);
                    font-family: var(--c7-font-mono, monospace); margin-top: 4px;
                }
                .tl-line {
                    flex: 1; height: 2px;
                    background: rgba(200,200,205,0.15);
                    margin-top: 7px;       /* alinha com centro do dot (14/2 = 7) */
                    min-width: 20px;
                    transition: background 0.2s;
                }
                .tl-line.done { background: #37b24d; }

                .kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px;
                      font-size: 13px; margin: 0; }
                .kv dt { color: rgba(200,200,205,0.55); }
                .kv dd { margin: 0; color: var(--c7-platinum); }
            `}</style>
        </AppShell>
    );
}


// ── Steps da timeline baseados no order.status ─────────────────────────────
//
// Sequencia esperada (BUY): created → awaiting_pay → paid → broadcasted → completed
// Cancelada: o status vira 'cancelled' ou 'expired' em qualquer momento; nesse
//   caso os steps que ainda nao tinham acontecido ficam "pendentes" (cinza).
function timeline_steps(order) {
    const s = order.status;
    // mapeia status → "nível" alcançado (0..3)
    const level = ({
        'created':     0,
        'awaiting_pay':0,    // user disse que pagou mas matcher ainda nao casou
        'paid':        1,
        'broadcasted': 2,
        'released':    3,    // legado
        'completed':   3,
    })[s];
    // status finais negativos: paramos onde a ordem realmente chegou.
    // Como nao temos timestamps de cada nivel pra finais negativos, usa o
    // que tem disponivel (paid_at, released_at).
    const reached = (n) => (level !== undefined ? level >= n : false);

    return [
        {
            label: 'Ordem criada',
            at: order.created_at,
            done: true,
        },
        {
            label: order.side === 'BUY' ? 'PIX recebido' : 'USDT recebido',
            at: order.paid_at,
            done: reached(1),
        },
        {
            label: 'Tx transmitida',
            at: reached(2) ? order.paid_at : null,
            done: reached(2),
        },
        {
            label: 'Confirmada on-chain',
            at: order.released_at,
            done: reached(3),
        },
    ];
}


function HorizontalTimeline({ steps }) {
    return (
        <div className="timeline-h">
            {steps.map((s, i) => (
                <React.Fragment key={i}>
                    <div className={'tl-step ' + (s.done ? 'done' : '')}>
                        <div className="dot"></div>
                        <div className="label">{s.label}</div>
                        {s.at && <div className="when">{window.C7_fmt_dt(s.at)}</div>}
                    </div>
                    {i < steps.length - 1 && (
                        <div className={'tl-line ' + (s.done ? 'done' : '')}></div>
                    )}
                </React.Fragment>
            ))}
        </div>
    );
}


function CopyBox({ value }) {
    const [copied, setCopied] = useState(false);
    async function on_copy() {
        try {
            await navigator.clipboard.writeText(String(value));
            setCopied(true);
            setTimeout(() => setCopied(false), 1500);
        } catch (e) {
            // fallback
            const ta = document.createElement('textarea');
            ta.value = String(value);
            document.body.appendChild(ta);
            ta.select();
            try { document.execCommand('copy'); setCopied(true); setTimeout(() => setCopied(false), 1500); }
            catch (e2) {}
            document.body.removeChild(ta);
        }
    }
    return (
        <div className="copy-box">
            <code>{value}</code>
            <button className="copy-btn"
                    onClick={on_copy}
                    aria-label={copied ? 'Copiado' : 'Copiar'}
                    title={copied ? 'Copiado' : 'Copiar'}>
                {copied
                    ? <span className="copy-icon">✓</span>
                    : <span className="copy-icon">⧉</span>}
            </button>
        </div>
    );
}


function PixQrSection({ brcode, valor_brl }) {
    return (
        <>
            <div className="pix-qr-wrap">
                <div className="pix-qr">
                    <window.C7_Forms.QRImage data={brcode} size={220} />
                </div>
                <div className="pix-qr-info">
                    <div className="pay-section-label">PIX copia-e-cola</div>
                    <CopyBox value={brcode} />
                    <p className="pay-note" style={{margin: '10px 0 0'}}>
                        Escaneie o QR no app do seu banco ou cole o código.
                        Valor já preenchido: <strong>R$ {Number(valor_brl).toFixed(2)}</strong>.
                    </p>
                </div>
            </div>
            <style>{`
                .pix-qr-wrap {
                    display: flex; gap: 16px; align-items: flex-start;
                    margin: 4px 0 8px;
                }
                .pix-qr {
                    flex: 0 0 auto;
                    background: #fff; padding: 10px; border-radius: 4px;
                    line-height: 0;
                }
                .pix-qr img { display: block; width: 220px; height: 220px; }
                .pix-qr-info { flex: 1; min-width: 0; }
                @media (max-width: 640px) {
                    .pix-qr-wrap { flex-direction: column; align-items: stretch; }
                    .pix-qr { align-self: center; }
                }
            `}</style>
        </>
    );
}


function PaymentCard({ pagamento, order, on_reload }) {
    const is_pix      = pagamento.tipo === 'pix_in';
    const has_claimed = !!order.payment_claimed_at;
    const [claiming, setClaiming] = useState(false);
    const [claim_err, setClaimErr] = useState(null);
    const [cancelling, setCancelling] = useState(false);
    const [cancel_err, setCancelErr] = useState(null);

    async function on_already_paid() {
        if (!confirm('Confirmar que você já enviou o PIX?')) return;
        setClaiming(true); setClaimErr(null);
        try {
            await window.C7_API.post('/b2b/orders/' + order.order_id + '/mark-paid');
            if (on_reload) await on_reload();
        } catch (e) {
            setClaimErr(e.message || 'erro');
        } finally {
            setClaiming(false);
        }
    }

    async function on_cancel() {
        if (!confirm('Cancelar esta ordem? Esta ação não pode ser desfeita.')) return;
        setCancelling(true); setCancelErr(null);
        try {
            await window.C7_API.post('/b2b/orders/' + order.order_id + '/cancel');
            if (on_reload) await on_reload();
        } catch (e) {
            setCancelErr(e.message || 'erro');
        } finally {
            setCancelling(false);
        }
    }

    return (
        <div className="c-card pay-card">
            <h3>{has_claimed ? 'Aguardando confirmação do PIX' : 'Aguardando pagamento'}</h3>
            {has_claimed && (
                <div className="pay-claim-banner">
                    Você marcou como pago em {window.C7_fmt_dt(order.payment_claimed_at)}.
                    Aguardando o sistema bancário confirmar (até 30 min).
                </div>
            )}

            {is_pix ? (
                <>
                    <div className="pay-amount">R$ {Number(pagamento.valor_brl).toFixed(2)}</div>
                    <div className="pay-sub">Pague via PIX dentro de 15 min</div>

                    {pagamento.pix_copy_paste ? (
                        <PixQrSection
                            brcode={pagamento.pix_copy_paste}
                            valor_brl={pagamento.valor_brl} />
                    ) : (
                        <p className="pay-note">
                            ⚠ QR PIX indisponível no momento. Contate o suporte.
                        </p>
                    )}

                    {pagamento.wallet_destino_usdt && (
                        <>
                            <div className="pay-section-label">USDT será creditado em (após pagamento)</div>
                            <CopyBox value={pagamento.wallet_destino_usdt} />
                        </>
                    )}

                    {(!order.paid_at && !order.cancelled_at) && (
                        <div className="pay-actions">
                            {!has_claimed && (
                                <button className="pay-claim-btn"
                                        onClick={on_already_paid}
                                        disabled={claiming || cancelling}>
                                    {claiming ? 'marcando…' : '✓ Já paguei'}
                                </button>
                            )}
                            <button className="pay-cancel-btn"
                                    onClick={on_cancel}
                                    disabled={cancelling || claiming}>
                                {cancelling ? 'cancelando…' : 'Cancelar'}
                            </button>
                        </div>
                    )}
                    {claim_err && (
                        <div className="pay-claim-err">{claim_err}</div>
                    )}
                    {cancel_err && (
                        <div className="pay-claim-err">{cancel_err}</div>
                    )}
                </>
            ) : (
                <>
                    <div className="pay-amount">{pagamento.valor_usdt} USDT</div>
                    <div className="pay-sub">Envie pra este endereço — rede {pagamento.rede}</div>
                    <CopyBox value={pagamento.destino_usdt} />
                    <p className="pay-note">{pagamento.obs}</p>
                </>
            )}

            <style>{`
                .pay-card {
                    background: linear-gradient(180deg, rgba(200,200,205,0.05) 0%, rgba(20,20,26,0.6) 100%);
                    border: 1px solid rgba(200,200,205,0.2);
                }
                .pay-amount {
                    font-family: var(--c7-font-display, 'Inter Tight', sans-serif);
                    font-size: 28px; font-weight: 500; color: #fff;
                    margin-top: 4px;
                }
                .pay-sub {
                    font-family: var(--c7-font-mono, monospace);
                    font-size: 11px; color: rgba(200,200,205,0.65);
                    letter-spacing: 0.05em; margin-top: 4px; margin-bottom: 16px;
                }
                .pay-section-label {
                    font-family: var(--c7-font-mono, monospace);
                    font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
                    color: rgba(200,200,205,0.5); margin: 14px 0 6px;
                }
                .pay-note {
                    font-family: var(--c7-font-mono, monospace);
                    font-size: 10px; color: rgba(200,200,205,0.45);
                    margin-top: 12px; line-height: 1.5;
                }
                .copy-box {
                    display: flex; align-items: stretch;
                    background: rgba(0,0,0,0.4);
                    border: 1px solid rgba(255,255,255,0.10);
                    border-radius: 4px; overflow: hidden;
                    min-height: 44px;
                }
                .copy-box code {
                    flex: 1; min-width: 0;
                    padding: 12px 14px;
                    font-family: var(--c7-font-mono, monospace);
                    font-size: 13px; color: var(--c7-platinum);
                    word-break: break-all; overflow-wrap: anywhere;
                    line-height: 1.3;
                    display: flex; align-items: center;
                }
                .copy-btn {
                    flex: 0 0 auto;
                    padding: 0 18px;
                    background: linear-gradient(180deg, rgba(200,200,205,0.18) 0%, rgba(200,200,205,0.08) 100%);
                    border: none;
                    border-left: 1px solid rgba(255,255,255,0.08);
                    color: var(--c7-platinum);
                    font-family: var(--c7-font-mono, monospace);
                    font-size: 11px;
                    font-weight: 600;
                    letter-spacing: 0.15em;
                    text-transform: uppercase;
                    cursor: pointer;
                    transition: all 0.15s;
                    display: flex; align-items: center; gap: 6px;
                    white-space: nowrap;
                }
                .copy-btn:hover {
                    background: linear-gradient(180deg, rgba(200,200,205,0.32) 0%, rgba(200,200,205,0.2) 100%);
                    color: #fff;
                }
                .copy-btn:active { transform: scale(0.97); }

                .pay-claim-banner {
                    background: rgba(77,171,247,0.08);
                    border: 1px solid rgba(77,171,247,0.3);
                    color: #4dabf7;
                    padding: 10px 14px; border-radius: 2px;
                    font-family: var(--c7-font-mono, monospace);
                    font-size: 11px; line-height: 1.5;
                    margin-top: -6px; margin-bottom: 12px;
                }
                .pay-claim-btn {
                    width: 100%; margin-top: 18px; padding: 14px 22px;
                    background: rgba(55,178,77,0.12);
                    border: 1px solid rgba(55,178,77,0.4);
                    color: #51cf66;
                    border-radius: 2px; cursor: pointer;
                    font-family: var(--c7-font-mono, monospace);
                    font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
                    font-weight: 600; transition: background 0.15s;
                }
                .pay-claim-btn:hover:not(:disabled) {
                    background: rgba(55,178,77,0.22); color: #fff;
                }
                .pay-claim-btn:disabled { opacity: 0.4; cursor: not-allowed; }
                .pay-claim-err {
                    margin-top: 10px;
                    color: #ff6b6b; font-size: 11px;
                    font-family: var(--c7-font-mono, monospace);
                }
            `}</style>
        </div>
    );
}


window.C7_OrderDetailPage = OrderDetailPage;