<script lang="ts">
	import Icon from "@iconify/svelte";
	import { getButtonStyle, parseColorText, getSegmentStyle } from "./utils";
	import { themeColors } from "$lib/stores/theme";
	import type { ToggleLine } from "./types";
	import "$lib/assets/css/tui-toggle.css";

	interface Props {
		line: ToggleLine;
		inline?: boolean;
		checked?: boolean;
		onchange?: (checked: boolean) => void;
	}

	let {
		line,
		inline = false,
		checked = $bindable(false),
		onchange,
	}: Props = $props();

	const labelSegments = $derived(
		line.content ? parseColorText(line.content, $themeColors.colorMap) : [],
	);
	const isDisabled = $derived(line.inputDisabled || false);
	const onLabel = $derived(line.toggleOnLabel || "ON");
	const offLabel = $derived(line.toggleOffLabel || "OFF");
	const showLabels = $derived(line.toggleShowLabels !== false);

	function handleToggle() {
		if (isDisabled) return;
		checked = !checked;
		onchange?.(checked);
	}

	function handleKeydown(e: KeyboardEvent) {
		if (e.key === " " || e.key === "Enter") {
			e.preventDefault();
			handleToggle();
		}
	}
</script>

<div
	class="tui-toggle"
	class:inline
	class:checked
	class:disabled={isDisabled}
	style="--toggle-color: {getButtonStyle(line.style)}"
	role="switch"
	aria-checked={checked}
	aria-disabled={isDisabled}
	tabindex={isDisabled ? -1 : 0}
	onclick={handleToggle}
	onkeydown={handleKeydown}
>
	{#if line.icon}
		<Icon icon={line.icon} width="14" class="toggle-icon" />
	{/if}

	{#if line.content}
		<span class="toggle-label">
			{#each labelSegments as segment}
				{#if segment.icon}
					<Icon icon={segment.icon} width="14" class="inline-icon" />
				{:else if getSegmentStyle(segment)}
					<span style={getSegmentStyle(segment)}>{segment.text}</span>
				{:else}
					{segment.text}
				{/if}
			{/each}
		</span>
	{/if}

	<div class="toggle-track">
		{#if showLabels}
			<span class="toggle-off-label">{offLabel}</span>
		{/if}
		<span class="toggle-switch">
			<span class="toggle-knob">{checked ? "●" : "○"}</span>
		</span>
		{#if showLabels}
			<span class="toggle-on-label">{onLabel}</span>
		{/if}
	</div>
</div>

<style>
	.tui-toggle {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		margin: 0.35rem 0;
		padding: 0.35rem 0.5rem;
		font-size: 0.9rem;
		cursor: pointer;
		border-radius: 4px;
		transition: all 0.15s ease;
		user-select: none;
	}

	.tui-toggle.inline {
		display: inline-flex;
		margin: 0 0.75rem 0 0;
	}

	.tui-toggle:hover:not(.disabled) {
		background: color-mix(in srgb, var(--toggle-color) 10%, transparent);
	}

	.tui-toggle:focus-visible {
		outline: 1px solid var(--toggle-color);
		outline-offset: 2px;
	}

	.tui-toggle.disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	:global(.toggle-icon) {
		color: var(--toggle-color);
	}

	.toggle-label {
		color: var(--terminal-text);
	}

	.toggle-track {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		padding: 0.25rem 0.5rem;
		background: color-mix(in srgb, var(--terminal-bg) 80%, black);
		border: 1px solid var(--terminal-muted);
		border-radius: 4px;
		font-size: 0.75rem;
		transition: all 0.15s ease;
	}

	.tui-toggle.checked .toggle-track {
		border-color: var(--toggle-color);
		background: color-mix(in srgb, var(--toggle-color) 15%, transparent);
	}

	.toggle-off-label,
	.toggle-on-label {
		color: var(--terminal-muted);
		font-weight: bold;
		text-transform: uppercase;
		min-width: 2rem;
		text-align: center;
		transition: color 0.15s ease;
	}

	.tui-toggle:not(.checked) .toggle-off-label {
		color: var(--terminal-text);
	}

	.tui-toggle.checked .toggle-on-label {
		color: var(--toggle-color);
	}

	.toggle-switch {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		position: relative;
	}

	.toggle-knob {
		font-size: 1rem;
		color: var(--terminal-muted);
		transition: all 0.2s ease;
		transform: translateX(-0.5rem);
	}

	.tui-toggle.checked .toggle-knob {
		color: var(--toggle-color);
		transform: translateX(0.5rem);
	}

	/* Mobile: inline toggles become full-width */
	@media (max-width: 768px) {
		.tui-toggle.inline {
			display: flex;
			width: 100%;
			margin: 0.35rem 0;
		}
	}
</style>
