<?php
declare(strict_types=1);

require_once __DIR__ . '/../config/bootstrap.php';

if (is_logged_in($conn)) {
    redirect(auth_preferred_landing_page($conn));
}

$flash = pull_flash();
$selectedDisplayMode = current_display_mode();
$currentLanguage = current_language();
$languageReturnTo = current_page_return('login.php');
$assetPath = dirname(__DIR__) . '/assets';
$cssVersion = is_file($assetPath . '/app.css') ? (string) filemtime($assetPath . '/app.css') : '1';
$pageTitle = localized_text_value('เข้าสู่ระบบ', 'Login');
$pageDescription = localized_text_value('ลงชื่อเข้าใช้เพื่อเข้าถึงงานจอง รายงาน และข้อมูลสาขา', 'Sign in to access bookings, reports and branch data.');
$displayModeTitle = localized_text_value('โหมดการแสดงผล', 'Display mode');
$usernameLabel = localized_text_value('ชื่อผู้ใช้', 'Username');
$passwordLabel = localized_text_value('รหัสผ่าน', 'Password');
$appLabel = localized_text_value('แอป', 'App');
$webLabel = localized_text_value('เว็บ', 'Web');
$languageLabel = localized_text_value('ภาษา', 'Language');
$usernamePlaceholder = localized_text_value('กรุณากรอกชื่อผู้ใช้', 'Please enter username');
$passwordPlaceholder = localized_text_value('กรุณากรอกรหัสผ่าน', 'Please enter password');
$loginButtonLabel = localized_text_value('เข้าสู่ระบบ', 'Login');
$contactLabel = 'Tel.';
$languageSwitcherLabel = localized_text_value('สลับภาษา', 'Language switcher');
$carCareLabel = localized_text_value('คาร์แคร์', 'Car Care');
?>
<!DOCTYPE html>
<html lang="<?= e(current_language_html_code()) ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#06213f">
    <title><?= e($pageTitle) ?> | CCW</title>
    <?= render_web_app_meta_tags() . "\n" ?>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="../assets/app.css?v=<?= e($cssVersion) ?>">
    <?= render_web_app_bootstrap_script() . "\n" ?>
</head>
<body class="page-login display-<?= e($selectedDisplayMode) ?> lang-<?= e($currentLanguage) ?>">
<main class="login-shell">
    <section class="login-card">
        <div class="login-header">
            <div class="login-brand-lockup">
                <span class="brand-mark login-brand-mark">CCW</span>
                <div class="login-brand-copy">
                    <strong>CCW</strong>
                    <span><?= e($carCareLabel) ?></span>
                </div>
            </div>

            <form class="language-switcher login-language-switcher" method="POST" action="../process/set_language.php" aria-label="<?= e($languageSwitcherLabel) ?>">
                <?= csrf_input('set_language') ?>
                <input type="hidden" name="return_to" value="<?= e($languageReturnTo) ?>">
                <span class="language-switcher-label"><?= e($languageLabel) ?></span>
                <span class="language-switcher-options">
                    <button class="language-switcher-button <?= $currentLanguage === 'th' ? 'is-active' : '' ?>" type="submit" name="language" value="th" aria-pressed="<?= $currentLanguage === 'th' ? 'true' : 'false' ?>">TH</button>
                    <button class="language-switcher-button <?= $currentLanguage === 'en' ? 'is-active' : '' ?>" type="submit" name="language" value="en" aria-pressed="<?= $currentLanguage === 'en' ? 'true' : 'false' ?>">EN</button>
                </span>
            </form>
        </div>

        <div class="login-copy">
            <h1><?= e($pageTitle) ?></h1>
            <p class="helper"><?= e($pageDescription) ?></p>
        </div>

        <?php if ($flash): ?>
            <div class="flash flash-<?= e((string) ($flash['type'] ?? 'success')) ?>">
                <span data-no-translate="1"><?= e(resolve_localized_flash_message($flash['message'] ?? '')) ?></span>
            </div>
        <?php endif; ?>

        <form method="POST" action="../process/login.php">
            <?= csrf_input('login') ?>
            <div class="display-mode-field" role="radiogroup" aria-labelledby="display_mode_label">
                <span id="display_mode_label" class="display-mode-title"><?= e($displayModeTitle) ?></span>
                <div class="display-mode-toggle">
                    <input id="display_mode_app" name="display_mode" type="radio" value="app" <?= $selectedDisplayMode === 'app' ? 'checked' : '' ?>>
                    <label class="display-mode-option" for="display_mode_app">
                        <svg class="display-mode-icon" viewBox="0 0 24 24" aria-hidden="true">
                            <rect x="8" y="3" width="8" height="18" rx="2"></rect>
                            <line x1="10.5" y1="6" x2="13.5" y2="6"></line>
                            <line x1="11" y1="18" x2="13" y2="18"></line>
                        </svg>
                        <span><?= e($appLabel) ?></span>
                    </label>

                    <input id="display_mode_web" name="display_mode" type="radio" value="web" <?= $selectedDisplayMode === 'web' ? 'checked' : '' ?>>
                    <label class="display-mode-option" for="display_mode_web">
                        <svg class="display-mode-icon" viewBox="0 0 24 24" aria-hidden="true">
                            <rect x="3" y="5" width="18" height="12" rx="1.8"></rect>
                            <line x1="8" y1="21" x2="16" y2="21"></line>
                            <line x1="12" y1="17" x2="12" y2="21"></line>
                        </svg>
                        <span><?= e($webLabel) ?></span>
                    </label>
                </div>
            </div>

            <section
                class="login-install-panel is-hidden"
                data-pwa-install-panel
                data-install-title=""
                data-install-message=""
                data-install-button-label=""
                data-dismiss-label=""
                data-ios-title=""
                data-ios-message=""
                data-ios-button-label=""
                hidden
            >
                <div class="login-install-panel-copy">
                    <strong data-pwa-install-title></strong>
                    <span data-pwa-install-message></span>
                </div>
                <div class="login-install-panel-actions">
                    <button class="button button-accent" type="button" data-pwa-install-button></button>
                    <button class="button button-secondary" type="button" data-pwa-install-dismiss></button>
                </div>
            </section>

            <div class="field">
                <label for="username"><?= e($usernameLabel) ?></label>
                <div class="login-input-wrap">
                    <span class="login-input-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24">
                            <path d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm0 2c-3.4 0-6.5 1.6-7.5 4.1a1 1 0 0 0 .9 1.4h13.2a1 1 0 0 0 .9-1.4C18.5 15.6 15.4 14 12 14Z"></path>
                        </svg>
                    </span>
                    <input id="username" name="username" type="text" autocomplete="username" placeholder="<?= e($usernamePlaceholder) ?>" required autofocus>
                </div>
            </div>

            <div class="field">
                <label for="password"><?= e($passwordLabel) ?></label>
                <div class="login-input-wrap">
                    <span class="login-input-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24">
                            <path d="M17 10h-1V8a4 4 0 1 0-8 0v2H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2Zm-7-2a2 2 0 1 1 4 0v2h-4Zm2 8.8a1.8 1.8 0 1 1 1.8-1.8 1.8 1.8 0 0 1-1.8 1.8Z"></path>
                        </svg>
                    </span>
                    <input id="password" name="password" type="password" autocomplete="current-password" placeholder="<?= e($passwordPlaceholder) ?>" required>
                </div>
            </div>

            <button class="button button-accent button-full login-submit-button" type="submit"><?= e($loginButtonLabel) ?></button>
        </form>

        <div class="login-footer">
            <p class="helper"><strong><?= e($contactLabel) ?></strong> 093 965 9871</p>
            <span class="login-version">CCW</span>
        </div>
    </section>
</main>
<script>
document.querySelectorAll('input[name="display_mode"]').forEach((input) => {
    input.addEventListener('change', () => {
        document.body.classList.toggle('display-app', input.value === 'app' && input.checked);
        document.body.classList.toggle('display-web', input.value === 'web' && input.checked);
    });
});
</script>
</body>
</html>
