<x-guest-layout>
    <style>
        .pin-wrapper {
            position: relative;
        }

        .eye-toggle {
            position: absolute;
            right: 12px;
            top: 42px;
            cursor: pointer;
            font-size: 14px;
            color: #6b7280;
            user-select: none;
        }

        .hint {
            margin-top: 6px;
            font-size: 12px;
            font-weight: 600;
        }

        .hint.error { color: #dc2626; }
        .hint.warning { color: #f59e0b; }
        .hint.success { color: #16a34a; }

        .strength-bar {
            height: 6px;
            border-radius: 4px;
            background: #e5e7eb;
            margin-top: 6px;
            overflow: hidden;
        }

        .strength-bar span {
            display: block;
            height: 100%;
            width: 0;
            transition: width .3s ease;
        }

        .bar-weak { background: #dc2626; width: 33%; }
        .bar-medium { background: #f59e0b; width: 66%; }
        .bar-strong { background: #16a34a; width: 100%; }

        button[disabled] {
            opacity: 0.6;
            cursor: not-allowed;
        }
    </style>

    <form method="POST" action="{{ route('password.store') }}">
        @csrf

        <!-- Token -->
        <input type="hidden" name="token" value="{{ $request->route('token') }}">

        <!-- Email -->
        <div>
            <x-input-label for="email" value="Email" />
            <x-text-input
                id="email"
                class="block mt-1 w-full"
                type="email"
                name="email"
                :value="old('email', $request->email)"
                readonly
            />
            <x-input-error :messages="$errors->get('email')" class="mt-2" />
        </div>

        <!-- New PIN -->
        <div class="mt-4 pin-wrapper">
            <x-input-label for="password" value="New Secure PIN (digits only)" />

            <x-text-input
                id="password"
                class="block mt-1 w-full"
                type="password"
                name="password"
                inputmode="numeric"
                pattern="[0-9]*"
                minlength="8"
                maxlength="12"
                autocomplete="new-password"
                required
            />

            <span class="eye-toggle" onclick="togglePin('password', this)">👁</span>

            <div id="pinHint" class="hint error">
                Minimum 8 digits. Digits only.
            </div>

            <div class="strength-bar">
                <span id="strengthBar"></span>
            </div>

            <x-input-error :messages="$errors->get('password')" class="mt-2" />
        </div>

        <!-- Confirm PIN -->
        <div class="mt-4 pin-wrapper">
            <x-input-label for="password_confirmation" value="Confirm Secure PIN" />

            <x-text-input
                id="password_confirmation"
                class="block mt-1 w-full"
                type="password"
                name="password_confirmation"
                inputmode="numeric"
                pattern="[0-9]*"
                minlength="8"
                maxlength="12"
                autocomplete="new-password"
                required
            />

            <span class="eye-toggle" onclick="togglePin('password_confirmation', this)">👁</span>

            <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
        </div>

        <div class="flex items-center justify-end mt-6">
            <x-primary-button id="submitBtn" disabled>
                Reset Secure PIN
            </x-primary-button>
        </div>
    </form>

    <script>
        const password = document.getElementById('password');
        const confirmPassword = document.getElementById('password_confirmation');
        const hint = document.getElementById('pinHint');
        const bar = document.getElementById('strengthBar');
        const submitBtn = document.getElementById('submitBtn');

        const blockedPins = [
            '12345678','00000000','11111111','22222222','33333333',
            '44444444','55555555','66666666','77777777','88888888','99999999'
        ];

        function digitsOnly(el) {
            el.value = el.value.replace(/[^0-9]/g, '');
        }

        function validatePin() {
            digitsOnly(password);
            const val = password.value;
            bar.className = '';

            if (val.length < 8) {
                hint.textContent = 'PIN must be at least 8 digits.';
                hint.className = 'hint error';
                submitBtn.disabled = true;
                return;
            }

            if (blockedPins.includes(val)) {
                hint.textContent = 'This PIN is too common and not allowed.';
                hint.className = 'hint error';
                submitBtn.disabled = true;
                return;
            }

            if (confirmPassword.value && val !== confirmPassword.value) {
                hint.textContent = 'PINs do not match.';
                hint.className = 'hint error';
                submitBtn.disabled = true;
                return;
            }

            if (val.length < 10) {
                hint.textContent = 'Medium strength PIN';
                hint.className = 'hint warning';
                bar.classList.add('bar-medium');
            } else {
                hint.textContent = 'Strong PIN ✓';
                hint.className = 'hint success';
                bar.classList.add('bar-strong');
            }

            submitBtn.disabled = false;
        }

        function validateConfirmation() {
            digitsOnly(confirmPassword);
            validatePin();
        }

        function togglePin(id, el) {
            const field = document.getElementById(id);
            field.type = field.type === 'password' ? 'text' : 'password';
            el.textContent = field.type === 'password' ? '👁' : '🙈';
        }

        password.addEventListener('input', validatePin);
        confirmPassword.addEventListener('input', validateConfirmation);
    </script>
</x-guest-layout>
