// static/system/settings.js

function _esc(v) {
	return String(v === undefined || v === null ? '' : v)
		.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

function _validIp(ip) {
	const parts = String(ip).split('.');
	if (parts.length !== 4) return false;
	return parts.every(p => /^\d{1,3}$/.test(p) && parseInt(p, 10) <= 255);
}

function _msgDiv() {
	return document.getElementById('settings-msg');
}

function _msg(div, text, kind) {
	const colors = { error: 'red', ok: 'green', warn: 'orange', accent: 'var(--accent)' };
	div.innerHTML = `<p style="color:${colors[kind] || 'inherit'}; margin:10px 0;">${text}</p>`;
}

function _payloadFor(path, value) {
	const parts = path.split('.');
	if (parts.length === 1) return { [parts[0]]: value };
	return { [parts[0]]: { [parts[1]]: value } };
}

// <<< НОВОЕ: мгновенная запись значения при событии change (уход с поля / Enter)
function _bindImmediate(id, path, opts) {
	opts = opts || {};
	const el = document.getElementById(id);
	el.dataset.prev = el.value;
	
	el.addEventListener('change', async () => {
		const v = opts.raw ? el.value : el.value.trim();
		if (!opts.raw && v === el.dataset.prev) return;
		
		if (opts.clientCheck) {
			const err = opts.clientCheck(v);
			if (err) {
				_msg(_msgDiv(), err, 'error');
				el.value = el.dataset.prev;
				return;
			}
		}
		
		const ok = await _sendSettings(_payloadFor(path, v));
		if (ok) {
			el.dataset.prev = v;
			if (!opts.raw) el.value = v;
			_msg(_msgDiv(), opts.rebootRequired ? '✓ Сохранено. Вступит в силу после перезагрузки' : '✓ Сохранено', 'ok');
		} else {
			el.value = el.dataset.prev;
		}
	});
}

async function _sendSettings(payload) {
	try {
		const res = await fetch('/api/settings', { method: 'POST', body: JSON.stringify(payload) });
		const data = await res.json();
		if (res.ok && data.success) return true;
		_msg(_msgDiv(), 'Ошибка: ' + (data.error || 'не удалось сохранить'), 'error');
		return false;
	} catch (e) {
		_msg(_msgDiv(), 'Ошибка сети', 'error');
		return false;
	}
}

// <<< НОВОЕ: ребут только по желанию пользователя
async function _rebootDevice() {
	if (!confirm('Перезагрузить устройство?')) return;
	
	_msg(_msgDiv(), 'Устройство перезагружается...', 'warn');
	try { await fetch('/api/reboot', { method: 'POST' }); } catch (e) {}
	
	let n = 0;
	const t = setInterval(async () => {
		n++;
		try {
			const r = await fetch('/api/app?t=' + Date.now());
			if (r.ok) { clearInterval(t); window.location.reload(); }
		} catch (e) {}
		if (n >= 20) {
			clearInterval(t);
			_msg(_msgDiv(), 'Устройство не отвечает. Обновите страницу вручную (или подключитесь к его сети).', 'warn');
		}
	}, 3000);
}

window.renderSettings = async function(container) {
	container.innerHTML = '<div class="loading"><div class="spinner"></div><p>Загрузка...</p></div>';

	let s = null;
	try {
		const res = await fetch('/api/settings?t=' + Date.now());
		if (res.ok) s = await res.json();
	} catch (e) {}

	if (!s) {
		container.innerHTML = '<p style="color:red;">Ошибка загрузки настроек</p>';
		return;
	}

	container.innerHTML = `
		<div class="settings-page">
			<h2>Настройки</h2>

			<div class="settings-section">
				<h3>Устройство</h3>
				<label class="field"><span>Имя устройства</span>
					<input id="set-device-name" type="text" value="${_esc(s.device_name)}">
				</label>
				<p class="hint">Текущая версия: v${_esc((window.AquaScape.appInfo || {}).version || '0.0.0')}</p>
			</div>

			<div class="settings-section">
				<h3>Wi-Fi (клиент)</h3>
				<label class="field"><span>Имя сети (SSID)</span>
					<input id="set-ssid" type="text" value="${_esc(s.wifi.ssid)}">
				</label>
				<label class="field"><span>Пароль</span>
					<input id="set-password" class="pass-input" type="password" value="${_esc(s.wifi.password)}">
				</label>
				<p class="hint">Пустой пароль — подключение к открытой сети. Пустой SSID или сеть не найдена — устройство перейдёт в режим точки доступа.</p>
			</div>

			<div class="settings-section">
				<h3>Точка доступа</h3>
				<label class="field"><span>Имя точки (SSID)</span>
					<input id="set-ap-ssid" type="text" value="${_esc(s.wifi.ap_ssid)}">
				</label>
				<label class="field"><span>Пароль (минимум 8 символов)</span>
					<input id="set-ap-password" class="pass-input" type="password" value="${_esc(s.wifi.ap_password)}">
				</label>
				<label class="field"><span>IP-адрес</span>
					<input id="set-ap-ip" type="text" value="${_esc(s.wifi.ap_ip)}">
				</label>
			</div>

			<div class="settings-section">
				<h3>Оформление</h3>
				<div class="switch-row">
					<span>Тёмная тема</span>
					<label class="switch">
						<input id="set-theme" type="checkbox" ${s.ui.theme === 'dark' ? 'checked' : ''}>
						<span class="slider"></span>
					</label>
				</div>
			</div>

			<label class="show-pass"><input id="set-show-pass" type="checkbox"> Показать пароли</label>

			<div id="settings-msg"></div>
			<button class="reboot-btn" id="settings-reboot">Перезагрузить устройство</button>
		</div>`;

	// Мгновенная запись: STA без валидации, AP — примитивная
	_bindImmediate('set-device-name', 'device_name', { rebootRequired: true });
	_bindImmediate('set-ssid', 'wifi.ssid', { rebootRequired: true });
	_bindImmediate('set-password', 'wifi.password', { raw: true, rebootRequired: true });
	_bindImmediate('set-ap-ssid', 'wifi.ap_ssid', {
		rebootRequired: true,
		clientCheck: v => !v ? 'Имя точки доступа не может быть пустым' : null
	});
	_bindImmediate('set-ap-password', 'wifi.ap_password', {
		raw: true,
		rebootRequired: true,
		clientCheck: v => v.length < 8 ? 'Пароль точки доступа: минимум 8 символов' : null
	});
	_bindImmediate('set-ap-ip', 'wifi.ap_ip', {
		rebootRequired: true,
		clientCheck: v => !_validIp(v) ? 'Некорректный IP-адрес точки доступа' : null
	});

	// Тема — мгновенно и без ребута
	document.getElementById('set-theme').addEventListener('change', e => {
		const theme = e.target.checked ? 'dark' : 'light';
		window.AquaScape.applyTheme(theme);
		_sendSettings({ ui: { theme } });
	});

	document.getElementById('set-show-pass').addEventListener('change', e => {
		document.querySelectorAll('.pass-input').forEach(i => { i.type = e.target.checked ? 'text' : 'password'; });
	});

	document.getElementById('settings-reboot').addEventListener('click', _rebootDevice);
};