@php
    $strengthColor = match (true) {
        $strength >= 4 => '#16a34a',
        $strength === 3 => '#d97706',
        $strength === 2 => '#ea580c',
        default => '#da291c',
    };
    $strengthLabel = match (true) {
        $strength >= 4 => 'Strong password',
        $strength === 3 => 'Good — add a symbol or more length',
        $strength === 2 => 'Fair — mix in numbers and symbols',
        default => 'Weak password',
    };
@endphp

<div class="sanbs-auth-card">

    <div class="sanbs-auth-head">
        @include('livewire.auth.includes.logo')
        <div class="sanbs-auth-title">Set a new password</div>
        <div class="sanbs-auth-subtitle">Create a strong password you haven't used before.</div>
    </div>

    <div class="sanbs-field">
        <label class="sanbs-label" for="password">New password</label>
        <div class="sanbs-input-group">
            <input wire:model="password" id="password" class="sanbs-input" placeholder="••••••••"
                   autocomplete="new-password" type="{{ $view ? 'password' : 'text' }}"/>
            <button type="button" class="sanbs-input-affix" wire:click="setView" aria-label="Toggle password visibility">
                @if ($view)
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
                    </svg>
                @else
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/>
                        <line x1="1" y1="1" x2="23" y2="23"/>
                    </svg>
                @endif
            </button>
        </div>

        <div class="sanbs-strength" style="margin-top:10px;">
            @for ($i = 1; $i <= 4; $i++)
                <div class="sanbs-strength-bar">
                    <div class="sanbs-strength-fill"
                         style="width: {{ $strength >= $i ? '100%' : '0%' }}; background: {{ $strengthColor }};"></div>
                </div>
            @endfor
        </div>
        <div class="sanbs-hint" style="color: {{ $strength >= 4 ? '#16a34a' : '#9ca3af' }};">
            {{ $strengthLabel }}
        </div>
        @error('password')<span class="sanbs-error">{{ $message }}</span>@enderror
    </div>

    <div class="sanbs-field">
        <label class="sanbs-label" for="confirm_password">Confirm password</label>
        <div class="sanbs-input-group">
            <input wire:model="confirm_password" id="confirm_password" class="sanbs-input" placeholder="••••••••"
                   autocomplete="new-password" type="{{ $view2 ? 'password' : 'text' }}"/>
            <button type="button" class="sanbs-input-affix" wire:click="setView2" aria-label="Toggle password visibility">
                @if ($view2)
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
                    </svg>
                @else
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/>
                        <line x1="1" y1="1" x2="23" y2="23"/>
                    </svg>
                @endif
            </button>
        </div>
        @error('confirm_password')<span class="sanbs-error">{{ $message }}</span>@enderror
    </div>

    <button wire:click="submitRequest" {{ $strength < 4 ? 'disabled' : '' }}
            class="sanbs-btn sanbs-btn-primary sanbs-btn-block">
        Update password
    </button>

    <div class="sanbs-foot">
        <a class="sanbs-link" href="{{ route('login') }}">Back to sign in</a>
    </div>
</div>

@script
<script>
    // Recompute strength as the user types and push it to the component.
    document.addEventListener('input', function (e) {
        if (!e.target || e.target.id !== 'password') return;

        const value = e.target.value;
        let strength = 0;

        if (value.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1;
        if (value.match(/([0-9])/)) strength += 1;
        if (value.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1;
        if (value.length > 8) strength += 1;

        Livewire.dispatch('setStrength', { value: strength });
    });
</script>
@endscript