<script lang="ts">
	import Icon from '@iconify/svelte';
	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
	import type { TerminalLine } from './types';

	export let line: TerminalLine;
	export let index: number;
	export let selected: boolean;
	export let onClick: (idx: number) => void;
	export let onHover: (idx: number) => void;
	export let inline: boolean = false;

	// Determine if this is an external link
	$: isExternal = line.external || (line.href && (line.href.startsWith('http://') || line.href.startsWith('https://')));
	
	// Parse color formatting in content
	$: segments = parseColorText(line.content);
</script>

<button
	class="tui-button"
	class:selected={selected}
	class:inline={inline}
	style="--btn-color: {getButtonStyle(line.style)}"
	on:click={() => onClick(index)}
	on:mouseenter={() => onHover(index)}
>
	<span class="btn-indicator">{selected ? '▶' : ' '}</span>
	{#if line.icon}
		<Icon icon={line.icon} width="16" />
	{/if}
	<span class="btn-text">
		{#each segments 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 line.href}
		{#if isExternal}
			<Icon icon="mdi:open-in-new" width="14" class="btn-arrow" />
		{:else}
			<Icon icon="mdi:chevron-right" width="16" class="btn-arrow" />
		{/if}
	{/if}
</button>

<style>
	.tui-button {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		width: 100%;
		padding: 0.5rem 0.75rem;
		margin: 0.2rem 0;
		background: transparent;
		border: 1px solid transparent;
		border-radius: 4px;
		color: var(--btn-color);
		font-family: inherit;
		font-size: 0.9rem;
		text-align: left;
		cursor: pointer;
		transition: all 0.15s ease;
	}

	/* Inline button styles */
	.tui-button.inline {
		width: auto;
		display: inline-flex;
		margin: 0;
		padding: 0.35rem 0.6rem;
		border: 1px solid color-mix(in srgb, var(--btn-color) 40%, transparent);
	}

	.tui-button.inline .btn-indicator {
		display: none;
	}

	.tui-button:hover,
	.tui-button.selected {
		background: color-mix(in srgb, var(--btn-color) 15%, transparent);
		border-color: var(--btn-color);
	}

	.btn-indicator {
		color: var(--btn-color);
		font-size: 0.8rem;
		width: 1rem;
	}

	.btn-text {
		flex: 1;
	}

	:global(.btn-arrow) {
		opacity: 0.5;
	}

	.tui-button.selected :global(.btn-arrow) {
		opacity: 1;
	}

	:global(.inline-icon) {
		display: inline-block;
		vertical-align: middle;
		margin: 0 0.15em;
	}
</style>
