<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amebo — Login</title>

    <!-- Fonts & Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Bootstrap 5.3 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- App Styles -->
    <link rel="stylesheet" href="/public/toastify.min.css" />
    <link rel="stylesheet" href="/public/amebo.css">

    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- Toastify -->
    <script src="/public/toastify.js"></script>
</head>
<body>
    <div class="login-wrapper" x-data="{
        darkMode: $persist(false),
        init() {
            document.documentElement.setAttribute('data-bs-theme', this.darkMode ? 'dark' : 'light');
        }
    }">
        <div class="login-card" x-data="{
            loading: false,
            username: '',
            password: '',
            scheme: 'password',

            doLogin(){
                this.loading = true;
                fetch('/v8/tokens', {
                    method: 'POST',
                    credentials: 'include',
                    headers: {
                        'x-requested-with': '{{ctx.form_token}}',
                        'content-type': 'application/json'
                    },
                    body: JSON.stringify({
                        username: this.username,
                        password: this.password,
                        scheme: this.scheme
                    })
                }).then(res => {
                    if(res.status === 202) return res.json();
                    throw Error()
                }).then(data => {
                    Toastify({
                        text: 'Logged in successfully',
                        style: {background: 'linear-gradient(135deg, #51cf66, #20c997)', borderRadius: '8px', fontFamily: 'Inter, sans-serif', fontSize: '13px'}
                    }).showToast();
                    window.location = '/p/actions'
                }).catch(err => {
                    this.loading = false;
                    Toastify({
                        text: 'Login failed — check your credentials',
                        style: {background: 'linear-gradient(135deg, #ff6b6b, #ee5a24)', borderRadius: '8px', fontFamily: 'Inter, sans-serif', fontSize: '13px'}
                    }).showToast()
                })
            },

            doReset(){
                this.password = '';
                this.username = '';
            }
        }">
            <!-- Logo & Title -->
            <div class="text-center mb-4">
                <img src="/public/logo.svg" alt="Amebo" class="login-logo">
            </div>
            <h1>Amebo</h1>
            <p class="text-muted-custom text-sm mb-4">Sign in to your event notifications server</p>

            <!-- Auth Scheme Tabs -->
            <div class="login-tabs" x-effect="doReset()">
                <button type="button" :class="scheme === 'password' ? 'active' : ''"
                    @click="scheme = 'password'">
                    <span class="d-inline-flex align-items-center gap-1">
                        <span class="material-icons" style="font-size: 16px;">admin_panel_settings</span>
                        Administrator
                    </span>
                </button>
                <button type="button" :class="scheme === 'token' ? 'active' : ''"
                    @click="scheme = 'token'">
                    <span class="d-inline-flex align-items-center gap-1">
                        <span class="material-icons" style="font-size: 16px;">token</span>
                        Producer Token
                    </span>
                </button>
            </div>

            <!-- Admin Login -->
            <template x-if="scheme === 'password'">
                <div>
                    <div class="mb-3">
                        <label class="form-label-sm" for="admin-user">Username</label>
                        <input id="admin-user" type="text" class="form-control" x-model="username"
                            placeholder="Administrator username" @keyup.enter="doLogin">
                    </div>
                    <div class="mb-4">
                        <label class="form-label-sm" for="admin-pass">Password</label>
                        <input id="admin-pass" type="password" class="form-control" x-model="password"
                            placeholder="Enter admin password" @keyup.enter="doLogin">
                    </div>
                    <button type="button" class="btn btn-dark w-100" @click="doLogin" :disabled="loading">
                        <template x-if="!loading">
                            <span>Sign In as Administrator</span>
                        </template>
                        <template x-if="loading">
                            <span class="d-inline-flex align-items-center gap-2">
                                <span class="spinner-border spinner-border-sm"></span>
                                Signing in...
                            </span>
                        </template>
                    </button>
                </div>
            </template>

            <!-- Producer Login -->
            <template x-if="scheme === 'token'">
                <div>
                    <div class="mb-3">
                        <label class="form-label-sm" for="producer-name">Producer</label>
                        <input id="producer-name" type="text" class="form-control" x-model="username"
                            placeholder="Producer Name / ID" @keyup.enter="doLogin">
                    </div>
                    <div class="mb-4">
                        <label class="form-label-sm" for="producer-secret">Secret</label>
                        <textarea id="producer-secret" class="form-control" x-model="password"
                            placeholder="Paste producer secret key here..." rows="5"></textarea>
                    </div>
                    <button type="button" class="btn btn-dark w-100" @click="doLogin" :disabled="loading">
                        <template x-if="!loading">
                            <span>Sign In as Producer</span>
                        </template>
                        <template x-if="loading">
                            <span class="d-inline-flex align-items-center gap-2">
                                <span class="spinner-border spinner-border-sm"></span>
                                Signing in...
                            </span>
                        </template>
                    </button>
                </div>
            </template>

            <!-- Theme Toggle -->
            <div class="text-center mt-4">
                <button type="button" class="btn btn-link text-muted text-decoration-none text-sm"
                    @click="darkMode = !darkMode; document.documentElement.setAttribute('data-bs-theme', darkMode ? 'dark' : 'light')"
                    title="Toggle theme">
                    <span class="material-icons" style="font-size: 16px; vertical-align: middle;"
                        x-text="darkMode ? 'light_mode' : 'dark_mode'"></span>
                    <span x-text="darkMode ? 'Light Mode' : 'Dark Mode'"></span>
                </button>
            </div>
        </div>
    </div>
</body>
</html>
