@extends('layouts.app')
@section('title', $asset->symbol)
@section('content')
<x-page-header title="{{ $asset->name }}" />

<div x-data="tradeWidget({
        symbol: '{{ $asset->symbol }}',
        priceNgn: {{ $priceNgn }},
        ngnAvailable: {{ $ngnAvailable }},
        cryptoAvailable: {{ $cryptoAvailable }},
        feePercent: {{ config('nairacrypto.fees.trading_fee_percent') }},
        quoteUrl: '{{ route('trade.quote', $asset->symbol) }}',
        buyUrl: '{{ route('trade.buy') }}',
        sellUrl: '{{ route('trade.sell') }}',
        csrf: '{{ csrf_token() }}',
    })" class="px-5">

    @if ($errors->any())
        <div class="mb-4 text-sm text-red-400 bg-red-500/10 border border-red-500/30 rounded-xl px-4 py-3">{{ $errors->first() }}</div>
    @endif

    {{-- Tabs --}}
    <div class="flex bg-white/5 rounded-full p-1 mb-6">
        <button @click="side = 'buy'" :class="side === 'buy' ? 'bg-emerald-500 text-white' : 'text-neutral-400'" class="flex-1 py-2.5 rounded-full text-sm font-bold transition">Buy</button>
        <button @click="side = 'sell'" :class="side === 'sell' ? 'bg-red-500 text-white' : 'text-neutral-400'" class="flex-1 py-2.5 rounded-full text-sm font-bold transition">Sell</button>
    </div>

    <div class="text-center mb-6">
        <p class="text-xs text-neutral-500" x-text="side === 'buy' ? 'AMOUNT TO SPEND' : 'AMOUNT TO SELL'"></p>
        <div class="flex items-center justify-center gap-2 mt-2">
            <span class="text-3xl font-extrabold text-neutral-500" x-text="side === 'buy' ? '₦' : ''"></span>
            <input type="number" step="any" x-model="inputAmount" @input.debounce.500ms="fetchQuote()"
                   class="bg-transparent text-4xl font-extrabold text-center w-48 focus:outline-none" placeholder="0">
            <span class="text-3xl font-extrabold text-neutral-500" x-text="side === 'sell' ? symbol : ''"></span>
        </div>
        <p class="text-xs text-neutral-500 mt-2" x-show="side === 'buy'">Balance: ₦<span x-text="formatNumber(ngnAvailable)"></span></p>
        <p class="text-xs text-neutral-500 mt-2" x-show="side === 'sell'">Balance: <span x-text="cryptoAvailable"></span> <span x-text="symbol"></span></p>
    </div>

    <div class="rounded-2xl bg-white/5 p-4 space-y-3 text-sm">
        <div class="flex justify-between">
            <span class="text-neutral-400" x-text="symbol + ' Price'"></span>
            <span class="font-medium">₦<span x-text="formatNumber(quotedPrice || priceNgn)"></span></span>
        </div>
        <div class="flex justify-between">
            <span class="text-neutral-400">Platform Fee</span>
            <span class="font-medium">₦<span x-text="formatNumber(fee)"></span></span>
        </div>
        <div class="h-px bg-white/10"></div>
        <div class="flex justify-between">
            <span class="text-neutral-400" x-text="side === 'buy' ? 'You Receive' : 'You Receive'"></span>
            <span class="font-bold text-lg" x-text="side === 'buy' ? (youReceive + ' ' + symbol) : ('₦' + formatNumber(youReceive))"></span>
        </div>
    </div>

    <template x-if="quoteExpiresIn !== null">
        <p class="text-center text-xs text-neutral-500 mt-3">Price valid for <span x-text="quoteExpiresIn"></span>s — refreshes automatically</p>
    </template>

    <button @click="submit()" :disabled="!quoteId || !inputAmount"
            :class="side === 'buy' ? 'bg-emerald-500' : 'bg-red-500'"
            class="w-full text-white font-bold py-4 rounded-full mt-6 disabled:opacity-40 disabled:cursor-not-allowed">
        <span x-text="side === 'buy' ? 'BUY ' + symbol : 'SELL ' + symbol"></span>
    </button>

    {{-- Hidden forms submitted programmatically after confirm --}}
    <form x-ref="buyForm" method="POST" :action="buyUrl" class="hidden">
        <input type="hidden" name="_token" :value="csrf">
        <input type="hidden" name="symbol" :value="symbol">
        <input type="hidden" name="amount_ngn" :value="inputAmount">
        <input type="hidden" name="quote_id" :value="quoteId">
    </form>
    <form x-ref="sellForm" method="POST" :action="sellUrl" class="hidden">
        <input type="hidden" name="_token" :value="csrf">
        <input type="hidden" name="symbol" :value="symbol">
        <input type="hidden" name="amount_crypto" :value="inputAmount">
        <input type="hidden" name="quote_id" :value="quoteId">
    </form>
</div>

<script>
function tradeWidget(config) {
    return {
        ...config,
        side: 'buy',
        inputAmount: '',
        quoteId: null,
        quotedPrice: null,
        quoteExpiresIn: null,
        timer: null,

        formatNumber(n) {
            return Number(n || 0).toLocaleString('en-NG', { minimumFractionDigits: 2, maximumFractionDigits: 8 });
        },

        get fee() {
            if (this.side === 'buy') {
                return (parseFloat(this.inputAmount) || 0) * (this.feePercent / 100);
            }
            const gross = (parseFloat(this.inputAmount) || 0) * (this.quotedPrice || this.priceNgn);
            return gross * (this.feePercent / 100);
        },

        get youReceive() {
            const amount = parseFloat(this.inputAmount) || 0;
            const price = this.quotedPrice || this.priceNgn;
            if (this.side === 'buy') {
                const net = amount - this.fee;
                return price > 0 ? (net / price).toFixed(8) : '0';
            }
            const gross = amount * price;
            return (gross - this.fee).toFixed(2);
        },

        async fetchQuote() {
            if (!this.inputAmount || parseFloat(this.inputAmount) <= 0) {
                this.quoteId = null;
                return;
            }

            const res = await fetch(`${this.quoteUrl}?side=${this.side}`, {
                headers: { 'X-CSRF-TOKEN': this.csrf, 'Accept': 'application/json' },
            });
            const data = await res.json();
            this.quoteId = data.quote_id;
            this.quotedPrice = parseFloat(data.final_price_ngn);
            this.quoteExpiresIn = data.expires_in;

            clearInterval(this.timer);
            this.timer = setInterval(() => {
                this.quoteExpiresIn--;
                if (this.quoteExpiresIn <= 0) {
                    clearInterval(this.timer);
                    this.fetchQuote();
                }
            }, 1000);
        },

        submit() {
            if (!this.quoteId) return;
            if (!confirm(`Confirm ${this.side} of ${this.inputAmount} ${this.side === 'buy' ? 'NGN' : this.symbol}?`)) return;
            this.$refs[this.side === 'buy' ? 'buyForm' : 'sellForm'].submit();
        },
    };
}
</script>
@endsection