<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<script>document.documentElement.setAttribute("data-bs-theme", localStorage.getItem("sg-theme") || "dark");</script>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login — Shoreguard</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.9/dist/cdn.min.js"></script>
    <style>
        body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
        .login-card { max-width: 380px; width: 100%; }
    </style>
</head>
<body>
    <div class="login-card" x-data="{
        email: '',
        password: '',
        error: '',
        loading: false,
        registrationEnabled: false,

        async init() {
            try {
                const d = await fetch('/api/auth/check').then(r => r.json());
                if (d.registration_enabled) this.registrationEnabled = true;
            } catch {}
        },

        async submit() {
            this.error = '';
            this.loading = true;
            try {
                const resp = await fetch('/api/auth/login', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ email: this.email.trim(), password: this.password }),
                });
                if (resp.ok) {
                    let next = new URLSearchParams(window.location.search).get('next') || '/';
                    if (!next.startsWith('/') || next.startsWith('//')) next = '/';
                    window.location.href = next;
                } else {
                    const body = await resp.json().catch(() => ({}));
                    this.error = body.detail || 'Invalid credentials';
                }
            } catch {
                this.error = 'Network error — is the server running?';
            } finally {
                this.loading = false;
            }
        }
    }">
        <div class="card sg-card-themed">
            <div class="card-body p-4">
                <div class="text-center mb-4">
                    <i class="bi bi-shield-check fs-1" style="color: var(--sg-accent)"></i>
                    <h4 class="mt-2 mb-1">Shoreguard</h4>
                    <p class="text-muted small">Sign in to continue.</p>
                </div>

                <form @submit.prevent="submit">
                    <div class="mb-3">
                        <input
                            type="email"
                            x-model="email"
                            class="form-control"
                            placeholder="Email"
                            autocomplete="email"
                            autofocus
                            required
                        >
                    </div>
                    <div class="mb-3">
                        <input
                            type="password"
                            x-model="password"
                            class="form-control"
                            placeholder="Password"
                            autocomplete="current-password"
                            required
                        >
                    </div>
                    <div x-show="error" x-text="error" class="text-danger small mb-3" x-cloak></div>
                    <button type="submit" class="btn btn-success w-100" :disabled="loading">
                        <i class="bi bi-box-arrow-in-right me-1"></i>Log in
                    </button>
                </form>

                <div class="text-center mt-3" x-show="registrationEnabled" x-cloak>
                    <a href="/register" class="text-muted small">Don't have an account? Register</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
