@extends('portal.layouts.master')
@section('title', 'Prediction Markets')
@section('page-title', 'Prediction Markets')

@php
$categories = [
    ''            => 'All',
    'crypto'      => 'Crypto',
    'politics'    => 'Politics',
    'geopolitics' => 'Geopolitics',
    'finance'     => 'Finance / Economy',
    'tech'        => 'Tech / AI',
    'world'       => 'World Affairs',
    'sports'      => 'Sports',
    'awards'      => 'Pop Culture',
];
@endphp

@section('extra-css')
<style>
/* Remove portal-content padding so the PM shell uses the full content area */
.portal-content { padding: 0 !important; }
</style>
@endsection

@section('content')

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show m-3" role="alert">
    {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show m-3" role="alert">
    {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="pm-shell" id="pm-shell">

    {{-- ═══════════════ LEFT SIDEBAR ═══════════════ --}}
    <aside class="pm-sidebar" id="pm-sidebar">

        <div class="pm-sidebar-head">
            <h4>Prediction Markets</h4>
            <div class="pm-powered">Powered by Polymarket Data</div>
        </div>

        <div class="pm-sidebar-search">
            <input type="text" id="pm-search-input"
                   placeholder="&#xf002;&nbsp; Search markets…"
                   value="{{ $search }}" autocomplete="off">
        </div>

        <nav class="pm-sidebar-nav">
            <a href="{{ route('portal.polymarket.index') }}"
               class="pm-sidebar-nav-item {{ !$tag && !$search && !$status ? 'is-active' : '' }}">
                <i class="fas fa-chart-line"></i> All Markets
            </a>
            <a href="{{ route('portal.polymarket.index', ['view' => 'positions']) }}"
               class="pm-sidebar-nav-item" id="pm-nav-positions">
                <i class="fas fa-briefcase"></i> My Positions
            </a>
            <a href="{{ route('portal.polymarket.index', ['view' => 'activity']) }}"
               class="pm-sidebar-nav-item" id="pm-nav-activity">
                <i class="fas fa-clock-rotate-left"></i> Activity
            </a>
            <a href="#" class="pm-sidebar-nav-item" id="pm-nav-watchlist">
                <i class="fas fa-star"></i> Watchlist
            </a>
        </nav>

        <div class="pm-sidebar-section">Categories</div>

        @foreach($categories as $slug => $label)
        @php
            $count = $counts[$slug] ?? null;
            $url   = $slug ? route('portal.polymarket.index', ['tag' => $slug]) : route('portal.polymarket.index');
        @endphp
        <a href="{{ $url }}" class="pm-cat-item {{ $tag === $slug ? 'is-active' : '' }}">
            <span>{{ $label }}</span>
            @if($count !== null)
            <span class="pm-cat-count">{{ number_format($count) }}</span>
            @endif
        </a>
        @endforeach

        <div class="pm-sidebar-section" style="margin-top:.4rem">Market Status</div>

        @foreach([
            ['slug' => 'open',    'label' => 'Open',         'color' => '#4ade80'],
            ['slug' => 'closing', 'label' => 'Closing Soon', 'color' => '#facc15'],
            ['slug' => 'closed',  'label' => 'Closed',       'color' => '#94a3b8'],
        ] as $st)
        @php
            $stUrl = route('portal.polymarket.index', array_merge(
                $tag    ? ['tag' => $tag]  : [],
                $search ? ['q'   => $search] : [],
                ['status' => $st['slug']]
            ));
        @endphp
        <a href="{{ $stUrl }}" class="pm-cat-item {{ $status === $st['slug'] ? 'is-active' : '' }}">
            <span>
                <span class="pm-status-dot" style="background:{{ $st['color'] }}"></span>
                {{ $st['label'] }}
            </span>
            <span class="pm-cat-count">{{ number_format($statusCounts[$st['slug']]) }}</span>
        </a>
        @endforeach

    </aside>

    {{-- ═══════════════ CENTER TABLE ═══════════════ --}}
    <div class="pm-content">

        {{-- Filter chip bar --}}
        <div class="pm-filter-bar">

            @if($tag)
            <a href="{{ route('portal.polymarket.index', $search ? ['q' => $search] : []) }}"
               class="pm-active-filter">
                {{ $categories[$tag] ?? $tag }} <span>×</span>
            </a>
            @endif

            @if($search)
            <a href="{{ route('portal.polymarket.index', $tag ? ['tag' => $tag] : []) }}"
               class="pm-active-filter pm-active-filter-q">
                "{{ $search }}" <span>×</span>
            </a>
            @endif

            @if($status)
            <a href="{{ route('portal.polymarket.index', array_merge($tag ? ['tag' => $tag] : [], $search ? ['q' => $search] : [])) }}"
               class="pm-active-filter" style="background:rgba(250,204,21,.1);border-color:rgba(250,204,21,.35);color:#facc15">
                {{ ucfirst($status) }} <span>×</span>
            </a>
            @endif

            <select class="pm-filter-select" id="pm-outcome-filter" onchange="pmReRender()">
                <option value="">All Outcomes</option>
                <option value="high-yes">High YES (&gt;60%)</option>
                <option value="high-no">High NO (&gt;60%)</option>
                <option value="close">Close (45–55%)</option>
            </select>

            <select class="pm-filter-select" id="pm-sort-select" onchange="pmApplySort(this.value)">
                <option value="volume">Sort: Volume</option>
                <option value="liquidity">Sort: Liquidity</option>
                <option value="yes_pct">Sort: Yes %</option>
                <option value="no_pct">Sort: No %</option>
                <option value="ends">Sort: End Date</option>
            </select>

        </div>

        {{-- Market table --}}
        @if($markets->isEmpty())
        <div style="text-align:center;padding:3.5rem 1rem;color:var(--text-muted)">
            <i class="fas fa-satellite-dish" style="font-size:2.2rem;margin-bottom:.75rem;display:block"></i>
            <p style="margin:0">No markets found{{ $search ? ' for "' . e($search) . '"' : '' }}.</p>
            <a href="{{ route('portal.polymarket.index') }}" style="font-size:.82rem">Clear filters</a>
        </div>
        @else
        <div class="pm-table-wrap" id="pm-table-wrap">
            <table class="pm-table" id="pm-market-table">
                <thead>
                    <tr>
                        <th class="pm-td-num">#</th>
                        <th onclick="pmSortBy('question')">Market</th>
                        <th class="text-end" onclick="pmSortBy('yes_pct')" style="min-width:60px">Yes %</th>
                        <th class="text-end" onclick="pmSortBy('no_pct')"  style="min-width:55px">No %</th>
                        <th class="text-end" onclick="pmSortBy('volume')"  style="min-width:80px">Volume <i class="fas fa-circle-info" style="font-size:.6rem;color:var(--text-muted)"></i></th>
                        <th class="text-end" onclick="pmSortBy('liquidity')" style="min-width:80px">Liquidity <i class="fas fa-circle-info" style="font-size:.6rem;color:var(--text-muted)"></i></th>
                        <th class="text-end" onclick="pmSortBy('ends')"   style="min-width:90px">Ends</th>
                    </tr>
                </thead>
                <tbody id="pm-tbody">
                @php $n = 0; @endphp
                @foreach($markets as $m)
                @php
                    $n++;
                    $yp  = round($m['yes_price'] * 100, 1);
                    $np  = round(100 - $yp, 1);
                    $vol = $m['volume24h'] >= 1e6
                            ? '$' . number_format($m['volume24h'] / 1e6, 2) . 'M'
                            : ($m['volume24h'] >= 1e3 ? '$' . number_format($m['volume24h'] / 1e3, 1) . 'K' : '$' . number_format($m['volume24h'], 0));
                    $liq = $m['liquidity'] >= 1e6
                            ? '$' . number_format($m['liquidity'] / 1e6, 2) . 'M'
                            : ($m['liquidity'] >= 1e3 ? '$' . number_format($m['liquidity'] / 1e3, 1) . 'K' : '$' . number_format($m['liquidity'], 0));
                    $ends    = $m['endDate'] ? \Carbon\Carbon::parse($m['endDate'])->format('M d, Y') : '—';
                    $tagList = implode(', ', array_slice($m['tags'], 0, 2));
                @endphp
                <tr class="pm-row"
                    data-id="{{ $m['id'] }}"
                    data-yes="{{ $m['yes_price'] }}"
                    data-no="{{ $m['no_price'] }}"
                    data-vol="{{ $m['volume24h'] }}"
                    data-liq="{{ $m['liquidity'] }}"
                    data-ends="{{ $m['endDate'] ?? '' }}">
                    <td class="pm-td-num" data-n="{{ $n }}">{{ $n }}</td>
                    <td class="pm-td-market">
                        <div class="pm-mq">{{ $m['question'] }}</div>
                        @if($tagList)<div class="pm-mtags">{{ $tagList }}</div>@endif
                    </td>
                    <td class="text-end pm-yes-pct">{{ $yp }}%</td>
                    <td class="text-end pm-no-pct">{{ $np }}%</td>
                    <td class="text-end" style="color:var(--text-secondary)">{{ $vol }}</td>
                    <td class="text-end" style="color:var(--text-secondary)">{{ $liq }}</td>
                    <td class="text-end" style="color:var(--text-secondary);white-space:nowrap">{{ $ends }}</td>
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        <div class="pm-table-footer">
            <span id="pm-showing">Showing 1–{{ $markets->count() }} of {{ $markets->count() }} markets</span>
            <div class="pm-pagination" id="pm-pagination"></div>
        </div>
        @endif

    </div>

    {{-- ═══════════════ RIGHT FLYOUT ═══════════════ --}}
    <div class="pm-flyout" id="pm-flyout">

        {{-- Flash alert --}}
        <div id="pm-fly-alert" class="pm-flyout-alert" style="display:none"></div>

        {{-- Header --}}
        <div class="pm-flyout-head" style="flex-shrink:0">
            <div class="pm-flyout-title" id="pm-flyout-title">Select a market</div>
            <button class="pm-flyout-close" onclick="pmCloseFlyout()" title="Close">×</button>
        </div>

        <div class="pm-flyout-body" id="pm-flyout-body">

            {{-- Meta row --}}
            <div class="pm-flyout-meta" id="pm-flyout-meta" style="flex-shrink:0">
                <span style="color:var(--text-muted);font-size:.75rem">Click a market row to view details.</span>
            </div>

            {{-- YES / NO prices --}}
            <div class="pm-price-row" style="flex-shrink:0">
                <div class="pm-price-box pm-price-box--yes">
                    <div class="pm-price-label">YES</div>
                    <div class="pm-price-val" id="pm-fly-yes-val">—</div>
                    <div class="pm-price-change" id="pm-fly-yes-chg"></div>
                </div>
                <div class="pm-spread-box" style="flex-shrink:0;min-width:52px">
                    <div class="pm-spread-label">Spread</div>
                    <div class="pm-spread-val" id="pm-fly-spread">—</div>
                </div>
                <div class="pm-price-box pm-price-box--no" style="text-align:right">
                    <div class="pm-price-label">NO</div>
                    <div class="pm-price-val" id="pm-fly-no-val">—</div>
                    <div class="pm-price-change" id="pm-fly-no-chg"></div>
                </div>
            </div>

            {{-- Tab bar --}}
            <div class="pm-flyout-tabs" style="flex-shrink:0">
                <button class="pm-flyout-tab is-active" data-tab="chart"   onclick="pmFlyTab('chart')">Chart</button>
                <button class="pm-flyout-tab"            data-tab="trade"   onclick="pmFlyTab('trade')">Trade</button>
                <button class="pm-flyout-tab"            data-tab="history" onclick="pmFlyTab('history')">History</button>
                <button class="pm-flyout-tab"            data-tab="info"    onclick="pmFlyTab('info')">Info</button>
            </div>

            {{-- CHART TAB --}}
            <div class="pm-flyout-tab-pane is-active" id="pm-tab-chart">
                <div class="pm-chart-wrap">
                    <div class="pm-chart-intervals">
                        @foreach(['1h','6h','1d','1w','1m','max'] as $iv)
                        <button class="pm-chart-interval-btn {{ $iv === '1m' ? 'is-active' : '' }}"
                                data-iv="{{ $iv }}"
                                onclick="pmLoadChart('{{ $iv }}')">{{ strtoupper($iv) }}</button>
                        @endforeach
                    </div>
                    <div style="position:relative;height:175px">
                        <canvas id="pm-price-chart"></canvas>
                        <div id="pm-chart-loading"
                             style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.78rem;flex-direction:column;gap:.4rem">
                            <i class="fas fa-chart-line" style="font-size:1.4rem;opacity:.3"></i>
                            <span>Select a market to view chart</span>
                        </div>
                    </div>
                    <div class="pm-chart-legend">
                        <span class="pm-chart-legend-item">
                            <span class="pm-chart-legend-line" style="background:#4ade80"></span> YES
                        </span>
                        <span class="pm-chart-legend-item">
                            <span class="pm-chart-legend-line" style="background:#f87171"></span> NO
                        </span>
                        <span style="color:var(--text-muted);margin-left:auto;font-size:.66rem">Source: Polymarket Data</span>
                    </div>
                </div>
            </div>

            {{-- TRADE TAB --}}
            <div class="pm-flyout-tab-pane" id="pm-tab-trade">

                <div class="pm-trade-side-tabs">
                    <button class="pm-trade-side-btn is-buy"  id="pm-fly-buy-btn"  onclick="pmFlySide('buy')">BUY</button>
                    <button class="pm-trade-side-btn"         id="pm-fly-sell-btn" onclick="pmFlySide('sell')">SELL</button>
                </div>

                <div class="pm-flyout-trade-form">

                    <div class="pm-outcome-btns">
                        <button class="pm-outcome-btn is-yes" id="pm-fly-yes-btn" onclick="pmFlyOutcome('YES')">
                            <span id="pm-fly-yes-btn-lbl">Yes —¢</span>
                        </button>
                        <button class="pm-outcome-btn" id="pm-fly-no-btn" onclick="pmFlyOutcome('NO')">
                            <span id="pm-fly-no-btn-lbl">No —¢</span>
                        </button>
                    </div>

                    <div class="pm-amount-row">
                        <input class="pm-amount-input" type="number" id="pm-fly-amount"
                               value="100" min="1" step="1" placeholder="0" oninput="pmFlyCalc()">
                        <span class="pm-amount-currency">USD</span>
                    </div>

                    <div class="pm-quick-btns">
                        <button class="pm-quick-btn" onclick="pmFlyQuick(10)">+10</button>
                        <button class="pm-quick-btn" onclick="pmFlyQuick(25)">+25</button>
                        <button class="pm-quick-btn is-sel" id="pm-qbtn-100" onclick="pmFlyQuickSet(100)">+100</button>
                        <button class="pm-quick-btn" onclick="pmFlyQuick(500)">+500</button>
                        <button class="pm-quick-btn" onclick="pmFlyMax()">MAX</button>
                    </div>

                    <div class="pm-trade-summary">
                        <div class="pm-trade-sum-row">
                            <span class="lbl">Est. Shares</span>
                            <span class="val" id="pm-fly-est-shares">—</span>
                        </div>
                        <div class="pm-trade-sum-row">
                            <span class="lbl">Est. Cost</span>
                            <span class="val" id="pm-fly-est-cost">—</span>
                        </div>
                        <div class="pm-trade-sum-row">
                            <span class="lbl">Avg. Price</span>
                            <span class="val" id="pm-fly-avg-price">—</span>
                        </div>
                    </div>

                    <form id="pm-fly-form" method="POST" action="{{ route('portal.polymarket.execute') }}">
                        @csrf
                        <input type="hidden" name="condition_id" id="pm-fly-cid">
                        <input type="hidden" name="market_id"    id="pm-fly-mid">
                        <input type="hidden" name="question"     id="pm-fly-q">
                        <input type="hidden" name="outcome"      id="pm-fly-outcome"  value="YES">
                        <input type="hidden" name="side"         id="pm-fly-side"     value="buy">
                        <input type="hidden" name="shares"       id="pm-fly-shares"   value="1">
                        <input type="hidden" name="price"        id="pm-fly-price"    value="0.5">
                        <input type="hidden" name="currency"     id="pm-fly-currency" value="USD">
                        <button type="submit" class="pm-trade-action-btn is-buy" id="pm-fly-action-btn" disabled>
                            Select a market
                        </button>
                    </form>

                    <div class="pm-flyout-balance mt-2">
                        <span class="lbl">Available Balance</span>
                        <div style="display:flex;align-items:center;gap:.45rem">
                            <span class="val" id="pm-fly-balance">$0.00</span>
                            <a href="{{ route('portal.dashboard') }}" class="pm-deposit-btn">Deposit</a>
                        </div>
                    </div>

                </div>
            </div>

            {{-- HISTORY TAB --}}
            <div class="pm-flyout-tab-pane" id="pm-tab-history">
                <div id="pm-history-content" style="padding:.7rem .85rem">
                    <div style="text-align:center;padding:2rem;color:var(--text-muted);font-size:.82rem">
                        Select a market to view your trade history.
                    </div>
                </div>
            </div>

            {{-- INFO TAB --}}
            <div class="pm-flyout-tab-pane" id="pm-tab-info">
                <div id="pm-info-content" style="padding:.7rem .85rem;font-size:.82rem;color:var(--text-secondary)">
                    <div style="text-align:center;padding:2rem;color:var(--text-muted);font-size:.82rem">
                        Select a market to view details.
                    </div>
                </div>
            </div>

        </div>{{-- /pm-flyout-body --}}
    </div>{{-- /pm-flyout --}}

</div>{{-- /pm-shell --}}

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script>
(function () {
'use strict';

/* ── State ── */
var ST = {
    marketId : null,
    yesPrice : 0,
    noPrice  : 0,
    outcome  : 'YES',
    side     : 'buy',
    balance  : 0,
    currency : 'USD',
    chartInst: null,
    chartIv  : '1m',
};

/* ── Helpers ── */
function fmt(n) {
    if (n >= 1e6) return '$' + (n / 1e6).toFixed(2) + 'M';
    if (n >= 1e3) return '$' + (n / 1e3).toFixed(1) + 'K';
    return '$' + n.toFixed(0);
}
function el(id) { return document.getElementById(id); }
function csrf() {
    var m = document.querySelector('meta[name="csrf-token"]');
    return m ? m.content : '';
}

/* ═══════════════════════════════════════════
   ROW CLICK → open flyout
═══════════════════════════════════════════ */
function pmOpenMarket(marketId) {
    ST.marketId = marketId;

    /* highlight row */
    document.querySelectorAll('.pm-row').forEach(function (r) {
        r.classList.toggle('is-active', r.dataset.id === marketId);
    });

    /* open panel */
    el('pm-flyout').classList.add('is-open');
    el('pm-flyout-title').textContent = 'Loading…';
    el('pm-flyout-meta').innerHTML = '';
    el('pm-fly-yes-val').textContent = '—';
    el('pm-fly-no-val').textContent  = '—';
    el('pm-fly-spread').textContent  = '—';
    el('pm-fly-action-btn').disabled = true;
    el('pm-fly-action-btn').textContent = 'Loading…';

    fetch('/portal/prediction-markets/' + marketId + '/detail', {
        headers: { 'Accept': 'application/json' }
    })
    .then(function (r) { return r.json(); })
    .then(pmPopulateFlyout)
    .catch(function () {
        el('pm-flyout-title').textContent = 'Could not load market.';
    });
}
window.pmOpenMarket = pmOpenMarket;

function pmCloseFlyout() {
    el('pm-flyout').classList.remove('is-open');
    ST.marketId = null;
    document.querySelectorAll('.pm-row').forEach(function (r) {
        r.classList.remove('is-active');
    });
}
window.pmCloseFlyout = pmCloseFlyout;

/* ═══════════════════════════════════════════
   POPULATE FLYOUT
═══════════════════════════════════════════ */
function pmPopulateFlyout(data) {
    var m = data.market;
    ST.yesPrice = m.yes_price;
    ST.noPrice  = m.no_price;
    ST.balance  = data.balance || 0;
    ST.currency = data.currency || 'USD';

    /* title */
    el('pm-flyout-title').textContent = m.question;

    /* meta */
    var yPct = (m.yes_price * 100).toFixed(1);
    var nPct = (m.no_price  * 100).toFixed(1);
    var tagsHtml = (m.tags || []).slice(0, 2).map(function (t) {
        return '<span class="pm-flyout-tag">' + escHtml(t) + '</span>';
    }).join('');
    var endsText = m.endDate
        ? ' · Closes ' + new Date(m.endDate + 'T00:00:00Z').toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
        : '';
    var daysLeft = m.endDate
        ? Math.ceil((new Date(m.endDate + 'T00:00:00Z') - new Date()) / 86400000)
        : null;
    var closesIn = daysLeft !== null ? ' · in ' + daysLeft + 'd' : '';

    el('pm-flyout-meta').innerHTML =
        '<span class="pm-open-dot"></span><span>Open' + closesIn + '</span>' +
        tagsHtml +
        (m.endDate ? '<span style="color:var(--text-muted)">📅 ' + escHtml(m.endDate) + '</span>' : '');

    /* prices */
    el('pm-fly-yes-val').textContent = yPct + '¢';
    el('pm-fly-no-val').textContent  = nPct + '¢';
    var spread = Math.abs(m.yes_price - m.no_price) * 100;
    el('pm-fly-spread').textContent  = spread.toFixed(1) + '¢';

    /* trade form defaults */
    ST.outcome = 'YES';
    ST.side    = 'buy';
    el('pm-fly-cid').value      = m.conditionId || '';
    el('pm-fly-mid').value      = m.id          || '';
    el('pm-fly-q').value        = m.question    || '';
    el('pm-fly-outcome').value  = 'YES';
    el('pm-fly-side').value     = 'buy';
    el('pm-fly-currency').value = ST.currency;
    el('pm-fly-amount').value   = '100';

    /* outcome buttons */
    el('pm-fly-yes-btn-lbl').textContent = 'Yes ' + yPct + '¢';
    el('pm-fly-no-btn-lbl').textContent  = 'No '  + nPct + '¢';
    el('pm-fly-yes-btn').className = 'pm-outcome-btn is-yes';
    el('pm-fly-no-btn').className  = 'pm-outcome-btn';

    /* side buttons */
    el('pm-fly-buy-btn').className  = 'pm-trade-side-btn is-buy';
    el('pm-fly-sell-btn').className = 'pm-trade-side-btn';

    /* balance */
    el('pm-fly-balance').textContent = '$' + parseFloat(ST.balance).toFixed(2);

    /* enable submit */
    el('pm-fly-action-btn').disabled = false;
    pmFlyCalc();

    /* history tab */
    var trades = data.trades || [];
    if (trades.length > 0) {
        var h = '<table class="pm-history-table"><thead><tr>' +
            '<th>Date</th><th>Side</th><th>Outcome</th>' +
            '<th class="text-end">Shares</th><th class="text-end">Cost</th>' +
            '</tr></thead><tbody>';
        trades.forEach(function (t) {
            var sCls = t.side === 'buy' ? 'pm-badge-buy' : 'pm-badge-sell';
            var oCls = t.outcome === 'YES' ? 'pm-badge-yes' : 'pm-badge-no';
            h += '<tr>' +
                '<td style="color:var(--text-muted)">' + escHtml(t.date) + '</td>' +
                '<td><span class="' + sCls + '">' + t.side.toUpperCase() + '</span></td>' +
                '<td><span class="' + oCls + '">' + escHtml(t.outcome) + '</span></td>' +
                '<td class="text-end">' + parseFloat(t.shares).toFixed(2) + '</td>' +
                '<td class="text-end">' + parseFloat(t.total_cost).toFixed(2) + ' ' + escHtml(t.currency) + '</td>' +
                '</tr>';
        });
        h += '</tbody></table>';
        el('pm-history-content').innerHTML = h;
    } else {
        el('pm-history-content').innerHTML =
            '<div style="text-align:center;padding:2rem;color:var(--text-muted);font-size:.82rem">No trades for this market yet.</div>';
    }

    /* positions (show at top of history tab) */
    var pos = data.positions || [];
    if (pos.length > 0) {
        var ph = '<div style="padding:.55rem .85rem .2rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)">Open Positions</div>';
        pos.forEach(function (p) {
            var oCls = p.outcome === 'YES' ? 'pm-pos-outcome--yes' : 'pm-pos-outcome--no';
            var curPrice = p.outcome === 'YES' ? m.yes_price : m.no_price;
            var pnl = (curPrice - p.avg_price) * p.shares;
            ph += '<div style="display:flex;align-items:center;gap:.6rem;padding:.45rem .85rem;border-bottom:1px solid rgba(255,255,255,.05)">' +
                '<span class="pm-pos-outcome ' + oCls + '">' + escHtml(p.outcome) + '</span>' +
                '<div><div style="font-size:.82rem;font-weight:600">' + parseFloat(p.shares).toFixed(2) + ' shares</div>' +
                '<div style="font-size:.7rem;color:var(--text-muted)">Avg ' + (p.avg_price * 100).toFixed(1) + '¢</div></div>' +
                '<div class="ms-auto text-end"><div style="font-size:.82rem;font-weight:600">' + (p.shares * curPrice).toFixed(2) + ' ' + p.currency + '</div>' +
                '<div style="font-size:.72rem" class="' + (pnl >= 0 ? 'text-profit' : 'text-loss') + '">' +
                (pnl >= 0 ? '+' : '') + pnl.toFixed(2) + ' P&L</div></div>' +
                '</div>';
        });
        el('pm-history-content').innerHTML = ph + el('pm-history-content').innerHTML;
    }

    /* info tab */
    var info = '<div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.9rem">';
    info += '<div><div style="font-size:.67rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)">24h Volume</div><div style="font-weight:700;margin-top:.15rem">' + fmt(m.volume24h || 0) + '</div></div>';
    info += '<div><div style="font-size:.67rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)">Liquidity</div><div style="font-weight:700;margin-top:.15rem">' + fmt(m.liquidity || 0) + '</div></div>';
    info += '</div>';
    if (m.description && m.description.length > 5) {
        info += '<div style="font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:.35rem">Resolution Rules</div>';
        info += '<div style="font-size:.8rem;color:var(--text-secondary);line-height:1.55">' + escHtml(m.description.substring(0, 600)) + '</div>';
    }
    el('pm-info-content').innerHTML = info;

    /* auto-load chart */
    if (el('pm-tab-chart').classList.contains('is-active')) {
        pmLoadChart(ST.chartIv);
    }
}

/* ═══════════════════════════════════════════
   CHART
═══════════════════════════════════════════ */
function pmLoadChart(interval) {
    if (!ST.marketId) return;
    ST.chartIv = interval;

    document.querySelectorAll('.pm-chart-interval-btn').forEach(function (b) {
        b.classList.toggle('is-active', b.dataset.iv === interval);
    });

    var loadEl = el('pm-chart-loading');
    if (loadEl) {
        loadEl.style.display = 'flex';
        loadEl.innerHTML = '<i class="fas fa-spinner fa-spin" style="font-size:1.2rem;opacity:.5"></i>';
    }

    fetch('/portal/prediction-markets/' + ST.marketId + '/history?interval=' + interval, {
        headers: { 'Accept': 'application/json' }
    })
    .then(function (r) { return r.json(); })
    .then(function (data) {
        if (loadEl) loadEl.style.display = 'none';

        /* Polymarket returns { history: [{t, p}] } */
        var pts = Array.isArray(data) ? data : (data.history || []);
        if (!pts.length) {
            if (loadEl) {
                loadEl.style.display = 'flex';
                loadEl.innerHTML = '<span style="font-size:.78rem">No chart data available</span>';
            }
            return;
        }

        var labels  = pts.map(function (pt) {
            var d = new Date(pt.t * 1000);
            return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
        });
        var yesData = pts.map(function (pt) { return +(parseFloat(pt.p) * 100).toFixed(1); });
        var noData  = pts.map(function (pt) { return +(100 - parseFloat(pt.p) * 100).toFixed(1); });

        var canvas = el('pm-price-chart');
        if (!canvas) return;
        var ctx = canvas.getContext('2d');

        if (ST.chartInst) { ST.chartInst.destroy(); ST.chartInst = null; }

        ST.chartInst = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'YES',
                    data: yesData,
                    borderColor: '#4ade80',
                    backgroundColor: 'rgba(74,222,128,.07)',
                    borderWidth: 1.5,
                    pointRadius: 0,
                    fill: true,
                    tension: .25,
                }, {
                    label: 'NO',
                    data: noData,
                    borderColor: '#f87171',
                    backgroundColor: 'rgba(248,113,113,.04)',
                    borderWidth: 1.5,
                    pointRadius: 0,
                    fill: false,
                    tension: .25,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: { intersect: false, mode: 'index' },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function (ctx) {
                                return ctx.dataset.label + ': ' + ctx.parsed.y + '¢';
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: { color: 'rgba(255,255,255,.04)' },
                        ticks: { color: '#6b7280', maxTicksLimit: 5, font: { size: 10 }, autoSkip: true }
                    },
                    y: {
                        min: 0, max: 100,
                        grid: { color: 'rgba(255,255,255,.04)' },
                        ticks: {
                            color: '#6b7280', font: { size: 10 },
                            callback: function (v) { return v + '¢'; }
                        }
                    }
                }
            }
        });
    })
    .catch(function () {
        if (loadEl) {
            loadEl.style.display = 'flex';
            loadEl.innerHTML = '<span style="font-size:.78rem">Chart unavailable</span>';
        }
    });
}
window.pmLoadChart = pmLoadChart;

/* ═══════════════════════════════════════════
   FLYOUT TABS
═══════════════════════════════════════════ */
function pmFlyTab(tab) {
    document.querySelectorAll('.pm-flyout-tab').forEach(function (b) {
        b.classList.toggle('is-active', b.dataset.tab === tab);
    });
    document.querySelectorAll('.pm-flyout-tab-pane').forEach(function (p) {
        p.classList.toggle('is-active', p.id === 'pm-tab-' + tab);
    });
    if (tab === 'chart' && ST.marketId) pmLoadChart(ST.chartIv);
}
window.pmFlyTab = pmFlyTab;

/* ═══════════════════════════════════════════
   TRADE FORM
═══════════════════════════════════════════ */
function pmFlySide(side) {
    ST.side = side;
    el('pm-fly-side').value = side;
    el('pm-fly-buy-btn').className  = 'pm-trade-side-btn' + (side === 'buy'  ? ' is-buy'  : '');
    el('pm-fly-sell-btn').className = 'pm-trade-side-btn' + (side === 'sell' ? ' is-sell' : '');
    pmFlyCalc();
}
window.pmFlySide = pmFlySide;

function pmFlyOutcome(outcome) {
    ST.outcome = outcome;
    el('pm-fly-outcome').value = outcome;
    el('pm-fly-yes-btn').className = 'pm-outcome-btn' + (outcome === 'YES' ? ' is-yes' : '');
    el('pm-fly-no-btn').className  = 'pm-outcome-btn' + (outcome === 'NO'  ? ' is-no'  : '');
    pmFlyCalc();
}
window.pmFlyOutcome = pmFlyOutcome;

function pmFlyQuick(add) {
    var inp = el('pm-fly-amount');
    inp.value = Math.max(1, parseInt(inp.value || '0') + add);
    pmFlyCalc();
}
window.pmFlyQuick = pmFlyQuick;

function pmFlyQuickSet(val) {
    el('pm-fly-amount').value = val;
    pmFlyCalc();
}
window.pmFlyQuickSet = pmFlyQuickSet;

function pmFlyMax() {
    el('pm-fly-amount').value = Math.max(1, Math.floor(ST.balance));
    pmFlyCalc();
}
window.pmFlyMax = pmFlyMax;

function pmFlyCalc() {
    var amount = parseFloat(el('pm-fly-amount').value) || 0;
    var price  = ST.outcome === 'YES' ? ST.yesPrice : ST.noPrice;
    var shares = price > 0 ? amount / price : 0;

    el('pm-fly-shares').value    = shares.toFixed(8);
    el('pm-fly-price').value     = price;
    el('pm-fly-est-shares').textContent = shares.toFixed(2);
    el('pm-fly-est-cost').textContent   = '$' + amount.toFixed(2);
    el('pm-fly-avg-price').textContent  = price > 0 ? (price * 100).toFixed(1) + '¢' : '—';

    var priceFmt = price > 0 ? (price * 100).toFixed(1) : '—';
    var verb     = ST.side === 'buy' ? 'BUY' : 'SELL';
    var label    = verb + ' ' + ST.outcome + ' @ ' + priceFmt + '¢';
    var btn      = el('pm-fly-action-btn');
    if (!btn.disabled) {
        btn.textContent = label;
        btn.className = 'pm-trade-action-btn' + (ST.side === 'buy' ? ' is-buy' : ' is-sell');
    }
}
window.pmFlyCalc = pmFlyCalc;

/* Form submission via fetch (JSON) */
var flyForm = el('pm-fly-form');
if (flyForm) {
    flyForm.addEventListener('submit', function (e) {
        e.preventDefault();
        var btn = el('pm-fly-action-btn');
        btn.disabled = true;
        btn.textContent = 'Processing…';

        var fd = new URLSearchParams(new FormData(flyForm));

        fetch(flyForm.action, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrf(),
                'Accept': 'application/json',
            },
            body: fd
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            if (data.error) {
                pmFlyAlert(data.error, 'error');
            } else {
                pmFlyAlert(data.message || 'Trade executed successfully!', 'success');
                /* refresh balance */
                if (ST.marketId) {
                    fetch('/portal/prediction-markets/' + ST.marketId + '/detail', {
                        headers: { 'Accept': 'application/json' }
                    })
                    .then(function (r) { return r.json(); })
                    .then(function (d) {
                        ST.balance = d.balance || 0;
                        el('pm-fly-balance').textContent = '$' + ST.balance.toFixed(2);
                        /* refresh history tab */
                        var oldTab = document.querySelector('.pm-flyout-tab.is-active');
                        if (d.trades && d.trades.length > 0) {
                            pmPopulateFlyout(d); /* full refresh */
                            if (oldTab) pmFlyTab(oldTab.dataset.tab);
                        }
                    });
                }
            }
            btn.disabled = false;
            pmFlyCalc();
        })
        .catch(function (err) {
            pmFlyAlert('Trade failed. Please try again.', 'error');
            btn.disabled = false;
            pmFlyCalc();
        });
    });
}

function pmFlyAlert(msg, type) {
    var a = el('pm-fly-alert');
    a.textContent = msg;
    a.className = 'pm-flyout-alert is-' + type;
    a.style.display = 'block';
    clearTimeout(a._t);
    a._t = setTimeout(function () { a.style.display = 'none'; }, 5000);
}

/* ═══════════════════════════════════════════
   TABLE SORT / FILTER
═══════════════════════════════════════════ */
var pmSortCol = 'volume';
var pmSortAsc = false;

function pmSortBy(col) {
    if (pmSortCol === col) pmSortAsc = !pmSortAsc;
    else { pmSortCol = col; pmSortAsc = col === 'question' || col === 'ends'; }
    pmReRender();
}
window.pmSortBy = pmSortBy;

function pmApplySort(val) {
    pmSortCol = val; pmSortAsc = false; pmReRender();
}
window.pmApplySort = pmApplySort;

function pmReRender() {
    var rows      = Array.from(document.querySelectorAll('.pm-row'));
    var outFilter = el('pm-outcome-filter') ? el('pm-outcome-filter').value : '';

    rows.forEach(function (r) {
        var yes = parseFloat(r.querySelector('.pm-yes-pct').textContent);
        var show = true;
        if (outFilter === 'high-yes' && yes < 60) show = false;
        if (outFilter === 'high-no'  && yes > 40) show = false;
        if (outFilter === 'close'    && (yes < 45 || yes > 55)) show = false;
        r.style.display = show ? '' : 'none';
    });

    var vis = rows.filter(function (r) { return r.style.display !== 'none'; });
    vis.sort(function (a, b) {
        var av, bv;
        switch (pmSortCol) {
            case 'question':
                return (pmSortAsc ? 1 : -1) *
                    a.querySelector('.pm-mq').textContent.localeCompare(b.querySelector('.pm-mq').textContent);
            case 'ends':
                av = a.dataset.ends || '9999-99-99';
                bv = b.dataset.ends || '9999-99-99';
                return (pmSortAsc ? 1 : -1) * av.localeCompare(bv);
            case 'yes_pct': av = +a.dataset.yes; bv = +b.dataset.yes; break;
            case 'no_pct':  av = +a.dataset.no;  bv = +b.dataset.no;  break;
            case 'liquidity': av = +a.dataset.liq; bv = +b.dataset.liq; break;
            default: av = +a.dataset.vol; bv = +b.dataset.vol;
        }
        return pmSortAsc ? av - bv : bv - av;
    });

    var tbody = el('pm-tbody');
    vis.forEach(function (r, i) {
        var nEl = r.querySelector('[data-n]');
        if (nEl) nEl.textContent = i + 1;
        tbody.appendChild(r);
    });

    var showing = el('pm-showing');
    if (showing) {
        showing.textContent = 'Showing ' + vis.length + ' of ' + rows.length + ' markets';
    }
}
window.pmReRender = pmReRender;

/* ═══════════════════════════════════════════
   SEARCH (Enter key)
═══════════════════════════════════════════ */
var searchInp = el('pm-search-input');
if (searchInp) {
    searchInp.addEventListener('keydown', function (e) {
        if (e.key !== 'Enter') return;
        var u = new URL(window.location.href);
        var q = this.value.trim();
        if (q) u.searchParams.set('q', q);
        else u.searchParams.delete('q');
        window.location.href = u.toString();
    });
}

/* ═══════════════════════════════════════════
   ATTACH ROW CLICK
═══════════════════════════════════════════ */
document.querySelectorAll('.pm-row').forEach(function (r) {
    r.addEventListener('click', function () { pmOpenMarket(this.dataset.id); });
});

/* ═══════════════════════════════════════════
   ESCAPE to close flyout
═══════════════════════════════════════════ */
document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') pmCloseFlyout();
});

/* ── Util ── */
function escHtml(s) {
    return String(s || '').replace(/[&<>"']/g, function (c) {
        return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
    });
}

})(); /* end IIFE */
</script>
@endpush