@extends('layouts.app')

@section('content')
    <section>
        <h2>Bookmakers</h2>
        <div class="grid" id="bookmakers-grid">
            @foreach ($bookmakers as $bookmaker)
                <div class="card">
                    <div class="bm-name">{{ $bookmaker->name }}</div>
                    <span class="status status-{{ $bookmaker->status }}">{{ ucfirst($bookmaker->status) }}</span>
                    <div style="font-size:12px; color:var(--muted); margin-top:8px;">
                        Last scraped: {{ $bookmaker->last_scraped_at?->diffForHumans() ?? 'never' }}
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <section>
        <h2>Live Arbitrage Opportunities</h2>
        <div id="opportunities-list">
            <div class="empty">Loading...</div>
        </div>
    </section>

    <script>
        async function refreshOpportunities() {
            const res = await fetch('/api/opportunities');
            const data = await res.json();
            const container = document.getElementById('opportunities-list');

            if (data.length === 0) {
                container.innerHTML = '<div class="empty">No active arbitrage opportunities right now.</div>';
                return;
            }

            container.innerHTML = data.map(o => `
                <div class="opp">
                    <div class="opp-top">
                        <div>
                            <div class="opp-event">${o.event}</div>
                            <div style="font-size:12px; color:var(--muted);">${o.market} &middot; detected ${o.detected_at}</div>
                        </div>
                        <div class="profit">+${o.profit_percentage}%</div>
                    </div>
                    <div class="legs">
                        ${o.legs.map(leg => `
                            <div class="leg">
                                ${leg.selection.toUpperCase()} @ ${leg.price} &mdash; ${leg.bookmaker_name}
                                &mdash; stake ₦${leg.stake} (payout ₦${leg.payout})
                            </div>
                        `).join('')}
                    </div>
                </div>
            `).join('');
        }

        async function refreshBookmakers() {
            const res = await fetch('/api/bookmakers');
            const data = await res.json();
            const grid = document.getElementById('bookmakers-grid');

            grid.innerHTML = data.map(b => `
                <div class="card">
                    <div class="bm-name">${b.name}</div>
                    <span class="status status-${b.status}">${b.status.charAt(0).toUpperCase() + b.status.slice(1)}</span>
                    <div style="font-size:12px; color:var(--muted); margin-top:8px;">
                        Last scraped: ${b.last_scraped_at ? new Date(b.last_scraped_at).toLocaleTimeString() : 'never'}
                    </div>
                </div>
            `).join('');
        }

        refreshOpportunities();
        setInterval(refreshOpportunities, 10000);
        setInterval(refreshBookmakers, 10000);
    </script>
@endsection