{% extends "base.html" %}

{% block title %}Address {{ address.address }} - LocalScan{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="flex items-center space-x-2 text-sm text-slate-500">
        <a href="/" class="hover:text-blue-600">Home</a>
        <span>/</span>
        <span class="text-slate-900 font-medium">Address</span>
    </div>

    <!-- Overview Section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
                <h1 class="text-lg font-bold text-slate-900">Address Details</h1>
                {% if address.is_contract %}
                <span class="bg-blue-50 text-blue-700 px-2 py-1 rounded text-[10px] uppercase font-bold border border-blue-100">Contract</span>
                {% endif %}
            </div>
            
            <div class="p-6 space-y-4">
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 border-b border-slate-50 pb-4">
                    <div class="text-xs font-medium text-slate-500 uppercase tracking-wider">Address:</div>
                    <div class="sm:col-span-2 text-sm text-slate-900 font-mono break-all">{{ address.address }}</div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 border-b border-slate-50 pb-4">
                    <div class="text-xs font-medium text-slate-500 uppercase tracking-wider">ETH Balance:</div>
                    <div class="sm:col-span-2 text-sm text-slate-900 font-bold">{{ address.balance_cached | from_wei }} ETH</div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 italic">
                    <div class="text-xs font-medium text-slate-500 uppercase tracking-wider italic">First Seen:</div>
                    <div class="sm:col-span-2 text-sm text-slate-900 italic">Block #{{ address.first_seen_block }}</div>
                </div>
            </div>
        </div>

        <!-- Token Balances -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
             <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
                <h2 class="text-lg font-bold text-slate-900">Token Balances</h2>
            </div>
            <div class="p-6">
                {% if token_balances %}
                <div class="space-y-4">
                    {% for tb in token_balances %}
                    <div class="flex items-center justify-between p-3 bg-slate-50 rounded-lg border border-slate-100">
                        <div class="flex items-center space-x-3">
                            <div class="w-8 h-8 bg-white border border-slate-200 rounded-full flex items-center justify-center font-bold text-[10px] text-blue-600">
                                {{ tb.symbol[:2] }}
                            </div>
                            <div>
                                <a href="/token/{{ tb.token_address }}" class="text-sm font-semibold text-slate-900 hover:text-blue-600 transition-colors">{{ tb.symbol }}</a>
                                <p class="text-[10px] text-slate-500 font-mono">{{ tb.token_address[:16] }}...</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-sm font-bold text-slate-900">{{ tb.formatted_balance }}</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-8">
                    <div class="text-slate-300 mb-2">
                        <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
                    </div>
                    <p class="text-slate-500 text-sm">No token balances found for this address.</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Transaction History Card with Tabs -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="border-b border-slate-100 bg-slate-50/50 px-4">
            <nav class="flex space-x-6" aria-label="Tabs">
                <button 
                    onclick="switchTab('native')" 
                    id="tab-native"
                    class="tab-btn active border-b-2 border-blue-600 py-4 px-1 text-sm font-bold text-blue-600 outline-none"
                >
                    Native Transactions
                </button>
                <button 
                    onclick="switchTab('tokens')" 
                    id="tab-tokens"
                    class="tab-btn border-b-2 border-transparent py-4 px-1 text-sm font-medium text-slate-500 hover:text-slate-700 hover:border-slate-300 outline-none"
                >
                    Token Transfers (ERC-20)
                </button>
            </nav>
        </div>

        <div class="overflow-x-auto min-h-[300px]">
            <!-- Native Transactions Tab -->
            <div id="content-native" class="tab-content block">
                {% if transactions %}
                <table class="w-full text-left">
                    <thead class="bg-slate-50 border-b border-slate-100 text-slate-500 text-xs">
                        <tr>
                            <th class="px-6 py-3 font-medium">Txn Hash</th>
                            <th class="px-6 py-3 font-medium">Block</th>
                            <th class="px-6 py-3 font-medium">From/To</th>
                            <th class="px-6 py-3 font-medium">Value</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        {% for tx in transactions %}
                        <tr class="hover:bg-slate-50 transition-colors">
                            <td class="px-6 py-4">
                                <a href="/tx/0x{{ tx.hash }}" class="text-blue-600 font-medium hover:text-blue-700 block truncate w-32 md:w-48">0x{{ tx.hash }}</a>
                            </td>
                            <td class="px-6 py-4">
                                 <a href="/block/{{ tx.block_number }}" class="text-blue-500 text-sm">#{{ tx.block_number }}</a>
                            </td>
                            <td class="px-6 py-4">
                                {% if tx.from_address == address.address %}
                                <div class="flex items-center space-x-2">
                                    <span class="bg-orange-50 text-orange-700 px-1.5 py-0.5 rounded text-[10px] font-bold">OUT</span>
                                    <a href="/address/{% if tx.to_address %}{{ tx.to_address }}{% else %}{{ tx.contract_address }}{% endif %}"
                                        class="text-blue-500 text-xs truncate block w-24">
                                            {% if tx.to_address %}
                                                {{ tx.to_address[:12] }}...
                                            {% else %}
                                                Contract Creation
                                            {% endif %}
                                    </a>
                                {% else %}
                                <div class="flex items-center space-x-2">
                                    <span class="bg-green-50 text-green-700 px-1.5 py-0.5 rounded text-[10px] font-bold">IN</span>
                                    <a href="/address/{{ tx.from_address }}" class="text-blue-500 text-xs truncate block w-24">{{ tx.from_address[:12] }}...</a>
                                </div>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 font-semibold text-sm">{{ tx.value | from_wei }} ETH</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <div class="text-center py-20">
                    <p class="text-slate-500 text-sm">No native transactions found.</p>
                </div>
                {% endif %}
            </div>

            <!-- Token Transfers Tab -->
            <div id="content-tokens" class="tab-content hidden">
                {% if token_transfers %}
                <table class="w-full text-left">
                    <thead class="bg-slate-50 border-b border-slate-100 text-slate-500 text-xs">
                        <tr>
                            <th class="px-6 py-3 font-medium">Txn Hash</th>
                            <th class="px-6 py-3 font-medium">Block</th>
                            <th class="px-6 py-3 font-medium">From/To</th>
                            <th class="px-6 py-3 font-medium">Amount</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        {% for tt in token_transfers %}
                        <tr class="hover:bg-slate-50 transition-colors">
                            <td class="px-6 py-4">
                                <a href="/tx/0x{{ tt.tx_hash }}" class="text-blue-600 font-medium hover:text-blue-700 block truncate w-32 md:w-48">0x{{ tt.tx_hash }}</a>
                            </td>
                            <td class="px-6 py-4">
                                 <a href="/block/{{ tt.block_number }}" class="text-blue-500 text-sm">#{{ tt.block_number }}</a>
                            </td>
                            <td class="px-6 py-4">
                                {% if tt.from == address.address %}
                                <div class="flex items-center space-x-2">
                                    <span class="bg-orange-50 text-orange-700 px-1.5 py-0.5 rounded text-[10px] font-bold">OUT</span>
                                    <a href="/address/{{ tt.to }}" class="text-blue-500 text-xs truncate block w-24">{{ tt.to[:12] }}...</a>
                                </div>
                                {% else %}
                                <div class="flex items-center space-x-2">
                                    <span class="bg-green-50 text-green-700 px-1.5 py-0.5 rounded text-[10px] font-bold">IN</span>
                                    <a href="/address/{{ tt.from }}" class="text-blue-500 text-xs truncate block w-24">{{ tt.from[:12] }}...</a>
                                </div>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 font-semibold text-sm">
                                {{ tt.amount }} 
                                <a href="/token/{{ tt.token_address }}" class="text-blue-500 hover:underline hover:text-blue-700">{{ tt.token_symbol }}</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <div class="text-center py-20">
                    <p class="text-slate-500 text-sm">No token transfers found.</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
function switchTab(tab) {
    // Hide all contents
    document.querySelectorAll('.tab-content').forEach(c => c.classList.replace('block', 'hidden'));
    // Show selected content
    document.getElementById('content-' + tab).classList.replace('hidden', 'block');
    
    // Reset all buttons
    document.querySelectorAll('.tab-btn').forEach(b => {
        b.classList.remove('active', 'border-blue-600', 'text-blue-600', 'font-bold');
        b.classList.add('border-transparent', 'text-slate-500', 'font-medium');
    });
    
    // Set active button
    const activeBtn = document.getElementById('tab-' + tab);
    activeBtn.classList.add('active', 'border-blue-600', 'text-blue-600', 'font-bold');
    activeBtn.classList.remove('border-transparent', 'text-slate-500', 'font-medium');
}
</script>
{% endblock %}