@php use App\Support\SymbolPresentation; @endphp
@extends('portal.layouts.master')
@section('title', 'Markets')
@section('page-title', 'Markets')

@section('extra-css')
.markets-ticker {
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    height: 52px;
    margin: 0 0 1rem;
}
.markets-ticker-track {
    display: flex; align-items: stretch; height: 100%;
    width: max-content;
    animation: markets-ticker-scroll 45s linear infinite;
}
.markets-ticker:hover .markets-ticker-track { animation-play-state: paused; }
@keyframes markets-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.ticker-item {
    display: flex; align-items: center; gap: .55rem;
    padding: 0 1.15rem; height: 100%;
    border-right: 1px solid var(--border);
    white-space: nowrap; text-decoration: none; color: inherit;
    flex-shrink: 0;
}
.ticker-item:hover { background: rgba(255,255,255,.03); color: inherit; }
.ticker-icon {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: .7rem; overflow: hidden;
}
.ticker-icon img { width: 16px; height: 16px; object-fit: contain; }
.ticker-name { font-weight: 600; font-size: .82rem; color: var(--text-primary); }
.ticker-price { font-size: .82rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ticker-chg { font-size: .78rem; font-variant-numeric: tabular-nums; }
.ticker-chg.up { color: var(--green); }
.ticker-chg.down { color: var(--red); }
.price-freshness { display:block; margin-top:.15rem; font-size:.66rem; font-weight:500; color:var(--text-muted); }
.price-freshness.live { color:var(--green); }
.price-freshness.stale { color:#f59e0b; }
.market-chart-cell { position:relative; }
.market-chart-tooltip {
    position:absolute; z-index:5; left:50%; bottom:43px; transform:translateX(-50%);
    min-width:112px; padding:.35rem .5rem; border:1px solid var(--border); border-radius:6px;
    background:#11151b; color:var(--text-primary); box-shadow:0 5px 15px rgba(0,0,0,.35);
    font-size:.68rem; line-height:1.35; text-align:center; pointer-events:none; white-space:nowrap;
    opacity:0; visibility:hidden; transition:opacity .08s;
}
.market-chart-tooltip.visible { opacity:1; visibility:visible; }
.market-chart-tooltip strong { display:block; font-size:.72rem; font-variant-numeric:tabular-nums; }
.market-chart-tooltip span { color:var(--text-muted); }
.markets-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.15rem;
}
.market-tabs { display: flex; gap: .45rem; flex-wrap: wrap; }
.market-tab {
    padding: .42rem 1.1rem; border-radius: 8px;
    font-size: .84rem; font-weight: 600; cursor: pointer;
    background: var(--bg-tertiary); color: var(--text-secondary);
    border: none; transition: background .15s, color .15s;
    line-height: 1.2;
}
.market-tab:hover { color: var(--text-primary); background: #353b45; }
.market-tab.active { background: var(--accent); color: #fff; }
.market-search {
    background: transparent; border: 1px solid var(--border);
    border-radius: 8px; padding: .5rem 1rem; font-size: .85rem;
    color: var(--text-primary); min-width: 240px;
}
.market-search:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.market-search::placeholder { color: var(--text-muted); }
.market-row { cursor: pointer; transition: background .1s; }
.market-row:hover { background: rgba(59,130,246,.04) !important; }
.cat-badge {
    font-size: .65rem; font-weight: 600; padding: .2rem .5rem;
    border-radius: 4px; text-transform: uppercase; letter-spacing: .03em;
}
.cat-crypto { background: rgba(245,158,11,.12); color: #f59e0b; }
.cat-forex { background: rgba(14,203,129,.12); color: var(--green); }
.cat-stocks { background: rgba(59,130,246,.12); color: var(--accent); }
.cat-commodities { background: rgba(168,85,247,.12); color: #a855f7; }
@media (max-width: 768px) {
    .market-search { min-width: 100%; width: 100%; }
}
@endsection

@section('content')

@php
    $tickerSymbols = $symbols->take(16);
@endphp

<div class="markets-ticker">
    <div class="markets-ticker-track">
        @foreach (range(1, $tickerSymbols->count() < 8 ? 4 : 2) as $loopCopy)
            @foreach ($tickerSymbols as $sym)
                @php
                    $pair = SymbolPresentation::pairLabel($sym);
                    [$tIcon, $tColor] = SymbolPresentation::baseIconPair($sym);
                    $tIsImg = str_starts_with($tIcon, 'img:');
                    $tPrice = $sym->latestPrice->price ?? null;
                    $tPct = $sym->latestPrice->change_24h_pct ?? null;
                    if ($tPct === null && count($sym->sparkline ?? []) >= 2) {
                        $first = (float) $sym->sparkline[0];
                        $last = (float) $sym->sparkline[count($sym->sparkline) - 1];
                        $tPct = $first != 0.0 ? (($last - $first) / $first) * 100 : null;
                    }
                    $tPct = $tPct !== null ? (float) $tPct : null;
                    $tAbs = ($tPct !== null && $tPrice) ? ((float) $tPrice) * ($tPct / 100) : null;
                    $tUp = $tPct !== null && $tPct >= 0;
                    $tDp = (int) ($sym->decimal_places ?? 2);
                @endphp
                <a class="ticker-item" href="{{ route('portal.trade', $sym->id) }}">
                    <span class="ticker-icon" style="background: {{ $tIcon ? $tColor.'22' : 'var(--bg-tertiary)' }}">
                        @if($tIsImg)
                            <img src="{{ substr($tIcon, 4) }}" alt=""
                                 onerror="this.style.display='none';this.nextElementSibling.style.display='inline'">
                            <span style="display:none;font-size:.6rem;font-weight:700;color:{{ $tColor }}">{{ strtoupper(substr($pair,0,1)) }}</span>
                        @elseif($tIcon)
                            <i class="{{ $tIcon }}" style="color:{{ $tColor }}"></i>
                        @else
                            <span style="font-size:.6rem;font-weight:700;color:var(--text-secondary)">{{ strtoupper(substr($pair,0,2)) }}</span>
                        @endif
                    </span>
                    <span class="ticker-name">{{ $pair }}</span>
                    <span class="ticker-price" data-ticker-price="{{ $sym->id }}">
                        @if($tPrice !== null)
                            {{ number_format((float) $tPrice, $tDp) }}
                        @else
                            —
                        @endif
                    </span>
                    @if($tPct !== null)
                        <span class="ticker-chg {{ $tUp ? 'up' : 'down' }}" data-ticker-change="{{ $sym->id }}">
                            {{ $tUp ? '+' : '' }}{{ $tAbs !== null ? number_format($tAbs, $tDp) : '' }}
                            ({{ $tUp ? '+' : '' }}{{ number_format($tPct, 2) }}%)
                        </span>
                    @else
                        <span class="ticker-chg" data-ticker-change="{{ $sym->id }}"></span>
                    @endif
                </a>
            @endforeach
        @endforeach
    </div>
</div>

<div class="markets-header">
    <div class="market-tabs" id="marketTabs">
        <button type="button" class="market-tab active" data-filter="all">All</button>
        <button type="button" class="market-tab" data-filter="popular">Popular</button>
        <button type="button" class="market-tab" data-filter="crypto">Crypto</button>
        <button type="button" class="market-tab" data-filter="forex">Forex</button>
        <button type="button" class="market-tab" data-filter="stocks">Stocks</button>
        <button type="button" class="market-tab" data-filter="commodities">Commodities</button>
    </div>
    <input type="text" class="market-search" id="marketSearch" placeholder="Search instruments..." autocomplete="off">
</div>

<div class="dark-card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="dark-table w-100" id="marketsTable">
                <thead>
                    <tr>
                        <th style="width:40px">#</th>
                        <th>Instrument</th>
                        <th>Symbol</th>
                        <th>Category</th>
                        <th class="text-end">Price</th>
                        <th class="text-center" style="width:130px">Price Chart</th>
                        <th class="text-center" style="width:230px">Action</th>
                    </tr>
                </thead>
                <tbody>
                @forelse($symbols as $i => $sym)
                <tr class="market-row" data-category="{{ $sym->category }}" data-name="{{ strtolower($sym->name . ' ' . $sym->tv_symbol) }}" data-trades="{{ $sym->trades_count }}" data-position="{{ (float) ($positionQuantities[$sym->id] ?? 0) }}" data-index="{{ $i }}" onclick="window.location='{{ route('portal.trade', $sym->id) }}'">
                    <td class="row-num" style="color:var(--text-muted)">{{ $i + 1 }}</td>
                    <td>
                        <div class="symbol-cell" style="display:flex;align-items:center;gap:.6rem">
                            @php
                                [$mIcon, $mColor] = SymbolPresentation::baseIconPair($sym);
                                $mIsImg = str_starts_with($mIcon, 'img:');
                                $mImgUrl = $mIsImg ? substr($mIcon, 4) : '';
                            @endphp
                            <div style="width:34px;height:34px;border-radius:50%;background:{{ $mIcon ? $mColor.'1a' : 'var(--bg-tertiary)' }};display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0">
                                @if($mIsImg)
                                    <img src="{{ $mImgUrl }}" width="20" height="20" alt=""
                                         style="border-radius:50%;object-fit:contain"
                                         onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
                                    <span style="display:none;font-size:.7rem;color:var(--text-secondary);font-weight:600">{{ strtoupper(substr($sym->name,0,2)) }}</span>
                                @elseif($mIcon)
                                    <i class="{{ $mIcon }}" style="color:{{ $mColor }}"></i>
                                @else
                                    <span style="font-size:.7rem;color:var(--text-secondary);font-weight:600">{{ strtoupper(substr($sym->name,0,2)) }}</span>
                                @endif
                            </div>
                            <div>
                                <div style="font-weight:600;font-size:.85rem">{{ $sym->name }}</div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <span style="font-weight:600;font-size:.82rem;color:var(--accent);font-family:monospace;letter-spacing:.02em">{{ $sym->tv_symbol }}</span>
                    </td>
                    <td><span class="cat-badge cat-{{ $sym->category }}">{{ ucfirst($sym->category) }}</span></td>
                    <td class="text-end fw-semibold" data-market-price-cell="{{ $sym->id }}">
                        @if($sym->latestPrice)
                            <span data-market-price="{{ $sym->id }}">{{ number_format($sym->latestPrice->price, $sym->decimal_places) }}</span>
                            @php $initialStale = $sym->latestPrice->priced_at?->lt(now()->subMinutes($sym->category === 'crypto' ? 3 : 5)) ?? true; @endphp
                            <small class="price-freshness {{ $initialStale ? 'stale' : 'live' }}" data-market-freshness="{{ $sym->id }}" title="{{ $sym->latestPrice->priced_at?->toIso8601String() }}">{{ $initialStale ? 'Delayed' : 'Live' }}</small>
                        @else
                            <span data-market-price="{{ $sym->id }}" style="color:var(--text-muted)">—</span>
                            <small class="price-freshness" data-market-freshness="{{ $sym->id }}">Unavailable</small>
                        @endif
                    </td>
                    <td class="text-center market-chart-cell" data-market-sparkline="{{ $sym->id }}" data-decimal-places="{{ (int) ($sym->decimal_places ?? 2) }}" data-chart-points="{{ json_encode($sym->chart_points ?? []) }}">
                        @php
                            $points = collect($sym->chart_points ?? [])->pluck('price')->all();
                            $sparkSvg = '';
                            if (count($points) >= 2) {
                                $min = min($points);
                                $max = max($points);
                                $range = $max - $min ?: 1;
                                $w = 120;
                                $h = 36;
                                $pad = 2;
                                $coords = [];
                                foreach ($points as $idx => $val) {
                                    $x = round($pad + ($idx / (count($points) - 1)) * ($w - $pad * 2), 2);
                                    $y = round($pad + (1 - ($val - $min) / $range) * ($h - $pad * 2), 2);
                                    $coords[] = "$x,$y";
                                }
                                $polyline = implode(' ', $coords);
                                $isUp = end($points) >= $points[0];
                                $stroke = $isUp ? '#0ecb81' : '#f6465d';
                                $fillId = 'sf' . $sym->id;
                                $areaCoords = "$pad,$h " . $polyline . " " . round($w - $pad, 2) . ",$h";
                                $sparkSvg = '<svg width="'.$w.'" height="'.$h.'" viewBox="0 0 '.$w.' '.$h.'" style="display:block;margin:0 auto">'
                                    . '<defs><linearGradient id="'.$fillId.'" x1="0" y1="0" x2="0" y2="1">'
                                    . '<stop offset="0%" stop-color="'.$stroke.'" stop-opacity="0.25"/>'
                                    . '<stop offset="100%" stop-color="'.$stroke.'" stop-opacity="0.02"/>'
                                    . '</linearGradient></defs>'
                                    . '<polygon points="'.$areaCoords.'" fill="url(#'.$fillId.')" />'
                                    . '<polyline points="'.$polyline.'" fill="none" stroke="'.$stroke.'" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>'
                                    . '</svg>';
                            }
                        @endphp
                        @if($sparkSvg)
                            {!! $sparkSvg !!}
                        @else
                            <span style="color:var(--text-muted);font-size:.75rem">—</span>
                        @endif
                    </td>
                    <td class="text-center">
                        <div style="display:flex;gap:.35rem;justify-content:center;white-space:nowrap">
                            <a href="{{ route('portal.trade', $sym->id) }}" class="btn btn-sm btn-buy" style="font-size:.75rem;padding:.25rem .6rem" onclick="event.stopPropagation()">
                                <i class="fas fa-arrow-up me-1"></i>Buy
                            </a>
                            <a href="{{ route('portal.trade', ['symbolId' => $sym->id, 'side' => 'sell']) }}" class="btn btn-sm btn-sell" style="font-size:.75rem;padding:.25rem .6rem" onclick="event.stopPropagation()" title="{{ (float) ($positionQuantities[$sym->id] ?? 0) > 0 ? 'Sell from your open position' : 'No open position — view sell details' }}">
                                <i class="fas fa-arrow-down me-1"></i>Sell
                            </a>
                            <a href="{{ route('portal.trade', ['symbolId' => $sym->id, 'mode' => 'leveraged']) }}" class="btn btn-sm btn-outline-primary" style="font-size:.75rem;padding:.25rem .6rem" onclick="event.stopPropagation()" title="Open a leveraged position">
                                <i class="fas fa-bolt me-1"></i>Leveraged
                            </a>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center py-4" style="color:var(--text-muted)">
                        No instruments available. Contact your account manager.
                    </td>
                </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection

@section('page-js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabs = document.querySelectorAll('.market-tab');
    const search = document.getElementById('marketSearch');
    const tbody = document.querySelector('#marketsTable tbody');
    const rows = Array.from(document.querySelectorAll('.market-row'));
    let activeFilter = 'all';
    let priceRequestInFlight = false;
    const pricesUrl = @json(route('portal.markets.prices'));
    const chartData = new Map();

    function filterAndSort() {
        const q = search.value.toLowerCase();
        const sorted = [...rows].sort((a, b) => {
            if (activeFilter === 'popular') {
                return parseInt(b.dataset.trades || 0) - parseInt(a.dataset.trades || 0);
            }
            return parseInt(a.dataset.index) - parseInt(b.dataset.index);
        });

        let num = 0;
        sorted.forEach(row => {
            const cat = row.dataset.category;
            const name = row.dataset.name;
            const catMatch = activeFilter === 'all' || activeFilter === 'popular' || cat === activeFilter;
            const searchMatch = !q || name.includes(q);
            const visible = catMatch && searchMatch;
            row.style.display = visible ? '' : 'none';
            if (visible) {
                num++;
                row.querySelector('.row-num').textContent = num;
            }
            tbody.appendChild(row);
        });
    }

    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            tabs.forEach(t => t.classList.remove('active'));
            this.classList.add('active');
            activeFilter = this.dataset.filter;
            filterAndSort();
        });
    });

    search.addEventListener('input', filterAndSort);

    function sparklineSvg(chartPoints, symbolId) {
        if (!Array.isArray(chartPoints) || chartPoints.length < 2) {
            return '<span style="color:var(--text-muted);font-size:.75rem">—</span>';
        }

        const values = chartPoints.map(point => Number(point.price)).filter(Number.isFinite);
        if (values.length < 2) return '<span style="color:var(--text-muted);font-size:.75rem">—</span>';

        const min = Math.min(...values);
        const max = Math.max(...values);
        const range = max - min || 1;
        const width = 120, height = 36, pad = 2;
        const coordinates = values.map((value, index) => {
            const x = pad + (index / (values.length - 1)) * (width - pad * 2);
            const y = pad + (1 - (value - min) / range) * (height - pad * 2);
            return `${x.toFixed(2)},${y.toFixed(2)}`;
        });
        const up = values[values.length - 1] >= values[0];
        const stroke = up ? '#0ecb81' : '#f6465d';
        const fillId = `live-sf-${symbolId}`;
        const polygon = `${pad},${height} ${coordinates.join(' ')} ${width - pad},${height}`;

        return `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" style="display:block;margin:0 auto">
            <defs><linearGradient id="${fillId}" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="${stroke}" stop-opacity="0.25"/>
                <stop offset="100%" stop-color="${stroke}" stop-opacity="0.02"/>
            </linearGradient></defs>
            <polygon points="${polygon}" fill="url(#${fillId})"/>
            <polyline points="${coordinates.join(' ')}" fill="none" stroke="${stroke}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <line class="chart-crosshair" x1="0" y1="${pad}" x2="0" y2="${height - pad}" stroke="var(--text-muted)" stroke-width="1" stroke-dasharray="2 2" style="display:none"/>
            <circle class="chart-marker" cx="0" cy="0" r="2.75" fill="${stroke}" stroke="#11151b" stroke-width="1.25" style="display:none"/>
        </svg><div class="market-chart-tooltip"><strong></strong><span></span></div>`;
    }

    function formatChartPrice(price, decimalPlaces) {
        return Number(price).toLocaleString(undefined, {
            minimumFractionDigits: decimalPlaces,
            maximumFractionDigits: decimalPlaces
        });
    }

    function bindChartHover(cell) {
        cell.addEventListener('mousemove', function(event) {
            const points = chartData.get(cell.dataset.marketSparkline) || [];
            if (points.length < 2) return;

            const svg = cell.querySelector('svg');
            const tooltip = cell.querySelector('.market-chart-tooltip');
            if (!svg || !tooltip) return;

            const rect = svg.getBoundingClientRect();
            const relativeX = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
            const index = Math.max(0, Math.min(points.length - 1, Math.round((relativeX / rect.width) * (points.length - 1))));
            const point = points[index];
            const svgX = 2 + (index / (points.length - 1)) * 116;

            const values = points.map(item => Number(item.price));
            const min = Math.min(...values), max = Math.max(...values), range = max - min || 1;
            const svgY = 2 + (1 - (Number(point.price) - min) / range) * 32;
            const crosshair = svg.querySelector('.chart-crosshair');
            const marker = svg.querySelector('.chart-marker');
            crosshair.setAttribute('x1', svgX); crosshair.setAttribute('x2', svgX); crosshair.style.display = '';
            marker.setAttribute('cx', svgX); marker.setAttribute('cy', svgY); marker.style.display = '';

            tooltip.querySelector('strong').textContent = formatChartPrice(point.price, Number(cell.dataset.decimalPlaces || 2));
            tooltip.querySelector('span').textContent = new Intl.DateTimeFormat(undefined, {
                hour: '2-digit', minute: '2-digit', second: '2-digit'
            }).format(new Date(point.priced_at));
            tooltip.classList.add('visible');
        });

        cell.addEventListener('mouseleave', function() {
            cell.querySelector('.market-chart-tooltip')?.classList.remove('visible');
            const crosshair = cell.querySelector('.chart-crosshair');
            const marker = cell.querySelector('.chart-marker');
            if (crosshair) crosshair.style.display = 'none';
            if (marker) marker.style.display = 'none';
        });
    }

    function updateSymbolPrice(symbol) {
        document.querySelectorAll(`[data-ticker-price="${symbol.id}"]`).forEach(element => {
            element.textContent = symbol.formatted_price ?? '—';
        });

        const priceElement = document.querySelector(`[data-market-price="${symbol.id}"]`);
        if (priceElement) {
            priceElement.textContent = symbol.formatted_price ?? '—';
        }

        const freshness = document.querySelector(`[data-market-freshness="${symbol.id}"]`);
        if (freshness) {
            freshness.classList.remove('live', 'stale');
            freshness.title = symbol.priced_at ?? '';
            if (!symbol.priced_at) {
                freshness.textContent = 'Unavailable';
            } else if (symbol.is_stale) {
                freshness.textContent = 'Delayed';
                freshness.classList.add('stale');
            } else {
                freshness.textContent = 'Live';
                freshness.classList.add('live');
            }
        }

        document.querySelectorAll(`[data-ticker-change="${symbol.id}"]`).forEach(element => {
            const change = Number(symbol.change_24h_pct);
            element.classList.remove('up', 'down');
            if (Number.isFinite(change)) {
                element.textContent = `${change >= 0 ? '+' : ''}${change.toFixed(2)}%`;
                element.classList.add(change >= 0 ? 'up' : 'down');
            } else {
                element.textContent = '';
            }
        });

        const chart = document.querySelector(`[data-market-sparkline="${symbol.id}"]`);
        if (chart) {
            const points = Array.isArray(symbol.chart_points) ? symbol.chart_points : [];
            chartData.set(String(symbol.id), points);
            chart.innerHTML = sparklineSvg(points, symbol.id);
        }
    }

    async function refreshPrices() {
        if (document.hidden || priceRequestInFlight) return;
        priceRequestInFlight = true;
        try {
            const response = await fetch(pricesUrl, {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                cache: 'no-store',
                credentials: 'same-origin'
            });
            if (!response.ok) throw new Error(`Price refresh failed (${response.status})`);
            const payload = await response.json();
            if (Array.isArray(payload.symbols)) payload.symbols.forEach(updateSymbolPrice);
        } catch (error) {
            console.warn('Keeping last market prices:', error);
        } finally {
            priceRequestInFlight = false;
        }
    }

    document.querySelectorAll('[data-market-sparkline]').forEach(cell => {
        try {
            const points = JSON.parse(cell.dataset.chartPoints || '[]');
            chartData.set(cell.dataset.marketSparkline, points);
            cell.innerHTML = sparklineSvg(points, cell.dataset.marketSparkline);
        } catch (error) {
            chartData.set(cell.dataset.marketSparkline, []);
        }
        bindChartHover(cell);
    });

    const pricePoll = window.setInterval(refreshPrices, 5000);
    document.addEventListener('visibilitychange', function() {
        if (!document.hidden) refreshPrices();
    });
    window.addEventListener('pagehide', () => window.clearInterval(pricePoll), { once: true });

});
</script>
@endsection