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

@section('content')
<!-- Stats Row -->
<div class="grid-4">
    <div class="card">
        <div class="card-title"><i class="fa-solid fa-wifi"></i> Bot Status</div>
        <div class="stat-value" style="font-size:1.1rem;color:{{ $status['signal_engine_running'] ? '#22c55e' : '#ef4444' }}">
            {{ $status['signal_engine_running'] ? '🟢 Running' : '🔴 Stopped' }}
        </div>
    </div>
    <div class="card">
        <div class="card-title"><i class="fa-solid fa-plug"></i> Quotex</div>
        <div class="stat-value" style="font-size:1.1rem;color:{{ $status['quotex_connected'] ? '#22c55e' : '#ef4444' }}">
            {{ $status['quotex_connected'] ? '🟢 Connected' : '🔴 Demo Mode' }}
        </div>
    </div>
    <div class="card">
        <div class="card-title"><i class="fa-solid fa-bolt"></i> Active Signals</div>
        <div class="stat-value" style="color:var(--accent)">{{ count($signals) }}</div>
    </div>
    <div class="card">
        <div class="card-title"><i class="fa-solid fa-clock"></i> Timeframes</div>
        <div class="stat-value" style="font-size:0.9rem;color:#7c3aed;">5s · 10s · 30s · 1m · 5m</div>
    </div>
</div>

<!-- Live Signals -->
<div class="card" style="margin-bottom:24px;">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
        <h2 style="font-size:1rem;font-weight:600;"><i class="fa-solid fa-bolt" style="color:var(--accent)"></i> Live Signals</h2>
        <span class="live-badge">LIVE</span>
    </div>
    <div id="signals-container" 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"><i class="fa-solid fa-clock"></i> {{ $signal['timeframe'] }}</span>
                    <span class="signal-badge">{{ $signal['platform'] ?? 'quotex' }}</span>
                    <span class="signal-badge">${{ number_format($signal['current_price'] ?? 0, 5) }}</span>
                </div>
                <div>
                    <div style="display:flex;justify-content:space-between;margin-bottom:4px;font-size:0.75rem;">
                        <span style="color:var(--text-muted)">Signal Strength</span>
                        <span style="color:{{ ($signal['strength'] ?? 0) >= 70 ? '#22c55e' : (($signal['strength'] ?? 0) >= 50 ? '#f59e0b' : '#ef4444') }}">{{ $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>
                <div style="font-size:0.7rem;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:6px;">
                    @if(isset($signal['indicators']['rsi']))
                        <span>RSI: {{ $signal['indicators']['rsi'] }}</span>
                    @endif
                    @if(isset($signal['indicators']['macd']))
                        <span>MACD: {{ number_format($signal['indicators']['macd'], 6) }}</span>
                    @endif
                </div>
            </div>
        @empty
            <div style="grid-column:1/-1;text-align:center;padding:40px;color:var(--text-muted);">
                <i class="fa-solid fa-satellite-dish" style="font-size:2rem;margin-bottom:12px;display:block;"></i>
                Signals loading... Make sure the Python backend is running.
            </div>
        @endforelse
    </div>
</div>

<!-- Balance + Quick Trade -->
<div class="grid-2">
    <div class="card">
        <h3 style="margin-bottom:16px;font-size:0.95rem;"><i class="fa-solid fa-wallet" style="color:var(--accent)"></i> Account Balance</h3>
        <div id="balance-display" style="font-size:2rem;font-weight:700;color:var(--accent);margin-bottom:8px;">Loading...</div>
        <div style="font-size:0.8rem;color:var(--text-muted)">USD • Binary Options Account</div>
        <button class="btn btn-secondary" style="margin-top:16px;" onclick="refreshBalance()">
            <i class="fa-solid fa-rotate"></i> Refresh
        </button>
    </div>
    <div class="card">
        <h3 style="margin-bottom:16px;font-size:0.95rem;"><i class="fa-solid fa-arrow-trend-up" style="color:var(--accent)"></i> Quick Trade</h3>
        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Asset</label>
                <select id="qt-asset" class="form-control">
                    <option>EURUSD</option><option>GBPUSD</option><option>USDJPY</option>
                    <option>BTCUSD</option><option>ETHUSD</option><option>GOLD</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Amount ($)</label>
                <input type="number" id="qt-amount" class="form-control" value="10" min="1">
            </div>
        </div>
        <div class="form-group">
            <label class="form-label">Duration</label>
            <select id="qt-duration" class="form-control">
                <option value="5">5 sec</option><option value="10">10 sec</option>
                <option value="30">30 sec</option><option value="60">1 min</option>
                <option value="300">5 min</option>
            </select>
        </div>
        <div style="display:flex;gap:8px;">
            <button class="btn" style="flex:1;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;" onclick="quickTrade('CALL')">
                <i class="fa-solid fa-arrow-up"></i> CALL
            </button>
            <button class="btn" style="flex:1;background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff;" onclick="quickTrade('PUT')">
                <i class="fa-solid fa-arrow-down"></i> PUT
            </button>
        </div>
        <div id="qt-msg" style="margin-top:10px;font-size:0.8rem;"></div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    const WS_URL = '{{ str_replace("http", "ws", config("bot.api_url")) }}/ws/signals?token={{ session("bot_token") }}';
    let ws;

    function connectWebSocket() {
        try {
            ws = new WebSocket(WS_URL);
            ws.onopen = () => console.log('WS connected');
            ws.onmessage = (e) => {
                const msg = JSON.parse(e.data);
                if (msg.type === 'signal') {
                    injectSignal(msg.data);
                }
            };
            ws.onclose = () => setTimeout(connectWebSocket, 3000);
        } catch(e) {
            // Fallback: poll every 5s
            setTimeout(pollSignals, 5000);
        }
    }

    function injectSignal(signal) {
        const container = document.getElementById('signals-container');
        const key = signal.asset + '_' + signal.timeframe;
        let card = document.getElementById('sig_' + key);
        const dir = signal.direction.toLowerCase();
        const strength = signal.strength || 0;
        const strengthClass = strength >= 70 ? 'high' : strength >= 50 ? 'medium' : 'low';
        const html = `
            <div class="signal-card ${dir}" id="sig_${key}" style="animation:fadeIn 0.3s ease">
                <div class="signal-header">
                    <div class="signal-asset">${signal.asset}</div>
                    <span class="signal-direction ${dir}">${signal.direction}</span>
                </div>
                <div class="signal-meta">
                    <span class="signal-badge"><i class="fa-solid fa-clock"></i> ${signal.timeframe}</span>
                    <span class="signal-badge">${signal.platform || 'quotex'}</span>
                    <span class="signal-badge">${parseFloat(signal.current_price || 0).toFixed(5)}</span>
                </div>
                <div>
                    <div style="display:flex;justify-content:space-between;margin-bottom:4px;font-size:0.75rem;">
                        <span style="color:var(--text-muted)">Signal Strength</span>
                        <span style="color:${strength >= 70 ? '#22c55e' : strength >= 50 ? '#f59e0b' : '#ef4444'}">${strength}%</span>
                    </div>
                    <div class="strength-bar"><div class="strength-fill ${strengthClass}" style="width:${strength}%"></div></div>
                </div>
                <div style="font-size:0.7rem;color:var(--text-muted);">
                    ${signal.indicators?.rsi ? 'RSI: ' + signal.indicators.rsi : ''}
                    ${signal.indicators?.macd ? ' • MACD: ' + parseFloat(signal.indicators.macd).toFixed(6) : ''}
                </div>
            </div>`;
        if (card) {
            card.outerHTML = html;
        } else {
            if (container.querySelector('[style*="satellite"]')) container.innerHTML = '';
            container.insertAdjacentHTML('afterbegin', html);
        }
    }

    async function pollSignals() {
        try {
            const res = await fetch('/signals');
            // Just reload page signals via API endpoint
        } catch(e) {}
        setTimeout(pollSignals, 5000);
    }

    async function refreshBalance() {
        try {
            const res = await fetch('/bot/balance');
            const data = await res.json();
            document.getElementById('balance-display').textContent = '$' + parseFloat(data.balance || 0).toFixed(2);
        } catch(e) {
            document.getElementById('balance-display').textContent = 'N/A';
        }
    }

    async function quickTrade(direction) {
        const asset = document.getElementById('qt-asset').value;
        const amount = document.getElementById('qt-amount').value;
        const duration = document.getElementById('qt-duration').value;
        const msg = document.getElementById('qt-msg');
        msg.innerHTML = '<span style="color:#f59e0b;">Placing trade...</span>';
        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: parseFloat(amount), duration: parseInt(duration) }),
        });
        const data = await res.json();
        if (data.id) {
            msg.innerHTML = `<span style="color:#22c55e;">✅ Trade placed! ID: ${data.id}</span>`;
        } else {
            msg.innerHTML = `<span style="color:#ef4444;">❌ ${data.error || 'Trade failed'}</span>`;
        }
    }

    connectWebSocket();
    refreshBalance();
    setInterval(refreshBalance, 30000);
</script>
<style>
    @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
</style>
@endsection