@extends('layouts.admin')

@section('title', $user->name)
@section('page-title', 'User Profile')

@section('content')
<div class="space-y-6">
    <section class="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
            <div class="flex flex-wrap items-start justify-between gap-4">
                <div class="flex items-center gap-4">
                    <div class="flex h-16 w-16 items-center justify-center rounded-3xl brand-gradient text-2xl font-black text-white">
                        {{ strtoupper(substr($user->name, 0, 1)) }}
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-slate-900">{{ $user->name }}</h2>
                        <p class="text-sm text-slate-500">{{ $user->email }}</p>
                        <div class="mt-2 flex flex-wrap gap-2">
                            <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">{{ ucfirst($user->currentPlan()) }}</span>
                            <span class="rounded-full px-3 py-1 text-xs font-semibold {{ $user->is_banned ? 'badge-banned' : 'badge-active' }}">{{ $user->is_banned ? 'Banned' : 'Active' }}</span>
                        </div>
                    </div>
                </div>
                <form method="POST" action="{{ route('admin.users.destroy', $user) }}" onsubmit="return confirm('Delete this user account?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="rounded-2xl border border-red-200 px-4 py-3 text-sm font-semibold text-red-600 transition hover:bg-red-50">Delete User</button>
                </form>
            </div>

            <div class="mt-8 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                <div class="rounded-2xl bg-slate-50 p-4">
                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Business</p>
                    <p class="mt-2 font-semibold text-slate-900">{{ $user->business_name ?: 'Not set' }}</p>
                </div>
                <div class="rounded-2xl bg-slate-50 p-4">
                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Phone</p>
                    <p class="mt-2 font-semibold text-slate-900">{{ $user->phone ?: 'Not set' }}</p>
                </div>
                <div class="rounded-2xl bg-slate-50 p-4">
                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Storage</p>
                    <p class="mt-2 font-semibold text-slate-900">{{ number_format(($user->storage_used_bytes ?? 0) / 1048576, 2) }} MB</p>
                </div>
                <div class="rounded-2xl bg-slate-50 p-4">
                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Country</p>
                    <p class="mt-2 font-semibold text-slate-900">{{ $user->country_code ?: 'Not set' }}</p>
                </div>
                <div class="rounded-2xl bg-slate-50 p-4">
                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Currency</p>
                    <p class="mt-2 font-semibold text-slate-900">{{ $user->currency_code ?: 'Not set' }}</p>
                </div>
                <div class="rounded-2xl bg-slate-50 p-4">
                    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Last Seen</p>
                    <p class="mt-2 font-semibold text-slate-900">{{ $user->last_seen_at?->diffForHumans() ?? 'Never' }}</p>
                </div>
            </div>
        </div>

        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
            <h3 class="text-lg font-bold text-slate-900">Change Plan</h3>
            <p class="mt-1 text-sm text-slate-500">Override plan and optional expiry from the admin panel.</p>
            <form method="POST" action="{{ route('admin.users.set-plan', $user) }}" class="mt-6 space-y-4">
                @csrf
                <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">
                        @foreach(['starter', 'growth', 'pro'] as $plan)
                            <option value="{{ $plan }}" @selected($user->currentPlan() === $plan)>{{ ucfirst($plan) }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Expiry</label>
                    <input type="datetime-local" name="expires_at" value="{{ $user->plan_expires_at?->format('Y-m-d\TH:i') }}" 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>
                <button type="submit" class="inline-flex w-full items-center justify-center rounded-2xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-700">Save Plan</button>
            </form>

            <div class="mt-6 grid gap-3 sm:grid-cols-2">
                @if($user->is_banned)
                    <form method="POST" action="{{ route('admin.users.unban', $user) }}">
                        @csrf
                        <button type="submit" class="inline-flex w-full items-center justify-center rounded-2xl bg-accent-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-accent-700">Unban User</button>
                    </form>
                @else
                    <form method="POST" action="{{ route('admin.users.ban', $user) }}">
                        @csrf
                        <button type="submit" class="inline-flex w-full items-center justify-center rounded-2xl bg-slate-900 px-4 py-3 text-sm font-semibold text-white transition hover:bg-slate-700">Ban User</button>
                    </form>
                @endif
                <a href="{{ route('admin.users.index') }}" class="inline-flex w-full items-center justify-center rounded-2xl border border-slate-300 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:border-slate-400">Back to Users</a>
            </div>
        </div>
    </section>

    {{-- Sync Activity --}}
    <section class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <div class="flex items-center justify-between gap-4">
            <div>
                <h3 class="text-lg font-bold text-slate-900">Sync Activity</h3>
                <p class="mt-1 text-sm text-slate-500">Sync history for this user.</p>
            </div>
            <a href="{{ route('admin.sync-logs.show', $user->id) }}"
               class="inline-flex items-center gap-1.5 rounded-xl bg-slate-100 px-4 py-2 text-sm font-semibold text-slate-700 transition hover:bg-brand-600 hover:text-white">
                View Logs
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
            </a>
        </div>
        <div class="mt-5 grid grid-cols-2 gap-4 sm:grid-cols-4">
            <div class="rounded-2xl bg-brand-50 p-4 text-center">
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-brand-600">Syncs Today</p>
                <p class="mt-2 text-3xl font-black text-brand-700">{{ number_format($syncStats['today']) }}</p>
            </div>
            <div class="rounded-2xl bg-slate-50 p-4 text-center">
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Total Syncs</p>
                <p class="mt-2 text-3xl font-black text-slate-900">{{ number_format($syncStats['total']) }}</p>
            </div>
            <div class="rounded-2xl bg-red-50 p-4 text-center">
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-red-500">Failed</p>
                <p class="mt-2 text-3xl font-black text-red-600">{{ number_format($syncStats['failed']) }}</p>
            </div>
            <div class="rounded-2xl bg-slate-50 p-4 text-center">
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Last Sync</p>
                <p class="mt-2 text-sm font-bold text-slate-700 leading-snug">
                    {{ $syncStats['last_sync'] ? \Carbon\Carbon::parse($syncStats['last_sync'])->diffForHumans() : 'Never' }}
                </p>
            </div>
        </div>
    </section>

    {{-- Module Data Counts --}}
    <section class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <h3 class="text-lg font-bold text-slate-900">Module Data Counts</h3>
        <p class="mt-1 text-sm text-slate-500">Records synced from this user's device(s).</p>
        <div class="mt-5 grid grid-cols-3 gap-3 sm:grid-cols-4 xl:grid-cols-9">
            @foreach($dataCounts as $module => $count)
                <div class="rounded-2xl bg-slate-50 p-4 text-center">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">{{ ucfirst($module) }}</p>
                    <p class="mt-2 text-2xl font-black text-slate-900">{{ number_format($count) }}</p>
                </div>
            @endforeach
        </div>
    </section>

    {{-- Synced Media --}}
    @if($userImages->isNotEmpty() || $userPdfs->isNotEmpty())
    <section class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <h3 class="text-lg font-bold text-slate-900">Synced Media</h3>

        @if($userImages->isNotEmpty())
        <div class="mt-5">
            <p class="mb-3 text-sm font-semibold text-slate-600">Images ({{ $userImages->count() }})</p>
            <div class="grid grid-cols-4 gap-3 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10">
                @foreach($userImages as $img)
                <a href="{{ asset('storage/' . $img->file_path) }}" target="_blank" class="group relative block overflow-hidden rounded-xl border border-slate-200 bg-slate-100" title="{{ $img->table_ref }} · {{ $img->record_id }}">
                    <img src="{{ asset('storage/' . $img->file_path) }}" alt="" class="h-16 w-full object-cover transition group-hover:scale-105" loading="lazy">
                    <span class="absolute bottom-0 left-0 right-0 truncate bg-black/50 px-1 py-0.5 text-[9px] text-white">{{ $img->table_ref }}</span>
                </a>
                @endforeach
            </div>
        </div>
        @endif

        @if($userPdfs->isNotEmpty())
        <div class="mt-6">
            <p class="mb-3 text-sm font-semibold text-slate-600">PDFs ({{ $userPdfs->count() }})</p>
            <div class="space-y-2">
                @foreach($userPdfs as $pdf)
                <div class="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 px-4 py-3">
                    <div class="flex items-center gap-3 min-w-0">
                        <svg class="h-5 w-5 shrink-0 text-red-500" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm1 2l4 4h-4V4zM9 13h6v1.5H9V13zm0 3h6v1.5H9V16zm0-6h3v1.5H9V10z"/></svg>
                        <div class="min-w-0">
                            <p class="truncate text-sm font-medium text-slate-800">{{ basename($pdf->file_path) }}</p>
                            <p class="text-xs text-slate-400">{{ $pdf->table_ref }} · {{ number_format($pdf->size_bytes / 1024, 1) }} KB · {{ $pdf->created_at->format('d M Y') }}</p>
                        </div>
                    </div>
                    <a href="{{ asset('storage/' . $pdf->file_path) }}" target="_blank" class="shrink-0 rounded-full bg-slate-100 px-3 py-1.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-200">Download</a>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </section>
    @endif

    <section class="grid gap-6 xl:grid-cols-2">
        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
            <h3 class="text-lg font-bold text-slate-900">Recent Subscriptions</h3>
            <div class="mt-5 space-y-3">
                @forelse($user->subscriptions as $subscription)
                    <div class="rounded-2xl border border-slate-200 p-4">
                        <div class="flex items-center justify-between gap-4">
                            <div>
                                <p class="font-semibold text-slate-900">{{ ucfirst($subscription->plan) }} · {{ ucfirst($subscription->source) }}</p>
                                <p class="text-sm text-slate-500">{{ ucfirst($subscription->period ?: 'custom') }} · {{ $subscription->starts_at?->format('d M Y') ?: 'Unknown start' }}</p>
                            </div>
                            @if($subscription->source === 'crypto' && ($subscription->payment_status ?? '') === 'pending')
                                <span class="rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-800">🕐 Pending</span>
                            @elseif($subscription->source === 'crypto' && ($subscription->payment_status ?? '') === 'rejected')
                                <span class="rounded-full bg-red-100 px-3 py-1 text-xs font-semibold text-red-700">Rejected</span>
                            @elseif(($subscription->payment_status ?? '') === 'cancelled')
                                <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-500">Cancelled</span>
                            @elseif($subscription->isExpired() || !$subscription->is_active)
                                <span class="rounded-full px-3 py-1 text-xs font-semibold badge-expired">Expired</span>
                            @else
                                <span class="rounded-full px-3 py-1 text-xs font-semibold badge-active">Active</span>
                            @endif
                        </div>
                        <div class="mt-3 text-sm text-slate-600">
                            Amount: {{ strtoupper($subscription->currency ?: 'USD') }} {{ number_format($subscription->amount_paid ?? 0, 2) }}
                            @if($subscription->expires_at)
                                · Expires {{ $subscription->expires_at->format('d M Y') }}
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-4 py-10 text-center text-sm text-slate-500">No subscriptions found.</div>
                @endforelse
            </div>
        </div>

        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
            <h3 class="text-lg font-bold text-slate-900">Registered Devices</h3>
            <div class="mt-5 space-y-3">
                @forelse($user->devices as $device)
                    <div class="rounded-2xl border border-slate-200 p-4">
                        <div class="flex items-center justify-between gap-4">
                            <div>
                                <p class="font-semibold text-slate-900">{{ strtoupper($device->platform ?: 'N/A') }} · {{ $device->model ?: 'Unknown device' }}</p>
                                <p class="text-sm text-slate-500">{{ $device->device_id }}</p>
                            </div>
                            <span class="rounded-full px-3 py-1 text-xs font-semibold {{ $device->is_revoked ? 'badge-banned' : 'badge-active' }}">{{ $device->is_revoked ? 'Revoked' : 'Active' }}</span>
                        </div>
                        <div class="mt-3 text-sm text-slate-600">Last sync: {{ $device->last_sync_at?->diffForHumans() ?? 'Never' }}</div>
                    </div>
                @empty
                    <div class="rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-4 py-10 text-center text-sm text-slate-500">No devices found.</div>
                @endforelse
            </div>
        </div>
    </section>

    {{-- Staff Members --}}
    <section class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <div class="flex items-center justify-between gap-4">
            <div>
                <h3 class="text-lg font-bold text-slate-900">Staff Members</h3>
                <p class="mt-1 text-sm text-slate-500">Manage staff for this POS. PINs are set on-device for security.</p>
            </div>
            <span class="rounded-full bg-slate-100 px-3 py-1 text-sm font-semibold text-slate-700">{{ $user->staffUsers->count() }}</span>
        </div>

        @if (session('success'))
            <div class="mt-4 rounded-2xl bg-green-50 px-4 py-3 text-sm font-medium text-green-700">{{ session('success') }}</div>
        @endif

        <div class="mt-5 space-y-3">
            @forelse($user->staffUsers as $staff)
                <div class="rounded-2xl border border-slate-200 p-4">
                    <div class="flex flex-wrap items-center justify-between gap-3">
                        <div>
                            <p class="font-semibold text-slate-900">{{ $staff->name }}</p>
                            <p class="text-sm text-slate-500">{{ ucfirst($staff->role) }}</p>
                        </div>
                        <div class="flex flex-wrap items-center gap-2">
                            <span class="rounded-full px-3 py-1 text-xs font-semibold {{ $staff->is_active ? 'badge-active' : 'badge-banned' }}">
                                {{ $staff->is_active ? 'Active' : 'Inactive' }}
                            </span>
                            <form method="POST" action="{{ route('admin.users.staff.update', [$user, $staff]) }}"
                                  class="flex items-center gap-2">
                                @csrf
                                @method('PUT')
                                <select name="role" class="rounded-xl border border-slate-300 px-3 py-1.5 text-xs font-semibold text-slate-700 outline-none transition focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                    @foreach(['cashier','manager','admin'] as $r)
                                        <option value="{{ $r }}" @selected($staff->role === $r)>{{ ucfirst($r) }}</option>
                                    @endforeach
                                </select>
                                <select name="is_active" class="rounded-xl border border-slate-300 px-3 py-1.5 text-xs font-semibold text-slate-700 outline-none transition focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                    <option value="1" @selected($staff->is_active)>Active</option>
                                    <option value="0" @selected(!$staff->is_active)>Inactive</option>
                                </select>
                                <button type="submit"
                                        class="rounded-xl bg-brand-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-brand-700">Save</button>
                            </form>
                            <form method="POST" action="{{ route('admin.users.staff.destroy', [$user, $staff]) }}"
                                  onsubmit="return confirm('Remove {{ addslashes($staff->name) }}?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                        class="rounded-xl border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-600 transition hover:bg-red-50">Remove</button>
                            </form>
                        </div>
                    </div>
                </div>
            @empty
                <div class="rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-4 py-10 text-center text-sm text-slate-500">No staff members yet. Add one below.</div>
            @endforelse
        </div>

        <div class="mt-6 border-t border-slate-100 pt-6">
            <h4 class="text-sm font-bold text-slate-700">Add Staff Member</h4>
            <form method="POST" action="{{ route('admin.users.staff.store', $user) }}"
                  class="mt-4 flex flex-wrap items-end gap-3">
                @csrf
                <div class="min-w-40 flex-1">
                    <label class="mb-1.5 block text-xs font-semibold text-slate-600">Name</label>
                    <input type="text" name="name" required placeholder="e.g. Jane Smith"
                           class="w-full rounded-2xl border border-slate-300 px-4 py-2.5 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div class="w-36">
                    <label class="mb-1.5 block text-xs font-semibold text-slate-600">Role</label>
                    <select name="role"
                            class="w-full rounded-2xl border border-slate-300 px-4 py-2.5 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                        <option value="cashier">Cashier</option>
                        <option value="manager">Manager</option>
                        <option value="admin">Admin</option>
                    </select>
                </div>
                <button type="submit"
                        class="rounded-2xl bg-brand-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-brand-700">Add</button>
            </form>
        </div>
    </section>
</div>
@endsection