@props(['token'])

<div x-data="tradePanel({{ $token->id }}, '{{ $token->symbol }}', '{{ $token->blockchain?->native_currency ?? 'ETH' }}')"
     class="rounded-2xl border border-gray-800 bg-gray-900/50 p-6">
    <div class="flex gap-2 mb-4">
        <button type="button" @click="side = 'buy'"
                :class="side === 'buy' ? 'bg-green-600 text-white' : 'bg-gray-800 text-gray-400'"
                class="flex-1 py-2 rounded-lg text-sm font-medium transition">Buy</button>
        <button type="button" @click="side = 'sell'"
                :class="side === 'sell' ? 'bg-red-600 text-white' : 'bg-gray-800 text-gray-400'"
                class="flex-1 py-2 rounded-lg text-sm font-medium transition">Sell</button>
    </div>

    <div class="space-y-3">
        <div>
            <label class="block text-xs text-gray-500 mb-1" x-text="side === 'buy' ? 'You pay (' + nativeSymbol + ')' : 'You sell (' + tokenSymbol + ')'"></label>
            <input type="number" step="any" min="0" x-model="amount" @input.debounce.400ms="fetchQuote"
                   class="w-full rounded-lg bg-gray-950 border border-gray-700 px-4 py-2.5 text-white focus:ring-2 focus:ring-brand-500 focus:outline-none"
                   placeholder="0.0">
        </div>

        <div class="rounded-lg bg-gray-950/80 border border-gray-800 p-3 text-sm space-y-1.5" x-show="quote">
            <div class="flex justify-between text-gray-400">
                <span>You receive</span>
                <span class="text-white font-mono" x-text="(quote?.output_amount || '0') + ' ' + (quote?.output_symbol || '')"></span>
            </div>
            <div class="flex justify-between text-gray-400">
                <span>Price</span>
                <span class="font-mono" x-text="quote?.price || '—'"></span>
            </div>
            <div class="flex justify-between text-gray-400">
                <span>Platform fee</span>
                <span class="font-mono" x-text="(quote?.platform_fee || '0') + ' (' + (quote?.platform_fee_pct || 0) + '%)'"></span>
            </div>
            <div class="flex justify-between text-gray-400">
                <span>Price impact</span>
                <span :class="(quote?.price_impact_pct || 0) > 5 ? 'text-yellow-400' : ''"
                      x-text="(quote?.price_impact_pct || 0).toFixed(2) + '%'"></span>
            </div>
            <p x-show="quote?.warning" class="text-yellow-400 text-xs pt-1" x-text="quote?.warning"></p>
        </div>

        <p class="text-xs text-gray-500">Network fees are paid on-chain. Status is only marked confirmed after blockchain confirmation.</p>

        <button type="button" @click="submitTrade"
                :disabled="!amount || loading || !quote"
                class="w-full py-2.5 rounded-lg font-medium transition disabled:opacity-50"
                :class="side === 'buy' ? 'bg-green-600 hover:bg-green-500 text-white' : 'bg-red-600 hover:bg-red-500 text-white'">
            <span x-show="!loading" x-text="side === 'buy' ? 'Buy ' + tokenSymbol : 'Sell ' + tokenSymbol"></span>
            <span x-show="loading">Submitting…</span>
        </button>

        <p x-show="message" class="text-xs" :class="success ? 'text-green-400' : 'text-red-400'" x-text="message"></p>
    </div>
</div>

@once
@push('scripts')
<script>
function tradePanel(tokenId, tokenSymbol, nativeSymbol) {
    return {
        tokenId, tokenSymbol, nativeSymbol,
        side: 'buy',
        amount: '',
        quote: null,
        loading: false,
        message: '',
        success: false,
        async fetchQuote() {
            if (!this.amount || parseFloat(this.amount) <= 0) { this.quote = null; return; }
            try {
                const res = await fetch(`/api/v1/tokens/${this.tokenId}/quote?side=${this.side}&amount=${this.amount}`, {
                    headers: { 'Accept': 'application/json' }
                });
                // fallback path if quote route is under trades
                if (!res.ok) {
                    const res2 = await fetch(`/api/v1/trades/quote`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
                        body: JSON.stringify({ token_id: this.tokenId, side: this.side, amount: this.amount })
                    });
                    this.quote = await res2.json();
                } else {
                    this.quote = await res.json();
                }
            } catch (e) {
                this.quote = null;
            }
        },
        async submitTrade() {
            if (!window.ethereum) { alert('Connect a wallet first'); return; }
            this.loading = true; this.message = '';
            try {
                const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
                const wallet = accounts[0];
                const csrf = document.querySelector('meta[name="csrf-token"]').content;
                const endpoint = this.side === 'buy' ? '/api/v1/trades/buy' : '/api/v1/trades/sell';
                const res = await fetch(endpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrf,
                    },
                    body: JSON.stringify({
                        token_id: this.tokenId,
                        amount: this.amount,
                        wallet_address: wallet,
                        // tx_hash: filled after user signs the actual swap tx in a full DEX integration
                    })
                });
                const data = await res.json();
                if (res.ok) {
                    this.success = true;
                    this.message = data.message || 'Trade submitted – awaiting on-chain confirmation.';
                } else {
                    this.success = false;
                    this.message = data.message || Object.values(data.errors || {}).flat().join(' ') || 'Trade failed';
                }
            } catch (e) {
                this.success = false;
                this.message = e.message || 'Error';
            } finally {
                this.loading = false;
            }
        }
    }
}
</script>
@endpush
@endonce