@extends('layouts.admin')

@section('title', 'Users')
@section('page-title', 'Users')

@section('content')
<div class="space-y-6">
    <section class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <form method="GET" class="grid gap-4 lg:grid-cols-[2fr_1fr_1fr_auto]">
            <div>
                <label class="mb-2 block text-sm font-semibold text-slate-700">Search</label>
                <input type="text" name="q" value="{{ request('q') }}" placeholder="Name, email, or phone" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
            </div>
            <div>
                <label class="mb-2 block text-sm font-semibold text-slate-700">Plan</label>
                <select name="plan" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    <option value="">All plans</option>
                    @foreach(['free', 'starter', 'growth', 'pro'] as $plan)
                        <option value="{{ $plan }}" @selected(request('plan') === $plan)>{{ ucfirst($plan) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="mb-2 block text-sm font-semibold text-slate-700">Status</label>
                <select name="status" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    <option value="">All users</option>
                    <option value="active" @selected(request('status') === 'active')>Active</option>
                    <option value="banned" @selected(request('status') === 'banned')>Banned</option>
                </select>
            </div>
            <div class="flex items-end gap-3">
                <button type="submit" class="inline-flex rounded-2xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-700">Filter</button>
                <a href="{{ route('admin.users.index') }}" class="inline-flex rounded-2xl border border-slate-300 px-5 py-3 text-sm font-semibold text-slate-700 transition hover:border-slate-400">Reset</a>
            </div>
        </form>
    </section>

    <section class="rounded-3xl border border-slate-200 bg-white shadow-sm">
        <div class="overflow-x-auto">
            <table class="min-w-full text-left text-sm">
                <thead class="border-b border-slate-200 bg-slate-50 text-slate-500">
                    <tr>
                        <th class="px-6 py-4 font-semibold">User</th>
                        <th class="px-6 py-4 font-semibold">Business</th>
                        <th class="px-6 py-4 font-semibold">Plan</th>
                        <th class="px-6 py-4 font-semibold">Status</th>
                        <th class="px-6 py-4 font-semibold">Storage</th>
                        <th class="px-6 py-4 font-semibold">Last Seen</th>
                        <th class="px-6 py-4 font-semibold text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($users as $user)
                        <tr class="table-row-hover">
                            <td class="px-6 py-5 align-top">
                                <div class="font-semibold text-slate-900">{{ $user->name }}</div>
                                <div class="text-xs text-slate-500">{{ $user->email }}</div>
                                @if($user->phone)
                                    <div class="text-xs text-slate-400">{{ $user->phone }}</div>
                                @endif
                            </td>
                            <td class="px-6 py-5 text-slate-600">{{ $user->business_name ?: 'Not set' }}</td>
                            <td class="px-6 py-5"><span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">{{ ucfirst($user->currentPlan()) }}</span></td>
                            <td class="px-6 py-5">
                                <span class="inline-flex rounded-full px-3 py-1 text-xs font-semibold {{ $user->is_banned ? 'badge-banned' : 'badge-active' }}">{{ $user->is_banned ? 'Banned' : 'Active' }}</span>
                            </td>
                            <td class="px-6 py-5 text-slate-600">{{ number_format(($user->storage_used_bytes ?? 0) / 1048576, 2) }} MB</td>
                            <td class="px-6 py-5 text-slate-600">{{ $user->last_seen_at?->diffForHumans() ?? 'Never' }}</td>
                            <td class="px-6 py-5">
                                <div class="flex items-center justify-end gap-2">
                                    <a href="{{ route('admin.users.show', $user) }}" class="rounded-xl border border-slate-300 px-3 py-2 text-xs font-semibold text-slate-700 transition hover:border-brand-600 hover:text-brand-600">Open</a>
                                    @if($user->is_banned)
                                        <form method="POST" action="{{ route('admin.users.unban', $user) }}">
                                            @csrf
                                            <button type="submit" class="rounded-xl bg-accent-600 px-3 py-2 text-xs font-semibold text-white transition hover:bg-accent-700">Unban</button>
                                        </form>
                                    @else
                                        <form method="POST" action="{{ route('admin.users.ban', $user) }}">
                                            @csrf
                                            <button type="submit" class="rounded-xl bg-slate-900 px-3 py-2 text-xs font-semibold text-white transition hover:bg-slate-700">Ban</button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="px-6 py-16 text-center text-sm text-slate-500">No users matched the current filters.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="border-t border-slate-200 px-6 py-4">{{ $users->links() }}</div>
    </section>
</div>
@endsection