@extends('portal.layouts.master')
@section('title', Str::limit($market['question'], 60) . ' — Prediction Market')
@section('page-title', 'Prediction Market')

@section('extra-css')
.pm-market-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1.25rem; }
@media (max-width: 900px) { .pm-market-layout { grid-template-columns: 1fr; } }

/* Outcome gauge */
.pm-gauge-wrap {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem;
}
.pm-gauge-question { font-size: 1.05rem; font-weight: 700; line-height: 1.4; margin-bottom: 1rem; }
.pm-gauge-meta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pm-gauge-stat { }
.pm-gauge-stat .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.pm-gauge-stat .val { font-size: .95rem; font-weight: 700; margin-top: .1rem; }
.pm-outcome-row { display: flex; gap: .75rem; margin-bottom: .75rem; }
.pm-outcome-chip {
    flex: 1; border-radius: 8px; padding: .85rem 1rem;
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    border: 2px solid transparent;
}
.pm-outcome-chip--yes { background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.3); }
.pm-outcome-chip--no  { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); }
.pm-outcome-chip .oc-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.pm-outcome-chip--yes .oc-label { color: #4ade80; }
.pm-outcome-chip--no  .oc-label { color: #f87171; }
.pm-outcome-chip .oc-price { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pm-outcome-chip--yes .oc-price { color: #4ade80; }
.pm-outcome-chip--no  .oc-price { color: #f87171; }
.pm-outcome-chip .oc-sub { font-size: .68rem; color: var(--text-muted); }
.pm-big-bar { height: 10px; border-radius: 5px; background: rgba(248,113,113,.35); overflow: hidden; margin-bottom: .5rem; }
.pm-big-bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #4ade80, #22d3ee); transition: width .5s; }
.pm-bar-axis { display: flex; justify-content: space-between; font-size: .68rem; color: var(--text-muted); }
.pm-live-dot { display: inline-block; width: 6px; height: 6px; background: #4ade80; border-radius: 50%; margin-right: .35rem; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.3} }

/* Trade panel */
.pm-trade-panel {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
    position: sticky; top: 70px;
}
.pm-trade-header { padding: .85rem 1rem; border-bottom: 1px solid var(--border); font-weight: 700; font-size: .9rem; }
.pm-outcome-toggle { display: flex; border-bottom: 1px solid var(--border); }
.pm-ot-btn {
    flex: 1; padding: .6rem; text-align: center; font-weight: 700; font-size: .85rem;
    cursor: pointer; border: none; background: transparent;
    border-bottom: 3px solid transparent; transition: all .15s;
    color: var(--text-secondary);
}
.pm-ot-btn.sel-yes { color: #4ade80; border-bottom-color: #4ade80; background: rgba(74,222,128,.06); }
.pm-ot-btn.sel-no  { color: #f87171; border-bottom-color: #f87171; background: rgba(248,113,113,.06); }
.pm-side-toggle { display: flex; border-bottom: 1px solid var(--border); }
.pm-side-btn {
    flex: 1; padding: .55rem; text-align: center; font-weight: 600; font-size: .82rem;
    cursor: pointer; border: none; background: transparent;
    border-bottom: 2px solid transparent; color: var(--text-secondary); transition: all .15s;
}
.pm-side-btn.sel-buy  { color: var(--green); border-bottom-color: var(--green); }
.pm-side-btn.sel-sell { color: var(--red);   border-bottom-color: var(--red); }
.pm-form { padding: 1rem; }
.pm-form .form-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.pm-form .form-control { font-size: .9rem; }
.pm-summary { background: var(--bg-secondary); border-radius: 6px; padding: .75rem; margin-top: .75rem; }
.pm-sum-row { display: flex; justify-content: space-between; font-size: .82rem; padding: .2rem 0; }
.pm-sum-row .lbl { color: var(--text-secondary); }
.pm-sum-row .val { font-weight: 600; }
.pm-submit-btn { width: 100%; margin-top: .9rem; padding: .65rem; font-weight: 700; font-size: .92rem; }

/* Open positions */
.pm-position-badge {
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px;
    padding: .75rem 1rem; display: flex; align-items: center; gap: .75rem;
    margin-bottom: .75rem;
}
.pm-pos-outcome { font-size: .7rem; font-weight: 800; text-transform: uppercase; padding: .25rem .7rem; border-radius: 20px; }
.pm-pos-outcome--yes { background: rgba(74,222,128,.15); color: #4ade80; }
.pm-pos-outcome--no  { background: rgba(248,113,113,.15); color: #f87171; }

/* Trades table */
.pm-badge-buy  { background: rgba(74,222,128,.15); color: #4ade80;  padding: .15rem .6rem; border-radius: 4px; font-size: .72rem; font-weight: 700; }
.pm-badge-sell { background: rgba(248,113,113,.15); color: #f87171; padding: .15rem .6rem; border-radius: 4px; font-size: .72rem; font-weight: 700; }
.pm-badge-yes  { background: rgba(74,222,128,.15); color: #4ade80;  padding: .15rem .5rem; border-radius: 4px; font-size: .7rem; font-weight: 700; }
.pm-badge-no   { background: rgba(248,113,113,.15); color: #f87171; padding: .15rem .5rem; border-radius: 4px; font-size: .7rem; font-weight: 700; }
@endsection

@section('content')

{{-- Back link --}}
<div class="mb-3">
    <a href="{{ route('portal.polymarket.index') }}" style="font-size:.85rem">
        <i class="fas fa-arrow-left me-1"></i> Back to Prediction Markets
    </a>
</div>

{{-- Flash messages --}}
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" 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" role="alert">
    {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

@php
    $yesPct  = round($market['yes_price'] * 100, 1);
    $noPct   = round(100 - $yesPct, 1);
    $vol24h  = $market['volume24h'] >= 1000
                ? '$' . number_format($market['volume24h'] / 1000, 1) . 'k'
                : '$' . number_format($market['volume24h'], 0);
    $liquidity = $market['liquidity'] >= 1000
                ? '$' . number_format($market['liquidity'] / 1000, 1) . 'k'
                : '$' . number_format($market['liquidity'], 0);
    $ends    = $market['endDate'] ? \Carbon\Carbon::parse($market['endDate'])->format('d M Y') : '—';
@endphp

{{-- Open positions --}}
@if($positions->isNotEmpty())
<div class="mb-3">
    <h6 class="text-uppercase" style="font-size:.72rem;letter-spacing:.08em;color:var(--text-muted);margin-bottom:.6rem">
        Your Open Positions
    </h6>
    @foreach($positions as $outcome => $pos)
    @php $currentPrice = strtoupper($outcome) === 'YES' ? $market['yes_price'] : $market['no_price']; @endphp
    <div class="pm-position-badge">
        <span class="pm-pos-outcome pm-pos-outcome--{{ strtolower($outcome) }}">{{ $outcome }}</span>
        <div>
            <div style="font-size:.88rem;font-weight:600">{{ rtrim(rtrim(number_format($pos->shares, 4), '0'), '.') }} shares</div>
            <div style="font-size:.72rem;color:var(--text-muted)">Avg {{ number_format($pos->avg_price * 100, 1) }}¢ · Cost {{ number_format($pos->shares * $pos->avg_price, 2) }} {{ $pos->currency }}</div>
        </div>
        <div class="ms-auto text-end">
            <div style="font-size:.88rem;font-weight:600">{{ number_format($pos->shares * $currentPrice, 2) }} {{ $pos->currency }}</div>
            @php $pnl = ($currentPrice - $pos->avg_price) * $pos->shares; @endphp
            <div style="font-size:.75rem" class="{{ $pnl >= 0 ? 'text-profit' : 'text-loss' }}">
                {{ ($pnl >= 0 ? '+' : '') . number_format($pnl, 2) }} P&L
            </div>
        </div>
    </div>
    @endforeach
</div>
@endif

<div class="pm-market-layout">

    {{-- LEFT: Market info + trade history --}}
    <div>
        {{-- Gauge card --}}
        <div class="pm-gauge-wrap mb-3">
            <div class="pm-gauge-question">{{ $market['question'] }}</div>

            <div class="pm-gauge-meta">
                <div class="pm-gauge-stat">
                    <div class="lbl">24h Volume</div>
                    <div class="val">{{ $vol24h }}</div>
                </div>
                <div class="pm-gauge-stat">
                    <div class="lbl">Liquidity</div>
                    <div class="val">{{ $liquidity }}</div>
                </div>
                <div class="pm-gauge-stat">
                    <div class="lbl">Closes</div>
                    <div class="val">{{ $ends }}</div>
                </div>
                @if($market['tags'])
                <div class="pm-gauge-stat">
                    <div class="lbl">Tags</div>
                    <div class="val" style="font-size:.8rem">{{ implode(', ', $market['tags']) }}</div>
                </div>
                @endif
            </div>

            {{-- YES / NO chips --}}
            <div class="pm-outcome-row" id="pm-chips">
                <div class="pm-outcome-chip pm-outcome-chip--yes">
                    <span class="oc-label">YES</span>
                    <span class="oc-price" id="pm-yes-price">{{ $yesPct }}¢</span>
                    <span class="oc-sub">probability</span>
                </div>
                <div class="pm-outcome-chip pm-outcome-chip--no">
                    <span class="oc-label">NO</span>
                    <span class="oc-price" id="pm-no-price">{{ $noPct }}¢</span>
                    <span class="oc-sub">probability</span>
                </div>
            </div>

            <div class="pm-big-bar">
                <div class="pm-big-bar-fill" id="pm-bar-fill" style="width:{{ $yesPct }}%"></div>
            </div>
            <div class="pm-bar-axis">
                <span>YES</span>
                <span><span class="pm-live-dot"></span>Live</span>
                <span>NO</span>
            </div>

            @if($market['description'])
            <details class="mt-3" style="font-size:.82rem;color:var(--text-secondary)">
                <summary style="cursor:pointer;font-weight:600;color:var(--text-primary)">Resolution rules</summary>
                <p class="mt-2 mb-0">{{ Str::limit($market['description'], 600) }}</p>
            </details>
            @endif
        </div>

        {{-- Trade history --}}
        @if($trades->isNotEmpty())
        <div class="dark-card">
            <div class="card-header"><i class="fas fa-list me-2"></i>Your Trade History</div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="dark-table w-100">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Side</th>
                                <th>Outcome</th>
                                <th class="text-end">Shares</th>
                                <th class="text-end">Price</th>
                                <th class="text-end">Cost</th>
                                <th>CCY</th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($trades as $t)
                        <tr>
                            <td style="color:var(--text-secondary)">{{ $t->traded_at->format('d M H:i') }}</td>
                            <td><span class="pm-badge-{{ $t->side }}">{{ strtoupper($t->side) }}</span></td>
                            <td><span class="pm-badge-{{ strtolower($t->outcome) }}">{{ $t->outcome }}</span></td>
                            <td class="text-end">{{ rtrim(rtrim(number_format($t->shares, 4), '0'), '.') }}</td>
                            <td class="text-end">{{ number_format($t->price * 100, 1) }}¢</td>
                            <td class="text-end fw-semibold">{{ number_format($t->total_cost, 2) }}</td>
                            <td>{{ $t->currency }}</td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @endif
    </div>

    {{-- RIGHT: Trade panel --}}
    <div>
        <div class="pm-trade-panel">
            <div class="pm-trade-header">
                <i class="fas fa-bolt me-1" style="color:#facc15"></i> Place Trade
            </div>

            {{-- Outcome toggle YES / NO --}}
            <div class="pm-outcome-toggle">
                <button type="button" class="pm-ot-btn sel-yes" id="pm-ot-yes" onclick="pmSetOutcome('YES')">YES</button>
                <button type="button" class="pm-ot-btn" id="pm-ot-no"  onclick="pmSetOutcome('NO')">NO</button>
            </div>

            {{-- Buy / Sell toggle --}}
            <div class="pm-side-toggle">
                <button type="button" class="pm-side-btn sel-buy" id="pm-side-buy"  onclick="pmSetSide('buy')">Buy</button>
                <button type="button" class="pm-side-btn"         id="pm-side-sell" onclick="pmSetSide('sell')">Sell</button>
            </div>

            <form method="POST" action="{{ route('portal.polymarket.execute') }}" class="pm-form" id="pm-trade-form">
                @csrf
                <input type="hidden" name="condition_id" value="{{ $market['conditionId'] }}">
                <input type="hidden" name="market_id"    value="{{ $market['id'] }}">
                <input type="hidden" name="question"     value="{{ $market['question'] }}">
                <input type="hidden" name="outcome"      id="pm-input-outcome" value="YES">
                <input type="hidden" name="side"         id="pm-input-side"    value="buy">
                <input type="hidden" name="price"        id="pm-input-price"   value="{{ $market['yes_price'] }}">

                {{-- Shares --}}
                <div class="mb-3">
                    <label class="form-label">Shares</label>
                    <input type="number" name="shares" id="pm-shares"
                           class="form-control" min="1" step="1" value="10"
                           oninput="pmCalc()" required>
                    <div style="font-size:.7rem;color:var(--text-muted);margin-top:.25rem">
                        Minimum 1 share · 1 share ≈ 1¢–99¢
                    </div>
                </div>

                {{-- Price display --}}
                <div class="mb-3">
                    <label class="form-label">Price per Share</label>
                    <div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;padding:.6rem .75rem;font-size:.9rem;font-weight:700" id="pm-price-display">
                        {{ $yesPct }}¢
                    </div>
                </div>

                {{-- Currency --}}
                <div class="mb-3">
                    <label class="form-label">Settlement Currency</label>
                    <input type="hidden" name="currency" value="USD">
                    <div class="form-control" style="font-size:.9rem">USD — Available: {{ number_format((float) ($wallets->firstWhere('currency', 'USD')?->balance ?? 0) + $creditBalance, 2) }}</div>
                </div>

                {{-- Summary --}}
                <div class="pm-summary">
                    <div class="pm-sum-row">
                        <span class="lbl">Outcome</span>
                        <span class="val" id="pm-sum-outcome">YES</span>
                    </div>
                    <div class="pm-sum-row">
                        <span class="lbl">Shares</span>
                        <span class="val" id="pm-sum-shares">10</span>
                    </div>
                    <div class="pm-sum-row">
                        <span class="lbl">Price per share</span>
                        <span class="val" id="pm-sum-price">{{ $yesPct }}¢</span>
                    </div>
                    <div class="pm-sum-row" style="border-top:1px solid var(--border);padding-top:.4rem;margin-top:.2rem">
                        <span class="lbl">Total Cost</span>
                        <span class="val" id="pm-sum-total">—</span>
                    </div>
                    <div class="pm-sum-row" style="font-size:.72rem">
                        <span class="lbl">Max payout if correct</span>
                        <span class="val text-profit" id="pm-sum-payout">—</span>
                    </div>
                </div>

                <button type="submit" class="btn btn-success pm-submit-btn" id="pm-submit-btn">
                    Buy YES Shares
                </button>
            </form>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
(function () {
    var yesPrice = {{ $market['yes_price'] }};
    var noPrice  = {{ $market['no_price'] }};
    var outcome  = 'YES';
    var side     = 'buy';

    function pmSetOutcome(o) {
        outcome = o;
        document.getElementById('pm-input-outcome').value = o;
        var p = (o === 'YES') ? yesPrice : noPrice;
        document.getElementById('pm-input-price').value = p;
        document.getElementById('pm-price-display').textContent = (p * 100).toFixed(1) + '¢';
        document.getElementById('pm-sum-outcome').textContent = o;
        document.getElementById('pm-sum-price').textContent   = (p * 100).toFixed(1) + '¢';
        // Toggle button styles
        document.getElementById('pm-ot-yes').className = 'pm-ot-btn' + (o === 'YES' ? ' sel-yes' : '');
        document.getElementById('pm-ot-no').className  = 'pm-ot-btn' + (o === 'NO'  ? ' sel-no'  : '');
        pmCalc();
        pmUpdateSubmitBtn();
    }
    window.pmSetOutcome = pmSetOutcome;

    function pmSetSide(s) {
        side = s;
        document.getElementById('pm-input-side').value = s;
        document.getElementById('pm-side-buy').className  = 'pm-side-btn' + (s === 'buy'  ? ' sel-buy'  : '');
        document.getElementById('pm-side-sell').className = 'pm-side-btn' + (s === 'sell' ? ' sel-sell' : '');
        pmUpdateSubmitBtn();
        pmCalc();
    }
    window.pmSetSide = pmSetSide;

    function pmCalc() {
        var shares = parseFloat(document.getElementById('pm-shares').value) || 0;
        var price  = (outcome === 'YES') ? yesPrice : noPrice;
        var total  = (shares * price).toFixed(2);
        var payout = shares.toFixed(0); // 1 share pays $1 if correct
        document.getElementById('pm-sum-shares').textContent = shares;
        document.getElementById('pm-sum-total').textContent  = (side === 'buy' ? '-' : '+') + '$' + total;
        document.getElementById('pm-sum-payout').textContent = side === 'buy' ? '$' + payout + '.00' : 'n/a';
    }
    window.pmCalc = pmCalc;

    function pmUpdateSubmitBtn() {
        var btn   = document.getElementById('pm-submit-btn');
        var color = side === 'buy' ? 'btn-success' : 'btn-danger';
        var alt   = side === 'buy' ? 'btn-danger' : 'btn-success';
        btn.classList.remove(alt);
        btn.classList.add(color);
        var label = (side === 'buy' ? 'Buy' : 'Sell') + ' ' + outcome + ' Shares';
        btn.textContent = label;
    }

    // Initial calc
    pmCalc();
    pmUpdateSubmitBtn();

    // Auto-refresh prices every 30s
    var marketId = '{{ $market['id'] }}';
    function refreshPrices() {
        fetch('/portal/prediction-markets/' + marketId + '/prices')
            .then(function(r){ return r.json(); })
            .then(function(d){
                if (!d.yes_price) return;
                yesPrice = d.yes_price;
                noPrice  = d.no_price;
                var yesPct = (yesPrice * 100).toFixed(1);
                var noPct  = (noPrice  * 100).toFixed(1);
                document.getElementById('pm-yes-price').textContent = yesPct + '¢';
                document.getElementById('pm-no-price').textContent  = noPct  + '¢';
                document.getElementById('pm-bar-fill').style.width  = yesPct + '%';
                // Update price display if current outcome
                var p = (outcome === 'YES') ? yesPrice : noPrice;
                document.getElementById('pm-input-price').value     = p;
                document.getElementById('pm-price-display').textContent = (p * 100).toFixed(1) + '¢';
                document.getElementById('pm-sum-price').textContent    = (p * 100).toFixed(1) + '¢';
                pmCalc();
            })
            .catch(function(){});
    }
    setInterval(refreshPrices, 30000);
})();
</script>
@endpush