<script lang="ts">
	import { t } from '$lib/i18n';
	import MdiIcon from '$lib/components/MdiIcon.svelte';
	import Hint from '$lib/components/Hint.svelte';
	import LocaleSelector from '$lib/components/LocaleSelector.svelte';
	import TimezoneSelector from '$lib/components/TimezoneSelector.svelte';
	import { snackSuccess } from '$lib/stores/snackbar.svelte';

	interface Props {
		externalUrl: string;
		timezone: string;
		supportedLocales: string;
	}

	let {
		externalUrl = $bindable(),
		timezone = $bindable(),
		supportedLocales = $bindable(),
	}: Props = $props();

	let copied = $state(false);
	let copyTimer: ReturnType<typeof setTimeout> | null = null;

	function copyUrl(): void {
		if (!externalUrl) return;
		try {
			navigator.clipboard.writeText(externalUrl);
			copied = true;
			snackSuccess(t('settings.urlCopied'));
			if (copyTimer) clearTimeout(copyTimer);
			copyTimer = setTimeout(() => { copied = false; }, 1600);
		} catch { /* ignore */ }
	}

	function isReachable(url: string): boolean {
		if (!url) return false;
		try { new URL(url); return true; } catch { return false; }
	}

	const urlValid = $derived(isReachable(externalUrl));
</script>

<section class="identity glass">
	<header class="identity-head">
		<div class="identity-eyebrow">
			<MdiIcon name="mdiAccountNetworkOutline" size={12} />
			<span>{t('settings.identity')}</span>
		</div>
		<h3 class="identity-title">{t('settings.identityHeadline')}</h3>
	</header>

	<div class="identity-body">
		<!-- External URL row -->
		<div class="row">
			<div class="row-label">
				<span class="row-num">01</span>
				<label for="settings-external-url" class="row-name">
					{t('settings.externalUrl')}
					<Hint text={t('settings.externalUrlHint')} />
				</label>
			</div>
			<div class="row-control">
				<div class="url-field" class:url-field-valid={urlValid && !!externalUrl}>
					<span class="url-leading" aria-hidden="true">
						<MdiIcon name={urlValid ? 'mdiEarth' : 'mdiEarthOff'} size={14} />
					</span>
					<input
						id="settings-external-url"
						bind:value={externalUrl}
						placeholder="https://notify.example.com"
						class="url-input"
						type="url"
						autocomplete="off"
						spellcheck="false"
					/>
					{#if externalUrl}
						<button
							type="button"
							class="url-action"
							onclick={copyUrl}
							aria-label={t('settings.copy')}
							title={t('settings.copy')}
						>
							<MdiIcon name={copied ? 'mdiCheck' : 'mdiContentCopy'} size={13} />
						</button>
						{#if urlValid}
							<a
								href={externalUrl}
								target="_blank"
								rel="noopener noreferrer"
								class="url-action"
								aria-label={t('settings.openExternal')}
								title={t('settings.openExternal')}
							>
								<MdiIcon name="mdiOpenInNew" size={13} />
							</a>
						{/if}
					{/if}
				</div>
			</div>
		</div>

		<!-- Timezone row -->
		<div class="row">
			<div class="row-label">
				<span class="row-num">02</span>
				<span class="row-name">
					{t('settings.timezone')}
					<Hint text={t('settings.timezoneHint')} />
				</span>
			</div>
			<div class="row-control">
				<TimezoneSelector bind:value={timezone} />
			</div>
		</div>

		<!-- Locales row -->
		<div class="row">
			<div class="row-label">
				<span class="row-num">03</span>
				<span class="row-name">
					{t('settings.supportedLocales')}
					<Hint text={t('settings.supportedLocalesHint')} />
				</span>
			</div>
			<div class="row-control">
				<LocaleSelector bind:value={supportedLocales} />
			</div>
		</div>
	</div>
</section>

<style>
	.identity {
		padding: 1.5rem 1.6rem 1.4rem;
		display: flex;
		flex-direction: column;
		gap: 1.2rem;
	}

	.identity-head {
		position: relative;
		z-index: 1;
	}
	.identity-eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		font-family: var(--font-mono);
		font-size: 0.62rem;
		text-transform: uppercase;
		letter-spacing: 0.18em;
		color: var(--color-muted-foreground);
		margin-bottom: 0.45rem;
	}
	.identity-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: 400;
		font-style: italic;
		font-size: 1.25rem;
		line-height: 1.3;
		letter-spacing: -0.015em;
		color: var(--color-foreground);
		max-width: 42ch;
	}

	.identity-body {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
	}

	.row {
		display: grid;
		grid-template-columns: 11rem 1fr;
		gap: 1.4rem;
		padding: 1rem 0;
		border-top: 1px solid var(--color-border);
	}
	.row:first-child { border-top: 0; padding-top: 0.4rem; }
	.row:last-child { padding-bottom: 0.1rem; }

	.row-label {
		display: flex;
		flex-direction: column;
		gap: 0.3rem;
		padding-top: 0.15rem;
	}
	.row-num {
		font-family: var(--font-mono);
		font-size: 0.62rem;
		letter-spacing: 0.18em;
		color: var(--color-muted-foreground);
	}
	.row-name {
		font-size: 0.78rem;
		font-weight: 500;
		color: var(--color-foreground);
		letter-spacing: -0.005em;
		display: inline-flex;
		align-items: center;
	}
	.row-control {
		min-width: 0;
	}

	/* --- URL field with leading icon and trailing actions --- */
	.url-field {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		max-width: 34rem;
		padding: 0.15rem 0.35rem 0.15rem 0.7rem;
		border: 1px solid var(--color-rule-strong);
		border-radius: 0.625rem;
		background: var(--color-input-bg);
		transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
	}
	.url-field:focus-within {
		border-color: var(--color-primary);
		box-shadow: 0 0 0 3px var(--color-glow);
	}
	.url-field-valid {
		border-color: color-mix(in srgb, var(--color-mint) 35%, var(--color-rule-strong));
	}
	.url-leading {
		color: var(--color-muted-foreground);
		display: inline-flex;
		flex-shrink: 0;
	}
	.url-field-valid .url-leading { color: var(--color-mint); }
	.url-input {
		flex: 1;
		background: transparent;
		border: 0;
		outline: 0;
		padding: 0.5rem 0.4rem;
		font-family: var(--font-mono);
		font-size: 0.82rem;
		color: var(--color-foreground);
		min-width: 0;
	}
	.url-input::placeholder { color: var(--color-muted-foreground); }
	.url-action {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border-radius: 8px;
		background: transparent;
		border: 0;
		color: var(--color-muted-foreground);
		cursor: pointer;
		text-decoration: none;
		transition: background 0.15s, color 0.15s;
	}
	.url-action:hover {
		background: var(--color-glass-strong);
		color: var(--color-foreground);
	}

	@media (max-width: 720px) {
		.row {
			grid-template-columns: 1fr;
			gap: 0.55rem;
			padding: 0.95rem 0;
		}
		.row-label { padding-top: 0; }
	}

	@media (prefers-reduced-motion: reduce) {
		.url-field, .url-action { transition: none !important; }
	}
</style>
