<x-app-layout>
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
        <div class="flex items-center">
            <a href="{{ route('accounts.index') }}" class="text-slate-400 hover:text-teal-600 mr-3 sm:mr-4 transition">
                <i class="fas fa-arrow-left text-lg sm:text-xl"></i>
            </a>
            <div class="flex items-center">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl flex items-center justify-center mr-3 flex-shrink-0"
                     style="background-color: {{ $account->color ?? '#14b8a6' }}15; color: {{ $account->color ?? '#14b8a6' }};">
                    <i class="fas fa-{{ $account->icon ?? 'wallet' }} text-lg sm:text-xl"></i>
                </div>
                <div class="min-w-0">
                    <h2 class="text-lg sm:text-2xl font-bold text-slate-800 truncate">{{ $account->name }}</h2>
                    <p class="text-xs sm:text-sm text-slate-500">{{ $account->type_label ?? ucfirst($account->type) }}</p>
                </div>
            </div>
        </div>
        <div class="mt-3 sm:mt-0 flex items-center space-x-2 sm:space-x-3">
            <a href="{{ route('transactions.create', ['account_id' => $account->id]) }}"
               class="inline-flex items-center px-3 sm:px-4 py-2 bg-gradient-to-r from-teal-500 to-emerald-500 text-white text-sm font-medium rounded-xl transition shadow-lg shadow-teal-500/30">
                <i class="fas fa-plus mr-2"></i>
                <span class="hidden sm:inline">Tambah</span> Transaksi
            </a>
            <a href="{{ route('accounts.edit', $account) }}"
               class="inline-flex items-center px-3 sm:px-4 py-2 border border-slate-200 text-slate-700 text-sm font-medium rounded-xl hover:bg-slate-50 transition">
                <i class="fas fa-edit sm:mr-2"></i>
                <span class="hidden sm:inline">Edit</span>
            </a>
        </div>
    </div>

    <!-- Balance Card -->
    <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-sm mb-6">
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6">
            <div class="text-center col-span-2 sm:col-span-1">
                <p class="text-xs sm:text-sm text-slate-500">Saldo Saat Ini</p>
                <p class="text-xl sm:text-3xl font-bold {{ ($account->current_balance ?? 0) >= 0 ? 'text-slate-800' : 'text-rose-600' }}">
                    Rp {{ number_format(abs($account->current_balance ?? 0), 0, ',', '.') }}
                </p>
            </div>
            <div class="text-center">
                <p class="text-xs sm:text-sm text-slate-500">Pemasukan Bulan Ini</p>
                <p class="text-base sm:text-xl font-semibold text-emerald-600">
                    +Rp {{ number_format($monthlyIncome ?? 0, 0, ',', '.') }}
                </p>
            </div>
            <div class="text-center">
                <p class="text-xs sm:text-sm text-slate-500">Pengeluaran Bulan Ini</p>
                <p class="text-base sm:text-xl font-semibold text-rose-600">
                    -Rp {{ number_format($monthlyExpense ?? 0, 0, ',', '.') }}
                </p>
            </div>
            <div class="text-center col-span-2 sm:col-span-1">
                <p class="text-xs sm:text-sm text-slate-500">Perubahan Bersih</p>
                <p class="text-base sm:text-xl font-semibold {{ (($monthlyIncome ?? 0) - ($monthlyExpense ?? 0)) >= 0 ? 'text-emerald-600' : 'text-rose-600' }}">
                    {{ (($monthlyIncome ?? 0) - ($monthlyExpense ?? 0)) >= 0 ? '+' : '-' }}Rp {{ number_format(abs(($monthlyIncome ?? 0) - ($monthlyExpense ?? 0)), 0, ',', '.') }}
                </p>
            </div>
        </div>
    </div>

    <!-- Transactions -->
    <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl shadow-sm">
        <div class="p-4 sm:p-6 border-b border-slate-100">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                <h3 class="text-base sm:text-lg font-semibold text-slate-800">Transaksi</h3>

                <!-- Filters -->
                <form action="{{ route('accounts.show', $account) }}" method="GET" class="mt-3 sm:mt-0 flex flex-wrap items-center gap-2 sm:space-x-3">
                    <select name="type" class="text-sm bg-slate-50 border-slate-200 text-slate-800 rounded-lg focus:border-teal-500 focus:ring-teal-500">
                        <option value="">Semua Tipe</option>
                        <option value="income" {{ request('type') === 'income' ? 'selected' : '' }}>Pemasukan</option>
                        <option value="expense" {{ request('type') === 'expense' ? 'selected' : '' }}>Pengeluaran</option>
                    </select>
                    <input type="month" name="month" value="{{ request('month', now()->format('Y-m')) }}"
                           class="text-sm bg-slate-50 border-slate-200 text-slate-800 rounded-lg focus:border-teal-500 focus:ring-teal-500">
                    <button type="submit" class="px-3 py-2 bg-slate-100 hover:bg-slate-200 rounded-lg text-sm transition">
                        <i class="fas fa-filter"></i>
                    </button>
                </form>
            </div>
        </div>

        <div class="divide-y divide-slate-100">
            @forelse($transactions ?? [] as $transaction)
                <a href="{{ route('transactions.show', $transaction) }}" class="block px-6 py-4 hover:bg-slate-50 transition">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-xl flex items-center justify-center"
                                 style="background-color: {{ $transaction->category?->color ?? '#14b8a6' }}15; color: {{ $transaction->category?->color ?? '#14b8a6' }};">
                                <i class="fas fa-{{ $transaction->category?->icon ?? 'tag' }}"></i>
                            </div>
                            <div class="ml-3">
                                <p class="font-medium text-slate-800">{{ $transaction->category?->name ?? 'Tanpa Kategori' }}</p>
                                <p class="text-sm text-slate-400">
                                    {{ $transaction->date?->format('d M Y') }}
                                    @if($transaction->time)
                                        <span class="text-slate-300">{{ \Carbon\Carbon::parse($transaction->time)->format('H:i:s') }}</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                        <span class="font-semibold {{ $transaction->type === 'income' ? 'text-emerald-600' : 'text-rose-600' }}">
                            {{ $transaction->type === 'income' ? '+' : '-' }}Rp {{ number_format($transaction->amount, 0, ',', '.') }}
                        </span>
                    </div>
                </a>
            @empty
                <div class="px-6 py-12 text-center text-slate-400">
                    <i class="fas fa-receipt text-4xl mb-4"></i>
                    <p>Belum ada transaksi</p>
                </div>
            @endforelse
        </div>

        @if(isset($transactions) && method_exists($transactions, 'links'))
            <div class="p-4 border-t border-slate-100">
                {{ $transactions->withQueryString()->links() }}
            </div>
        @endif
    </div>
</x-app-layout>
