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

	interface Props {
		line: CheckboxLine;
		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 indeterminate = $derived(line.checkboxIndeterminate || false);

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

	function handleKeydown(e: KeyboardEvent) {
		if (e.key === " " || e.key === "Enter") {
			e.preventDefault();
			handleChange();
		}
	}

	function getCheckboxSymbol(
		checked: boolean,
		indeterminate: boolean,
	): string {
		if (indeterminate) return "[-]";
		return checked ? "[✓]" : "[ ]";
	}
</script>

<div
	class="tui-checkbox"
	class:inline
	class:checked
	class:disabled={isDisabled}
	style="--checkbox-color: {getButtonStyle(line.style)}"
	role="checkbox"
	aria-checked={indeterminate ? "mixed" : checked}
	aria-disabled={isDisabled}
	tabindex={isDisabled ? -1 : 0}
	onclick={handleChange}
	onkeydown={handleKeydown}
>
	<span class="checkbox-box" class:indeterminate>
		{getCheckboxSymbol(checked, indeterminate)}
	</span>

	{#if line.icon}
		<Icon icon={line.icon} width="14" class="checkbox-icon" />
	{/if}

	{#if line.content}
		<span class="checkbox-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>

<style>
	.tui-checkbox {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		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-checkbox.inline {
		display: inline-flex;
		margin: 0 0.75rem 0 0;
	}

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

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

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

	.checkbox-box {
		font-family: inherit;
		font-weight: bold;
		color: var(--terminal-muted);
		transition: color 0.15s ease;
	}

	.tui-checkbox.checked .checkbox-box,
	.checkbox-box.indeterminate {
		color: var(--checkbox-color);
	}

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

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

	.tui-checkbox.disabled .checkbox-label {
		color: var(--terminal-muted);
	}

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