{# app/templates/store/login.html #}
<!DOCTYPE html>
<html :class="{ 'dark': dark }" x-data="storeLogin()" lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Store Login - Multi-Tenant Platform</title>
    <!-- Fonts: Local fallback + Google Fonts -->
    <link href="/static/shared/fonts/inter.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="{{ url_for('static', path='store/css/tailwind.output.css') }}" />
    <style>
        [x-cloak] { display: none !important; }
    </style>

    <!-- Dev debug toolbar (dev only — auto-hides in production, must load early for interceptors) -->
    <script src="{{ url_for('static', path='shared/js/dev-toolbar.js') }}"></script>
</head>
<body>
    <div class="flex items-center min-h-screen p-6 bg-gray-50 dark:bg-gray-900" x-cloak>
        <div class="flex-1 h-full max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-xl dark:bg-gray-800">
            <div class="flex flex-col overflow-y-auto md:flex-row">
                <div class="h-32 md:h-auto md:w-1/2">
                    <img aria-hidden="true" class="object-cover w-full h-full dark:hidden"
                         src="{{ url_for('static', path='store/img/login-office.jpeg') }}" alt="Office" />
                    <img aria-hidden="true" class="hidden object-cover w-full h-full dark:block"
                         src="{{ url_for('static', path='store/img/login-office-dark.jpeg') }}" alt="Office" />
                </div>
                <div class="flex items-center justify-center p-6 sm:p-12 md:w-1/2">
                    <div class="w-full">
                        <!-- Store Info -->
                        <template x-if="store">
                            <div class="mb-6 text-center">
                                <div class="inline-flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-purple-100 dark:bg-purple-600">
                                    <span class="text-2xl font-bold text-purple-600 dark:text-purple-100"
                                          x-text="store.name?.charAt(0).toUpperCase() || '🏪'"></span>
                                </div>
                                <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200" x-text="store.name"></h2>
                                <p class="text-sm text-gray-600 dark:text-gray-400">
                                    <strong x-text="store.store_code"></strong>
                                </p>
                            </div>
                        </template>

                        <h1 class="mb-4 text-xl font-semibold text-gray-700 dark:text-gray-200">
                            {{ _("auth.store_login") }}
                        </h1>

                        <!-- Alert Messages -->
                        <div x-show="error" x-text="error"
                             class="px-4 py-3 mb-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800"
                             x-transition></div>

                        <div x-show="success" x-text="success"
                             class="px-4 py-3 mb-4 text-sm text-green-700 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800"
                             x-transition></div>

                        <!-- Login Form (only show if store found) -->
                        <template x-if="store">
                            <form @submit.prevent="handleLogin" x-show="!showForgotPassword">
                                <label class="block text-sm">
                                    <span class="text-gray-700 dark:text-gray-400">{{ _("auth.username") }}</span>
                                    <input x-model="credentials.username"
                                           :disabled="loading"
                                           @input="clearErrors"
                                           class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input rounded-md border-gray-300"
                                           :class="{ 'border-red-600': errors.username }"
                                           placeholder="{{ _('auth.username_placeholder') }}"
                                           autocomplete="username"
                                           required />
                                    <span x-show="errors.username" x-text="errors.username"
                                          class="text-xs text-red-600 dark:text-red-400 mt-1"></span>
                                </label>

                                <label class="block mt-4 text-sm">
                                    <span class="text-gray-700 dark:text-gray-400">{{ _("auth.password") }}</span>
                                    <div class="relative" x-data="{ showPw: false }">
                                        <input x-model="credentials.password"
                                               :disabled="loading"
                                               @input="clearErrors"
                                               :type="showPw ? 'text' : 'password'"
                                               class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input rounded-md border-gray-300"
                                               :class="{ 'border-red-600': errors.password }"
                                               placeholder="{{ _('auth.password_placeholder') }}"
                                               autocomplete="current-password"
                                               required />
                                        <button type="button"
                                                @click="showPw = !showPw"
                                                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                                            <span x-text="showPw ? '👁️' : '👁️‍🗨️'"></span>
                                        </button>
                                    </div>
                                    <span x-show="errors.password" x-text="errors.password"
                                          class="text-xs text-red-600 dark:text-red-400 mt-1"></span>
                                </label>

                                <!-- Remember Me & Forgot Password -->
                                <div class="flex items-center justify-between mt-4">
                                    <label class="flex items-center text-sm">
                                        <input type="checkbox"
                                               x-model="rememberMe"
                                               class="form-checkbox text-purple-600 border-gray-300 rounded focus:ring-purple-500 focus:outline-none">
                                        <span class="ml-2 text-gray-700 dark:text-gray-400">{{ _("auth.remember_me") }}</span>
                                    </label>
                                    <a @click.prevent="showForgotPassword = true"
                                       class="text-sm font-medium text-purple-600 dark:text-purple-400 hover:underline cursor-pointer">
                                        {{ _("auth.forgot_password") }}
                                    </a>
                                </div>

                                <button type="submit" :disabled="loading"
                                        class="block w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed">
                                    <span x-show="!loading">{{ _("auth.sign_in") }}</span>
                                    <span x-show="loading" class="flex items-center justify-center">
                                        <span class="inline w-4 h-4 mr-2" x-html="$icon('spinner', 'w-4 h-4 animate-spin')"></span>
                                        {{ _("auth.signing_in") }}
                                    </span>
                                </button>
                            </form>
                        </template>

                        <!-- Store Not Found -->
                        <template x-if="!store && !loading && checked">
                            <div class="text-center py-8">
                                <div class="text-6xl mb-4">🏪</div>
                                <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">
                                    Store Not Found
                                </h3>
                                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                                    The store you're trying to access doesn't exist or is inactive.
                                </p>
                                <a href="/" class="inline-flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
                                    Go to Platform Home
                                </a>
                            </div>
                        </template>

                        <!-- Loading State -->
                        <div x-show="loading && !store" class="text-center py-8">
                            <span class="inline-block w-8 h-8 text-purple-600" x-html="$icon('spinner', 'w-8 h-8 animate-spin')"></span>
                            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Loading store information...</p>
                        </div>

                        <!-- Forgot Password Form -->
                        <div x-show="store && showForgotPassword" x-cloak x-transition class="mt-6">
                            <hr class="mb-6" />
                            <h2 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">{{ _("auth.reset_password") }}</h2>
                            <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">{{ _("auth.reset_password_desc") }}</p>
                            <form @submit.prevent="handleForgotPassword">
                                <label class="block text-sm">
                                    <span class="text-gray-700 dark:text-gray-400">{{ _("common.email") }}</span>
                                    <input x-model="forgotPasswordEmail"
                                           :disabled="forgotPasswordLoading"
                                           class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input rounded-md border-gray-300"
                                           placeholder="you@example.com"
                                           type="email"
                                           required />
                                </label>
                                <button type="submit" :disabled="forgotPasswordLoading"
                                        class="block w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50">
                                    <span x-show="!forgotPasswordLoading">{{ _("auth.send_reset_link") }}</span>
                                    <span x-show="forgotPasswordLoading">{{ _("auth.sending") }}</span>
                                </button>
                            </form>
                            <p class="mt-4">
                                <a @click.prevent="showForgotPassword = false"
                                   class="text-sm font-medium text-purple-600 dark:text-purple-400 hover:underline cursor-pointer">
                                    &larr; {{ _("auth.back_to_login") }}
                                </a>
                            </p>
                        </div>

                        <hr class="my-8" />

                        <p class="mt-4 text-center">
                            <span class="text-sm text-gray-600 dark:text-gray-400">{{ _("auth.no_account") }}</span>
                            <a class="text-sm font-medium text-purple-600 dark:text-purple-400 hover:underline ml-1"
                               href="/">
                                {{ _("auth.visit_platform") }}
                            </a>
                        </p>
                        <p class="mt-2 text-center">
                            <a class="text-sm font-medium text-gray-600 dark:text-gray-400 hover:underline"
                               href="/">
                                &larr; {{ _("auth.back_to_platform") }}
                            </a>
                        </p>

                        <!-- Language selector -->
                        <div class="flex items-center justify-center gap-2 mt-6"
                             x-data='languageSelector("{{ request.state.language|default("fr") }}", {{ ["en", "fr", "de", "lb"]|tojson }})'>
                            <template x-for="lang in languages" :key="lang">
                                <button
                                    @click="setLanguage(lang)"
                                    class="px-2.5 py-1 text-sm font-semibold rounded-md transition-all"
                                    :class="currentLang === lang
                                        ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 ring-1 ring-purple-300 dark:ring-purple-700'
                                        : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
                                    x-text="lang.toUpperCase()"
                                ></button>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts - ORDER MATTERS! -->

    <!-- 0. Frontend type -->
    <script>window.FRONTEND_TYPE = '{{ frontend_type | default("store") }}';</script>

    <!-- 1. Log Configuration -->
    <script defer src="{{ url_for('static', path='shared/js/log-config.js') }}"></script>

    <!-- 2. Icons -->
    <script defer src="{{ url_for('static', path='shared/js/icons.js') }}"></script>

    <!-- 3. Utils -->
    <script defer src="{{ url_for('static', path='shared/js/utils.js') }}"></script>

    <!-- 4. API Client -->
    <script defer src="{{ url_for('static', path='shared/js/api-client.js') }}"></script>

    <!-- 5. Alpine.js v3 with CDN fallback -->
    <script>
    (function() {
        var script = document.createElement('script');
        script.defer = true;
        script.src = 'https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js';
        script.onerror = function() {
            console.warn('Alpine.js CDN failed, loading local copy...');
            var fallbackScript = document.createElement('script');
            fallbackScript.defer = true;
            fallbackScript.src = '{{ url_for("static", path="shared/js/lib/alpine.min.js") }}';
            document.head.appendChild(fallbackScript);
        };
        document.head.appendChild(script);
    })();
    </script>

    <!-- 6. Platform context for login -->
    <script>
        window.STORE_PLATFORM_CODE = {{ platform_code|tojson }};
    </script>

    <!-- 7. Store Login Logic -->
    <script defer src="{{ url_for('tenancy_static', path='store/js/login.js') }}"></script>

</body>
</html>
