<script lang="ts">
	import MdiIcon from './MdiIcon.svelte';
	import { t } from '$lib/i18n';
	import { LOCALE_CATALOG, getLocaleMeta, type LocaleMeta } from '$lib/locales';
	import EntitySelect, { type EntityItem } from './EntitySelect.svelte';

	const CATALOG: LocaleMeta[] = LOCALE_CATALOG;

	// Locales that ship with default notification & command templates.
	const SHIPPED = new Set(['en', 'ru']);

	let {
		value = $bindable<string>(''),
	}: {
		value: string;
	} = $props();

	// Parse the comma-separated backend string into an ordered array of codes.
	const codes = $derived.by<string[]>(() => {
		if (!value) return [];
		const seen = new Set<string>();
		const out: string[] = [];
		for (const raw of value.split(',')) {
			const c = raw.trim().toLowerCase();
			if (!c || seen.has(c)) continue;
			seen.add(c);
			out.push(c);
		}
		return out;
	});

	function commit(next: string[]) {
		// De-dupe (preserve order) and serialise back to the backend format.
		const seen = new Set<string>();
		const clean = next.map(c => c.trim().toLowerCase())
			.filter(c => c && !seen.has(c) && (seen.add(c), true));
		value = clean.join(',');
	}

	function meta(code: string): LocaleMeta {
		return getLocaleMeta(code);
	}

	function remove(code: string) {
		commit(codes.filter(c => c !== code));
	}

	function makePrimary(code: string) {
		commit([code, ...codes.filter(c => c !== code)]);
	}

	function moveUp(code: string) {
		const i = codes.indexOf(code);
		if (i <= 0) return;
		const next = [...codes];
		[next[i - 1], next[i]] = [next[i], next[i - 1]];
		commit(next);
	}

	function moveDown(code: string) {
		const i = codes.indexOf(code);
		if (i < 0 || i >= codes.length - 1) return;
		const next = [...codes];
		[next[i], next[i + 1]] = [next[i + 1], next[i]];
		commit(next);
	}

	// --- Add flow ----------------------------------------------------------

	// Valid BCP 47-ish: 2–3 letter primary, optional '-' subtag(s) 2-8 chars.
	const CUSTOM_RE = /^[a-z]{2,3}(-[a-z0-9]{2,8})*$/i;

	const selectedSet = $derived(new Set(codes));

	/**
	 * Catalog languages not yet selected, surfaced through EntitySelect.
	 * Native name is the label so the user sees their own script; the
	 * English name + code lives in the description for searchability.
	 */
	const addItems = $derived<EntityItem[]>(
		CATALOG
			.filter(l => !selectedSet.has(l.code))
			.map(l => ({
				value: l.code,
				label: l.native,
				desc: `${l.name} · ${l.code.toUpperCase()}`,
			})),
	);

	let customCode = $state('');
	const customCodeValid = $derived.by(() => {
		const c = customCode.trim().toLowerCase();
		if (!c || !CUSTOM_RE.test(c)) return false;
		if (selectedSet.has(c)) return false;
		if (CATALOG.some(l => l.code === c)) return false;
		return true;
	});

	function addCode(code: string | number | null) {
		if (code === null) return;
		const c = String(code).trim().toLowerCase();
		if (!c) return;
		commit([...codes, c]);
	}

	function addCustom() {
		if (!customCodeValid) return;
		addCode(customCode);
		customCode = '';
	}

	// --- Drag & drop -------------------------------------------------------

	let dragCode = $state<string | null>(null);
	let dragOverCode = $state<string | null>(null);

	function onDragStart(e: DragEvent, code: string) {
		dragCode = code;
		if (e.dataTransfer) {
			e.dataTransfer.effectAllowed = 'move';
			e.dataTransfer.setData('text/plain', code);
		}
	}

	function onDragOver(e: DragEvent, code: string) {
		if (!dragCode || dragCode === code) return;
		e.preventDefault();
		dragOverCode = code;
		if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
	}

	function onDrop(e: DragEvent, code: string) {
		e.preventDefault();
		if (!dragCode || dragCode === code) return;
		const from = codes.indexOf(dragCode);
		const to = codes.indexOf(code);
		if (from < 0 || to < 0) return;
		const next = [...codes];
		const [moved] = next.splice(from, 1);
		next.splice(to, 0, moved);
		commit(next);
		dragCode = null;
		dragOverCode = null;
	}

	function onDragEnd() {
		dragCode = null;
		dragOverCode = null;
	}
</script>

<div class="ls-root">
	{#if codes.length === 0}
		<div class="ls-empty">
			<div class="ls-empty-glyph" aria-hidden="true">A あ Я</div>
			<p class="ls-empty-text">{t('locales.empty')}</p>
		</div>
	{:else}
		<ul class="ls-list" role="list">
			{#each codes as code, i (code)}
				{@const m = meta(code)}
				{@const isPrimary = i === 0}
				{@const isShipped = SHIPPED.has(code)}
				<li
					class="ls-row"
					class:ls-row-primary={isPrimary}
					class:ls-row-dragover={dragOverCode === code}
					class:ls-row-dragging={dragCode === code}
					draggable="true"
					ondragstart={(e) => onDragStart(e, code)}
					ondragover={(e) => onDragOver(e, code)}
					ondrop={(e) => onDrop(e, code)}
					ondragend={onDragEnd}
				>
					<span class="ls-rail" aria-hidden="true"></span>

					<button
						type="button"
						class="ls-handle"
						aria-label={t('locales.reorder')}
						title={t('locales.reorder')}
						tabindex="-1"
					>
						<MdiIcon name="mdiDragVertical" size={16} />
					</button>

					<div class="ls-text">
						<div class="ls-native" dir={m.rtl ? 'rtl' : 'ltr'} lang={code}>{m.native}</div>
						<div class="ls-meta">
							<span class="ls-name">{m.name}</span>
							<span class="ls-dot" aria-hidden="true">·</span>
							<span class="ls-code">{code}</span>
						</div>
					</div>

					<div class="ls-badges">
						{#if isPrimary}
							<span class="ls-tag ls-tag-primary">
								<MdiIcon name="mdiStar" size={10} />
								{t('locales.primary')}
							</span>
						{/if}
						{#if isShipped}
							<span class="ls-tag ls-tag-shipped" title={t('locales.shippedHint')}>
								<MdiIcon name="mdiPackageVariantClosedCheck" size={10} />
								{t('locales.shipped')}
							</span>
						{/if}
					</div>

					<div class="ls-actions">
						{#if !isPrimary}
							<button
								type="button"
								class="ls-icon-btn"
								onclick={() => makePrimary(code)}
								aria-label={t('locales.makePrimary')}
								title={t('locales.makePrimary')}
							>
								<MdiIcon name="mdiStarOutline" size={14} />
							</button>
						{/if}
						<button
							type="button"
							class="ls-icon-btn"
							onclick={() => moveUp(code)}
							disabled={i === 0}
							aria-label={t('locales.moveUp')}
							title={t('locales.moveUp')}
						>
							<MdiIcon name="mdiChevronUp" size={14} />
						</button>
						<button
							type="button"
							class="ls-icon-btn"
							onclick={() => moveDown(code)}
							disabled={i === codes.length - 1}
							aria-label={t('locales.moveDown')}
							title={t('locales.moveDown')}
						>
							<MdiIcon name="mdiChevronDown" size={14} />
						</button>
						<button
							type="button"
							class="ls-icon-btn ls-icon-danger"
							onclick={() => remove(code)}
							disabled={codes.length <= 1}
							aria-label={t('locales.remove')}
							title={codes.length <= 1 ? t('locales.removeLast') : t('locales.remove')}
						>
							<MdiIcon name="mdiClose" size={14} />
						</button>
					</div>
				</li>
			{/each}
		</ul>
	{/if}

	<!-- Add zone — EntitySelect for catalog languages, separate input for custom BCP-47 codes -->
	<div class="ls-add">
		<div class="ls-add-row">
			<div class="ls-add-picker">
				<EntitySelect
					items={addItems}
					value={null}
					placeholder={t('locales.add')}
					size="sm"
					onselect={addCode}
				/>
			</div>
			<div class="ls-add-custom">
				<input
					type="text"
					bind:value={customCode}
					onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addCustom(); } }}
					placeholder={t('locales.customPlaceholder')}
					class="ls-add-custom-input"
					autocomplete="off"
					spellcheck="false"
				/>
				<button
					type="button"
					class="ls-add-custom-btn"
					disabled={!customCodeValid}
					onclick={addCustom}
					title={t('locales.addCustom')}
				>
					<MdiIcon name="mdiPlus" size={14} />
				</button>
			</div>
		</div>
	</div>

	<p class="ls-hint">
		<MdiIcon name="mdiInformationOutline" size={12} />
		<span>{t('locales.orderHint')}</span>
	</p>
</div>

<style>
	.ls-root {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		width: 100%;
		max-width: 34rem;
	}

	/* ---- Empty state -------------------------------------------------- */
	.ls-empty {
		display: flex;
		align-items: center;
		gap: 0.875rem;
		padding: 1rem 1.125rem;
		border: 1px dashed var(--color-border);
		border-radius: 0.625rem;
		background:
			linear-gradient(135deg,
				color-mix(in srgb, var(--color-primary) 4%, transparent) 0%,
				transparent 60%),
			var(--color-background);
	}
	.ls-empty-glyph {
		font-family: var(--font-sans);
		font-size: 1.5rem;
		letter-spacing: 0.1em;
		font-weight: 300;
		color: color-mix(in srgb, var(--color-primary) 70%, var(--color-muted-foreground));
		flex-shrink: 0;
		line-height: 1;
	}
	.ls-empty-text {
		margin: 0;
		font-size: 0.8rem;
		color: var(--color-muted-foreground);
	}

	/* ---- List --------------------------------------------------------- */
	.ls-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0.375rem;
	}

	.ls-row {
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr auto auto;
		align-items: center;
		gap: 0.625rem;
		padding: 0.625rem 0.75rem 0.625rem 0.875rem;
		border: 1px solid var(--color-border);
		border-radius: 0.5rem;
		background: var(--color-background);
		transition: border-color 0.15s, background 0.15s, transform 0.15s;
		overflow: hidden;
	}
	.ls-row:hover {
		border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
	}
	.ls-row.ls-row-dragging {
		opacity: 0.4;
	}
	.ls-row.ls-row-dragover {
		border-color: var(--color-primary);
		background: color-mix(in srgb, var(--color-primary) 6%, var(--color-background));
	}
	.ls-row.ls-row-primary {
		background:
			linear-gradient(90deg,
				color-mix(in srgb, var(--color-primary) 5%, transparent) 0%,
				transparent 30%),
			var(--color-background);
	}

	/* Accent rail — pronounced on primary, near-invisible otherwise */
	.ls-rail {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 3px;
		background: transparent;
		transition: background 0.15s;
	}
	.ls-row.ls-row-primary .ls-rail {
		background: var(--color-primary);
	}

	.ls-handle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.125rem;
		border: none;
		background: transparent;
		color: var(--color-muted-foreground);
		opacity: 0.4;
		cursor: grab;
		transition: opacity 0.15s;
	}
	.ls-row:hover .ls-handle {
		opacity: 0.9;
	}
	.ls-handle:active {
		cursor: grabbing;
	}

	.ls-text {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
		min-width: 0;
	}
	.ls-native {
		font-family: var(--font-sans);
		font-size: 1.125rem;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: -0.005em;
		color: var(--color-foreground);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.ls-meta {
		display: flex;
		align-items: center;
		gap: 0.375rem;
		font-size: 0.7rem;
		color: var(--color-muted-foreground);
		min-width: 0;
	}
	.ls-name {
		text-transform: uppercase;
		letter-spacing: 0.08em;
		font-weight: 500;
		font-size: 0.625rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.ls-dot {
		opacity: 0.5;
	}
	.ls-code {
		font-family: var(--font-mono);
		font-size: 0.7rem;
		padding: 0.05rem 0.375rem;
		border-radius: 0.25rem;
		background: var(--color-muted);
		color: var(--color-muted-foreground);
	}

	.ls-badges {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		flex-wrap: wrap;
	}
	.ls-tag {
		display: inline-flex;
		align-items: center;
		gap: 0.15rem;
		font-size: 0.55rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		padding: 0.125rem 0.375rem;
		border-radius: 9999px;
		white-space: nowrap;
	}
	.ls-tag-primary {
		background: var(--color-primary);
		color: var(--color-primary-foreground, #fff);
	}
	.ls-tag-shipped {
		background: color-mix(in srgb, var(--color-primary) 12%, transparent);
		color: var(--color-primary);
		border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
	}

	.ls-actions {
		display: flex;
		align-items: center;
		gap: 0.0625rem;
	}
	.ls-icon-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.5rem;
		height: 1.5rem;
		padding: 0;
		border: none;
		background: transparent;
		border-radius: 0.25rem;
		color: var(--color-muted-foreground);
		cursor: pointer;
		transition: background 0.12s, color 0.12s;
	}
	.ls-icon-btn:hover:not(:disabled) {
		background: var(--color-muted);
		color: var(--color-foreground);
	}
	.ls-icon-btn:disabled {
		opacity: 0.3;
		cursor: not-allowed;
	}
	.ls-icon-btn.ls-icon-danger:hover:not(:disabled) {
		background: color-mix(in srgb, #ef4444 14%, transparent);
		color: #ef4444;
	}

	/* ---- Add zone ----------------------------------------------------- */
	.ls-add {
		margin-top: 0.125rem;
	}
	.ls-add-row {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		flex-wrap: wrap;
	}
	.ls-add-picker {
		flex: 1;
		min-width: 12rem;
	}
	.ls-add-custom {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		padding: 0.15rem 0.15rem 0.15rem 0.55rem;
		border: 1px dashed var(--color-border);
		border-radius: 0.5rem;
		background: transparent;
	}
	.ls-add-custom-input {
		width: 6rem;
		border: none;
		outline: none;
		background: transparent;
		font-family: var(--font-mono);
		font-size: 0.75rem;
		color: var(--color-foreground);
		padding: 0.25rem 0;
	}
	.ls-add-custom-input::placeholder {
		color: var(--color-muted-foreground);
		opacity: 0.7;
	}
	.ls-add-custom-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.5rem;
		height: 1.5rem;
		padding: 0;
		border: none;
		background: transparent;
		border-radius: 0.25rem;
		color: var(--color-muted-foreground);
		cursor: pointer;
		transition: background 0.12s, color 0.12s;
	}
	.ls-add-custom-btn:hover:not(:disabled) {
		background: var(--color-muted);
		color: var(--color-primary);
	}
	.ls-add-custom-btn:disabled {
		opacity: 0.3;
		cursor: not-allowed;
	}

	/* ---- Hint --------------------------------------------------------- */
	.ls-hint {
		display: flex;
		align-items: flex-start;
		gap: 0.3rem;
		margin: 0.125rem 0 0;
		font-size: 0.7rem;
		color: var(--color-muted-foreground);
		line-height: 1.4;
	}
</style>
