{% include 'overall_header.html' %}

<h1>{{ lang('ACP_TURNSTILE_TITLE') }}</h1>

<p>{{ lang('ACP_TURNSTILE_DESCRIPTION') }} <a href="https://icecorp.nz/cloudflare-turnstile">{{ lang('TURNSTILE_DOCUMENTATION') }} →</a></p>

{% if S_ERROR %}
<div class="errorbox">
	<h3>{{ lang('WARNING') }}</h3>
	<p>{{ ERROR_MSG }}</p>
</div>
{% endif %}

<fieldset>
	<legend>{{ lang('TURNSTILE_STATUS') }}</legend>
	<dl>
		<dt><strong>{{ lang('TURNSTILE_SITEKEY_STATUS') }}{{ lang('COLON') }}</strong></dt>
		<dd><span id="sitekey-status" style="color: #666;">⟳ {{ lang('TURNSTILE_STATUS_CHECKING') }}</span></dd>
	</dl>
	<dl>
		<dt><strong>{{ lang('TURNSTILE_SECRET_STATUS') }}{{ lang('COLON') }}</strong></dt>
		<dd><span id="secret-status" style="color: #666;">⟳ {{ lang('TURNSTILE_STATUS_CHECKING') }}</span></dd>
	</dl>
	<dl>
		<dt><strong>{{ lang('TURNSTILE_REGISTRATION_STATUS') }}{{ lang('COLON') }}</strong></dt>
		<dd>
			{% if S_REGISTRATION_ACTIVE %}
				<span style="color: green;">✓ {{ lang('TURNSTILE_REGISTRATION_ACTIVE') }}</span>
			{% else %}
				<span style="color: red;">✗ {{ lang('TURNSTILE_REGISTRATION_INACTIVE') }}</span>
				— <a href="{{ U_SPAMBOT_COUNTERMEASURES }}">{{ lang('TURNSTILE_GOTO_SPAMBOT') }}</a>
			{% endif %}
		</dd>
	</dl>
	<dl>
		<dt><strong>{{ lang('TURNSTILE_LOGIN_STATUS_LABEL') }}{{ lang('COLON') }}</strong></dt>
		<dd>
			{% if S_LOGIN_MISCONFIGURED %}
				<span style="color: red;">✗ {{ lang('TURNSTILE_LOGIN_STATUS_INACTIVE') }}</span>
				— <a href="{{ U_SPAMBOT_COUNTERMEASURES }}">{{ lang('TURNSTILE_GOTO_SPAMBOT') }}</a>
			{% elseif TURNSTILE_LOGIN_MODE == 1 %}
				<span style="color: green;">✓ {{ lang('TURNSTILE_LOGIN_STATUS_ALWAYS') }}</span>
			{% else %}
				<span style="color: green;">✓ {{ lang('TURNSTILE_LOGIN_STATUS_OFF') }}</span>
			{% endif %}
		</dd>
	</dl>
	<dl>
		<dt><strong>{{ lang('TURNSTILE_UPDATE_STATUS') }}{{ lang('COLON') }}</strong></dt>
		<dd>
			<span id="update-status">
				{% if TURNSTILE_UPDATE_VERSION %}
					<span style="color: #f57c00;">⬆ {{ lang('TURNSTILE_UPDATE_AVAILABLE', TURNSTILE_UPDATE_VERSION) }}</span>
					— <a href="https://icecorp.nz/cloudflare-turnstile">{{ lang('TURNSTILE_UPDATE_DOWNLOAD') }}</a>
				{% else %}
					<span style="color: green;">✓ {{ lang('TURNSTILE_UPDATE_UP_TO_DATE') }}</span> ({{ TURNSTILE_CURRENT_VERSION }})
				{% endif %}
			</span>
			<br><small>{{ lang('TURNSTILE_UPDATE_LAST_CHECKED') }}{{ lang('COLON') }} <span id="update-last">{{ TURNSTILE_UPDATE_LAST }}</span>
			— <a href="#" id="check-update-btn">{{ lang('TURNSTILE_UPDATE_CHECK_NOW') }}</a></small>
		</dd>
	</dl>
</fieldset>

{# Hidden container for site key validation widget #}
{% if TURNSTILE_SITEKEY %}
<div id="sitekey-test-container" style="position: absolute; left: -9999px; top: -9999px; visibility: hidden;">
	<div id="sitekey-test-widget"></div>
</div>
{% endif %}

<form id="turnstile_settings" method="post" action="{{ U_ACTION }}">

	<fieldset>
		<legend>{{ lang('TURNSTILE_API_KEYS') }}</legend>

		<dl>
			<dt><label for="icecorp_turnstile_sitekey">{{ lang('TURNSTILE_SITEKEY') }}{{ lang('COLON') }}</label><br>
				<span>{{ lang('TURNSTILE_SITEKEY_EXPLAIN') }}</span>
			</dt>
			<dd><input type="text" id="icecorp_turnstile_sitekey" name="icecorp_turnstile_sitekey" value="{{ TURNSTILE_SITEKEY }}" size="50" maxlength="255" class="text long" /></dd>
		</dl>

		<dl>
			<dt><label for="icecorp_turnstile_secret">{{ lang('TURNSTILE_SECRET') }}{{ lang('COLON') }}</label><br>
				<span>{{ lang('TURNSTILE_SECRET_EXPLAIN') }}</span>
			</dt>
			<dd><input type="password" id="icecorp_turnstile_secret" name="icecorp_turnstile_secret" value="{{ TURNSTILE_SECRET }}" size="50" maxlength="255" class="text long" autocomplete="off" /></dd>
		</dl>
	</fieldset>

	<fieldset>
		<legend>{{ lang('TURNSTILE_WIDGET_BEHAVIOR') }}</legend>

		<dl>
			<dt><label for="icecorp_turnstile_widget_type">{{ lang('TURNSTILE_WIDGET_TYPE') }}{{ lang('COLON') }}</label><br>
				<span>{{ lang('TURNSTILE_WIDGET_TYPE_EXPLAIN') }}</span>
			</dt>
			<dd>
				<select id="icecorp_turnstile_widget_type" name="icecorp_turnstile_widget_type" onchange="updateTurnstilePreview();">
					<option value="checkbox"{% if TURNSTILE_WIDGET_TYPE == 'checkbox' %} selected="selected"{% endif %}>{{ lang('TURNSTILE_WIDGET_CHECKBOX') }}</option>
					<option value="invisible"{% if TURNSTILE_WIDGET_TYPE == 'invisible' %} selected="selected"{% endif %}>{{ lang('TURNSTILE_WIDGET_INVISIBLE') }}</option>
				</select>
			</dd>
		</dl>

		<dl>
			<dt><label for="icecorp_turnstile_theme">{{ lang('TURNSTILE_THEME') }}{{ lang('COLON') }}</label><br>
				<span>{{ lang('TURNSTILE_THEME_EXPLAIN') }}</span>
			</dt>
			<dd>
				<select id="icecorp_turnstile_theme" name="icecorp_turnstile_theme" onchange="updateTurnstilePreview();">
					<option value="auto"{% if TURNSTILE_THEME == 'auto' %} selected="selected"{% endif %}>{{ lang('TURNSTILE_THEME_AUTO') }}</option>
					<option value="light"{% if TURNSTILE_THEME == 'light' %} selected="selected"{% endif %}>{{ lang('TURNSTILE_THEME_LIGHT') }}</option>
					<option value="dark"{% if TURNSTILE_THEME == 'dark' %} selected="selected"{% endif %}>{{ lang('TURNSTILE_THEME_DARK') }}</option>
				</select>
			</dd>
		</dl>

		<dl>
			<dt><label for="icecorp_turnstile_widget_size">{{ lang('TURNSTILE_WIDGET_SIZE') }}{{ lang('COLON') }}</label><br>
				<span>{{ lang('TURNSTILE_WIDGET_SIZE_EXPLAIN') }}</span>
			</dt>
			<dd>
				<select id="icecorp_turnstile_widget_size" name="icecorp_turnstile_widget_size" onchange="updateTurnstilePreview();">
					<option value="100"{% if TURNSTILE_WIDGET_SIZE == '100' %} selected="selected"{% endif %}>{{ lang('TURNSTILE_SIZE_100') }}</option>
					<option value="80"{% if TURNSTILE_WIDGET_SIZE == '80' %} selected="selected"{% endif %}>{{ lang('TURNSTILE_SIZE_80') }}</option>
					<option value="60"{% if TURNSTILE_WIDGET_SIZE == '60' %} selected="selected"{% endif %}>{{ lang('TURNSTILE_SIZE_60') }}</option>
				</select>
			</dd>
		</dl>

		<dl>
			<dt><label for="icecorp_turnstile_fail_mode">{{ lang('TURNSTILE_FAIL_MODE') }}{{ lang('COLON') }}</label><br>
				<span>{{ lang('TURNSTILE_FAIL_MODE_EXPLAIN') }}</span>
			</dt>
			<dd>
				<select id="icecorp_turnstile_fail_mode" name="icecorp_turnstile_fail_mode">
					<option value="0"{% if TURNSTILE_FAIL_MODE == 0 %} selected="selected"{% endif %}>{{ lang('TURNSTILE_FAIL_MODE_CLOSED') }}</option>
					<option value="1"{% if TURNSTILE_FAIL_MODE == 1 %} selected="selected"{% endif %}>{{ lang('TURNSTILE_FAIL_MODE_OPEN') }}</option>
				</select>
			</dd>
		</dl>
	</fieldset>

	{% if TURNSTILE_SITEKEY %}
	<fieldset>
		<legend>{{ lang('TURNSTILE_WIDGET_PREVIEW') }}</legend>
		<div id="turnstile-preview-container" style="padding: 15px; background: {% if TURNSTILE_THEME == 'dark' %}#1a1a1a{% else %}#f5f5f5{% endif %}; border-radius: 4px; display: inline-block; min-height: 65px; transition: background 0.3s;">
			<div id="turnstile-preview-widget"></div>
			<div id="turnstile-preview-invisible" style="display: none; color: #666; font-style: italic;">{{ lang('TURNSTILE_PREVIEW_INVISIBLE') }}</div>
		</div>
	</fieldset>
	{% endif %}

	<fieldset>
		<legend>{{ lang('TURNSTILE_REGISTRATION_INFO') }}</legend>
		<p style="margin-bottom: 15px;">{{ lang('TURNSTILE_REGISTRATION_EXPLAIN') }}</p>
		<p><a href="{{ U_SPAMBOT_COUNTERMEASURES }}" class="button2" style="font-size: 100%;">{{ lang('TURNSTILE_GOTO_SPAMBOT') }} →</a></p>
	</fieldset>

	<fieldset>
		<legend>{{ lang('TURNSTILE_LOGIN_MODE') }}</legend>

		{% if S_LOGIN_MISCONFIGURED %}
		<div class="errorbox" style="margin-bottom: 15px;">
			<p>{{ lang('TURNSTILE_LOGIN_MISCONFIGURED') }} <a href="{{ U_SPAMBOT_COUNTERMEASURES }}">{{ lang('TURNSTILE_GOTO_SPAMBOT') }} →</a></p>
		</div>
		{% endif %}

		<dl>
			<dt><label for="icecorp_turnstile_login_mode">{{ lang('TURNSTILE_LOGIN_MODE') }}{{ lang('COLON') }}</label><br>
				<span>{{ lang('TURNSTILE_LOGIN_MODE_EXPLAIN') }}</span>
			</dt>
			<dd>
				<select id="icecorp_turnstile_login_mode" name="icecorp_turnstile_login_mode">
					<option value="0"{% if TURNSTILE_LOGIN_MODE == 0 or TURNSTILE_LOGIN_MODE == 2 %} selected="selected"{% endif %}>{{ lang('TURNSTILE_LOGIN_MODE_OFF') }}</option>
					<option value="1"{% if TURNSTILE_LOGIN_MODE == 1 %} selected="selected"{% endif %}>{{ lang('TURNSTILE_LOGIN_MODE_ALWAYS') }}</option>
				</select>
			</dd>
		</dl>
	</fieldset>

	<fieldset>
		<legend>{{ lang('TURNSTILE_GUEST_POSTING_INFO') }}</legend>
		<p style="margin-bottom: 15px;">{{ lang('TURNSTILE_GUEST_POSTING_EXPLAIN') }}</p>
		<p><a href="{{ U_SPAMBOT_COUNTERMEASURES }}" class="button2" style="font-size: 100%;">{{ lang('TURNSTILE_GOTO_SPAMBOT') }} →</a></p>
	</fieldset>

	<fieldset>
		<legend>{{ lang('TURNSTILE_UPDATE_SETTINGS') }}</legend>

		<dl>
			<dt><label for="icecorp_turnstile_update_check">{{ lang('TURNSTILE_UPDATE_CHECK') }}{{ lang('COLON') }}</label><br>
				<span>{{ lang('TURNSTILE_UPDATE_CHECK_EXPLAIN') }}</span>
			</dt>
			<dd>
				<label><input type="radio" class="radio" name="icecorp_turnstile_update_check" value="1"{% if TURNSTILE_UPDATE_CHECK %} checked="checked"{% endif %} /> {{ lang('YES') }}</label>
				<label><input type="radio" class="radio" name="icecorp_turnstile_update_check" value="0"{% if not TURNSTILE_UPDATE_CHECK %} checked="checked"{% endif %} /> {{ lang('NO') }}</label>
			</dd>
		</dl>

		<dl>
			<dt><label for="icecorp_turnstile_update_email">{{ lang('TURNSTILE_UPDATE_EMAIL') }}{{ lang('COLON') }}</label><br>
				<span>{{ lang('TURNSTILE_UPDATE_EMAIL_EXPLAIN') }}</span>
			</dt>
			<dd>
				<label><input type="radio" class="radio" name="icecorp_turnstile_update_email" value="1"{% if TURNSTILE_UPDATE_EMAIL %} checked="checked"{% endif %} /> {{ lang('YES') }}</label>
				<label><input type="radio" class="radio" name="icecorp_turnstile_update_email" value="0"{% if not TURNSTILE_UPDATE_EMAIL %} checked="checked"{% endif %} /> {{ lang('NO') }}</label>
			</dd>
		</dl>
	</fieldset>

	<fieldset class="submit-buttons">
		{{ S_FORM_TOKEN }}
		<input class="button1" type="submit" id="submit" name="submit" value="{{ lang('SUBMIT') }}" />
		<input class="button2" type="reset" id="reset" name="reset" value="{{ lang('RESET') }}" />
	</fieldset>

</form>

<script>
var sitekeyCheckPending = false;

// Site key validation: Widget success gives us a token to test the secret key
function turnstileSitekeySuccess(token) {
	sitekeyCheckPending = false;
	document.getElementById('sitekey-status').innerHTML = '<span style="color: green;">✓ {{ lang('TURNSTILE_KEY_VALID') }}</span>';
	
	// Now use this token to verify the secret key via AJAX
	var secretStatus = document.getElementById('secret-status');
	var xhr = new XMLHttpRequest();
	var ajaxUrl = '{{ U_ACTION }}'.replace(/&amp;/g, '&') + '&action=test_secret';
	xhr.open('POST', ajaxUrl);
	xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.onload = function() {
		if (xhr.status === 200) {
			try {
				var data = JSON.parse(xhr.responseText);
				if (data.valid) {
					secretStatus.innerHTML = '<span style="color: green;">✓ {{ lang('TURNSTILE_KEY_VALID') }}</span>';
				} else {
					var errorMsg = '{{ lang('TURNSTILE_KEY_INVALID') }}';
					if (data.error === 'not_configured') {
						errorMsg = '{{ lang('TURNSTILE_KEY_NOT_CONFIGURED') }}';
					} else if (data.error === 'connection_failed') {
						errorMsg = '{{ lang('TURNSTILE_CHECK_FAILED') }}';
					} else if (data.error === 'token_error') {
						errorMsg = '{{ lang('TURNSTILE_CHECK_FAILED') }}';
					}
					secretStatus.innerHTML = '<span style="color: red;">✗ ' + errorMsg + '</span>';
				}
			} catch (e) {
				secretStatus.innerHTML = '<span style="color: red;">✗ {{ lang('TURNSTILE_CHECK_FAILED') }}</span>';
			}
		} else {
			secretStatus.innerHTML = '<span style="color: red;">✗ {{ lang('TURNSTILE_CHECK_FAILED') }}</span>';
		}
	};
	xhr.onerror = function() {
		secretStatus.innerHTML = '<span style="color: red;">✗ {{ lang('TURNSTILE_CHECK_FAILED') }}</span>';
	};
	xhr.send('token=' + encodeURIComponent(token));
}

function turnstileSitekeyError(errorCode) {
	sitekeyCheckPending = false;
	document.getElementById('sitekey-status').innerHTML = '<span style="color: red;">✗ {{ lang('TURNSTILE_KEY_INVALID') }}</span>';
	// Can't test secret without valid site key token (but only update if secret is configured)
	var secret = '{{ TURNSTILE_SECRET }}';
	if (secret) {
		document.getElementById('secret-status').innerHTML = '<span style="color: #666;">— {{ lang('TURNSTILE_NEEDS_VALID_SITEKEY') }}</span>';
	}
}

// Preview widget ID tracker
var previewWidgetId = null;

// Update preview widget when theme, size, or widget type changes
function updateTurnstilePreview() {
	var previewContainer = document.getElementById('turnstile-preview-container');
	var previewWidget = document.getElementById('turnstile-preview-widget');
	var previewInvisible = document.getElementById('turnstile-preview-invisible');
	if (!previewContainer || !previewWidget || !previewInvisible || typeof turnstile === 'undefined') {
		return;
	}

	var widgetType = document.getElementById('icecorp_turnstile_widget_type').value;
	var theme = document.getElementById('icecorp_turnstile_theme').value;
	var size = document.getElementById('icecorp_turnstile_widget_size').value;
	var sitekey = '{{ TURNSTILE_SITEKEY }}';

	// Update container background based on theme
	if (theme === 'dark') {
		previewContainer.style.background = '#1a1a1a';
		previewInvisible.style.color = '#999';
	} else if (theme === 'light') {
		previewContainer.style.background = '#f5f5f5';
		previewInvisible.style.color = '#666';
	} else {
		// Auto - use light background
		previewContainer.style.background = '#f5f5f5';
		previewInvisible.style.color = '#666';
	}

	// Remove old widget if exists
	if (previewWidgetId) {
		try {
			turnstile.remove(previewWidgetId);
		} catch (e) {}
		previewWidgetId = null;
	}
	previewWidget.innerHTML = '';

	// If invisible mode, show text instead of widget
	if (widgetType === 'invisible') {
		previewWidget.style.display = 'none';
		previewInvisible.style.display = 'block';
		return;
	}

	// Visible mode - show widget
	previewWidget.style.display = 'block';
	previewInvisible.style.display = 'none';

	// Calculate scale
	var scale = parseInt(size) / 100;
	if (scale !== 1) {
		previewWidget.style.transform = 'scale(' + scale + ')';
		previewWidget.style.transformOrigin = 'left top';
	} else {
		previewWidget.style.transform = '';
	}

	// Render new widget
	previewWidgetId = turnstile.render('#turnstile-preview-widget', {
		sitekey: sitekey,
		theme: theme,
		size: 'normal',
		appearance: 'always',
		callback: function() {},
		'error-callback': function() {}
	});
}

document.addEventListener('DOMContentLoaded', function() {
	var sitekeyStatus = document.getElementById('sitekey-status');
	var secretStatus = document.getElementById('secret-status');
	var sitekey = '{{ TURNSTILE_SITEKEY }}';
	var secret = '{{ TURNSTILE_SECRET }}';
	var testContainer = document.getElementById('sitekey-test-widget');
	var previewWidget = document.getElementById('turnstile-preview-widget');

	// Initial state for secret key (depends on site key check)
	if (!secret) {
		secretStatus.innerHTML = '<span style="color: red;">✗ {{ lang('TURNSTILE_KEY_NOT_CONFIGURED') }}</span>';
	}

	// Site key validation via hidden widget
	if (sitekey && testContainer) {
		sitekeyCheckPending = true;
		// Load Turnstile script
		var script = document.createElement('script');
		script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onTurnstileLoad';
		script.async = true;
		document.head.appendChild(script);

		// Initialize widget after script loads
		window.onTurnstileLoad = function() {
			try {
				turnstile.render('#sitekey-test-widget', {
					sitekey: sitekey,
					callback: turnstileSitekeySuccess,
					'error-callback': turnstileSitekeyError,
					'expired-callback': function() {}, // Ignore expiry for test
					size: 'compact'
				});
				// Set timeout for widget load failure
				setTimeout(function() {
					if (sitekeyCheckPending) {
						sitekeyCheckPending = false;
						sitekeyStatus.innerHTML = '<span style="color: red;">✗ {{ lang('TURNSTILE_CHECK_FAILED') }}</span>';
						if (secret) {
							secretStatus.innerHTML = '<span style="color: #666;">— {{ lang('TURNSTILE_NEEDS_VALID_SITEKEY') }}</span>';
						}
					}
				}, 10000);

				// Initialize preview widget after a brief delay
				if (previewWidget) {
					setTimeout(function() {
						updateTurnstilePreview();
					}, 500);
				}
			} catch (e) {
				sitekeyStatus.innerHTML = '<span style="color: red;">✗ {{ lang('TURNSTILE_CHECK_FAILED') }}</span>';
				if (secret) {
					secretStatus.innerHTML = '<span style="color: #666;">— {{ lang('TURNSTILE_NEEDS_VALID_SITEKEY') }}</span>';
				}
			}
		};
	} else if (!sitekey) {
		sitekeyStatus.innerHTML = '<span style="color: red;">✗ {{ lang('TURNSTILE_KEY_NOT_CONFIGURED') }}</span>';
		// Only show "Requires valid site key" if secret IS configured but can't be tested
		if (secret) {
			secretStatus.innerHTML = '<span style="color: #666;">— {{ lang('TURNSTILE_NEEDS_VALID_SITEKEY') }}</span>';
		}
	}

	// Check now button handler
	var checkUpdateBtn = document.getElementById('check-update-btn');
	if (checkUpdateBtn) {
		checkUpdateBtn.addEventListener('click', function(e) {
			e.preventDefault();
			var updateStatus = document.getElementById('update-status');
			var updateLast = document.getElementById('update-last');
			updateStatus.innerHTML = '<span style="color: #666;">⟳ {{ lang('TURNSTILE_UPDATE_CHECKING') }}</span>';

			var xhr = new XMLHttpRequest();
			var ajaxUrl = '{{ U_ACTION }}'.replace(/&amp;/g, '&') + '&action=check_update';
			xhr.open('POST', ajaxUrl);
			xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
			xhr.onload = function() {
				if (xhr.status === 200) {
					try {
						var data = JSON.parse(xhr.responseText);
						if (data.success) {
							if (data.update_available) {
								var updateAvailableText = '{{ lang('TURNSTILE_UPDATE_AVAILABLE')|e('js') }}'.replace('%s', data.latest_version);
								updateStatus.innerHTML = '<span style="color: #f57c00;">⬆ ' + updateAvailableText + '</span> — <a href="https://icecorp.nz/cloudflare-turnstile">{{ lang('TURNSTILE_UPDATE_DOWNLOAD') }}</a>';
							} else {
								updateStatus.innerHTML = '<span style="color: green;">✓ {{ lang('TURNSTILE_UPDATE_UP_TO_DATE') }}</span> (' + data.current_version + ')';
							}
							updateLast.textContent = '{{ lang('TURNSTILE_UPDATE_JUST_NOW')|e('js') }}';
						} else {
							updateStatus.innerHTML = '<span style="color: red;">✗ {{ lang('TURNSTILE_UPDATE_CHECK_FAILED') }}</span>';
						}
					} catch (ex) {
						updateStatus.innerHTML = '<span style="color: red;">✗ {{ lang('TURNSTILE_UPDATE_CHECK_FAILED') }}</span>';
					}
				} else {
					updateStatus.innerHTML = '<span style="color: red;">✗ {{ lang('TURNSTILE_UPDATE_CHECK_FAILED') }}</span>';
				}
			};
			xhr.onerror = function() {
				updateStatus.innerHTML = '<span style="color: red;">✗ {{ lang('TURNSTILE_UPDATE_CHECK_FAILED') }}</span>';
			};
			xhr.send();
		});
	}
});
</script>

{% include 'overall_footer.html' %}