@extends('layouts.vpm-mobile-app', ['active' => 'markets'])

@section('title', 'Trading room')

@section('content_class', 'vpm-shell__main--trading-room')

@section('content')
@php
    $filterUrl = fn (array $overrides = []) => route('app.markets.trading-room', array_merge([
        'category' => $categoryLabel,
        'symbol' => $symbol,
        'chart' => $chart,
        'tab' => $tab,
    ], $overrides));

    $tabUrl = fn (string $nextTab) => $filterUrl(['tab' => $nextTab]);
    $showTradesPanel = $tab !== 'room';
    $activeTrades = $tab === 'closed' ? $closedTrades : $openTrades;
    $emptyTradesLabel = $tab === 'closed' ? 'NO CLOSED TRADES' : 'NO OPEN TRADES';
    $chartTheme = 'dark';
    $chartWrapClass = match ($chart) {
        'Info' => 'vpm-trading-room__chart-wrap--info',
        'Technical' => 'vpm-trading-room__chart-wrap--technical',
        default => 'vpm-trading-room__chart-wrap--simple',
    };
@endphp

<div class="vpm-trading-room" data-vpm-trading-room>
    <div class="vpm-trading-room__layout">
        <div class="vpm-trading-room__modes-wrap">
            <nav class="vpm-trading-room__modes" aria-label="Trading room views" role="tablist">
                <a
                    href="{{ $tabUrl('room') }}"
                    role="tab"
                    @class([
                        'vpm-trading-room__mode',
                        'vpm-trading-room__mode--active' => $tab === 'room',
                    ])
                    @if ($tab === 'room') aria-selected="true" @else aria-selected="false" @endif
                >
                    <span class="material-icons notranslate" aria-hidden="true">storefront</span>
                    <span>TRADE ROOM</span>
                </a>
                <a
                    href="{{ $tabUrl('open') }}"
                    role="tab"
                    @class([
                        'vpm-trading-room__mode',
                        'vpm-trading-room__mode--active' => $tab === 'open',
                    ])
                    @if ($tab === 'open') aria-selected="true" @else aria-selected="false" @endif
                >
                    <span class="material-icons notranslate" aria-hidden="true">hourglass_top</span>
                    <span>OPEN TRADES</span>
                </a>
                <a
                    href="{{ $tabUrl('closed') }}"
                    role="tab"
                    @class([
                        'vpm-trading-room__mode',
                        'vpm-trading-room__mode--active' => $tab === 'closed',
                    ])
                    @if ($tab === 'closed') aria-selected="true" @else aria-selected="false" @endif
                >
                    <span class="material-icons notranslate" aria-hidden="true">hourglass_full</span>
                    <span>CLOSED TRADES</span>
                </a>
            </nav>
        </div>

        <div @class([
            'vpm-trading-room__content',
            'vpm-trading-room__content--trades' => $showTradesPanel,
        ])>
            @if ($showTradesPanel)
                <aside @class([
                    'vpm-trading-room__trades',
                    'vpm-trading-room__trades--empty' => $activeTrades->isEmpty(),
                ]) aria-label="{{ $tab === 'closed' ? 'Closed trades' : 'Open trades' }}">
                    @if ($activeTrades->isEmpty())
                        <p class="vpm-trading-room__trades-empty">{{ $emptyTradesLabel }}</p>
                    @else
                        <ul class="vpm-trading-room__trades-list">
                            @foreach ($activeTrades as $item)
                                @php($meta = $item->tradingRoomMeta())
                                <li class="vpm-trading-room-trade">
                                    <a href="{{ $item->url() }}" class="vpm-trading-room-trade__link">
                                        <div class="vpm-trading-room-trade__head">
                                            <span class="vpm-trading-room-trade__pair">{{ $meta['pair'] }}</span>
                                            <span class="vpm-trading-room-trade__side vpm-trading-room-trade__side--{{ strtolower($meta['side']) }}">
                                                {{ $meta['side'] }}@if ($meta['leverage']) {{ $meta['leverage'] }}x @endif
                                            </span>
                                        </div>
                                        <div class="vpm-trading-room-trade__meta vpm-num">
                                            <span>{{ number_format($meta['notional'], 2) }}</span>
                                            <span>@ {{ number_format($meta['price'], 2) }}</span>
                                        </div>
                                        @if ($tab === 'closed' || $item->isProduct())
                                            <p class="vpm-trading-room-trade__pnl vpm-num {{ $meta['pnl'] >= 0 ? 'vpm-positive' : 'vpm-negative' }}">
                                                {{ $meta['pnl'] >= 0 ? '+' : '' }}{{ number_format($meta['pnl'], 2) }}
                                            </p>
                                        @endif
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </aside>
            @endif

            <div class="vpm-trading-room__chart-column">
                        <form method="GET" action="{{ route('app.markets.trading-room') }}" class="vpm-trading-room__filters" data-vpm-trading-room-filters>
                            <input type="hidden" name="tab" value="{{ $tab }}">

                            <label class="vpm-trading-room__filter">
                                <span class="sr-only">Category</span>
                                <span class="vpm-trading-room__filter-wrap">
                                    <select name="category" class="vpm-trading-room__filter-select" data-vpm-trading-room-filter>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category['label'] }}" @selected($category['label'] === $categoryLabel)>
                                                {{ strtoupper($category['label']) }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <svg class="vpm-trading-room__filter-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                        <path d="m6 9 6 6 6-6"/>
                                    </svg>
                                </span>
                            </label>

                            <label class="vpm-trading-room__filter">
                                <span class="sr-only">Symbol</span>
                                <span class="vpm-trading-room__filter-wrap">
                                    <select name="symbol" class="vpm-trading-room__filter-select" data-vpm-trading-room-filter>
                                        @foreach ($categoryItems as $item)
                                            <option value="{{ $item['symbol'] }}" @selected($item['symbol'] === $symbol)>
                                                {{ strtoupper($item['symbol']) }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <svg class="vpm-trading-room__filter-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                        <path d="m6 9 6 6 6-6"/>
                                    </svg>
                                </span>
                            </label>

                            <label class="vpm-trading-room__filter">
                                <span class="sr-only">Chart type</span>
                                <span class="vpm-trading-room__filter-wrap">
                                    <select name="chart" class="vpm-trading-room__filter-select" data-vpm-trading-room-filter>
                                        <option value="Simple" @selected($chart === 'Simple')>Simple</option>
                                        <option value="Technical" @selected($chart === 'Technical')>Technical</option>
                                        <option value="Info" @selected($chart === 'Info')>Info</option>
                                    </select>
                                    <svg class="vpm-trading-room__filter-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                        <path d="m6 9 6 6 6-6"/>
                                    </svg>
                                </span>
                            </label>
                        </form>

                        <div @class(['vpm-trading-room__chart-wrap', $chartWrapClass])>
                            @if ($chart === 'Info')
                                @include('partials.vpm.tradingview-symbol-info', [
                                    'symbol' => $tvSymbol,
                                    'theme' => $chartTheme,
                                ])
                            @elseif ($chart === 'Technical')
                                @include('partials.vpm.tradingview-advanced-chart', [
                                    'symbol' => $tvSymbol,
                                    'theme' => $chartTheme,
                                ])
                            @else
                                @include('partials.vpm.tradingview-symbol-overview', [
                                    'displaySymbol' => $displaySymbol,
                                    'tvSymbol' => $tvSymbol,
                                    'theme' => $chartTheme,
                                ])
                            @endif
                        </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('[data-vpm-trading-room-filters]');
    if (!form) return;

    form.querySelectorAll('[data-vpm-trading-room-filter]').forEach((field) => {
        field.addEventListener('change', () => form.requestSubmit());
    });
});
</script>
@endpush