@extends('layouts.client')
@section('title', 'Trade')
@section('main_class', 'client-main--trade')

@section('content')
@php
    $quote = $selectedMarket?->quoteCurrency() ?? 'USDT';
@endphp

<form method="POST" action="{{ route('client.trade.store') }}" id="tradeForm">
    @csrf
    <input type="hidden" name="direction" id="direction" value="{{ $defaultDirection ?? 'buy' }}">

    <div class="form-group">
        <label for="marketSelect">Select market</label>
        <select name="market_id" class="client-select trade-market-select" id="marketSelect" required {{ $activeTrade ? 'disabled' : '' }}>
            @foreach($marketGroups as $groupLabel => $groupMarkets)
                @if($groupMarkets->isNotEmpty())
                <optgroup label="{{ $groupLabel }}">
                    @foreach($groupMarkets as $m)
                    <option value="{{ $m->id }}" data-pair="{{ $m->tradePairLabel() }}" @selected($selectedMarket?->id === $m->id)>
                        {{ $m->symbol }} - {{ $m->name }}
                    </option>
                    @endforeach
                </optgroup>
                @endif
            @endforeach
        </select>
    </div>

    @if($selectedMarket)
    <div class="client-card trade-chart-card">
        <div class="trade-chart-card__header">
            <span class="trade-chart-card__icon" aria-hidden="true">
                @if($selectedMarket->isMetal())
                    <span class="trade-chart-card__metal">{{ $selectedMarket->symbol === 'XAGUSD' ? '🥈' : '🥇' }}</span>
                @else
                    @include('partials.crypto-logo', ['symbol' => $selectedMarket->symbol, 'name' => $selectedMarket->name, 'size' => 36, 'class' => 'trade-chart-card__logo'])
                @endif
            </span>
            <span class="trade-chart-card__pair">{{ $selectedMarket->tradePairLabel() }}</span>
        </div>
        <div class="trade-chart-card__body">
            <div class="tradingview-chart-wrap">
                <div class="tradingview-widget-container">
                    <div id="tradingview_chart"></div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <p class="section-label">Select Period</p>
    @if($periods->isEmpty())
        <p class="empty-state" style="padding:1rem">No trade periods configured for this market type.</p>
    @else
    <div class="period-grid">
        @foreach($periods as $i => $period)
        <label class="period-btn"
               data-duration="{{ $period->duration_seconds }}"
               data-payout="{{ $period->profit_percent }}">
            <input type="radio" name="trade_period_id" value="{{ $period->id }}" {{ $i === 0 ? 'checked' : '' }} required {{ $activeTrade ? 'disabled' : '' }}>
            <strong>{{ $period->duration_seconds }}s</strong>
            {{ $period->profit_percent }}% · ${{ number_format($period->min_amount, 0) }}
        </label>
        @endforeach
    </div>
    @endif

    <div class="form-group">
        <input type="number" name="amount" class="client-input" step="0.01" min="1"
               placeholder="Amount ({{ $quote }})" value="{{ old('amount') }}" required {{ $activeTrade ? 'disabled' : '' }}>
    </div>

    <div class="trade-actions-row">
        <button type="button" class="client-btn client-btn-sell" id="sellBtn" {{ $activeTrade ? 'disabled' : '' }}>Sell</button>
        <button type="button" class="client-btn client-btn-buy" id="buyBtn" {{ $activeTrade ? 'disabled' : '' }}>Buy</button>
    </div>
</form>

<dialog id="tradeConfirmModal" class="trade-confirm-modal">
    <button type="button" class="trade-confirm-close" id="tradeConfirmClose" aria-label="Close">&times;</button>
    <h2 class="trade-confirm-title">Confirm Trade</h2>
    <dl class="trade-confirm-body">
        <div class="trade-confirm-row">
            <dt class="trade-confirm-label">Pair</dt>
            <dd class="trade-confirm-value" id="confirmPair">—</dd>
        </div>
        <div class="trade-confirm-row">
            <dt class="trade-confirm-label">Direction</dt>
            <dd class="trade-confirm-value" id="confirmDirection">—</dd>
        </div>
        <div class="trade-confirm-row">
            <dt class="trade-confirm-label">Amount</dt>
            <dd class="trade-confirm-value" id="confirmAmount">—</dd>
        </div>
        <div class="trade-confirm-row">
            <dt class="trade-confirm-label">Timer</dt>
            <dd class="trade-confirm-value" id="confirmTimer">—</dd>
        </div>
        <div class="trade-confirm-row">
            <dt class="trade-confirm-label">Payout</dt>
            <dd class="trade-confirm-value" id="confirmPayout">—</dd>
        </div>
    </dl>
    <button type="button" class="trade-confirm-btn" id="tradeConfirmSubmit">Confirm</button>
</dialog>

<dialog id="tradeCountdownModal" class="trade-countdown-modal">
    <div class="trade-countdown-card">
        <div class="trade-countdown-top">
            <div class="trade-countdown-heading">
                <span class="trade-countdown-pair" id="countdownPair">—</span>
                <span class="trade-direction-badge" id="countdownDirection">—</span>
            </div>
            <button type="button" class="trade-countdown-close" id="countdownClose" aria-label="Close">&times;</button>
        </div>
        <div class="trade-countdown-body">
            <p class="trade-countdown-time" id="countdownTime">00:00</p>
            <p class="trade-countdown-meta" id="countdownAmount">Amount: —</p>
            <p class="trade-countdown-meta" id="countdownTimerLabel">Timer: —</p>
            <p class="trade-countdown-status" id="countdownStatus">Running...</p>
        </div>
    </div>
</dialog>

<div id="tradeOutcomeToast" class="trade-outcome-toast" hidden>
    <div class="trade-outcome-toast__inner">
        <span class="trade-outcome-toast__icon" id="tradeToastIcon" aria-hidden="true">🏆</span>
        <span class="trade-outcome-toast__text" id="tradeToastText"></span>
    </div>
    <button type="button" class="trade-outcome-toast__close" id="tradeToastClose" aria-label="Dismiss">&times;</button>
</div>
@endsection

@push('scripts')
<script src="https://s3.tradingview.com/tv.js"></script>
<script>
const tvBaseConfig = {
    symbol: @json($tradingViewSymbol),
    interval: '1',
    timezone: 'Etc/UTC',
    theme: 'dark',
    style: '1',
    locale: 'en',
    enable_publishing: false,
    container_id: 'tradingview_chart',
    studies: ['Volume@tv-basicstudies'],
    autosize: false,
    width: '100%',
};

let tvWidget = null;
let chartResizeObserver = null;

function getChartBodyEl() {
    return document.querySelector('.trade-chart-card__body');
}

function getChartHeight() {
    const body = getChartBodyEl();
    if (!body) return 420;
    return Math.max(320, Math.floor(body.getBoundingClientRect().height));
}

function applyChartDimensions() {
    const body = getChartBodyEl();
    if (!body) return;

    const height = getChartHeight();
    const width = body.clientWidth;

    body.querySelectorAll('.tradingview-chart-wrap, .tradingview-widget-container, #tradingview_chart').forEach(function(el) {
        el.style.height = height + 'px';
        el.style.minHeight = height + 'px';
    });

    const iframe = body.querySelector('iframe');
    if (iframe) {
        iframe.style.height = height + 'px';
        iframe.style.minHeight = height + 'px';
    }

    if (tvWidget && typeof tvWidget.resize === 'function') {
        tvWidget.resize(width, height);
    }
}

function bindChartResizeObserver() {
    const body = getChartBodyEl();
    if (!body || !window.ResizeObserver) return;

    if (chartResizeObserver) chartResizeObserver.disconnect();
    chartResizeObserver = new ResizeObserver(function() {
        applyChartDimensions();
    });
    chartResizeObserver.observe(body);
}

function initTradingView(symbol) {
    const container = document.getElementById('tradingview_chart');
    if (!container || typeof TradingView === 'undefined') return;

    if (tvWidget && tvWidget.remove) {
        try { tvWidget.remove(); } catch (e) {}
        tvWidget = null;
    }

    container.innerHTML = '';

    const height = getChartHeight();
    const config = Object.assign({}, tvBaseConfig, {
        symbol: symbol,
        height: height,
    });

    tvWidget = new TradingView.widget(config);

    if (tvWidget && typeof tvWidget.onChartReady === 'function') {
        tvWidget.onChartReady(function() {
            applyChartDimensions();
        });
    }

    bindChartResizeObserver();
    setTimeout(applyChartDimensions, 100);
    setTimeout(applyChartDimensions, 500);
}

window.addEventListener('resize', applyChartDimensions);

const tradeConfig = @json($tradeConfig);
const tradeForm = document.getElementById('tradeForm');
const tradeModal = document.getElementById('tradeConfirmModal');
const countdownModal = document.getElementById('tradeCountdownModal');
const quoteCurrency = tradeConfig.quoteCurrency;
const tradePageUrl = tradeConfig.tradePageUrl;

let countdownTimer = null;
let currentTradeId = null;
let settlingTrade = false;

function getSelectedPeriod() {
    const checked = document.querySelector('input[name="trade_period_id"]:checked');
    if (!checked) return null;
    const label = checked.closest('.period-btn');
    return {
        id: checked.value,
        duration: label ? label.dataset.duration : checked.dataset.duration || '',
        payout: label ? label.dataset.payout : '',
    };
}

function getSelectedPair() {
    const select = document.getElementById('marketSelect');
    if (!select) return '—';
    const opt = select.options[select.selectedIndex];
    return (opt && opt.dataset.pair) ? opt.dataset.pair : (opt ? opt.textContent.trim() : '—');
}

function openTradeConfirm(dir) {
    const amountInput = tradeForm ? tradeForm.querySelector('input[name="amount"]') : null;
    const amount = amountInput ? amountInput.value.trim() : '';

    if (!amount || Number(amount) < 1) {
        if (amountInput) {
            amountInput.focus();
            if (amountInput.reportValidity) amountInput.reportValidity();
        }
        return;
    }

    const period = getSelectedPeriod();
    if (!period) {
        alert('Please select a trade period.');
        return;
    }

    document.getElementById('direction').value = dir;
    document.getElementById('confirmPair').textContent = getSelectedPair();
    document.getElementById('confirmDirection').textContent = dir.toUpperCase();
    document.getElementById('confirmAmount').textContent =
        Number(amount).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' ' + quoteCurrency;
    document.getElementById('confirmTimer').textContent = period.duration + ' sec';
    document.getElementById('confirmPayout').textContent = period.payout + '%';

    if (tradeModal) tradeModal.showModal();
}

function formatCountdown(seconds) {
    const s = Math.max(0, Math.ceil(seconds));
    const m = Math.floor(s / 60);
    const r = s % 60;
    return String(m).padStart(2, '0') + ':' + String(r).padStart(2, '0');
}

function formatMoney(n) {
    return Number(n).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

function setTradingLocked(locked) {
    ['sellBtn', 'buyBtn', 'marketSelect'].forEach(function(id) {
        const el = document.getElementById(id);
        if (el) el.disabled = locked;
    });
    tradeForm.querySelectorAll('input[name="trade_period_id"], input[name="amount"]').forEach(function(el) {
        el.disabled = locked;
    });
}

function readCsrfToken() {
    const meta = document.querySelector('meta[name="csrf-token"]');
    return (meta && meta.getAttribute('content')) || tradeConfig.csrf || '';
}

async function apiPost(url, body) {
    const res = await fetch(url, {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': readCsrfToken(),
            'X-Requested-With': 'XMLHttpRequest',
        },
        body: JSON.stringify(body || {}),
    });
    const data = await res.json().catch(function() { return {}; });
    if (!res.ok) {
        let msg = data.message || data.error;
        if (!msg && data.errors) {
            const first = Object.values(data.errors)[0];
            msg = Array.isArray(first) ? first[0] : first;
        }
        throw new Error(msg || ('Request failed (HTTP ' + res.status + ')'));
    }
    return data;
}

function formatProfitAmount(n) {
    return Number(n).toLocaleString(undefined, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 8,
    });
}

function showCountdownModal(trade) {
    currentTradeId = trade.trade_id;
    const dir = trade.direction.toLowerCase();
    const dirEl = document.getElementById('countdownDirection');
    const statusEl = document.getElementById('countdownStatus');
    document.getElementById('countdownPair').textContent = trade.pair;
    dirEl.textContent = dir.toUpperCase();
    dirEl.className = 'trade-direction-badge trade-direction-badge--' + dir;
    document.getElementById('countdownAmount').textContent =
        'Amount: ' + formatMoney(trade.amount) + ' ' + quoteCurrency;
    document.getElementById('countdownTimerLabel').textContent =
        'Timer: ' + trade.duration_seconds + ' sec';
    if (statusEl) {
        statusEl.textContent = 'Running...';
        statusEl.classList.remove('trade-countdown-status--won', 'trade-countdown-status--lost');
    }
    hideTradeToast();
    setTradingLocked(true);
    if (countdownModal) countdownModal.showModal();
    startCountdown(trade.ends_at, trade.duration_seconds);
}

function hideTradeToast() {
    const toast = document.getElementById('tradeOutcomeToast');
    if (toast) toast.hidden = true;
}

function showTradeToast(won, message) {
    const toast = document.getElementById('tradeOutcomeToast');
    const icon = document.getElementById('tradeToastIcon');
    const text = document.getElementById('tradeToastText');
    if (!toast || !text) return;
    toast.classList.toggle('trade-outcome-toast--won', won);
    toast.classList.toggle('trade-outcome-toast--lost', !won);
    if (icon) {
        icon.textContent = won ? '🏆' : '✕';
        icon.classList.toggle('trade-outcome-toast__icon--dismiss', !won);
    }
    text.textContent = message;
    toast.hidden = false;
}

document.getElementById('tradeToastClose').addEventListener('click', hideTradeToast);
document.getElementById('tradeToastIcon').addEventListener('click', function() {
    if (this.classList.contains('trade-outcome-toast__icon--dismiss')) {
        hideTradeToast();
    }
});

function showTradeOutcome(result) {
    const won = result.outcome === 'won';
    const currency = result.quote_currency || quoteCurrency;
    const statusEl = document.getElementById('countdownStatus');

    if (statusEl && countdownModal && countdownModal.open) {
        statusEl.textContent = won ? 'WIN' : 'LOSS';
        statusEl.classList.toggle('trade-countdown-status--won', won);
        statusEl.classList.toggle('trade-countdown-status--lost', !won);
    }

    const profit = Number(result.profit);
    const toastMessage = won
        ? 'You WON +' + formatProfitAmount(profit) + ' ' + currency
        : 'You LOST -' + formatProfitAmount(Math.abs(profit)) + ' ' + currency;

    showTradeToast(won, toastMessage);
}

function startCountdown(endsAtIso, durationSeconds) {
    const timeEl = document.getElementById('countdownTime');
    const endMs = endsAtIso ? new Date(endsAtIso).getTime() : Date.now() + durationSeconds * 1000;

    function tick() {
        const leftSec = Math.max(0, (endMs - Date.now()) / 1000);
        if (timeEl) timeEl.textContent = formatCountdown(leftSec);
        if (leftSec <= 0) {
            clearInterval(countdownTimer);
            settleCurrentTrade();
        }
    }
    tick();
    clearInterval(countdownTimer);
    countdownTimer = setInterval(tick, 250);
}

async function settleCurrentTrade() {
    if (!currentTradeId || settlingTrade) return;
    settlingTrade = true;
    try {
        const result = await apiPost(tradeConfig.settleUrl, { trade_id: Number(currentTradeId) });
        showTradeOutcome(result);
        currentTradeId = null;
        setTradingLocked(false);
        setTimeout(function() {
            if (countdownModal && countdownModal.open) countdownModal.close();
        }, 3500);
    } catch (e) {
        alert(e.message || 'Could not settle trade');
        setTradingLocked(false);
    } finally {
        settlingTrade = false;
    }
}

async function submitTrade() {
    if (tradeModal) tradeModal.close();
    const period = getSelectedPeriod();
    const amountInput = tradeForm.querySelector('input[name="amount"]');
    const marketId = document.getElementById('marketSelect').value;

    try {
        const trade = await apiPost(tradeConfig.storeUrl, {
            market_id: marketId,
            trade_period_id: period.id,
            direction: document.getElementById('direction').value,
            amount: amountInput.value,
        });
        showCountdownModal(trade);
    } catch (e) {
        alert(e.message || 'Could not place trade');
    }
}

document.getElementById('buyBtn').addEventListener('click', function() { openTradeConfirm('buy'); });
document.getElementById('sellBtn').addEventListener('click', function() { openTradeConfirm('sell'); });
document.getElementById('tradeConfirmSubmit').addEventListener('click', submitTrade);
document.getElementById('tradeConfirmClose').addEventListener('click', function() {
    if (tradeModal) tradeModal.close();
});
if (tradeModal) {
    tradeModal.addEventListener('click', function(e) {
        if (e.target === tradeModal) tradeModal.close();
    });
}

document.getElementById('marketSelect').addEventListener('change', function() {
    if (currentTradeId) return;
    window.location = tradePageUrl + '?market=' + encodeURIComponent(this.value);
});

document.getElementById('countdownClose').addEventListener('click', function() {
    if (countdownModal) countdownModal.close();
});

if (tradeConfig.activeTrade) {
    showCountdownModal(tradeConfig.activeTrade);
}

document.querySelector('script[src*="tv.js"]').addEventListener('load', function() {
    initTradingView(tvBaseConfig.symbol);
});
if (typeof TradingView !== 'undefined') {
    initTradingView(tvBaseConfig.symbol);
}
</script>
@endpush