@extends('layouts.admin')

@section('title', 'Manage User')

@section('content')
@php
    $backUrl = $isStaff ? route('admin.users.staff') : route('admin.users.customers');
    $selectedLocationIds = collect(old('location_ids', $assignedLocationIds ?? []))->map(fn ($id) => (int) $id)->all();
    $selectedRoles = collect(old('roles', $user->roles->pluck('name')->all()))->all();
    $defaultLocationId = old('default_location_id', $user->default_location_id);
@endphp

<div class="tw-migrated user-edit-page space-y-4" x-data="userEditForm({
    selectedLocations: @js($selectedLocationIds),
    defaultLocationId: @js($defaultLocationId ? (int) $defaultLocationId : null)
})">
    <x-ui.page-header
        :title="$isStaff ? 'Manage Staff' : 'Manage Customer'"
        :subtitle="$user->name . ' · #' . $user->id"
    >
        <x-slot:actions>
            <a href="{{ $backUrl }}" class="tw-btn-outline">
                <i class="bi bi-arrow-left"></i> Back
            </a>
        </x-slot:actions>
    </x-ui.page-header>

    @if(session('success'))
        <x-ui.alert type="success">{{ session('success') }}</x-ui.alert>
    @endif
    @if($errors->any())
        <x-ui.alert type="danger">
            <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </x-ui.alert>
    @endif

    <div class="grid gap-4 lg:grid-cols-12">
        <div class="lg:col-span-8 space-y-4">
            @if($isStaff)
                @if($staffMetrics)
                <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                    <x-ui.stat-card compact tone="primary" label="Today" :value="'₹'.number_format($staffMetrics['today_sales'], 0)" icon="bi bi-calendar-day" />
                    <x-ui.stat-card compact tone="info" label="This Week" :value="'₹'.number_format($staffMetrics['this_week_sales'], 0)" icon="bi bi-calendar-week" />
                    <x-ui.stat-card compact tone="success" label="This Month" :value="'₹'.number_format($staffMetrics['this_month_sales'], 0)" icon="bi bi-calendar-month" />
                    <x-ui.stat-card compact tone="warning" label="Orders" :value="number_format($staffMetrics['total_orders'])" icon="bi bi-cart-check" />
                    <x-ui.stat-card compact tone="success" label="Total Sales" :value="'₹'.number_format($staffMetrics['total_sales'], 0)" icon="bi bi-cash-coin" />
                    <x-ui.stat-card compact tone="info" label="Avg Order" :value="'₹'.number_format($staffMetrics['avg_order_value'], 0)" icon="bi bi-calculator" />
                </div>
                @endif

                <x-ui.card title="Staff details">
                    <form action="{{ route('admin.users.update', $user->id) }}" method="POST" class="space-y-4">
                        @csrf
                        @method('PUT')

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="name" class="admin-form-label">Full Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control admin-form-control @error('name') is-invalid @enderror"
                                       id="name" name="name" value="{{ old('name', $user->name) }}" required>
                                @error('name')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label for="staff_number" class="admin-form-label">Staff Number</label>
                                <input type="text" class="form-control admin-form-control @error('staff_number') is-invalid @enderror"
                                       id="staff_number" name="staff_number"
                                       value="{{ old('staff_number', $user->staff_number) }}"
                                       placeholder="e.g. STF001">
                                @error('staff_number')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label for="mobile" class="admin-form-label">Mobile <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">+91</span>
                                    <input type="text" class="form-control admin-form-control @error('mobile') is-invalid @enderror"
                                           id="mobile" name="mobile"
                                           value="{{ old('mobile') ? preg_replace('/^\+91/', '', old('mobile')) : $user->mobile }}"
                                           placeholder="9876543210" maxlength="10" pattern="[6-9]\d{9}" required>
                                </div>
                                @error('mobile')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                <small class="text-muted">Used for login</small>
                            </div>
                            <div class="col-md-6">
                                <label for="email" class="admin-form-label">Email</label>
                                <input type="email" class="form-control admin-form-control @error('email') is-invalid @enderror"
                                       id="email" name="email" value="{{ old('email', $user->email) }}">
                                @error('email')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            </div>
                        </div>

                        @if(($storeLocations ?? collect())->count())
                        <div class="ue-multi">
                            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-2">
                                <label class="admin-form-label mb-0">
                                    Assigned Stores / Warehouses <span class="text-danger">*</span>
                                </label>
                                <div class="d-flex flex-wrap gap-2">
                                    <button type="button" class="tw-btn-outline tw-btn-sm" @click="selectByType('store')">All stores</button>
                                    <button type="button" class="tw-btn-outline tw-btn-sm" @click="selectByType('warehouse')">All warehouses</button>
                                    <button type="button" class="tw-btn-ghost tw-btn-sm" @click="clearLocations()">Clear</button>
                                </div>
                            </div>

                            <div class="mb-2">
                                <input type="search" class="form-control admin-form-control" placeholder="Search locations…"
                                       x-model="locationQuery">
                            </div>

                            <div class="ue-check-grid">
                                @foreach($storeLocations as $loc)
                                    @php $isSelected = in_array((int) $loc->id, $selectedLocationIds, true); @endphp
                                    <label class="ue-check-card"
                                           x-show="matchesLocation('{{ strtolower($loc->name.' '.$loc->type.' '.$loc->code) }}')"
                                           :class="{ 'is-on': selectedLocations.includes({{ (int) $loc->id }}) }">
                                        <input type="checkbox"
                                               name="location_ids[]"
                                               value="{{ $loc->id }}"
                                               class="form-check-input"
                                               data-loc-type="{{ $loc->type }}"
                                               @checked($isSelected)
                                               @change="toggleLocation({{ (int) $loc->id }}, $event.target.checked)">
                                        <span class="ue-check-card__body">
                                            <span class="ue-check-card__title">{{ $loc->name }}</span>
                                            <span class="ue-check-card__meta">
                                                <span class="ue-pill {{ $loc->type === 'warehouse' ? 'is-wh' : 'is-st' }}">
                                                    {{ $loc->type === 'warehouse' ? 'Warehouse' : 'Store' }}
                                                </span>
                                                @if($loc->code)
                                                    <span class="text-muted">{{ $loc->code }}</span>
                                                @endif
                                            </span>
                                        </span>
                                    </label>
                                @endforeach
                            </div>
                            @error('location_ids')
                                <div class="text-danger small mt-2">{{ $message }}</div>
                            @enderror
                            <p class="small text-muted mt-2 mb-0">
                                Pick one store, multiple stores, warehouse only, or warehouse + stores.
                                Warehouse users can transfer out to any active store.
                            </p>
                        </div>

                        <div>
                            <label for="default_location_id" class="admin-form-label">Default Location <span class="text-danger">*</span></label>
                            <select name="default_location_id" id="default_location_id"
                                    class="form-select admin-form-control @error('default_location_id') is-invalid @enderror"
                                    x-model="defaultLocationId"
                                    required>
                                <option value="">— Select default —</option>
                                @foreach($storeLocations as $loc)
                                    <option value="{{ $loc->id }}"
                                            x-show="selectedLocations.includes({{ (int) $loc->id }})"
                                            @selected((int) $defaultLocationId === (int) $loc->id)>
                                        {{ $loc->name }} ({{ $loc->type }})
                                    </option>
                                @endforeach
                            </select>
                            @error('default_location_id')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            <small class="text-muted">Must be one of the assigned locations.</small>
                        </div>
                        @endif

                        <div class="d-flex justify-content-end gap-2">
                            <button type="submit" class="tw-btn-primary">
                                <i class="bi bi-check2"></i> Save staff details
                            </button>
                        </div>
                    </form>
                </x-ui.card>

                @if($roles)
                <x-ui.card title="Roles">
                    <form action="{{ route('admin.users.assign-role', $user->id) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="ue-role-grid mb-3">
                            @foreach($roles as $role)
                                @continue($role->name === 'customer')
                                @php $on = in_array($role->name, $selectedRoles, true); @endphp
                                <label class="ue-role-chip {{ $on ? 'is-on' : '' }}">
                                    <input type="checkbox" name="roles[]" value="{{ $role->name }}" class="form-check-input" @checked($on)
                                           onchange="this.closest('.ue-role-chip').classList.toggle('is-on', this.checked)">
                                    <span>{{ ucwords(str_replace('_', ' ', $role->name)) }}</span>
                                </label>
                            @endforeach
                        </div>
                        @error('roles')<div class="text-danger small mb-2">{{ $message }}</div>@enderror

                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                            <div class="small text-muted">
                                Current:
                                @forelse($user->roles as $role)
                                    <x-ui.badge :variant="$role->name === 'admin' ? 'danger' : 'primary'" class="me-1">
                                        {{ ucwords(str_replace('_', ' ', $role->name)) }}
                                    </x-ui.badge>
                                @empty
                                    <span>None</span>
                                @endforelse
                            </div>
                            <button type="submit" class="tw-btn-secondary"
                                    onclick="return confirm('Update roles for this staff member?')">
                                <i class="bi bi-shield-check"></i> Update roles
                            </button>
                        </div>
                    </form>
                </x-ui.card>
                @endif
            @else
                {{-- Customer metrics + orders (existing behaviour, refreshed cards) --}}
                @if($customerMetrics)
                <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                    <x-ui.stat-card compact tone="primary" label="Total Orders" :value="number_format($customerMetrics['total_orders'])" icon="bi bi-cart-check" />
                    <x-ui.stat-card compact tone="success" label="Lifetime Value" :value="'₹'.number_format($customerMetrics['total_value'], 0)" icon="bi bi-cash-coin" />
                    <x-ui.stat-card compact tone="info" label="Avg Order" :value="'₹'.number_format($customerMetrics['average_order'], 0)" icon="bi bi-calculator" />
                    <x-ui.stat-card compact tone="warning" label="Pending" :value="number_format($customerMetrics['pending_orders'])" icon="bi bi-clock-history" />
                    <x-ui.stat-card compact tone="success" label="Completed" :value="number_format($customerMetrics['completed_orders'])" icon="bi bi-check-circle" />
                    <x-ui.stat-card compact tone="muted" label="Last Order"
                        :value="$customerMetrics['last_order'] ? ($customerMetrics['last_order']->placed_at ?? $customerMetrics['last_order']->created_at)->format('M d, Y') : '—'"
                        icon="bi bi-calendar-event" />
                </div>
                @endif

                <x-ui.card title="Order history">
                    @if($paginatedOrders && $paginatedOrders->count() > 0)
                        <div class="tw-table-wrap">
                            <table class="tw-table align-middle">
                                <thead>
                                    <tr>
                                        <th>Order</th>
                                        <th>Date</th>
                                        <th>Total</th>
                                        <th>Status</th>
                                        <th>Payment</th>
                                        <th>Source</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($paginatedOrders as $order)
                                        <tr>
                                            <td class="fw-semibold" style="color: var(--admin-primary);">#{{ $order->id }}</td>
                                            <td class="small">
                                                {{ ($order->placed_at ?? $order->created_at)->format('M d, Y') }}
                                                <div class="text-muted">{{ ($order->placed_at ?? $order->created_at)->format('h:i A') }}</div>
                                            </td>
                                            <td class="text-success fw-semibold">₹{{ number_format($order->total_payable, 2) }}</td>
                                            <td><x-ui.badge variant="secondary">{{ ucfirst($order->status) }}</x-ui.badge></td>
                                            <td><x-ui.badge variant="info">{{ ucfirst($order->payment_status) }}</x-ui.badge></td>
                                            <td>{{ ($order->source ?? 'online') === 'pos' ? 'POS' : 'Online' }}</td>
                                            <td class="text-end">
                                                <a href="{{ route('admin.orders.show', $order) }}" class="tw-btn-outline tw-btn-sm">View</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 pt-3">
                            <div class="small text-muted">
                                Showing {{ $paginatedOrders->firstItem() ?? 0 }}–{{ $paginatedOrders->lastItem() ?? 0 }}
                                of {{ $paginatedOrders->total() }}
                            </div>
                            @if($paginatedOrders->hasPages())
                                <div>{{ $paginatedOrders->links('vendor.pagination.admin-categories') }}</div>
                            @endif
                        </div>
                    @else
                        <x-ui.empty-state title="No orders" description="This customer has no orders yet." />
                    @endif
                </x-ui.card>
            @endif
        </div>

        <div class="lg:col-span-4 space-y-4">
            <x-ui.card title="Profile">
                <div class="d-flex align-items-center gap-3 mb-3">
                    <div class="ue-avatar">{{ strtoupper(substr($user->name, 0, 1)) }}</div>
                    <div>
                        <div class="fw-semibold">{{ $user->name }}</div>
                        <div class="small text-muted">{{ $isStaff ? 'Staff' : 'Customer' }} · #{{ $user->id }}</div>
                    </div>
                </div>
                <dl class="ue-meta mb-0">
                    @if($isStaff)
                        <div><dt>Staff #</dt><dd>{{ $user->staff_number ?: '—' }}</dd></div>
                    @endif
                    <div><dt>Mobile</dt><dd>{{ $user->mobile }}</dd></div>
                    <div><dt>Email</dt><dd>{{ $user->email ?: '—' }}</dd></div>
                    <div><dt>Registered</dt><dd>{{ $user->created_at->format('M d, Y H:i') }}</dd></div>
                    <div><dt>Last login</dt><dd>{{ $user->last_login_at?->format('M d, Y H:i') ?? 'Never' }}</dd></div>
                    <div>
                        <dt>Verified</dt>
                        <dd>
                            @if($user->mobile_verified_at)
                                <x-ui.badge variant="success">Yes</x-ui.badge>
                            @else
                                <x-ui.badge variant="warning">No</x-ui.badge>
                            @endif
                        </dd>
                    </div>
                    @if($isStaff && $user->stores->isNotEmpty())
                        <div>
                            <dt>Access</dt>
                            <dd>
                                <div class="d-flex flex-wrap gap-1">
                                    @foreach($user->stores as $store)
                                        <span class="ue-pill {{ $store->type === 'warehouse' ? 'is-wh' : 'is-st' }}">
                                            {{ $store->type === 'warehouse' ? 'WH' : 'ST' }} {{ \Illuminate\Support\Str::limit($store->name, 16) }}
                                            @if((int)$user->default_location_id === (int)$store->id) ★ @endif
                                        </span>
                                    @endforeach
                                </div>
                            </dd>
                        </div>
                    @endif
                    @if(!$isStaff)
                        <div>
                            <dt>Type</dt>
                            <dd>{{ ($user->customer_type ?? 'retail') === 'wholesale' ? 'Wholesale' : 'Retail' }}</dd>
                        </div>
                        <div><dt>GST</dt><dd>{{ $user->gst_number ?: '—' }}</dd></div>
                    @endif
                </dl>
            </x-ui.card>

            @if(!$isStaff)
                @can('customers.update')
                <x-ui.card title="Customer account">
                    <form action="{{ route('admin.users.update-customer-type', $user->id) }}" method="POST" class="mb-3">
                        @csrf @method('PUT')
                        <label class="admin-form-label">Customer type</label>
                        <select name="customer_type" class="form-select admin-form-control mb-2" required>
                            <option value="retail" @selected(($user->customer_type ?? 'retail') === 'retail')>Retail</option>
                            <option value="wholesale" @selected(($user->customer_type ?? 'retail') === 'wholesale')>Wholesale</option>
                        </select>
                        <button type="submit" class="tw-btn-primary tw-btn-sm w-100">Update type</button>
                    </form>
                    <hr>
                    <form action="{{ route('admin.users.update-gst-number', $user->id) }}" method="POST" class="mb-3">
                        @csrf @method('PUT')
                        <label class="admin-form-label">GST number</label>
                        <input type="text" name="gst_number" class="form-control admin-form-control mb-2"
                               value="{{ old('gst_number', $user->gst_number) }}" maxlength="15">
                        <button type="submit" class="tw-btn-primary tw-btn-sm w-100">Update GST</button>
                    </form>
                    <hr>
                    @if($user->banned_at)
                        <x-ui.alert type="danger">Banned since {{ $user->banned_at->format('M d, Y H:i') }}</x-ui.alert>
                        <form action="{{ route('admin.users.unban', $user->id) }}" method="POST">
                            @csrf @method('PUT')
                            <button type="submit" class="tw-btn-secondary w-100" onclick="return confirm('Unban this user?')">Unban</button>
                        </form>
                    @else
                        <x-ui.alert type="success">Account active</x-ui.alert>
                        <form action="{{ route('admin.users.ban', $user->id) }}" method="POST">
                            @csrf @method('PUT')
                            <button type="submit" class="tw-btn-danger w-100" onclick="return confirm('Ban this user?')">Ban user</button>
                        </form>
                    @endif
                </x-ui.card>
                @endcan
            @endif

            @canany($isStaff ? ['staff.update', 'users.update'] : ['customers.update', 'users.update'])
            <x-ui.card title="Change password">
                <form action="{{ route('admin.users.change-password', $user->id) }}" method="POST">
                    @csrf @method('PUT')
                    <div class="mb-2">
                        <label class="admin-form-label" for="password">New password</label>
                        <input type="password" class="form-control admin-form-control @error('password') is-invalid @enderror"
                               id="password" name="password" required minlength="8">
                        @error('password')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <label class="admin-form-label" for="password_confirmation">Confirm</label>
                        <input type="password" class="form-control admin-form-control"
                               id="password_confirmation" name="password_confirmation" required minlength="8">
                    </div>
                    <button type="submit" class="tw-btn-outline w-100"
                            onclick="return confirm('Change this user\'s password?')">
                        <i class="bi bi-key"></i> Change password
                    </button>
                </form>
            </x-ui.card>
            @endcanany
        </div>
    </div>
</div>

<style>
.user-edit-page .ue-avatar {
    width: 3rem; height: 3rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--admin-primary, #0f766e), #14b8a6);
}
.user-edit-page .ue-meta > div {
    display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.5rem;
    padding: 0.45rem 0; border-bottom: 1px solid var(--color-border, #e4e0d8);
}
.user-edit-page .ue-meta > div:last-child { border-bottom: 0; }
.user-edit-page .ue-meta dt { color: var(--color-text-muted); font-size: 0.75rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
.user-edit-page .ue-meta dd { margin: 0; font-size: 0.875rem; }
.user-edit-page .ue-check-grid {
    display: grid; gap: 0.6rem;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    max-height: 280px; overflow: auto; padding: 0.15rem;
}
.user-edit-page .ue-check-card {
    display: flex; gap: 0.65rem; align-items: flex-start;
    border: 1px solid var(--color-border, #e4e0d8);
    border-radius: 12px; padding: 0.7rem 0.75rem;
    background: #fff; cursor: pointer; margin: 0;
    transition: 0.15s ease;
}
.user-edit-page .ue-check-card:hover { border-color: color-mix(in srgb, var(--admin-primary) 35%, #e4e0d8); }
.user-edit-page .ue-check-card.is-on {
    border-color: var(--admin-primary, #0f766e);
    background: color-mix(in srgb, var(--admin-primary, #0f766e) 8%, #fff);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--admin-primary) 25%, transparent);
}
.user-edit-page .ue-check-card .form-check-input { margin-top: 0.2rem; flex-shrink: 0; }
.user-edit-page .ue-check-card__title { display: block; font-weight: 600; font-size: 0.875rem; line-height: 1.25; }
.user-edit-page .ue-check-card__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.25rem; font-size: 0.72rem; }
.user-edit-page .ue-pill {
    display: inline-flex; align-items: center; gap: 0.2rem;
    border-radius: 999px; padding: 0.1rem 0.45rem; font-size: 0.68rem; font-weight: 650;
    border: 1px solid var(--color-border); background: #f8fafc;
}
.user-edit-page .ue-pill.is-wh {
    background: color-mix(in srgb, var(--admin-primary) 12%, #fff);
    border-color: color-mix(in srgb, var(--admin-primary) 30%, #e4e0d8);
    color: var(--admin-primary-dark, #0d5f59);
}
.user-edit-page .ue-pill.is-st { background: #f1f5f9; }
.user-edit-page .ue-role-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.user-edit-page .ue-role-chip {
    display: inline-flex; align-items: center; gap: 0.45rem;
    border: 1px solid var(--color-border); border-radius: 999px;
    padding: 0.4rem 0.75rem; background: #fff; cursor: pointer; margin: 0;
    font-size: 0.8125rem; font-weight: 550;
}
.user-edit-page .ue-role-chip.is-on {
    border-color: var(--admin-primary);
    background: color-mix(in srgb, var(--admin-primary) 10%, #fff);
    color: var(--admin-primary-dark, #0d5f59);
}
.user-edit-page .ue-role-chip .form-check-input { margin: 0; }
.user-edit-page .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}
.user-edit-page .input-group-text {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 2.5rem;
    border-radius: 11px 0 0 11px;
    border-color: var(--admin-border-color, #e4e0d8);
    background: var(--color-bg, #f3f1ec);
    font-size: 0.8125rem;
}
.user-edit-page .input-group .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border-radius: 0 11px 11px 0;
}
</style>
@endsection

@push('scripts')
<script>
function userEditForm({ selectedLocations = [], defaultLocationId = null } = {}) {
    return {
        selectedLocations: selectedLocations.map(Number),
        defaultLocationId: defaultLocationId ? Number(defaultLocationId) : '',
        locationQuery: '',
        matchesLocation(haystack) {
            const q = (this.locationQuery || '').trim().toLowerCase();
            return !q || haystack.includes(q);
        },
        toggleLocation(id, on) {
            id = Number(id);
            if (on) {
                if (!this.selectedLocations.includes(id)) this.selectedLocations.push(id);
            } else {
                this.selectedLocations = this.selectedLocations.filter((x) => x !== id);
                if (Number(this.defaultLocationId) === id) this.defaultLocationId = '';
            }
        },
        selectByType(type) {
            document.querySelectorAll('.ue-check-card input[data-loc-type="' + type + '"]').forEach((el) => {
                if (!el.checked) {
                    el.checked = true;
                    el.dispatchEvent(new Event('change'));
                }
                this.toggleLocation(Number(el.value), true);
                el.closest('.ue-check-card')?.classList.add('is-on');
            });
        },
        clearLocations() {
            this.selectedLocations = [];
            this.defaultLocationId = '';
            document.querySelectorAll('.ue-check-card input[type="checkbox"]').forEach((el) => {
                el.checked = false;
                el.closest('.ue-check-card')?.classList.remove('is-on');
            });
        },
    };
}
</script>
@endpush