{{--
    brafa Systems — My Profile.
    Mirror of prototype/admin/views-profile.jsx.

    Livewire backing is App\Http\Livewire\LaravelExamples\Profile\Edit.
    Every wire:* directive and property reference below is unchanged
    from the previous markup — only the surrounding HTML/CSS has been
    restructured.

    Properties referenced:
      $user (Eloquent User — name/email/phone/location)
      $picture (Livewire WithFileUploads temporary upload)
      $old_password, $new_password, $confirmationPassword
    Methods referenced:
      update(), passwordUpdate()
    Session flashes referenced:
      status, demo, error, success

    Active sessions card is currently cosmetic — the Livewire component
    has no $sessions state and the brief defers any session-tracking
    backend to a later pass. The current device row reflects request
    metadata; "Sign out everywhere" wires to logout.
--}}

@php
    use Illuminate\Support\Facades\Auth;

    $authUser = Auth::user();
    $userName = $authUser->name ?? '';
    $userInitials = collect(explode(' ', trim((string) $userName)))
        ->filter()
        ->take(2)
        ->map(fn ($p) => strtoupper(mb_substr($p, 0, 1)))
        ->implode('');

    $memberSince = $authUser->created_at?->format('Y-m-d') ?? '—';
    $passwordChanged = $authUser->updated_at?->diffForHumans() ?? 'unknown';

    $roleLabel = match ((int) ($authUser->role_id ?? 0)) {
        1 => 'Superadmin',
        2 => 'Admin',
        default => $authUser->role->name ?? 'Staff',
    };

    $currentDevice = request()->header('User-Agent');
    if ($currentDevice && preg_match('/(Chrome|Safari|Firefox|Edge)/i', $currentDevice, $m)) {
        $browser = $m[1];
    } else {
        $browser = 'Browser';
    }
    if ($currentDevice && preg_match('/(Mac OS X|Windows|Linux|iPhone|iPad|Android)/i', $currentDevice, $m)) {
        $os = str_replace('Mac OS X', 'macOS', $m[1]);
    } else {
        $os = 'Device';
    }
@endphp

<div class="brafa-screen">
    <div class="profile-stack">

        {{-- ============================================================
             Identity card  +  Basic info card
             share ONE wire:submit.prevent="update" form (the file input
             on the avatar must POST together with the inputs below).
             ============================================================ --}}
        <form wire:submit.prevent="update" enctype="multipart/form-data" class="profile-stack" style="gap: 24px;">
            @csrf

            {{-- Identity card --------------------------------------------- --}}
            <section class="card profile-identity">
                <div class="profile-avatar-wrap">
                    @if ($picture)
                        <img src="{{ $picture->temporaryUrl() }}"
                             alt="{{ $userName }}"
                             class="brafa-avatar"
                             style="width:88px;height:88px;font-size:30px;">
                    @elseif ($authUser->picture)
                        <img src="/storage/{{ $authUser->picture }}"
                             alt="{{ $userName }}"
                             class="brafa-avatar"
                             style="width:88px;height:88px;font-size:30px;">
                    @else
                        <div class="brafa-avatar" style="width:88px;height:88px;font-size:30px;">
                            {{ $userInitials ?: '?' }}
                        </div>
                    @endif

                    <label for="brafa-file-input"
                           class="profile-avatar-edit"
                           data-bs-toggle="tooltip"
                           data-bs-placement="top"
                           title="Change photo"
                           aria-label="Change photo">
                        <x-lucide name="edit-3" size="13" stroke="#FFFFFF" />
                        <input wire:model="picture" type="file" id="brafa-file-input">
                    </label>
                </div>

                <div class="profile-identity__body">
                    <h2 class="profile-identity__name">{{ $userName }}</h2>
                    <div class="profile-identity__meta">
                        <span class="pill pill--ink">
                            <span class="dot"></span>{{ $roleLabel }}
                        </span>
                        <span class="profile-identity__meta-item">
                            <x-lucide name="mail" size="13" />
                            {{ $authUser->email }}
                        </span>
                        @if ($authUser->location)
                            <span class="profile-identity__meta-item">
                                <x-lucide name="map-pin" size="13" />
                                {{ $authUser->location }}
                            </span>
                        @endif
                    </div>
                </div>

                <div class="profile-identity__since">
                    <span class="eyebrow">Member since</span>
                    <span class="profile-identity__since-date">{{ $memberSince }}</span>
                </div>
            </section>

            @error('picture')
                <div class="status-banner status-banner--danger">{{ $message }}</div>
            @enderror
            @if (session('status'))
                <div class="status-banner status-banner--success">{{ session('status') }}</div>
            @endif
            @if (session('demo'))
                <div class="status-banner status-banner--danger">{{ session('demo') }}</div>
            @endif

            {{-- Basic info card -------------------------------------------- --}}
            <section class="card card--pad-lg">
                <div class="spread" style="margin-bottom: 24px;">
                    <h3 class="card-heading" style="margin: 0;">Basic info</h3>
                    <span class="eyebrow">Required to receive notifications</span>
                </div>

                <div class="input-row">
                    <div>
                        <label class="field-label" for="brafa-profile-name">Name</label>
                        <input wire:model.lazy="user.name"
                               id="brafa-profile-name"
                               type="text"
                               class="input @error('user.name') is-invalid @enderror"
                               placeholder="Full name">
                        @error('user.name')
                            <p class="field-error">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label class="field-label" for="brafa-profile-email">Email</label>
                        <input wire:model.lazy="user.email"
                               id="brafa-profile-email"
                               type="email"
                               class="input @error('user.email') is-invalid @enderror"
                               placeholder="example@brafasystems.com">
                        @error('user.email')
                            <p class="field-error">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="input-row">
                    <div>
                        <label class="field-label" for="brafa-profile-location">Location</label>
                        <input wire:model.lazy="user.location"
                               id="brafa-profile-location"
                               type="text"
                               class="input @error('user.location') is-invalid @enderror"
                               placeholder="Reykjavík, Iceland">
                        @error('user.location')
                            <p class="field-error">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label class="field-label" for="brafa-profile-phone">Phone</label>
                        <input wire:model.lazy="user.phone"
                               id="brafa-profile-phone"
                               type="text"
                               inputmode="tel"
                               class="input @error('user.phone') is-invalid @enderror"
                               placeholder="+354 615 3462">
                        @error('user.phone')
                            <p class="field-error">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="hstack" style="margin-top: 4px;">
                    <button type="submit" class="btn">Save changes</button>
                    <button type="button"
                            class="btn btn--outline"
                            onclick="if(this.form){this.form.reset();}">
                        Discard
                    </button>
                </div>
            </section>
        </form>

        {{-- ============================================================
             Change password card
             ============================================================ --}}
        <form wire:submit.prevent="passwordUpdate">
            @csrf
            <section class="card card--pad-lg">
                <div class="spread" style="margin-bottom: 24px;">
                    <h3 class="card-heading" style="margin: 0;">Change password</h3>
                    <span class="eyebrow">Last changed {{ $passwordChanged }}</span>
                </div>

                @if (session('error'))
                    <div class="status-banner status-banner--danger">{{ session('error') }}</div>
                @endif
                @if (session('success'))
                    <div class="status-banner status-banner--success">{{ session('success') }}</div>
                @endif

                <div class="input-row input-row--single">
                    <div>
                        <label class="field-label" for="brafa-profile-current-pw">Current password</label>
                        <input wire:model.lazy="old_password"
                               id="brafa-profile-current-pw"
                               type="password"
                               class="input @error('old_password') is-invalid @enderror"
                               placeholder="••••••••"
                               autocomplete="current-password">
                        @error('old_password')
                            <p class="field-error">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="input-row">
                    <div>
                        <label class="field-label" for="brafa-profile-new-pw">New password</label>
                        <input wire:model.lazy="new_password"
                               id="brafa-profile-new-pw"
                               type="password"
                               class="input @error('new_password') is-invalid @enderror"
                               placeholder="At least 12 characters"
                               autocomplete="new-password">
                        @error('new_password')
                            <p class="field-error">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label class="field-label" for="brafa-profile-confirm-pw">Confirm new password</label>
                        <input wire:model="confirmationPassword"
                               id="brafa-profile-confirm-pw"
                               type="password"
                               class="input"
                               placeholder="Repeat new password"
                               autocomplete="new-password">
                    </div>
                </div>

                <div class="password-reqs">
                    <div class="eyebrow">Password must contain</div>
                    <div class="password-reqs__list">
                        <span class="password-reqs__item"><x-lucide name="check" size="13" /> 12+ characters</span>
                        <span class="password-reqs__item"><x-lucide name="check" size="13" /> Uppercase letter</span>
                        <span class="password-reqs__item"><x-lucide name="check" size="13" /> Lowercase letter</span>
                        <span class="password-reqs__item"><x-lucide name="check" size="13" /> Number</span>
                        <span class="password-reqs__item"><x-lucide name="check" size="13" /> Special character</span>
                    </div>
                </div>

                <div class="hstack" style="margin-top: 18px;">
                    <button type="submit" class="btn">Update password</button>
                    <button type="button"
                            class="btn btn--outline"
                            onclick="if(this.form){this.form.reset();}">
                        Cancel
                    </button>
                </div>
            </section>
        </form>

        {{-- ============================================================
             Active sessions card  — cosmetic placeholder.
             Renders the current device only; "Sign out everywhere" is
             wired to the existing logout route until a session-tracking
             backend lands.
             ============================================================ --}}
        <section class="card card--pad-lg">
            <div class="spread" style="margin-bottom: 20px;">
                <h3 class="card-heading" style="margin: 0;">Active sessions</h3>
                <form method="get" action="{{ route('logout') }}" class="m-0">
                    @csrf
                    <button type="submit" class="btn btn--outline btn--sm">Sign out everywhere</button>
                </form>
            </div>

            <div class="sessions-list">
                <div class="session-row">
                    <div class="session-row__icon">
                        <x-lucide name="shield" size="16" />
                    </div>
                    <div class="session-row__body">
                        <span class="session-row__device">{{ $browser }} · {{ $os }}</span>
                        <span class="session-row__sub">
                            {{ $authUser->location ?: 'Unknown location' }} · Active now
                        </span>
                    </div>
                    <span class="pill pill--active">
                        <span class="dot"></span>Current
                    </span>
                </div>
            </div>
        </section>

    </div>
</div>

@push('js')
    <script src="{{ asset('assets') }}/js/plugins/perfect-scrollbar.min.js"></script>
@endpush