<x-guest-layout>
    @section('title', 'Admin Login | ' . ($settings->site_name ?? config('app.name', 'Saleem Sial Analytics')))
    @section('meta_description', 'Login to the Saleem Sial Analytics admin workspace.')
    @php($loginBrandVersion = $settings?->updated_at?->timestamp ?? $settings?->logo_media_id ?? '1')
    @php($loginLogo = ($settings?->logo_url ?? asset('uploads/logos/saleem-sial-logo.png')) . '?v=' . $loginBrandVersion)

    <div class="space-y-6">
        <div class="flex flex-col items-center justify-center gap-4 text-center">
            <img
                src="{{ $loginLogo }}"
                alt="{{ $settings?->site_name ?? config('app.name', 'Saleem Sial Analytics') }}"
                class="h-20 w-auto max-w-[220px] object-contain"
            >
            <div>
                <p class="text-lg font-semibold text-[#123262]">{{ $settings?->site_name ?? config('app.name', 'Saleem Sial Analytics') }}</p>
                <p class="text-sm text-[#224672]">Admin workspace access</p>
            </div>
        </div>

        <div class="space-y-3">
            <span class="inline-flex rounded-full bg-[#123262] px-3 py-1 text-xs font-semibold uppercase tracking-[0.22em] text-white">Admin login</span>
            <div>
                <h2 class="text-3xl font-semibold tracking-tight text-[#123262]">Welcome back</h2>
                <p class="mt-2 max-w-lg text-sm leading-7 text-[#224672]">
                    Sign in to manage pages, services, users, roles, contact requests, support chat leads, and media from one place.
                </p>
            </div>
        </div>

        <x-auth-session-status class="rounded-2xl border border-[#D5E9A4] bg-[#EAF5EA] px-4 py-3 text-sm text-[#224672]" :status="session('status')" />

        <form method="POST" action="{{ route('login') }}" class="space-y-5">
            @csrf

            <div class="grid gap-5">
                <div>
                    <x-input-label for="email" value="Email address" class="text-sm font-semibold text-[#123262]" />
                    <x-text-input
                        id="email"
                        class="mt-2 block w-full rounded-2xl border border-[#B4CAE3] bg-[#EAF5EA] px-4 py-3 text-sm text-[#111111] shadow-sm outline-none transition focus:border-[#14599E] focus:bg-white focus:ring-2 focus:ring-[#14599E]/20"
                        type="email"
                        name="email"
                        :value="old('email')"
                        required
                        autofocus
                        autocomplete="username"
                        placeholder="admin@example.com"
                    />
                    <x-input-error :messages="$errors->get('email')" class="mt-2 text-sm text-[#E17300]" />
                </div>

                <div>
                    <div class="flex items-center justify-between gap-4">
                        <x-input-label for="password" value="Password" class="text-sm font-semibold text-[#123262]" />
                        @if (Route::has('password.request'))
                            <a class="text-sm font-medium text-[#14599E] transition hover:text-[#123262]" href="{{ route('password.request') }}">
                                Forgot password?
                            </a>
                        @endif
                    </div>

                    <div class="relative mt-2" x-data="{ showPassword: false }">
                        <x-text-input
                            id="password"
                            class="block w-full rounded-2xl border border-[#B4CAE3] bg-[#EAF5EA] px-4 py-3 text-sm text-[#111111] shadow-sm outline-none transition focus:border-[#14599E] focus:bg-white focus:ring-2 focus:ring-[#14599E]/20"
                            x-bind:type="showPassword ? 'text' : 'password'"
                            type="password"
                            name="password"
                            required
                            autocomplete="current-password"
                            placeholder="Enter your password"
                        />

                        <button
                            type="button"
                            class="absolute right-3 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full bg-transparent text-[#14599E] transition hover:text-[#123262]"
                            @click="showPassword = !showPassword"
                            x-bind:aria-label="showPassword ? 'Hide password' : 'Show password'"
                        >
                            <svg x-show="!showPassword" x-cloak xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12Z"></path>
                                <circle cx="12" cy="12" r="3"></circle>
                            </svg>
                            <svg x-show="showPassword" x-cloak xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
                                <path d="m3 3 18 18"></path>
                                <path d="M10.58 10.58a2 2 0 1 0 2.83 2.83"></path>
                                <path d="M9.88 5.09A9.77 9.77 0 0 1 12 5c7 0 11 7 11 7a17.47 17.47 0 0 1-2.39 3.36"></path>
                                <path d="M6.61 6.61A17.34 17.34 0 0 0 1 12s4 7 11 7a10.77 10.77 0 0 0 5.39-1.39"></path>
                            </svg>
                        </button>
                    </div>

                    <x-input-error :messages="$errors->get('password')" class="mt-2 text-sm text-[#E17300]" />
                </div>

                <div
                    class="rounded-3xl border border-[#D5E9A4] bg-[#EAF5EA] p-4"
                    x-data="{
                        question: @js($captchaQuestion ?? session('login_captcha_question')),
                        secondsLeft: @js((int) ($captchaExpiresIn ?? 60)),
                        refreshUrl: @js(route('login.challenge')),
                        timer: null,
                        async refreshChallenge() {
                            try {
                                const response = await fetch(this.refreshUrl, {
                                    headers: {
                                        'Accept': 'application/json',
                                        'X-Requested-With': 'XMLHttpRequest',
                                    },
                                    credentials: 'same-origin',
                                });

                                if (!response.ok) {
                                    return;
                                }

                                const payload = await response.json();
                                this.question = payload.captchaQuestion;
                                this.secondsLeft = Number(payload.captchaExpiresIn ?? 60);
                            } catch (error) {
                                console.error('Unable to refresh login challenge.', error);
                            }
                        },
                        startChallengeTimer() {
                            this.timer = window.setInterval(() => {
                                if (this.secondsLeft <= 1) {
                                    this.refreshChallenge();
                                    return;
                                }

                                this.secondsLeft -= 1;
                            }, 1000);
                        },
                        init() {
                            this.startChallengeTimer();
                        },
                    }"
                >
                    <div class="flex flex-wrap items-center justify-between gap-3">
                        <div>
                            <p class="text-sm font-semibold text-[#123262]">Verification challenge</p>
                            <p class="mt-1 text-sm text-[#224672]">
                                New question in
                                <span class="font-semibold text-[#14599E]" x-text="`${secondsLeft}s`"></span>
                            </p>
                        </div>
                        <button
                            type="button"
                            class="inline-flex items-center rounded-full border border-[#B4CAE3] bg-white px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-[#14599E] transition hover:border-[#14599E] hover:text-[#123262]"
                            @click="refreshChallenge"
                        >
                            Refresh now
                        </button>
                    </div>

                    <div class="mt-4 grid gap-4 sm:grid-cols-[minmax(0,0.9fr)_minmax(140px,0.7fr)] sm:items-end">
                        <div class="rounded-2xl bg-[#123262] px-4 py-3 text-lg font-semibold tracking-[0.16em] text-white" x-text="`${question} = ?`">
                            {{ $captchaQuestion ?? session('login_captcha_question') }} = ?
                        </div>

                        <div>
                            <x-input-label for="captcha_answer" value="Your answer" class="text-sm font-semibold text-[#123262]" />
                            <x-text-input
                                id="captcha_answer"
                                class="mt-2 block w-full rounded-2xl border border-[#B4CAE3] bg-white px-4 py-3 text-sm text-[#111111] shadow-sm outline-none transition focus:border-[#14599E] focus:ring-2 focus:ring-[#14599E]/20"
                                type="text"
                                name="captcha_answer"
                                inputmode="numeric"
                                autocomplete="off"
                                required
                                placeholder="Type the result"
                            />
                            <x-input-error :messages="$errors->get('captcha_answer')" class="mt-2 text-sm text-[#E17300]" />
                        </div>
                    </div>
                </div>

                <label for="remember_me" class="inline-flex items-center gap-3 text-sm text-[#224672]">
                    <input id="remember_me" type="checkbox" class="h-4 w-4 rounded border-[#B4CAE3] text-[#94C62D] focus:ring-[#94C62D]" name="remember">
                    <span>Keep me signed in on this device</span>
                </label>
            </div>

            <div class="flex flex-col gap-4 border-t border-[#D5E9A4] pt-5 sm:flex-row sm:items-center sm:justify-between">
                <div class="text-sm text-[#224672]">
                    Use your assigned workspace role to access the correct admin areas after login.
                </div>

                <x-primary-button class="inline-flex min-h-[3.25rem] items-center justify-center rounded-2xl border-0 bg-[#94C62D] px-6 py-3 text-sm font-semibold tracking-[0.16em] text-[#123262] uppercase transition hover:bg-[#7fb121] focus:bg-[#7fb121] focus:ring-2 focus:ring-[#94C62D]/30">
                    Log in to dashboard
                </x-primary-button>
            </div>
        </form>
    </div>
</x-guest-layout>
