@extends('layouts.app')

@section('title', 'Explore Tokens')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
        <h1 class="text-3xl font-bold text-white">Explore</h1>
        <a href="{{ route('tokens.create') }}" class="inline-flex items-center px-4 py-2 rounded-lg bg-brand-600 hover:bg-brand-500 text-white text-sm font-medium">
            Create Token
        </a>
    </div>

    {{-- Filters --}}
    <form method="GET" action="{{ route('explore') }}" class="mb-8 flex flex-wrap gap-3 items-end">
        <div class="flex-1 min-w-[200px]">
            <input type="search" name="q" value="{{ $filters['q'] }}" placeholder="Search name, symbol, address…"
                   class="w-full rounded-lg bg-gray-900 border border-gray-700 px-4 py-2.5 text-white text-sm focus:ring-2 focus:ring-brand-500 focus:outline-none">
        </div>
        <select name="chain" class="rounded-lg bg-gray-900 border border-gray-700 px-3 py-2.5 text-white text-sm">
            <option value="">All chains</option>
            @foreach($blockchains as $chain)
                <option value="{{ $chain->slug }}" @selected($filters['chain'] === $chain->slug)>{{ $chain->name }}</option>
            @endforeach
        </select>
        <select name="sort" class="rounded-lg bg-gray-900 border border-gray-700 px-3 py-2.5 text-white text-sm">
            <option value="newest" @selected($filters['sort'] === 'newest')>Newest</option>
            <option value="market_cap" @selected($filters['sort'] === 'market_cap')>Market Cap</option>
            <option value="volume" @selected($filters['sort'] === 'volume')>Volume</option>
            <option value="liquidity" @selected($filters['sort'] === 'liquidity')>Liquidity</option>
        </select>
        <label class="flex items-center gap-2 text-sm text-gray-300 px-2">
            <input type="checkbox" name="verified" value="1" @checked($filters['verified']) class="rounded border-gray-600 bg-gray-900 text-brand-600">
            Verified
        </label>
        <label class="flex items-center gap-2 text-sm text-gray-300 px-2">
            <input type="checkbox" name="recent" value="1" @checked($filters['recent']) class="rounded border-gray-600 bg-gray-900 text-brand-600">
            Last 7 days
        </label>
        <button type="submit" class="px-4 py-2.5 rounded-lg bg-gray-800 hover:bg-gray-700 text-white text-sm">Filter</button>
    </form>

    {{-- Grid --}}
    @if($tokens->isEmpty())
        <div class="rounded-2xl border border-gray-800 bg-gray-900/40 py-20 text-center text-gray-500">
            No tokens found. <a href="{{ route('tokens.create') }}" class="text-brand-400 hover:underline">Create the first one</a>.
        </div>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
            @foreach($tokens as $token)
                <a href="{{ route('tokens.show', $token->slug) }}"
                   class="rounded-2xl border border-gray-800 bg-gray-900/50 p-4 hover:border-gray-600 transition group">
                    <div class="flex items-center gap-3">
                        <img src="{{ $token->logo_url }}" alt="" class="w-11 h-11 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 40 40%22><rect fill=%22%236d28d9%22 width=%2240%22 height=%2240%22 rx=%2220%22/></svg>'">
                        <div class="min-w-0">
                            <div class="font-medium text-white truncate group-hover:text-brand-300">{{ $token->name }}</div>
                            <div class="text-xs text-gray-500 flex items-center gap-1.5">
                                <span>{{ $token->symbol }}</span>
                                @if($token->blockchain)
                                    <span class="px-1.5 py-0.5 rounded bg-gray-800 text-gray-400">{{ $token->blockchain->name }}</span>
                                @endif
                                @if($token->is_verified)
                                    <span class="text-green-400" title="Verified">✓</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="mt-4 grid grid-cols-2 gap-2 text-sm">
                        <div>
                            <div class="text-gray-500 text-xs">Price</div>
                            <div class="text-white font-mono">${{ number_format((float)$token->current_price, 6) }}</div>
                        </div>
                        <div>
                            <div class="text-gray-500 text-xs">MCap</div>
                            <div class="text-white font-mono">${{ number_format((float)$token->market_cap, 0) }}</div>
                        </div>
                        <div>
                            <div class="text-gray-500 text-xs">24h Vol</div>
                            <div class="text-white font-mono">${{ number_format((float)$token->volume_24h, 0) }}</div>
                        </div>
                        <div>
                            <div class="text-gray-500 text-xs">Status</div>
                            <div class="@if($token->status==='launched') text-green-400 @elseif($token->status==='pending') text-yellow-400 @else text-gray-400 @endif capitalize">
                                {{ $token->status }}
                            </div>
                        </div>
                    </div>
                    <div class="mt-3 text-xs text-gray-600">
                        {{ $token->created_at?->diffForHumans() }}
                    </div>
                </a>
            @endforeach
        </div>

        <div class="mt-10">
            {{ $tokens->links() }}
        </div>
    @endif
</div>
@endsection