<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 头部内容 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PPanel - Application Initialization</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Tailwind CSS 配置 -->
    <script>
        tailwind.config = {
            darkMode: ["class"],
            theme: {
                container: { center: true, padding: "2rem" },
                extend: {
                    colors: {
                        border: "hsl(var(--border))",
                        input: "hsl(var(--input))",
                        ring: "hsl(var(--ring))",
                        background: "hsl(var(--background))",
                        foreground: "hsl(var(--foreground))",
                        primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
                        destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))" },
                    },
                    borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)" },
                },
            },
        }
    </script>
    <!-- 自定义样式 -->
    <style>
        :root {
            --background: 0 0% 100%;
            --foreground: 222.2 84% 4.9%;
            --border: 214.3 31.8% 91.4%;
            --input: 214.3 31.8% 91.4%;
            --ring: 221.2 83.2% 53.3%;
            --radius: 0.5rem;
            --primary: 221.2 83.2% 53.3%;
            --primary-foreground: 210 40% 98%;
            --destructive: 346.8 77.2% 49.8%;
            --destructive-foreground: 355.7 100% 97.3%;
        }
        .dark {
            --background: 222.2 84% 4.9%;
            --foreground: 210 40% 98%;
        }
        body {
            background-color: hsl(var(--background));
            color: hsl(var(--foreground));
        }
    </style>
</head>
<body class="min-h-screen font-sans antialiased">
<div id="appContainer" class="container mx-auto p-4 flex flex-col items-center min-h-screen">
    <div class="w-full max-w-2xl space-y-6">
        <!-- 设置卡片 -->
        <div id="setupCard" class="p-6 space-y-6 bg-white rounded-lg border">
            <div class="flex justify-between items-center">
                <h1 id="title" class="text-3xl font-bold">Welcome to PPanel Setup</h1>
                <button onclick="switchLanguage()" id="langSwitch" class="h-10 px-4 py-2 border rounded-md text-sm font-medium bg-background hover:bg-accent hover:text-accent-foreground">中文</button>
            </div>
            <p id="description" class="text-gray-600 !mt-0">Let's get your PPanel application up and running. Please provide the necessary information below.</p>

            <form id="setupForm" class="space-y-6" onsubmit="handleSubmit(event)">
                <!-- 管理员详情 -->
                <div class="space-y-4">
                    <h2 id="adminInfoTitle" class="font-bold text-xl">Administrator Details</h2>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="adminEmail" id="labelAdminEmail" class="text-sm font-medium">Administrator Email</label>
                            <input type="email" id="adminEmail" name="adminEmail" required class="input-field mt-1 block w-full rounded-md border px-3 py-2" placeholder="Enter administrator email" data-placeholder-en="Enter administrator email" data-placeholder-zh="请输入管理员邮箱" oninput="validateInput(this)">
                            <span id="adminEmailError" class="text-red-500 text-sm mt-1 hidden">Invalid email address.</span>
                        </div>
                        <div>
                            <label for="adminPassword" id="labelAdminPassword" class="text-sm font-medium">Administrator Password</label>
                            <input type="password" id="adminPassword" name="adminPassword" required minlength="6" class="input-field mt-1 block w-full rounded-md border px-3 py-2" placeholder="Enter administrator password" data-placeholder-en="Enter administrator password" data-placeholder-zh="请输入管理员密码" oninput="validateInput(this)">
                            <span id="adminPasswordError" class="text-red-500 text-sm mt-1 hidden">Password must be at least 6 characters.</span>
                        </div>
                    </div>
                </div>

                <!-- MySQL 数据库设置 -->
                <div class="space-y-4">
                    <div class="flex justify-between items-center">
                        <h2 id="mysqlInfoTitle" class="font-bold text-xl">MySQL Database Setup</h2>
                        <button type="button" onclick="testConnection('mysql')" id="testMySQLButton" class="h-10 px-4 py-2 border rounded-md text-sm font-medium bg-background hover:bg-accent hover:text-accent-foreground">Test MySQL Connection</button>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="mysqlHost" id="labelMysqlHost" class="text-sm font-medium">Database Host</label>
                            <input type="text" id="mysqlHost" name="mysqlHost" required class="input-field mt-1 block w-full rounded-md border px-3 py-2" value="localhost" placeholder="Enter database host" data-placeholder-en="Enter database host" data-placeholder-zh="请输入数据库主机">
                            <span id="mysqlHostError" class="text-red-500 text-sm mt-1 hidden">Please enter a valid host.</span>
                        </div>
                        <div>
                            <label for="mysqlPort" id="labelMysqlPort" class="text-sm font-medium">Database Port</label>
                            <input type="number" id="mysqlPort" name="mysqlPort" required min="1" max="65535" class="input-field mt-1 block w-full rounded-md border px-3 py-2" value="3306" placeholder="Enter database port" data-placeholder-en="Enter database port" data-placeholder-zh="请输入数据库端口">
                            <span id="mysqlPortError" class="text-red-500 text-sm mt-1 hidden">Please enter a valid port number.</span>
                        </div>
                        <div>
                            <label for="mysqlUser" id="labelMysqlUser" class="text-sm font-medium">Database User</label>
                            <input type="text" id="mysqlUser" name="mysqlUser" required class="input-field mt-1 block w-full rounded-md border px-3 py-2" value="root" placeholder="Enter database user" data-placeholder-en="Enter database user" data-placeholder-zh="请输入数据库用户名">
                            <span id="mysqlUserError" class="text-red-500 text-sm mt-1 hidden">Please enter a username.</span>
                        </div>
                        <div>
                            <label for="mysqlPassword" id="labelMysqlPassword" class="text-sm font-medium">Database Password</label>
                            <input type="password" id="mysqlPassword" name="mysqlPassword" class="input-field mt-1 block w-full rounded-md border px-3 py-2" placeholder="Enter database password" data-placeholder-en="Enter database password" data-placeholder-zh="请输入数据库密码">
                        </div>
                        <div>
                            <label for="mysqlDatabase" id="labelMysqlDatabase" class="text-sm font-medium">Database Name</label>
                            <input type="text" id="mysqlDatabase" name="mysqlDatabase" required class="input-field mt-1 block w-full rounded-md border px-3 py-2" value="ppanel_db" placeholder="Enter database name" data-placeholder-en="Enter database name" data-placeholder-zh="请输入数据库名称">
                            <span id="mysqlDatabaseError" class="text-red-500 text-sm mt-1 hidden">Please enter a database name.</span>
                        </div>
                    </div>
                </div>

                <!-- Redis 缓存设置 -->
                <div class="space-y-4">
                    <div class="flex justify-between items-center">
                        <h2 id="redisInfoTitle" class="font-bold text-xl">Redis Cache Setup</h2>
                        <button type="button" onclick="testConnection('redis')" id="testRedisButton" class="h-10 px-4 py-2 border rounded-md text-sm font-medium bg-background hover:bg-accent hover:text-accent-foreground">Test Redis Connection</button>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="redisHost" id="labelRedisHost" class="text-sm font-medium">Redis Host</label>
                            <input type="text" id="redisHost" name="redisHost" required class="input-field mt-1 block w-full rounded-md border px-3 py-2" value="127.0.0.1" placeholder="Enter Redis host" data-placeholder-en="Enter Redis host" data-placeholder-zh="请输入 Redis 主机">
                            <span id="redisHostError" class="text-red-500 text-sm mt-1 hidden">Please enter a valid host.</span>
                        </div>
                        <div>
                            <label for="redisPort" id="labelRedisPort" class="text-sm font-medium">Redis Port</label>
                            <input type="number" id="redisPort" name="redisPort" required min="1" max="65535" class="input-field mt-1 block w-full rounded-md border px-3 py-2" value="6379" placeholder="Enter Redis port" data-placeholder-en="Enter Redis port" data-placeholder-zh="请输入 Redis 端口">
                            <span id="redisPortError" class="text-red-500 text-sm mt-1 hidden">Please enter a valid port number.</span>
                        </div>
                        <div>
                            <label for="redisPassword" id="labelRedisPassword" class="text-sm font-medium">Redis Password</label>
                            <input type="password" id="redisPassword" name="redisPassword" class="input-field mt-1 block w-full rounded-md border px-3 py-2" placeholder="Enter Redis password (optional)" data-placeholder-en="Enter Redis password (optional)" data-placeholder-zh="请输入 Redis 密码（可选）">
                        </div>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <button type="submit" id="submitButton" disabled class="w-full h-10 px-4 py-2 bg-primary text-white rounded-md opacity-50 cursor-not-allowed">Start Initialization</button>
            </form>
        </div>
    </div>
</div>

<!-- 安装中卡片 -->
<div id="installingCard" class="fixed inset-0 flex items-center justify-center bg-white p-6 hidden">
    <div class="w-full max-w-md space-y-6 text-center">
        <h1 id="installingTitle" class="text-3xl font-bold">Installing...</h1>
        <p id="installingMessage">Please wait while we initialize your application.</p>
        <div class="flex justify-center">
            <svg class="animate-spin h-10 w-10 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
            </svg>
        </div>
    </div>
</div>

<!-- 安装完成卡片 -->
<div id="installationCompleteCard" class="fixed inset-0 flex items-center justify-center bg-white p-6 hidden">
    <div class="w-full max-w-md space-y-6 text-center">
        <h1 id="installationCompleteTitle" class="text-3xl font-bold">Installation Complete</h1>
        <p id="installationCompleteMessage">You can now close this page.</p>
    </div>
</div>

<!-- 已初始化页面 -->
<div id="alreadyInitializedCard" class="fixed inset-0 flex items-center justify-center bg-white p-6 hidden">
    <div class="w-full max-w-md space-y-6 text-center">
        <h1 id="alreadyInitializedTitle" class="text-3xl font-bold">Already Initialized</h1>
        <p id="alreadyInitializedMessage">Your PPanel application has already been initialized.</p>
    </div>
</div>

<!-- 对话框 -->
<div id="dialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
    <div class="bg-white rounded-lg p-6 w-96">
        <h2 id="dialogTitle" class="text-xl font-bold mb-4"></h2>
        <p id="dialogMessage" class="mb-4"></p>
        <div class="flex justify-end">
            <button onclick="closeDialog()" class="h-10 px-4 py-2 bg-primary text-white rounded-md">Close</button>
        </div>
    </div>
</div>

<!-- JavaScript -->
<script>
    let currentLang = 'en';
    const translations = {
        en: {
            // 英文翻译内容
            title: 'Welcome to PPanel Setup',
            description: "Let's get your PPanel application up and running. Please provide the necessary information below.",
            adminInfoTitle: 'Administrator Details',
            mysqlInfoTitle: 'MySQL Database Setup',
            redisInfoTitle: 'Redis Cache Setup',
            adminEmail: 'Administrator Email',
            adminPassword: 'Administrator Password',
            mysqlHost: 'Database Host',
            mysqlPort: 'Database Port',
            mysqlUser: 'Database User',
            mysqlPassword: 'Database Password',
            mysqlDatabase: 'Database Name',
            redisHost: 'Redis Host',
            redisPort: 'Redis Port',
            redisPassword: 'Redis Password',
            submit: 'Start Initialization',
            switchLang: '中文',
            testMySQLConnection: 'Test MySQL Connection',
            testRedisConnection: 'Test Redis Connection',
            connectionSuccess: 'Connection Successful',
            connectionError: 'Connection Failed',
            initializationError: 'Initialization Error',
            initializationErrorMessage: 'An error occurred during initialization. Please try again.',
            installingTitle: 'Installing...',
            installingMessage: 'Please wait while we initialize your application.',
            installationCompleteTitle: 'Installation Complete',
            installationCompleteMessage: 'You can now close this page.',
            proceedButton: 'Go to Application',
            mysqlConnectionSuccess: 'Successfully connected to the MySQL database.',
            mysqlConnectionError: 'Failed to connect to the MySQL database. Please check your settings.',
            redisConnectionSuccess: 'Successfully connected to the Redis server.',
            redisConnectionError: 'Failed to connect to the Redis server. Please check your settings.',
            alreadyInitializedTitle: 'Already Initialized',
            alreadyInitializedMessage: 'Your PPanel application has already been initialized.',
            invalidEmail: 'Invalid email address.',
            invalidPassword: 'Password must be at least 6 characters.',
        },
        zh: {
            // 中文翻译内容
            title: '欢迎使用 PPanel 设置向导',
            description: '让我们一起启动您的 PPanel 应用程序。请提供以下必要信息。',
            adminInfoTitle: '管理员详情',
            mysqlInfoTitle: 'MySQL 数据库设置',
            redisInfoTitle: 'Redis 缓存设置',
            adminEmail: '管理员邮箱',
            adminPassword: '管理员密码',
            mysqlHost: '数据库主机',
            mysqlPort: '数据库端口',
            mysqlUser: '数据库用户',
            mysqlPassword: '数据库密码',
            mysqlDatabase: '数据库名称',
            redisHost: 'Redis 主机',
            redisPort: 'Redis 端口',
            redisPassword: 'Redis 密码',
            submit: '开始初始化',
            switchLang: 'English',
            testMySQLConnection: '测试 MySQL 连接',
            testRedisConnection: '测试 Redis 连接',
            connectionSuccess: '连接成功',
            connectionError: '连接失败',
            initializationError: '初始化错误',
            initializationErrorMessage: '初始化过程中发生错误。请重试。',
            installingTitle: '正在安装...',
            installingMessage: '请稍候，我们正在初始化您的应用程序。',
            installationCompleteTitle: '安装完成',
            installationCompleteMessage: '您现在可以关闭此页面。',
            proceedButton: '前往应用程序',
            mysqlConnectionSuccess: '成功连接到 MySQL 数据库。',
            mysqlConnectionError: '无法连接到 MySQL 数据库。请检查您的设置。',
            redisConnectionSuccess: '成功连接到 Redis 服务器。',
            redisConnectionError: '无法连接到 Redis 服务器。请检查您的设置。',
            alreadyInitializedTitle: '已初始化',
            alreadyInitializedMessage: '您的 PPanel 应用程序已被初始化。',
            invalidEmail: '无效的邮箱地址。',
            invalidPassword: '密码至少需要6个字符。',
        }
    };

    function switchLanguage() {
        currentLang = currentLang === 'en' ? 'zh' : 'en';
        updateTexts();
    }

    function updateTexts() {
        const t = translations[currentLang];
        document.getElementById('title').textContent = t.title;
        document.getElementById('description').textContent = t.description;
        document.getElementById('adminInfoTitle').textContent = t.adminInfoTitle;
        document.getElementById('mysqlInfoTitle').textContent = t.mysqlInfoTitle;
        document.getElementById('redisInfoTitle').textContent = t.redisInfoTitle;
        document.getElementById('labelAdminEmail').textContent = t.adminEmail;
        document.getElementById('labelAdminPassword').textContent = t.adminPassword;
        document.getElementById('labelMysqlHost').textContent = t.mysqlHost;
        document.getElementById('labelMysqlPort').textContent = t.mysqlPort;
        document.getElementById('labelMysqlUser').textContent = t.mysqlUser;
        document.getElementById('labelMysqlPassword').textContent = t.mysqlPassword;
        document.getElementById('labelMysqlDatabase').textContent = t.mysqlDatabase;
        document.getElementById('labelRedisHost').textContent = t.redisHost;
        document.getElementById('labelRedisPort').textContent = t.redisPort;
        document.getElementById('labelRedisPassword').textContent = t.redisPassword;
        document.getElementById('submitButton').textContent = t.submit;
        document.getElementById('langSwitch').textContent = t.switchLang;
        document.getElementById('testMySQLButton').textContent = t.testMySQLConnection;
        document.getElementById('testRedisButton').textContent = t.testRedisConnection;
        document.getElementById('installingTitle').textContent = t.installingTitle;
        document.getElementById('installingMessage').textContent = t.installingMessage;
        document.getElementById('installationCompleteTitle').textContent = t.installationCompleteTitle;
        document.getElementById('installationCompleteMessage').textContent = t.installationCompleteMessage;
        document.getElementById('alreadyInitializedTitle').textContent = t.alreadyInitializedTitle;
        document.getElementById('alreadyInitializedMessage').textContent = t.alreadyInitializedMessage;

        // 更新 placeholder 文本
        const inputs = document.querySelectorAll('.input-field');
        inputs.forEach((input) => {
            const placeholder = input.getAttribute(`data-placeholder-${currentLang}`);
            if (placeholder) {
                input.setAttribute('placeholder', placeholder);
            }
        });
    }

    function checkInitialization() {
        const isInitialized = false; // 需要从服务器获取实际状态
        if (isInitialized) {
            document.getElementById('appContainer').classList.add('hidden');
            document.getElementById('alreadyInitializedCard').classList.remove('hidden');
        }
    }

    function testConnection(type) {
        const t = translations[currentLang];
        let data = {};
        let url = '';
        if (type === 'mysql') {
            data = {
                host: document.getElementById('mysqlHost').value,
                port: document.getElementById('mysqlPort').value,
                user: document.getElementById('mysqlUser').value,
                password: document.getElementById('mysqlPassword').value,
                database: document.getElementById('mysqlDatabase').value,
            };
            url = '/init/mysql/test';
        } else if (type === 'redis') {
            data = {
                host: document.getElementById('redisHost').value,
                port: document.getElementById('redisPort').value,
                password: document.getElementById('redisPassword').value,
            };
            url = '/init/redis/test';
        }

        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
        })
            .then(response => response.json())
            .then(result => {
                console.log(result);
                if (result.code === 200 && result.status) {
                    showDialog(t.connectionSuccess, result.msg || (type === 'mysql' ? t.mysqlConnectionSuccess : t.redisConnectionSuccess));
                } else {
                    showDialog(t.connectionError, result.msg || (type === 'mysql' ? t.mysqlConnectionError : t.redisConnectionError));
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showDialog(t.connectionError, t.initializationErrorMessage);
            });
    }

    function handleSubmit(event) {
        event.preventDefault();
        const form = document.getElementById('setupForm');
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }
        const t = translations[currentLang];
        const formData = new FormData(form);
        const data = Object.fromEntries(formData.entries());

        // 显示安装中界面
        document.getElementById('setupCard').classList.add('hidden');
        document.getElementById('installingCard').classList.remove('hidden');

        // 发送初始化请求
        fetch('/init/config', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
        })
            .then(response => response.json())
            .then(result => {
                document.getElementById('installingCard').classList.add('hidden');
                if (result.code === 200 && result.status) {
                    document.getElementById('installationCompleteCard').classList.remove('hidden');
                } else {
                    showDialog(t.initializationError, result.msg || t.initializationErrorMessage);
                    document.getElementById('setupCard').classList.remove('hidden');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('installingCard').classList.add('hidden');
                showDialog(t.initializationError, t.initializationErrorMessage);
                document.getElementById('setupCard').classList.remove('hidden');
            });
    }

    function showDialog(title, message) {
        document.getElementById('dialogTitle').textContent = title;
        document.getElementById('dialogMessage').textContent = message;
        document.getElementById('dialog').classList.remove('hidden');
    }

    function closeDialog() {
        document.getElementById('dialog').classList.add('hidden');
    }

    // 实时表单校验
    function validateInput(input) {
        const errorSpan = document.getElementById(input.id + 'Error');

        if (input.type === 'email') {
            // 邮箱格式验证
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(input.value)) {
                errorSpan.textContent = translations[currentLang].invalidEmail;
                errorSpan.classList.remove('hidden');
                input.setCustomValidity(translations[currentLang].invalidEmail);
            } else {
                input.setCustomValidity('');
                errorSpan.classList.add('hidden');
            }
        } else if (input.validity.valid) {
            errorSpan.classList.add('hidden');
            input.setCustomValidity('');
        } else {
            errorSpan.classList.remove('hidden');
        }

        updateSubmitButtonState();
    }

    function updateSubmitButtonState() {
        const form = document.getElementById('setupForm');
        const submitButton = document.getElementById('submitButton');
        if (form.checkValidity()) {
            submitButton.disabled = false;
            submitButton.classList.remove('opacity-50', 'cursor-not-allowed');
        } else {
            submitButton.disabled = true;
            submitButton.classList.add('opacity-50', 'cursor-not-allowed');
        }
    }

    // 添加事件监听器
    document.addEventListener('DOMContentLoaded', () => {
        const inputs = document.querySelectorAll('.input-field');
        inputs.forEach((input) => {
            input.addEventListener('input', () => validateInput(input));
        });
        updateSubmitButtonState();
        updateTexts();
        checkInitialization();
    });
</script>
</body>
</html>
