@extends('layouts.app')

@section('title', 'Create Token')

@section('content')
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10" x-data="tokenCreate()">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-white">Create Token</h1>
        <p class="mt-2 text-gray-400">Launch a new token. It stays <span class="text-yellow-400">pending</span> until the deployment transaction is confirmed on-chain.</p>
    </div>

    <div class="grid lg:grid-cols-5 gap-8">
        {{-- Form --}}
        <div class="lg:col-span-3">
            <form method="POST" action="{{ route('tokens.store') }}" enctype="multipart/form-data" class="space-y-6"
                  @submit="preparing = true">
                @csrf

                <div class="rounded-2xl border border-gray-800 bg-gray-900/50 p-6 space-y-5">
                    <h2 class="text-lg font-semibold text-white">Basic info</h2>

                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm text-gray-300 mb-1.5">Token Name *</label>
                            <input type="text" name="name" x-model="name" value="{{ old('name') }}" required maxlength="64"
                                   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">
                            @error('name') <p class="mt-1 text-sm text-red-400">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm text-gray-300 mb-1.5">Symbol *</label>
                            <input type="text" name="symbol" x-model="symbol" value="{{ old('symbol') }}" required maxlength="10"
                                   class="w-full rounded-lg bg-gray-950 border border-gray-700 px-4 py-2.5 text-white uppercase focus:ring-2 focus:ring-brand-500 focus:outline-none">
                            @error('symbol') <p class="mt-1 text-sm text-red-400">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-1.5">Description</label>
                        <textarea name="description" rows="3" maxlength="2000"
                                  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">{{ old('description') }}</textarea>
                        @error('description') <p class="mt-1 text-sm text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm text-gray-300 mb-1.5">Logo * (PNG/JPG/WEBP, max 2 MB)</label>
                            <input type="file" name="logo" accept="image/png,image/jpeg,image/webp,image/gif" required
                                   @change="previewLogo($event)"
                                   class="w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-brand-600 file:text-white">
                            @error('logo') <p class="mt-1 text-sm text-red-400">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm text-gray-300 mb-1.5">Banner (optional)</label>
                            <input type="file" name="banner" accept="image/png,image/jpeg,image/webp"
                                   class="w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-gray-700 file:text-white">
                            @error('banner') <p class="mt-1 text-sm text-red-400">{{ $message }}</p> @enderror
                        </div>
                    </div>
                </div>

                <div class="rounded-2xl border border-gray-800 bg-gray-900/50 p-6 space-y-5">
                    <h2 class="text-lg font-semibold text-white">Supply & chain</h2>
                    <div class="grid sm:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm text-gray-300 mb-1.5">Total Supply *</label>
                            <input type="number" name="total_supply" value="{{ old('total_supply', '1000000000') }}" required min="1" step="1"
                                   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">
                            @error('total_supply') <p class="mt-1 text-sm text-red-400">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm text-gray-300 mb-1.5">Decimals *</label>
                            <input type="number" name="decimals" value="{{ old('decimals', 18) }}" required min="0" max="18"
                                   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">
                            @error('decimals') <p class="mt-1 text-sm text-red-400">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm text-gray-300 mb-1.5">Blockchain *</label>
                            <select name="blockchain_id" required
                                    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">
                                @foreach($blockchains as $chain)
                                    <option value="{{ $chain->id }}" @selected(old('blockchain_id') == $chain->id)>
                                        {{ $chain->name }} ({{ $chain->native_currency }})
                                    </option>
                                @endforeach
                            </select>
                            @error('blockchain_id') <p class="mt-1 text-sm text-red-400">{{ $message }}</p> @enderror
                        </div>
                    </div>
                </div>

                <div class="rounded-2xl border border-gray-800 bg-gray-900/50 p-6 space-y-5">
                    <h2 class="text-lg font-semibold text-white">Social links</h2>
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm text-gray-300 mb-1.5">Website</label>
                            <input type="url" name="website" value="{{ old('website') }}" placeholder="https://"
                                   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">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-300 mb-1.5">X / Twitter</label>
                            <input type="text" name="twitter" value="{{ old('twitter') }}" placeholder="@handle or URL"
                                   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">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-300 mb-1.5">Telegram</label>
                            <input type="text" name="telegram" value="{{ old('telegram') }}" placeholder="t.me/…"
                                   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">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-300 mb-1.5">Discord</label>
                            <input type="text" name="discord" value="{{ old('discord') }}" placeholder="discord.gg/…"
                                   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">
                        </div>
                    </div>
                </div>

                {{-- Fee + wallet signature fields --}}
                <div class="rounded-2xl border border-yellow-800/50 bg-yellow-900/10 p-6 space-y-4">
                    <h2 class="text-lg font-semibold text-yellow-200">Creation fee & wallet</h2>
                    <div class="text-sm text-gray-300 space-y-1">
                        @foreach($fee['breakdown'] as $row)
                            <div class="flex justify-between">
                                <span>{{ $row['label'] }}</span>
                                <span class="font-mono">{{ $row['amount'] }} {{ $row['currency'] }}</span>
                            </div>
                        @endforeach
                    </div>
                    <p class="text-xs text-gray-500">You must connect a wallet and sign a message to prove ownership. No private keys are ever requested.</p>

                    <input type="hidden" name="wallet_address" x-model="walletAddress">
                    <input type="hidden" name="signature" x-model="signature">
                    <input type="hidden" name="nonce" x-model="nonce">
                    <input type="hidden" name="payment_tx_hash" x-model="paymentTxHash">

                    <button type="button" @click="connectAndSign"
                            class="w-full py-2.5 rounded-lg border border-brand-600 text-brand-300 hover:bg-brand-600/20 transition text-sm font-medium"
                            :disabled="signing">
                        <span x-show="!walletAddress">Connect Wallet & Sign</span>
                        <span x-show="walletAddress && !signature">Sign message…</span>
                        <span x-show="signature" class="text-green-400">✓ Wallet verified</span>
                    </button>
                    <p x-show="walletAddress" class="text-xs text-gray-500 font-mono" x-text="walletAddress"></p>
                    @error('signature') <p class="text-sm text-red-400">{{ $message }}</p> @enderror
                    @error('wallet_address') <p class="text-sm text-red-400">{{ $message }}</p> @enderror
                </div>

                <div class="flex items-start gap-3 text-sm text-gray-400">
                    <input type="checkbox" required id="risk" class="mt-1 rounded border-gray-600 bg-gray-900 text-brand-600">
                    <label for="risk">I understand that tokens can lose value, that LaunchMint does not guarantee safety or profit, and that the token remains pending until the deployment transaction is confirmed on-chain.</label>
                </div>

                <button type="submit"
                        class="w-full py-3 rounded-xl bg-gradient-to-r from-brand-600 to-pink-600 text-white font-semibold hover:opacity-90 transition disabled:opacity-50"
                        :disabled="!signature || preparing">
                    <span x-show="!preparing">Create Token</span>
                    <span x-show="preparing">Submitting…</span>
                </button>
            </form>
        </div>

        {{-- Live preview --}}
        <div class="lg:col-span-2">
            <div class="sticky top-24 rounded-2xl border border-gray-800 bg-gray-900/50 p-6">
                <h2 class="text-sm font-medium text-gray-400 mb-4">Live preview</h2>
                <div class="flex items-center gap-4">
                    <div class="w-16 h-16 rounded-full bg-gradient-to-br from-brand-500 to-pink-500 overflow-hidden flex-shrink-0">
                        <img x-show="logoPreview" :src="logoPreview" class="w-full h-full object-cover" alt="">
                    </div>
                    <div>
                        <div class="text-xl font-bold text-white" x-text="name || 'Token Name'">Token Name</div>
                        <div class="text-sm text-gray-400 uppercase" x-text="symbol || 'SYMBOL'">SYMBOL</div>
                    </div>
                </div>
                <div class="mt-6 space-y-2 text-sm text-gray-400">
                    <div class="flex justify-between"><span>Status</span><span class="text-yellow-400">Pending</span></div>
                    <div class="flex justify-between"><span>Network</span><span>Selected chain</span></div>
                </div>
                <p class="mt-6 text-xs text-gray-600">Preview only. Final metadata is taken from the form after submission.</p>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function tokenCreate() {
    return {
        name: '{{ old('name') }}',
        symbol: '{{ old('symbol') }}',
        logoPreview: null,
        walletAddress: '',
        signature: '',
        nonce: '',
        paymentTxHash: '',
        signing: false,
        preparing: false,
        previewLogo(e) {
            const file = e.target.files[0];
            if (file) this.logoPreview = URL.createObjectURL(file);
        },
        async connectAndSign() {
            if (typeof window.ethereum === 'undefined') {
                alert('Install a Web3 wallet (MetaMask, Rabby, etc.)');
                return;
            }
            this.signing = true;
            try {
                const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
                this.walletAddress = accounts[0];
                const csrf = document.querySelector('meta[name="csrf-token"]').content;

                const nonceRes = await fetch('/wallet/nonce', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                    body: JSON.stringify({ address: this.walletAddress })
                });
                const data = await nonceRes.json();
                this.nonce = data.nonce;

                this.signature = await window.ethereum.request({
                    method: 'personal_sign',
                    params: [data.message, this.walletAddress]
                });
            } catch (e) {
                console.error(e);
                alert(e.message || 'Signing failed');
            } finally {
                this.signing = false;
            }
        }
    }
}
</script>
@endpush