<script lang="ts">
	import type { DurationUnit, EffectiveDuration } from '@todo/shared';

	interface Props {
		value: EffectiveDuration | null;
		onChange: (value: EffectiveDuration | null) => void;
	}

	let { value, onChange }: Props = $props();

	let showCustom = $state(false);
	let customValue = $state<number | null>(null);
	let customUnit = $state<DurationUnit>('hours');

	// Quick duration options
	const quickOptions: { label: string; value: number; unit: DurationUnit }[] = [
		{ label: '15m', value: 15, unit: 'minutes' },
		{ label: '30m', value: 30, unit: 'minutes' },
		{ label: '1h', value: 1, unit: 'hours' },
		{ label: '2h', value: 2, unit: 'hours' },
		{ label: '4h', value: 4, unit: 'hours' },
		{ label: '1d', value: 1, unit: 'days' },
		{ label: '2d', value: 2, unit: 'days' },
	];

	const unitOptions: { value: DurationUnit; label: string }[] = [
		{ value: 'minutes', label: 'Minuten' },
		{ value: 'hours', label: 'Stunden' },
		{ value: 'days', label: 'Tage' },
	];

	// Sync custom inputs with value prop
	$effect(() => {
		if (value) {
			const isQuickOption = quickOptions.some(
				(opt) => opt.value === value.value && opt.unit === value.unit
			);
			if (!isQuickOption) {
				showCustom = true;
				customValue = value.value;
				customUnit = value.unit;
			} else {
				showCustom = false;
			}
		} else {
			showCustom = false;
			customValue = null;
			customUnit = 'hours';
		}
	});

	function selectQuick(opt: { value: number; unit: DurationUnit }) {
		showCustom = false;
		onChange({ value: opt.value, unit: opt.unit });
	}

	function isQuickSelected(opt: { value: number; unit: DurationUnit }): boolean {
		return value !== null && value.value === opt.value && value.unit === opt.unit && !showCustom;
	}

	function toggleCustom() {
		showCustom = !showCustom;
		if (showCustom && customValue && customValue > 0) {
			onChange({ value: customValue, unit: customUnit });
		}
	}

	function handleCustomChange() {
		if (customValue && customValue > 0) {
			onChange({ value: customValue, unit: customUnit });
		}
	}

	function clear() {
		showCustom = false;
		customValue = null;
		customUnit = 'hours';
		onChange(null);
	}
</script>

<div class="duration-picker">
	<div class="duration-buttons">
		{#each quickOptions as opt}
			<button
				type="button"
				class="duration-btn"
				class:selected={isQuickSelected(opt)}
				onclick={() => selectQuick(opt)}
			>
				{opt.label}
			</button>
		{/each}
		<button type="button" class="duration-btn" class:selected={showCustom} onclick={toggleCustom}>
			...
		</button>
		{#if value !== null}
			<button type="button" class="duration-clear" onclick={clear} title="Zurücksetzen">
				<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M6 18L18 6M6 6l12 12"
					/>
				</svg>
			</button>
		{/if}
	</div>

	{#if showCustom}
		<div class="duration-custom">
			<input
				type="number"
				class="duration-input"
				bind:value={customValue}
				oninput={handleCustomChange}
				placeholder="Wert"
				min="1"
			/>
			<select class="duration-unit" bind:value={customUnit} onchange={handleCustomChange}>
				{#each unitOptions as unit}
					<option value={unit.value}>{unit.label}</option>
				{/each}
			</select>
		</div>
	{/if}
</div>

<style>
	.duration-picker {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.duration-buttons {
		display: flex;
		gap: 0.375rem;
		flex-wrap: wrap;
		align-items: center;
	}

	.duration-btn {
		padding: 0.5rem 0.75rem;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 9999px;
		background: rgba(255, 255, 255, 0.8);
		font-size: 0.8125rem;
		color: #374151;
		cursor: pointer;
		transition: all 0.15s;
	}

	:global(.dark) .duration-btn {
		background: rgba(255, 255, 255, 0.1);
		border-color: rgba(255, 255, 255, 0.15);
		color: #e5e7eb;
	}

	.duration-btn:hover {
		border-color: #8b5cf6;
	}

	.duration-btn.selected {
		background: rgba(139, 92, 246, 0.15);
		border-color: #8b5cf6;
		color: #8b5cf6;
	}

	.duration-clear {
		width: 2rem;
		height: 2rem;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: none;
		border-radius: 9999px;
		background: rgba(239, 68, 68, 0.1);
		color: #ef4444;
		cursor: pointer;
		transition: all 0.15s;
	}

	.duration-clear:hover {
		background: rgba(239, 68, 68, 0.2);
	}

	.duration-custom {
		display: flex;
		gap: 0.5rem;
	}

	.duration-input {
		width: 80px;
		padding: 0.5rem 0.75rem;
		border: 1px solid rgba(0, 0, 0, 0.15);
		border-radius: 0.75rem;
		background: rgba(255, 255, 255, 0.8);
		font-size: 0.875rem;
		color: #374151;
	}

	:global(.dark) .duration-input {
		background: rgba(255, 255, 255, 0.1);
		border-color: rgba(255, 255, 255, 0.15);
		color: #f3f4f6;
	}

	.duration-input:focus {
		outline: none;
		border-color: #8b5cf6;
		box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
	}

	.duration-unit {
		width: 120px;
		padding: 0.5rem 0.75rem;
		border: 1px solid rgba(0, 0, 0, 0.15);
		border-radius: 0.75rem;
		background: rgba(255, 255, 255, 0.8);
		font-size: 0.875rem;
		color: #374151;
	}

	:global(.dark) .duration-unit {
		background: rgba(255, 255, 255, 0.1);
		border-color: rgba(255, 255, 255, 0.15);
		color: #f3f4f6;
	}

	.duration-unit:focus {
		outline: none;
		border-color: #8b5cf6;
		box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
	}
</style>
