@extends('layouts.app')

@section('title', $token->name . ' (' . $token->symbol . ')')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    {{-- Header --}}
    <div class="flex flex-col lg:flex-row lg:items-start gap-6 mb-8">
        <div class="flex items-center gap-4 flex-1">
            <img src="{{ $token->logo_url }}" alt="" class="w-16 h-16 rounded-full object-cover bg-gray-800"
                 onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22><rect fill=%22%236d28d9%22 width=%2264%22 height=%2264%22 rx=%2232%22/></svg>'">
            <div>
                <div class="flex items-center gap-2 flex-wrap">
                    <h1 class="text-2xl sm:text-3xl font-bold text-white">{{ $token->name }}</h1>
                    <span class="text-gray-400 text-lg">{{ $token->symbol }}</span>
                    @if($token->is_verified)
                        <span class="px-2 py-0.5 rounded text-xs bg-green-900/50 text-green-300 border border-green-700">Verified</span>
                    @endif
                    <span class="px-2 py-0.5 rounded text-xs border
                        @if($token->status==='launched') border-green-700 text-green-300 bg-green-900/30
                        @elseif($token->status==='pending') border-yellow-700 text-yellow-300 bg-yellow-900/30
                        @else border-gray-600 text-gray-400 @endif capitalize">
                        {{ $token->status }}
                    </span>
                </div>
                <div class="mt-1 flex flex-wrap items-center gap-3 text-sm text-gray-400">
                    @if($token->blockchain)
                        <span>{{ $token->blockchain->name }}</span>
                    @endif
                    @if($token->contract_address)
                        <span class="font-mono text-xs">{{ Str::limit($token->contract_address, 12, '…') }}</span>
                        <button type="button" onclick="navigator.clipboard.writeText('{{ $token->contract_address }}')"
                                class="text-brand-400 hover:text-brand-300 text-xs">Copy</button>
                        @if($token->explorer_url)
                            <a href="{{ $token->explorer_url }}" target="_blank" rel="noopener" class="text-brand-400 hover:text-brand-300 text-xs">Explorer ↗</a>
                        @endif
                    @endif
                </div>
            </div>
        </div>

        <div class="flex gap-2">
            <button type="button" class="px-4 py-2 rounded-lg border border-gray-700 text-sm text-gray-300 hover:bg-gray-800">Watchlist</button>
            <button type="button" onclick="navigator.share?.({title:'{{ $token->name }}',url:location.href}) || navigator.clipboard.writeText(location.href)"
                    class="px-4 py-2 rounded-lg border border-gray-700 text-sm text-gray-300 hover:bg-gray-800">Share</button>
        </div>
    </div>

    <div class="grid lg:grid-cols-3 gap-6">
        {{-- Main column --}}
        <div class="lg:col-span-2 space-y-6">
            {{-- Stats --}}
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                <div class="rounded-xl border border-gray-800 bg-gray-900/50 p-4">
                    <div class="text-xs text-gray-500">Price</div>
                    <div class="text-lg font-semibold text-white font-mono">${{ number_format((float)$token->current_price, 8) }}</div>
                </div>
                <div class="rounded-xl border border-gray-800 bg-gray-900/50 p-4">
                    <div class="text-xs text-gray-500">Market Cap</div>
                    <div class="text-lg font-semibold text-white font-mono">${{ number_format((float)$token->market_cap, 0) }}</div>
                </div>
                <div class="rounded-xl border border-gray-800 bg-gray-900/50 p-4">
                    <div class="text-xs text-gray-500">Liquidity</div>
                    <div class="text-lg font-semibold text-white font-mono">${{ number_format((float)$token->liquidity, 0) }}</div>
                </div>
                <div class="rounded-xl border border-gray-800 bg-gray-900/50 p-4">
                    <div class="text-xs text-gray-500">24h Volume</div>
                    <div class="text-lg font-semibold text-white font-mono">${{ number_format((float)$token->volume_24h, 0) }}</div>
                </div>
            </div>

            {{-- Chart placeholder --}}
            <div class="rounded-2xl border border-gray-800 bg-gray-900/50 p-4 h-72 flex items-center justify-center text-gray-500">
                Price chart (Stage 8 – chart library + /api/tokens/{id}/chart)
            </div>

            {{-- Description & socials --}}
            <div class="rounded-2xl border border-gray-800 bg-gray-900/50 p-6">
                <h2 class="text-lg font-semibold text-white mb-3">About</h2>
                <p class="text-gray-300 text-sm whitespace-pre-line">{{ $token->description ?: 'No description provided.' }}</p>
                @if($token->socials)
                    <div class="mt-4 flex flex-wrap gap-3 text-sm">
                        @if($token->socials->website)
                            <a href="{{ $token->socials->website }}" target="_blank" rel="noopener" class="text-brand-400 hover:underline">Website</a>
                        @endif
                        @if($token->socials->twitter)
                            <a href="https://x.com/{{ ltrim($token->socials->twitter, '@') }}" target="_blank" rel="noopener" class="text-brand-400 hover:underline">X/Twitter</a>
                        @endif
                        @if($token->socials->telegram)
                            <a href="https://t.me/{{ ltrim($token->socials->telegram, '@') }}" target="_blank" rel="noopener" class="text-brand-400 hover:underline">Telegram</a>
                        @endif
                        @if($token->socials->discord)
                            <a href="{{ Str::startsWith($token->socials->discord, 'http') ? $token->socials->discord : 'https://discord.gg/'.$token->socials->discord }}" target="_blank" rel="noopener" class="text-brand-400 hover:underline">Discord</a>
                        @endif
                    </div>
                @endif
            </div>

            {{-- Recent transactions --}}
            <div class="rounded-2xl border border-gray-800 bg-gray-900/50 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-800">
                    <h2 class="text-lg font-semibold text-white">Recent transactions</h2>
                </div>
                @if($recentTx->isEmpty())
                    <p class="px-6 py-8 text-sm text-gray-500">No transactions yet.</p>
                @else
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead class="text-gray-500 text-left">
                                <tr>
                                    <th class="px-6 py-3 font-medium">Type</th>
                                    <th class="px-6 py-3 font-medium">Amount</th>
                                    <th class="px-6 py-3 font-medium">Status</th>
                                    <th class="px-6 py-3 font-medium">Time</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-800">
                                @foreach($recentTx as $tx)
                                    <tr>
                                        <td class="px-6 py-3 capitalize text-white">{{ $tx->type }}</td>
                                        <td class="px-6 py-3 font-mono text-gray-300">{{ number_format((float)$tx->amount, 4) }}</td>
                                        <td class="px-6 py-3">
                                            <span class="@if($tx->status==='confirmed') text-green-400 @elseif($tx->status==='failed') text-red-400 @else text-yellow-400 @endif">
                                                {{ $tx->status }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-3 text-gray-500">{{ $tx->created_at?->diffForHumans() }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>

        {{-- Side panel --}}
        <div class="space-y-6">
            @if($token->status === 'launched')
                <x-buy-sell-panel :token="$token" />
            @else
                <div class="rounded-2xl border border-gray-800 bg-gray-900/50 p-6 text-sm text-gray-500">
                    Trading available after the token is launched and confirmed on-chain.
                </div>
            @endif

            {{-- Report --}}
            @auth
            <div class="rounded-2xl border border-gray-800 bg-gray-900/50 p-6">
                <h2 class="text-sm font-semibold text-white mb-3">Report token</h2>
                <form method="POST" action="{{ route('tokens.report', $token) }}" class="space-y-3">
                    @csrf
                    <select name="reason" required class="w-full rounded-lg bg-gray-950 border border-gray-700 px-3 py-2 text-sm text-white">
                        <option value="">Select reason…</option>
                        <option value="scam">Scam</option>
                        <option value="impersonation">Impersonation</option>
                        <option value="malicious_links">Malicious links</option>
                        <option value="fraud">Fraud</option>
                        <option value="spam">Spam</option>
                        <option value="other">Other</option>
                    </select>
                    <textarea name="description" rows="2" placeholder="Details (optional)" class="w-full rounded-lg bg-gray-950 border border-gray-700 px-3 py-2 text-sm text-white"></textarea>
                    <button type="submit" class="w-full py-2 rounded-lg border border-red-800 text-red-300 text-sm hover:bg-red-950/40">Submit report</button>
                </form>
            </div>
            @endauth

            {{-- Info --}}
            <div class="rounded-2xl border border-gray-800 bg-gray-900/50 p-6 text-sm space-y-3">
                <h2 class="text-lg font-semibold text-white">Token info</h2>
                <div class="flex justify-between text-gray-400">
                    <span>Creator</span>
                    <span class="text-white">{{ $token->user?->name ?? '—' }}</span>
                </div>
                <div class="flex justify-between text-gray-400">
                    <span>Holders</span>
                    <span class="text-white">{{ number_format($token->holders_count) }}</span>
                </div>
                <div class="flex justify-between text-gray-400">
                    <span>Total supply</span>
                    <span class="text-white font-mono">{{ number_format((float)$token->total_supply, 0) }}</span>
                </div>
                <div class="flex justify-between text-gray-400">
                    <span>Decimals</span>
                    <span class="text-white">{{ $token->decimals }}</span>
                </div>
                <div class="flex justify-between text-gray-400">
                    <span>Launched</span>
                    <span class="text-white">{{ $token->launched_at?->toDateString() ?? '—' }}</span>
                </div>
                @if($token->deployment_tx_hash)
                    <div class="pt-2 border-t border-gray-800">
                        <div class="text-gray-500 text-xs mb-1">Deploy tx</div>
                        <div class="font-mono text-xs text-gray-300 break-all">{{ $token->deployment_tx_hash }}</div>
                    </div>
                @endif
            </div>

            {{-- Risk --}}
            <div class="rounded-2xl border border-red-900/40 bg-red-950/20 p-5 text-sm text-red-200/90">
                <h3 class="font-semibold text-red-300 mb-2">Risk warning</h3>
                <p>This token is not verified as safe. Smart contracts can contain bugs or malicious logic. Liquidity can be removed. Never invest more than you can afford to lose. LaunchMint does not guarantee any token’s safety or value.</p>
            </div>
        </div>
    </div>
</div>
@endsection