<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Вход и Регистрация | NEURO-BALLOON CORE</title>
<style>
body { font-family: 'Helvetica Neue', Arial, sans-serif; background: #fff5f8; display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 20px; box-sizing: border-box; }
.auth-container { background: white; padding: 40px 30px; border-radius: 16px; box-shadow: 0 10px 30px rgba(255, 105, 180, 0.1); width: 100%; max-width: 400px; box-sizing: border-box; text-align: center; border: 1px solid #ffd1dc; }
h2 { color: #333; margin-bottom: 25px; font-size: 24px; }
.form-group { text-align: left; margin-bottom: 18px; }
label { display: block; font-size: 13px; color: #666; margin-bottom: 6px; font-weight: bold; }
input { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; outline: none; box-sizing: border-box; transition: border 0.2s; }
input:focus { border-color: #ff69b4; }
.btn-submit { background: #ff69b4; color: white; border: none; width: 100%; padding: 14px; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; margin-top: 10px; transition: background 0.2s; }
.btn-submit:hover { background: #ff4593; }
.toggle-text { margin-top: 20px; font-size: 14px; color: #888; }
.toggle-link { color: #ff69b4; text-decoration: none; font-weight: bold; cursor: pointer; }
.alert-box { display: none; padding: 12px; border-radius: 8px; font-size: 13px; margin-bottom: 15px; text-align: left; }
.alert-error { background: #fff0f2; color: #d9383a; border: 1px solid #fcd3d5; }
.alert-success { background: #f0fff4; color: #1e7e34; border: 1px solid #c3e6cb; }
</style>
</head>
<body>

<div class="auth-container">
<div style="font-size: 40px; margin-bottom: 10px;">🎈</div>
<h2 id="form-title">Вход в SaaS Панель</h2>

<div id="alert" class="alert-box"></div>

<form id="auth-form" onsubmit="handleSubmit(event)">
<div class="form-group" id="group-company" style="display: none;">
<label for="companyName">Название студии аэродизайна</label>
<input type="text" id="companyName" placeholder="Например, Balloon Dog">
</div>

<div class="form-group" id="group-domain" style="display: none;">
<label for="domain">Домен вашего сайта</label>
<input type="text" id="domain" placeholder="balloondog.ru">
</div>

<div class="form-group">
<label for="email">Электронная почта (Email)</label>
<input type="email" id="email" required placeholder="name@example.com" value="sktvl84@gmail.com">
</div>

<div class="form-group">
<label for="password">Пароль</label>
<input type="password" id="password" required placeholder="••••••••" value="123456">
</div>

<button type="submit" id="btn-text" class="btn-submit">Войти</button>
</form>


<div class="toggle-text" id="toggle-container">
Еще нет аккаунта? <span class="toggle-link" onclick="switchMode('register')">Зарегистрироваться</span>
</div>
</div>

<script>
const gateUrl = "ai-gate.php";
let currentMode = "login";

function switchMode(mode) {
currentMode = mode;
const alertBox = document.getElementById('alert');
alertBox.style.display = "none";

if (mode === "register") {
document.getElementById('form-title').innerText = "Регистрация в SaaS";
document.getElementById('group-company').style.display = "block";
document.getElementById('group-domain').style.display = "block";
document.getElementById('btn-text').innerText = "Создать аккаунт";
document.getElementById('toggle-container').innerHTML = 'Уже есть аккаунт? <span class="toggle-link" onclick="switchMode(\'login\')">Войти</span>';
document.getElementById('companyName').required = true;
} else {
document.getElementById('form-title').innerText = "Вход в SaaS Панель";
document.getElementById('group-company').style.display = "none";
document.getElementById('group-domain').style.display = "none";
document.getElementById('btn-text').innerText = "Войти";
document.getElementById('toggle-container').innerHTML = 'Еще нет аккаунта? <span class="toggle-link" onclick="switchMode(\'register\')">Зарегистрироваться</span>';
document.getElementById('companyName').required = false;
}
}

function handleSubmit(e) {
e.preventDefault();
const alertBox = document.getElementById('alert');
alertBox.style.display = "none";

const email = document.getElementById('email').value.trim();
const password = document.getElementById('password').value.trim();

const payload = {
action: currentMode,
email: email,
password: password
};

if (currentMode === "register") {
payload.companyName = document.getElementById('companyName').value.trim();
payload.domain = document.getElementById('domain').value.trim();
}

document.getElementById('btn-text').innerText = "Загрузка...";
document.getElementById('btn-text').disabled = true;

fetch(gateUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload)
})
.then(function(res) {
return res.text(); // Сначала читаем как текст, предотвращая краш парсера
})
.then(function(text) {
document.getElementById('btn-text').disabled = false;
document.getElementById('btn-text').innerText = currentMode === "login" ? "Войти" : "Создать аккаунт";

if (!text || text.trim() === "") {
alertBox.className = "alert-box alert-error";
alertBox.innerText = "❌ Сервер вернул пустой ответ. Проверьте развертывание Google Script.";
alertBox.style.display = "block";
return;
}

var data;
try {
data = JSON.parse(text);
} catch(jsonErr) {
alertBox.className = "alert-box alert-error";
alertBox.innerText = "❌ Ошибка JSON. Ответ сервера: " + text;
alertBox.style.display = "block";
return;
}

if (data.success && data.token) {
alertBox.className = "alert-box alert-success";
alertBox.innerText = currentMode === "login" ? "Успешный вход! Перенаправление..." : "Регистрация успешна! Входим...";
alertBox.style.display = "block";

localStorage.setItem('saas_public_token', data.token);

setTimeout(function() {
window.location.href = "dashboard.html";
}, 1000);
} else {
alertBox.className = "alert-box alert-error";
alertBox.innerText = data.error || "Неверный Email или Пароль!";
alertBox.style.display = "block";
}
})
.catch(function(err) {
document.getElementById('btn-text').disabled = false;
document.getElementById('btn-text').innerText = currentMode === "login" ? "Войти" : "Создать аккаунт";
alertBox.className = "alert-box alert-error";
alertBox.innerText = "Ошибка соединения со шлюзом: " + err.toString();
alertBox.style.display = "block";
});
}
</script>
</body>
</html>