@extends('layouts.app')
@section('title', 'Live Signals')
@section('page-title', 'Live Signals')

@section('content')
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px;">
    <div class="tf-tabs">
        <a href="{{ route('signals') }}" class="tf-tab {{ !request('timeframe') ? 'active' : '' }}">All</a>
        @foreach(['5s','10s','30s','1m','5m'] as $tf)
        <a href="{{ route('signals', ['timeframe' => $tf, 'asset' => request('asset')]) }}"
           class="tf-tab {{ request('timeframe') === $tf ? 'active' : '' }}">{{ $tf }}</a>
        @endforeach
    </div>
    <select class="form-control" style="width:160px;" onchange="window.location='{{ route('signals') }}?asset='+this.value+'&timeframe={{ request('timeframe') }}'">
        <option value="">All Assets</option>
        @foreach(['EURUSD','GBPUSD','USDJPY','BTCUSD','ETHUSD','GOLD','AAPL'] as $a)
        <option value="{{ $a }}" {{ request('asset') === $a ? 'selected' : '' }}>{{ $a }}</option>
        @endforeach
    </select>
</div>

<div id="live-signals" class="signals-grid">
    @forelse($signals as $signal)
    <div class="signal-card {{ strtolower($signal['direction']) }}">
        <div class="signal-header">
            <div class="signal-asset">{{ $signal['asset'] }}</div>
            <span class="signal-direction {{ strtolower($signal['direction']) }}">{{ $signal['direction'] }}</span>
        </div>
        <div class="signal-meta">
            <span class="signal-badge">{{ $signal['timeframe'] }}</span>
            <span class="signal-badge">{{ $signal['platform'] ?? 'quotex' }}</span>
            <span class="signal-badge">${{ number_format($signal['current_price'] ?? 0, 5) }}</span>
        </div>
        <!-- Indicators -->
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:0.72rem;">
            @php $ind = $signal['indicators'] ?? []; @endphp
            @if(isset($ind['rsi'])) <span style="color:var(--text-muted);">RSI: <strong style="color:var(--text)">{{ $ind['rsi'] }}</strong></span> @endif
            @if(isset($ind['macd'])) <span style="color:var(--text-muted);">MACD: <strong style="color:var(--text)">{{ number_format($ind['macd'], 6) }}</strong></span> @endif
            @if(isset($ind['stoch_k'])) <span style="color:var(--text-muted);">Stoch K: <strong style="color:var(--text)">{{ $ind['stoch_k'] }}</strong></span> @endif
            @if(isset($ind['cci'])) <span style="color:var(--text-muted);">CCI: <strong style="color:var(--text)">{{ $ind['cci'] }}</strong></span> @endif
            @if(isset($ind['ema9'])) <span style="color:var(--text-muted);">EMA9: <strong style="color:var(--text)">{{ number_format($ind['ema9'], 5) }}</strong></span> @endif
            @if(isset($ind['ema21'])) <span style="color:var(--text-muted);">EMA21: <strong style="color:var(--text)">{{ number_format($ind['ema21'], 5) }}</strong></span> @endif
        </div>
        <div>
            <div style="display:flex;justify-content:space-between;font-size:0.75rem;margin-bottom:4px;">
                <span style="color:var(--text-muted)">Strength</span>
                <span>{{ $signal['strength'] ?? 0 }}%</span>
            </div>
            <div class="strength-bar">
                <div class="strength-fill {{ ($signal['strength'] ?? 0) >= 70 ? 'high' : (($signal['strength'] ?? 0) >= 50 ? 'medium' : 'low') }}" style="width:{{ $signal['strength'] ?? 0 }}%"></div>
            </div>
        </div>
        <!-- Trade buttons -->
        <div style="display:flex;gap:6px;margin-top:4px;">
            <button onclick="quickTrade('{{ $signal['asset'] }}','CALL',10,60)" class="btn" style="flex:1;padding:6px;font-size:0.75rem;background:rgba(34,197,94,0.15);color:#22c55e;border:1px solid rgba(34,197,94,0.3);">
                <i class="fa-solid fa-arrow-up"></i> CALL
            </button>
            <button onclick="quickTrade('{{ $signal['asset'] }}','PUT',10,60)" class="btn" style="flex:1;padding:6px;font-size:0.75rem;background:rgba(239,68,68,0.15);color:#ef4444;border:1px solid rgba(239,68,68,0.3);">
                <i class="fa-solid fa-arrow-down"></i> PUT
            </button>
        </div>
        <div style="font-size:0.65rem;color:var(--text-muted);">{{ $signal['timestamp'] ?? '' }}</div>
    </div>
    @empty
    <div style="grid-column:1/-1;text-align:center;padding:60px;color:var(--text-muted);">
        <i class="fa-solid fa-satellite-dish" style="font-size:3rem;margin-bottom:16px;display:block;opacity:0.3;"></i>
        <p>No signals yet. Make sure the Python backend is running.</p>
    </div>
    @endforelse
</div>
@endsection

@section('scripts')
<script>
    async function quickTrade(asset, direction, amount, duration) {
        const res = await fetch('/bot/trade', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content },
            body: JSON.stringify({ asset, direction, amount, duration }),
        });
        const data = await res.json();
        alert(data.id ? `✅ Trade placed: ${direction} ${asset}` : `❌ ${data.error || 'Failed'}`);
    }

    // Auto-refresh every 5 seconds
    setTimeout(() => location.reload(), 5000);
</script>
@endsection