Date Picker

import { BooleanInput, type BooleanInput, type NumberInput } from '@angular/cdk/coercion';
import { BrnFieldControl, BrnFieldControlDescribedBy, provideBrnLabelable } from '@spartan-ng/brain/field';
import { BrnOverlay, type BrnOverlayState } from '@spartan-ng/brain/overlay';
import { BrnPopover, type BrnPopover } from '@spartan-ng/brain/popover';
import { ButtonVariants, HlmButtonImports } from '@spartan-ng/helm/button';
import { ChangeDetectionStrategy, Component, Directive, ElementRef, InjectionToken, booleanAttribute, computed, contentChild, effect, forwardRef, inject, input, linkedSignal, numberAttribute, output, signal, untracked, viewChild, type ExistingProvider, type Signal, type Type, type ValueProvider } from '@angular/core';
import { ClassValue } from 'clsx';
import { HlmCalendar, HlmCalendarMulti, HlmCalendarRange } from '@spartan-ng/helm/calendar';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmPopoverImports, HlmPopoverTrigger } from '@spartan-ng/helm/popover';
import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { hlm } from '@spartan-ng/helm/utils';
import { lucideCalendar, lucideChevronDown, lucideX } from '@ng-icons/lucide';
import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';

@Directive({ selector: '[hlmDatePickerAnchor]' })
export class HlmDatePickerAnchor {
	private readonly _host = inject(ElementRef, { host: true });
	private readonly _brnOverlay = inject(BrnOverlay, { optional: true });

	public readonly hlmDatePickerAnchorFor = input<BrnPopover | undefined>(undefined, {
		alias: 'hlmDatePickerAnchorFor',
	});

	constructor() {
		effect(() => {
			this.hlmDatePickerAnchorFor()?.setOrigin(this._host.nativeElement);
		});

		this._brnOverlay?.setOrigin(this._host.nativeElement);
	}
}

@Component({
	selector: 'hlm-date-picker-input',
	imports: [HlmInputGroupImports, HlmButtonImports, HlmDatePickerAnchor, NgIcon],
	providers: [provideIcons({ lucideCalendar, lucideX }), provideHlmDatePickerTrigger(HlmDatePickerInput)],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-input-group hlmDatePickerAnchor [hlmDatePickerAnchorFor]="_popover()">
			<input
				hlmInputGroupInput
				[value]="_inputValue()"
				[id]="inputId()"
				[placeholder]="placeholder()"
				[disabled]="_disabled()"
				[forceInvalid]="forceInvalid()"
				(click)="_handleClick()"
				(keydown.arrowDown)="_open()"
				(keydown.enter)="_handleEnter($event)"
				(input)="_handleInputChange($event)"
				(blur)="_commitDate()"
			/>
			<hlm-input-group-addon align="inline-end">
				@if (_showClearButton()) {
					<button
						hlmInputGroupButton
						size="icon-xs"
						variant="ghost"
						[attr.aria-label]="clearAriaLabel()"
						(click)="_clear()"
						[disabled]="_disabled()"
					>
						<ng-icon name="lucideX" />
					</button>
				}
				<button
					hlmInputGroupButton
					size="icon-xs"
					[attr.aria-label]="calendarAriaLabel()"
					(click)="_popover().open()"
					[disabled]="_disabled()"
				>
					<ng-icon name="lucideCalendar" />
				</button>
			</hlm-input-group-addon>
		</hlm-input-group>
	`,
})
export class HlmDatePickerInput<T> implements HlmDatePickerTriggerBase {
	private static _nextId = 0;
	private readonly _datePicker = injectHlmDatePicker<T>();
	private readonly _config = injectHlmDatePickerConfig<T>();

	protected readonly _popover = this._datePicker.popover;
	protected readonly _disabled = this._datePicker.disabledState;

	public readonly inputId = input(`hlm-date-picker-input-${HlmDatePickerInput._nextId++}`);

	public readonly placeholder = input('');

	public readonly inputValue = input<string>('');

	/**
	 * Parses input text into a date value. Return `undefined` for invalid
	 * input - the picker's date is cleared while the text is preserved so
	 * the user can fix it.
	 *
	 * Defaults to `parseDate` from `HlmDatePickerConfig`.
	 */
	public readonly parseDate = input<(value: string) => T | undefined>(this._config.parseDate);

	public readonly forceInvalid = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	/** Show a clear button that resets the input and picker date. Hidden when empty. */
	public readonly showClear = input<boolean, BooleanInput>(true, { transform: booleanAttribute });

	/** Open the popover on input click. */
	public readonly openOnClick = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	/** Accessible label for the clear button. */
	public readonly clearAriaLabel = input<string>('Clear date');

	/** Accessible label for the calendar trigger button. */
	public readonly calendarAriaLabel = input<string>('Open calendar');

	/** @internal Id used by the trigger contract for labeling. */
	public readonly triggerId = this.inputId;

	/**
	 * Text shown in the input. Mirrors the picker's `formattedDate` and the
	 * parent's `inputValue`, and accepts user writes via `_handleInputChange`.
	 * Commits only happen on blur / Enter, so in-progress text isn't clobbered.
	 */
	protected readonly _inputValue = linkedSignal<{ formatted: string | undefined; inputValue: string }, string>({
		source: () => ({
			formatted: this._datePicker.formattedDate(),
			inputValue: this.inputValue(),
		}),
		computation: (source, previous) => {
			// First render: prefer formatted, fall back to inputValue.
			if (previous === undefined) {
				return source.formatted ?? source.inputValue;
			}

			// Picker's formatted date changed - snap to canonical format.
			if (source.formatted !== previous.source.formatted) {
				if (source.formatted !== undefined) {
					return source.formatted;
				}
				// Cleared externally vs. user has invalid text in flight: only
				// mirror the clear when the displayed text was in sync.
				return previous.value === previous.source.formatted ? '' : previous.value;
			}

			// Parent updated inputValue - reflect it.
			if (source.inputValue !== previous.source.inputValue) {
				return source.inputValue;
			}

			return previous.value;
		},
	});

	protected _handleInputChange(event: Event) {
		const text = (event.target as HTMLInputElement).value;
		this._inputValue.set(text);
	}

	protected readonly _showClearButton = computed(() => this.showClear() && this._inputValue().length > 0);

	protected _clear() {
		this._inputValue.set('');
		this._datePicker.updateDate?.(undefined);
		this._datePicker.touched?.();
	}

	protected _handleEnter(event: Event) {
		event.preventDefault();
		this._commitDate();
		this._popover().close();
	}

	protected _commitDate() {
		const value = this._inputValue();

		if (!value) {
			this._datePicker.updateDate?.(undefined);
			this._datePicker.touched?.();
			return;
		}

		// Invalid parse: clear the picker date, keep the text so the user can fix it.
		const parsed = this.parseDate()(value);
		this._datePicker.updateDate?.(parsed ?? undefined);
		this._datePicker.touched?.();
	}

	protected _open() {
		this._popover().open();
	}

	protected _handleClick() {
		if (this.openOnClick()) {
			this._open();
		}
	}
}

export interface HlmDatePickerMultiConfig<T> {
	/**
	 * If true, the date picker will close when the max selection of dates is reached.
	 */
	autoCloseOnMaxSelection: boolean;

	/**
	 * Defines how the date should be displayed in the UI.
	 *
	 * @param dates
	 * @returns formatted date
	 */
	formatDates: (dates: T[]) => string;

	/**
	 * Defines how the date should be transformed before saving to model/form.
	 *
	 * @param dates
	 * @returns transformed date
	 */
	transformDates: (dates: T[]) => T[];
}

function getDefaultConfig<T>(): HlmDatePickerMultiConfig<T> {
	return {
		formatDates: (dates) => dates.map((date) => (date instanceof Date ? date.toDateString() : `${date}`)).join(', '),
		transformDates: (dates) => dates,
		autoCloseOnMaxSelection: false,
	};
}

const HlmDatePickerMultiConfigToken = new InjectionToken<HlmDatePickerMultiConfig<unknown>>('HlmDatePickerMultiConfig');

export function provideHlmDatePickerMultiConfig<T>(config: Partial<HlmDatePickerMultiConfig<T>>): ValueProvider {
	return { provide: HlmDatePickerMultiConfigToken, useValue: { ...getDefaultConfig(), ...config } };
}

export function injectHlmDatePickerMultiConfig<T>(): HlmDatePickerMultiConfig<T> {
	const injectedConfig = inject(HlmDatePickerMultiConfigToken, { optional: true });
	return injectedConfig ? (injectedConfig as HlmDatePickerMultiConfig<T>) : getDefaultConfig();
}

export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
	provide: NG_VALUE_ACCESSOR,
	useExisting: forwardRef(() => HlmDatePickerMulti),
	multi: true,
};

@Component({
	selector: 'hlm-date-picker-multi',
	imports: [HlmPopoverImports, HlmCalendarMulti],
	providers: [
		HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR,
		provideHlmDatePicker(HlmDatePickerMulti),
		provideBrnLabelable(HlmDatePickerMulti),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	hostDirectives: [BrnFieldControl],
	host: { class: 'block' },
	template: `
		<hlm-popover
			sideOffset="5"
			[state]="_popoverState()"
			(stateChanged)="_popoverState.set($event)"
			(closed)="_onTouched?.()"
		>
			<ng-content />

			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
				<ng-content select="[hlmDatePickerHeader]" />
				<hlm-calendar-multi
					class="rounded-none border-0"
					[date]="_mutableDate()"
					[captionLayout]="captionLayout()"
					[min]="min()"
					[max]="max()"
					[minSelection]="minSelection()"
					[maxSelection]="maxSelection()"
					[disabled]="_disabled()"
					(dateChange)="_handleChange($event)"
				/>
				<ng-content select="[hlmDatePickerFooter]" />
			</hlm-popover-content>
		</hlm-popover>
	`,
})
export class HlmDatePickerMulti<T> implements HlmDatePickerBase<T>, ControlValueAccessor {
	private readonly _config = injectHlmDatePickerMultiConfig<T>();

	public readonly popover = viewChild.required(BrnPopover);

	private readonly _trigger = contentChild(HlmDatePickerTriggerToken);

	/** Show dropdowns to navigate between months or years. */
	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');

	/** The minimum date that can be selected.*/
	public readonly min = input<T>();

	/** The maximum date that can be selected. */
	public readonly max = input<T>();

	/** The minimum selectable dates.  */
	public readonly minSelection = input<number, NumberInput>(undefined, {
		transform: numberAttribute,
	});

	/** The maximum selectable dates.  */
	public readonly maxSelection = input<number, NumberInput>(undefined, {
		transform: numberAttribute,
	});

	/** Determine if the date picker is disabled. */
	public readonly disabled = input<boolean, BooleanInput>(false, {
		transform: booleanAttribute,
	});

	/** The selected value. */
	public readonly date = input<T[]>();

	protected readonly _mutableDate = linkedSignal(this.date);

	/** If true, the date picker will close when the max selection of dates is reached. */
	public readonly autoCloseOnMaxSelection = input<boolean, BooleanInput>(this._config.autoCloseOnMaxSelection, {
		transform: booleanAttribute,
	});

	/** Defines how the date should be displayed in the UI.  */
	public readonly formatDates = input<(date: T[]) => string>(this._config.formatDates);

	/** Defines how the date should be transformed before saving to model/form. */
	public readonly transformDates = input<(date: T[]) => T[]>(this._config.transformDates);

	protected readonly _popoverState = signal<BrnOverlayState | null>(null);

	protected readonly _disabled = linkedSignal(this.disabled);

	/** @internal The disabled state as a readonly signal */
	public readonly disabledState = this._disabled.asReadonly();

	public readonly formattedDate = computed(() => {
		const dates = this._mutableDate();
		return dates ? this.formatDates()(dates) : undefined;
	});

	public readonly dateChange = output<T[]>();

	public readonly labelableId = computed(() => this._trigger()?.triggerId());

	public readonly hasDate = computed(() => !!this._mutableDate()?.length);

	protected _onChange?: ChangeFn<T[]>;
	protected _onTouched?: TouchFn;

	protected _handleChange(value: T[] | undefined) {
		if (value === undefined) return;

		if (this._disabled()) return;
		const transformedDate = value !== undefined ? this.transformDates()(value) : value;

		this._mutableDate.set(transformedDate);
		this._onChange?.(transformedDate);
		this.dateChange.emit(transformedDate);

		if (this.autoCloseOnMaxSelection() && this._mutableDate()?.length === this.maxSelection()) {
			this._popoverState.set('closed');
		}
	}

	/** CONTROL VALUE ACCESSOR */
	public writeValue(value: T[] | null): void {
		this._mutableDate.set(value ? this.transformDates()(value) : undefined);
	}

	public registerOnChange(fn: ChangeFn<T[]>): void {
		this._onChange = fn;
	}

	public registerOnTouched(fn: TouchFn): void {
		this._onTouched = fn;
	}

	public setDisabledState(isDisabled: boolean): void {
		this._disabled.set(isDisabled);
	}

	public open() {
		this._popoverState.set('open');
	}

	public close() {
		this._popoverState.set('closed');
	}

	public reset() {
		this._mutableDate.set(undefined);
		this._onChange?.([]);
		this.dateChange.emit([]);
	}
}

export interface HlmDatePickerTriggerBase {
	triggerId: Signal<string>;
}

export const HlmDatePickerTriggerToken = new InjectionToken<HlmDatePickerTriggerBase>('HlmDatePickerTriggerToken');

export function provideHlmDatePickerTrigger(instance: Type<HlmDatePickerTriggerBase>): ExistingProvider {
	return { provide: HlmDatePickerTriggerToken, useExisting: instance };
}

@Component({
	selector: 'hlm-date-picker-trigger',
	imports: [HlmButtonImports, HlmPopoverTrigger, NgIcon, BrnFieldControlDescribedBy],
	providers: [provideIcons({ lucideChevronDown }), provideHlmDatePickerTrigger(HlmDatePickerTrigger)],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: { 'data-slot': 'date-picker-trigger' },
	template: `
		<button
			[id]="buttonId()"
			type="button"
			[class]="_computedClass()"
			[disabled]="_disabled()"
			[attr.aria-invalid]="_ariaInvalid()"
			[attr.data-invalid]="_ariaInvalid()"
			[attr.data-touched]="_touched?.() ? 'true' : null"
			[attr.data-dirty]="_dirty?.() ? 'true' : null"
			[attr.data-matches-spartan-invalid]="_spartanInvalid() ? 'true' : null"
			hlmBtn
			[variant]="variant()"
			hlmPopoverTrigger
			[hlmPopoverTriggerFor]="_popover()"
			brnFieldControlDescribedBy
			[attr.data-placeholder]="_isPlaceholder() ? '' : null"
		>
			<span class="truncate">
				@if (_formattedDate(); as formattedDate) {
					{{ formattedDate }}
				} @else {
					<ng-content />
				}
			</span>

			@if (showTrigger()) {
				<ng-icon name="lucideChevronDown" />
			}
		</button>
	`,
})
export class HlmDatePickerTrigger implements HlmDatePickerTriggerBase {
	private static _nextId = 0;

	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
	private readonly _datePicker = injectHlmDatePicker();

	private readonly _invalid = this._fieldControl?.invalid;
	protected readonly _spartanInvalid = computed(() => this.forceInvalid() || this._fieldControl?.spartanInvalid());
	protected readonly _dirty = this._fieldControl?.dirty;
	protected readonly _touched = this._fieldControl?.touched;

	protected readonly _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null));

	public readonly userClass = input<ClassValue>('', { alias: 'class' });
	protected readonly _computedClass = computed(() =>
		hlm('data-placeholder:text-muted-foreground w-64 justify-between', this.userClass()),
	);

	protected readonly _isPlaceholder = computed(() => !this._datePicker.hasDate());

	/** The id of the button that opens the date picker. */
	public readonly buttonId = input<string>(`hlm-date-picker-${++HlmDatePickerTrigger._nextId}`);

	/** @internal The id of the button that opens the date picker, used for labeling. */
	public readonly triggerId = this.buttonId;

	/** Forces the invalid state visually, regardless of form control state. */
	public readonly forceInvalid = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	public readonly variant = input<ButtonVariants['variant']>('outline');

	public readonly showTrigger = input<boolean, BooleanInput>(true, { transform: booleanAttribute });

	protected readonly _popover = this._datePicker.popover;
	protected readonly _disabled = this._datePicker.disabledState;
	protected readonly _formattedDate = this._datePicker.formattedDate;
}

export interface HlmDatePickerBase<T> {
	popover: Signal<BrnPopover>;
	disabledState: Signal<boolean>;
	formattedDate: Signal<string | undefined>;
	hasDate: Signal<boolean>;
	/** Commit a date to the picker (e.g. from a parsed input). Pass `undefined` to clear. Optional. */
	updateDate?(value: T | undefined): void;
	// used for ControlValueAccessor
	touched?(): void;
}

export const HlmDatePickerToken = new InjectionToken<HlmDatePickerBase<unknown>>('HlmDatePickerToken');

export function provideHlmDatePicker(instance: Type<HlmDatePickerBase<unknown>>): ExistingProvider {
	return { provide: HlmDatePickerToken, useExisting: instance };
}

/**
 * Inject the date picker component.
 */
export function injectHlmDatePicker<T>(): HlmDatePickerBase<T> {
	return inject(HlmDatePickerToken) as HlmDatePickerBase<T>;
}

export interface HlmDatePickerConfig<T> {
	/**
	 * If true, the date picker will close when a date is selected.
	 */
	autoCloseOnSelect: boolean;

	/**
	 * Defines how the date should be displayed in the UI.
	 *
	 * @param date
	 * @returns formatted date
	 */
	formatDate: (date: T) => string;

	/**
	 * Defines how the date should be transformed before saving to model/form.
	 *
	 * @param date
	 * @returns transformed date
	 */
	transformDate: (date: T) => T;

	/**
	 * Parse a user-entered string into a date.
	 *
	 * @param value the raw string from the input
	 * @returns the parsed date, or `undefined` when the value can't be parsed
	 */
	parseDate: (value: string) => T | undefined;
}

function getDefaultConfig<T>(): HlmDatePickerConfig<T> {
	return {
		formatDate: (date) => (date instanceof Date ? date.toDateString() : `${date}`),
		transformDate: (date) => date,
		parseDate: (value) => {
			const date = new Date(value);
			return isNaN(date.getTime()) ? undefined : (date as T);
		},
		autoCloseOnSelect: false,
	};
}

const HlmDatePickerConfigToken = new InjectionToken<HlmDatePickerConfig<unknown>>('HlmDatePickerConfig');

export function provideHlmDatePickerConfig<T>(config: Partial<HlmDatePickerConfig<T>>): ValueProvider {
	return { provide: HlmDatePickerConfigToken, useValue: { ...getDefaultConfig(), ...config } };
}

export function injectHlmDatePickerConfig<T>(): HlmDatePickerConfig<T> {
	const injectedConfig = inject(HlmDatePickerConfigToken, { optional: true });
	return injectedConfig ? (injectedConfig as HlmDatePickerConfig<T>) : getDefaultConfig();
}

export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
	provide: NG_VALUE_ACCESSOR,
	useExisting: forwardRef(() => HlmDatePicker),
	multi: true,
};

@Component({
	selector: 'hlm-date-picker',
	imports: [HlmPopoverImports, HlmCalendar],
	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideHlmDatePicker(HlmDatePicker), provideBrnLabelable(HlmDatePicker)],
	changeDetection: ChangeDetectionStrategy.OnPush,
	hostDirectives: [BrnFieldControl],
	host: { class: 'block' },
	template: `
		<hlm-popover
			sideOffset="5"
			[state]="_popoverState()"
			(stateChanged)="_popoverState.set($event)"
			(closed)="_onTouched?.()"
		>
			<ng-content />

			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
				<ng-content select="[hlmDatePickerHeader]" />
				<hlm-calendar
					class="rounded-none border-0"
					[captionLayout]="captionLayout()"
					[date]="_mutableDate()"
					[defaultFocusedDate]="_mutableDate() ?? defaultFocusedDate()"
					[min]="min()"
					[max]="max()"
					[disabled]="_disabled()"
					(dateChange)="_handleChange($event)"
				/>
				<ng-content select="[hlmDatePickerFooter]" />
			</hlm-popover-content>
		</hlm-popover>
	`,
})
export class HlmDatePicker<T> implements HlmDatePickerBase<T>, ControlValueAccessor {
	private readonly _config = injectHlmDatePickerConfig<T>();

	public readonly popover = viewChild.required(BrnPopover);

	private readonly _trigger = contentChild(HlmDatePickerTriggerToken);

	/** Show dropdowns to navigate between months or years. */
	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');

	/** The minimum date that can be selected.*/
	public readonly min = input<T>();

	/** The maximum date that can be selected. */
	public readonly max = input<T>();

	/** Determine if the date picker is disabled. */
	public readonly disabled = input<boolean, BooleanInput>(false, {
		transform: booleanAttribute,
	});

	/** The selected value. */
	public readonly date = input<T>();

	/** The date the calendar focuses on first open when no date is selected. */
	public readonly defaultFocusedDate = input<T>();

	protected readonly _mutableDate = linkedSignal(this.date);

	/** If true, the date picker will close when a date is selected. */
	public readonly autoCloseOnSelect = input<boolean, BooleanInput>(this._config.autoCloseOnSelect, {
		transform: booleanAttribute,
	});

	/** Defines how the date should be displayed in the UI.  */
	public readonly formatDate = input<(date: T) => string>(this._config.formatDate);

	/** Defines how the date should be transformed before saving to model/form. */
	public readonly transformDate = input<(date: T) => T>(this._config.transformDate);

	protected readonly _popoverState = signal<BrnOverlayState | null>(null);

	protected readonly _disabled = linkedSignal(this.disabled);

	/** @internal The disabled state as a readonly signal */
	public readonly disabledState = this._disabled.asReadonly();

	public readonly formattedDate = computed(() => {
		const date = this._mutableDate();
		return date ? this.formatDate()(date) : undefined;
	});

	public readonly dateChange = output<T>();

	public readonly labelableId = computed(() => this._trigger()?.triggerId());

	public readonly hasDate = computed(() => !!this._mutableDate());

	protected _onChange?: ChangeFn<T>;
	protected _onTouched?: TouchFn;

	protected _handleChange(value: T | undefined) {
		if (this._disabled()) return;
		this.updateDate(value);

		if (this.autoCloseOnSelect()) {
			this._popoverState.set('closed');
		}
	}

	/**
	 * Commit a date to the picker. Updates the internal model, notifies form
	 * controls, and emits `dateChange`. Unlike `_handleChange`, this does not
	 * close the popover - it's intended to be called from a text input that
	 * is parsing user-entered values while typing.
	 */
	public updateDate(value: T | undefined) {
		if (this._disabled()) return;
		const transformedDate = value !== undefined ? this.transformDate()(value) : undefined;

		this._mutableDate.set(transformedDate);
		this._onChange?.(transformedDate as T);
		this.dateChange.emit(transformedDate as T);
	}

	/** CONTROL VALUE ACCESSOR */
	public writeValue(value: T | null): void {
		this._mutableDate.set(value ? this.transformDate()(value) : undefined);
	}

	public registerOnChange(fn: ChangeFn<T>): void {
		this._onChange = fn;
	}

	public registerOnTouched(fn: TouchFn): void {
		this._onTouched = fn;
	}

	public touched(): void {
		this._onTouched?.();
	}

	public setDisabledState(isDisabled: boolean): void {
		this._disabled.set(isDisabled);
	}

	public open() {
		this._popoverState.set('open');
	}

	public close() {
		this._popoverState.set('closed');
	}

	public reset() {
		this._mutableDate.set(undefined);
		this._onChange?.(undefined as T);
		this.dateChange.emit(undefined as T);
	}
}

export interface HlmDateRangePickerConfig<T> {
	/**
	 * If true, the date picker will close when the max selection of dates is reached.
	 */
	autoCloseOnEndSelection: boolean;

	/**
	 * Defines how the date should be displayed in the UI.
	 *
	 * @param dates
	 * @returns formatted date
	 */
	formatDates: (dates: [T | undefined, T | undefined]) => string;

	/**
	 * Defines how the date should be transformed before saving to model/form.
	 *
	 * @param dates
	 * @returns transformed date
	 */
	transformDates: (dates: [T, T]) => [T, T];
}

function getDefaultConfig<T>(): HlmDateRangePickerConfig<T> {
	return {
		formatDates: (dates) =>
			dates
				.filter(Boolean)
				.map((date) => (date instanceof Date ? date.toDateString() : `${date}`))
				.join(' - '),
		transformDates: (dates) => dates,
		autoCloseOnEndSelection: false,
	};
}

const HlmDateRangePickerConfigToken = new InjectionToken<HlmDateRangePickerConfig<unknown>>('HlmDateRangePickerConfig');

export function provideHlmDateRangePickerConfig<T>(config: Partial<HlmDateRangePickerConfig<T>>): ValueProvider {
	return { provide: HlmDateRangePickerConfigToken, useValue: { ...getDefaultConfig(), ...config } };
}

export function injectHlmDateRangePickerConfig<T>(): HlmDateRangePickerConfig<T> {
	const injectedConfig = inject(HlmDateRangePickerConfigToken, { optional: true });
	return injectedConfig ? (injectedConfig as HlmDateRangePickerConfig<T>) : getDefaultConfig();
}

export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
	provide: NG_VALUE_ACCESSOR,
	useExisting: forwardRef(() => HlmDateRangePicker),
	multi: true,
};

@Component({
	selector: 'hlm-date-range-picker',
	imports: [HlmPopoverImports, HlmCalendarRange],
	providers: [
		HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR,
		provideHlmDatePicker(HlmDateRangePicker),
		provideBrnLabelable(HlmDateRangePicker),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	hostDirectives: [BrnFieldControl],
	host: { class: 'block' },
	template: `
		<hlm-popover
			sideOffset="5"
			[state]="_popoverState()"
			(stateChanged)="_popoverState.set($event)"
			(closed)="_onClose(); _onTouched?.()"
		>
			<ng-content />

			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
				<ng-content select="[hlmDatePickerHeader]" />
				<hlm-calendar-range
					class="rounded-none border-0"
					[startDate]="_start()"
					[captionLayout]="captionLayout()"
					[endDate]="_end()"
					[min]="min()"
					[max]="max()"
					[disabled]="_disabled()"
					(startDateChange)="_handleStartDayChange($event)"
					(endDateChange)="_handleEndDateChange($event)"
				/>
				<ng-content select="[hlmDatePickerFooter]" />
			</hlm-popover-content>
		</hlm-popover>
	`,
})
export class HlmDateRangePicker<T> implements HlmDatePickerBase<T>, ControlValueAccessor {
	private readonly _config = injectHlmDateRangePickerConfig<T>();

	public readonly popover = viewChild.required(BrnPopover);

	private readonly _trigger = contentChild(HlmDatePickerTriggerToken);

	/** Show dropdowns to navigate between months or years. */
	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');

	/** The minimum date that can be selected.*/
	public readonly min = input<T>();

	/** The maximum date that can be selected. */
	public readonly max = input<T>();

	/** Determine if the date picker is disabled. */
	public readonly disabled = input<boolean, BooleanInput>(false, {
		transform: booleanAttribute,
	});

	/** The selected value. */
	public readonly date = input<[T, T]>();

	protected readonly _mutableDate = linkedSignal(this.date);

	protected readonly _start = linkedSignal(() => this._mutableDate()?.[0]);
	protected readonly _end = linkedSignal(() => this._mutableDate()?.[1]);

	/** If true, the date picker will close when the end date is selected */
	public readonly autoCloseOnEndSelection = input<boolean, BooleanInput>(this._config.autoCloseOnEndSelection, {
		transform: booleanAttribute,
	});

	/** Defines how the date should be displayed in the UI.  */
	public readonly formatDates = input<(dates: [T | undefined, T | undefined]) => string>(this._config.formatDates);

	/** Defines how the date should be transformed before saving to model/form. */
	public readonly transformDates = input<(date: [T, T]) => [T, T]>(this._config.transformDates);

	protected readonly _popoverState = signal<BrnOverlayState | null>(null);

	protected readonly _disabled = linkedSignal(this.disabled);

	/** @internal The disabled state as a readonly signal */
	public readonly disabledState = this._disabled.asReadonly();

	public readonly formattedDate = computed(() => {
		const start = this._start();
		const end = this._end();
		return start || end ? this.formatDates()([start, end]) : undefined;
	});

	public readonly dateChange = output<[T, T] | null>();

	public readonly labelableId = computed(() => this._trigger()?.triggerId());

	public readonly hasDate = computed(() => !!this._start() || !!this._end());

	protected _onChange?: ChangeFn<[T, T] | null>;
	protected _onTouched?: TouchFn;

	protected _handleStartDayChange(value: T | undefined) {
		this._start.set(value);
	}

	protected _handleEndDateChange(value: T | undefined): void {
		this._end.set(value);
		if (this._disabled()) return;

		const start = this._start();
		if (start && value) {
			const transformedDates = this.transformDates()([start, value]);
			this._mutableDate.set(transformedDates);
			this.dateChange.emit(transformedDates);
			this._onChange?.(transformedDates);

			if (this.autoCloseOnEndSelection()) {
				this._popoverState.set('closed');
			}
		}
	}

	/** CONTROL VALUE ACCESSOR */
	public writeValue(value: [T, T] | null): void {
		untracked(() => {
			if (!value) {
				this._mutableDate.set(undefined);
			} else {
				this._mutableDate.set(this.transformDates()(value));
			}
		});
	}

	public registerOnChange(fn: ChangeFn<[T, T] | null>): void {
		this._onChange = fn;
	}

	public registerOnTouched(fn: TouchFn): void {
		this._onTouched = fn;
	}

	public setDisabledState(isDisabled: boolean): void {
		this._disabled.set(isDisabled);
	}

	public open() {
		this._popoverState.set('open');
	}

	public close() {
		this._popoverState.set('closed');
	}

	public reset() {
		this._mutableDate.set(undefined);
		this._start.set(undefined);
		this._end.set(undefined);
		this._onChange?.(null);
		this.dateChange.emit(null);
	}

	protected _onClose(): void {
		const dates = this._mutableDate();
		if (this._start() && !this._end() && dates) {
			this._start.set(dates[0]);
			this._end.set(dates[1]);
		}
	}
}

export const HlmDatePickerImports = [
	HlmDatePicker,
	HlmDatePickerAnchor,
	HlmDatePickerInput,
	HlmDatePickerMulti,
	HlmDateRangePicker,
	HlmDatePickerTrigger,
] as const;

import { BooleanInput, type BooleanInput, type NumberInput } from '@angular/cdk/coercion';
import { BrnFieldControl, BrnFieldControlDescribedBy, provideBrnLabelable } from '@spartan-ng/brain/field';
import { BrnOverlay, type BrnOverlayState } from '@spartan-ng/brain/overlay';
import { BrnPopover, type BrnPopover } from '@spartan-ng/brain/popover';
import { ButtonVariants, HlmButtonImports } from '@spartan-ng/helm/button';
import { ChangeDetectionStrategy, Component, Directive, ElementRef, InjectionToken, booleanAttribute, computed, contentChild, effect, forwardRef, inject, input, linkedSignal, numberAttribute, output, signal, untracked, viewChild, type ExistingProvider, type Signal, type Type, type ValueProvider } from '@angular/core';
import { ClassValue } from 'clsx';
import { HlmCalendar, HlmCalendarMulti, HlmCalendarRange } from '@spartan-ng/helm/calendar';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmPopoverImports, HlmPopoverTrigger } from '@spartan-ng/helm/popover';
import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { hlm } from '@spartan-ng/helm/utils';
import { lucideCalendar, lucideChevronDown, lucideX } from '@ng-icons/lucide';
import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';

@Directive({ selector: '[hlmDatePickerAnchor]' })
export class HlmDatePickerAnchor {
	private readonly _host = inject(ElementRef, { host: true });
	private readonly _brnOverlay = inject(BrnOverlay, { optional: true });

	public readonly hlmDatePickerAnchorFor = input<BrnPopover | undefined>(undefined, {
		alias: 'hlmDatePickerAnchorFor',
	});

	constructor() {
		effect(() => {
			this.hlmDatePickerAnchorFor()?.setOrigin(this._host.nativeElement);
		});

		this._brnOverlay?.setOrigin(this._host.nativeElement);
	}
}

@Component({
	selector: 'hlm-date-picker-input',
	imports: [HlmInputGroupImports, HlmButtonImports, HlmDatePickerAnchor, NgIcon],
	providers: [provideIcons({ lucideCalendar, lucideX }), provideHlmDatePickerTrigger(HlmDatePickerInput)],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-input-group hlmDatePickerAnchor [hlmDatePickerAnchorFor]="_popover()">
			<input
				hlmInputGroupInput
				[value]="_inputValue()"
				[id]="inputId()"
				[placeholder]="placeholder()"
				[disabled]="_disabled()"
				[forceInvalid]="forceInvalid()"
				(click)="_handleClick()"
				(keydown.arrowDown)="_open()"
				(keydown.enter)="_handleEnter($event)"
				(input)="_handleInputChange($event)"
				(blur)="_commitDate()"
			/>
			<hlm-input-group-addon align="inline-end">
				@if (_showClearButton()) {
					<button
						hlmInputGroupButton
						size="icon-xs"
						variant="ghost"
						[attr.aria-label]="clearAriaLabel()"
						(click)="_clear()"
						[disabled]="_disabled()"
					>
						<ng-icon name="lucideX" />
					</button>
				}
				<button
					hlmInputGroupButton
					size="icon-xs"
					[attr.aria-label]="calendarAriaLabel()"
					(click)="_popover().open()"
					[disabled]="_disabled()"
				>
					<ng-icon name="lucideCalendar" />
				</button>
			</hlm-input-group-addon>
		</hlm-input-group>
	`,
})
export class HlmDatePickerInput<T> implements HlmDatePickerTriggerBase {
	private static _nextId = 0;
	private readonly _datePicker = injectHlmDatePicker<T>();
	private readonly _config = injectHlmDatePickerConfig<T>();

	protected readonly _popover = this._datePicker.popover;
	protected readonly _disabled = this._datePicker.disabledState;

	public readonly inputId = input(`hlm-date-picker-input-${HlmDatePickerInput._nextId++}`);

	public readonly placeholder = input('');

	public readonly inputValue = input<string>('');

	/**
	 * Parses input text into a date value. Return `undefined` for invalid
	 * input - the picker's date is cleared while the text is preserved so
	 * the user can fix it.
	 *
	 * Defaults to `parseDate` from `HlmDatePickerConfig`.
	 */
	public readonly parseDate = input<(value: string) => T | undefined>(this._config.parseDate);

	public readonly forceInvalid = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	/** Show a clear button that resets the input and picker date. Hidden when empty. */
	public readonly showClear = input<boolean, BooleanInput>(true, { transform: booleanAttribute });

	/** Open the popover on input click. */
	public readonly openOnClick = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	/** Accessible label for the clear button. */
	public readonly clearAriaLabel = input<string>('Clear date');

	/** Accessible label for the calendar trigger button. */
	public readonly calendarAriaLabel = input<string>('Open calendar');

	/** @internal Id used by the trigger contract for labeling. */
	public readonly triggerId = this.inputId;

	/**
	 * Text shown in the input. Mirrors the picker's `formattedDate` and the
	 * parent's `inputValue`, and accepts user writes via `_handleInputChange`.
	 * Commits only happen on blur / Enter, so in-progress text isn't clobbered.
	 */
	protected readonly _inputValue = linkedSignal<{ formatted: string | undefined; inputValue: string }, string>({
		source: () => ({
			formatted: this._datePicker.formattedDate(),
			inputValue: this.inputValue(),
		}),
		computation: (source, previous) => {
			// First render: prefer formatted, fall back to inputValue.
			if (previous === undefined) {
				return source.formatted ?? source.inputValue;
			}

			// Picker's formatted date changed - snap to canonical format.
			if (source.formatted !== previous.source.formatted) {
				if (source.formatted !== undefined) {
					return source.formatted;
				}
				// Cleared externally vs. user has invalid text in flight: only
				// mirror the clear when the displayed text was in sync.
				return previous.value === previous.source.formatted ? '' : previous.value;
			}

			// Parent updated inputValue - reflect it.
			if (source.inputValue !== previous.source.inputValue) {
				return source.inputValue;
			}

			return previous.value;
		},
	});

	protected _handleInputChange(event: Event) {
		const text = (event.target as HTMLInputElement).value;
		this._inputValue.set(text);
	}

	protected readonly _showClearButton = computed(() => this.showClear() && this._inputValue().length > 0);

	protected _clear() {
		this._inputValue.set('');
		this._datePicker.updateDate?.(undefined);
		this._datePicker.touched?.();
	}

	protected _handleEnter(event: Event) {
		event.preventDefault();
		this._commitDate();
		this._popover().close();
	}

	protected _commitDate() {
		const value = this._inputValue();

		if (!value) {
			this._datePicker.updateDate?.(undefined);
			this._datePicker.touched?.();
			return;
		}

		// Invalid parse: clear the picker date, keep the text so the user can fix it.
		const parsed = this.parseDate()(value);
		this._datePicker.updateDate?.(parsed ?? undefined);
		this._datePicker.touched?.();
	}

	protected _open() {
		this._popover().open();
	}

	protected _handleClick() {
		if (this.openOnClick()) {
			this._open();
		}
	}
}

export interface HlmDatePickerMultiConfig<T> {
	/**
	 * If true, the date picker will close when the max selection of dates is reached.
	 */
	autoCloseOnMaxSelection: boolean;

	/**
	 * Defines how the date should be displayed in the UI.
	 *
	 * @param dates
	 * @returns formatted date
	 */
	formatDates: (dates: T[]) => string;

	/**
	 * Defines how the date should be transformed before saving to model/form.
	 *
	 * @param dates
	 * @returns transformed date
	 */
	transformDates: (dates: T[]) => T[];
}

function getDefaultConfig<T>(): HlmDatePickerMultiConfig<T> {
	return {
		formatDates: (dates) => dates.map((date) => (date instanceof Date ? date.toDateString() : `${date}`)).join(', '),
		transformDates: (dates) => dates,
		autoCloseOnMaxSelection: false,
	};
}

const HlmDatePickerMultiConfigToken = new InjectionToken<HlmDatePickerMultiConfig<unknown>>('HlmDatePickerMultiConfig');

export function provideHlmDatePickerMultiConfig<T>(config: Partial<HlmDatePickerMultiConfig<T>>): ValueProvider {
	return { provide: HlmDatePickerMultiConfigToken, useValue: { ...getDefaultConfig(), ...config } };
}

export function injectHlmDatePickerMultiConfig<T>(): HlmDatePickerMultiConfig<T> {
	const injectedConfig = inject(HlmDatePickerMultiConfigToken, { optional: true });
	return injectedConfig ? (injectedConfig as HlmDatePickerMultiConfig<T>) : getDefaultConfig();
}

export const HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR = {
	provide: NG_VALUE_ACCESSOR,
	useExisting: forwardRef(() => HlmDatePickerMulti),
	multi: true,
};

@Component({
	selector: 'hlm-date-picker-multi',
	imports: [HlmPopoverImports, HlmCalendarMulti],
	providers: [
		HLM_DATE_PICKER_MUTLI_VALUE_ACCESSOR,
		provideHlmDatePicker(HlmDatePickerMulti),
		provideBrnLabelable(HlmDatePickerMulti),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	hostDirectives: [BrnFieldControl],
	host: { class: 'block' },
	template: `
		<hlm-popover
			sideOffset="5"
			[state]="_popoverState()"
			(stateChanged)="_popoverState.set($event)"
			(closed)="_onTouched?.()"
		>
			<ng-content />

			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
				<ng-content select="[hlmDatePickerHeader]" />
				<hlm-calendar-multi
					class="rounded-none border-0"
					[date]="_mutableDate()"
					[captionLayout]="captionLayout()"
					[min]="min()"
					[max]="max()"
					[minSelection]="minSelection()"
					[maxSelection]="maxSelection()"
					[disabled]="_disabled()"
					(dateChange)="_handleChange($event)"
				/>
				<ng-content select="[hlmDatePickerFooter]" />
			</hlm-popover-content>
		</hlm-popover>
	`,
})
export class HlmDatePickerMulti<T> implements HlmDatePickerBase<T>, ControlValueAccessor {
	private readonly _config = injectHlmDatePickerMultiConfig<T>();

	public readonly popover = viewChild.required(BrnPopover);

	private readonly _trigger = contentChild(HlmDatePickerTriggerToken);

	/** Show dropdowns to navigate between months or years. */
	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');

	/** The minimum date that can be selected.*/
	public readonly min = input<T>();

	/** The maximum date that can be selected. */
	public readonly max = input<T>();

	/** The minimum selectable dates.  */
	public readonly minSelection = input<number, NumberInput>(undefined, {
		transform: numberAttribute,
	});

	/** The maximum selectable dates.  */
	public readonly maxSelection = input<number, NumberInput>(undefined, {
		transform: numberAttribute,
	});

	/** Determine if the date picker is disabled. */
	public readonly disabled = input<boolean, BooleanInput>(false, {
		transform: booleanAttribute,
	});

	/** The selected value. */
	public readonly date = input<T[]>();

	protected readonly _mutableDate = linkedSignal(this.date);

	/** If true, the date picker will close when the max selection of dates is reached. */
	public readonly autoCloseOnMaxSelection = input<boolean, BooleanInput>(this._config.autoCloseOnMaxSelection, {
		transform: booleanAttribute,
	});

	/** Defines how the date should be displayed in the UI.  */
	public readonly formatDates = input<(date: T[]) => string>(this._config.formatDates);

	/** Defines how the date should be transformed before saving to model/form. */
	public readonly transformDates = input<(date: T[]) => T[]>(this._config.transformDates);

	protected readonly _popoverState = signal<BrnOverlayState | null>(null);

	protected readonly _disabled = linkedSignal(this.disabled);

	/** @internal The disabled state as a readonly signal */
	public readonly disabledState = this._disabled.asReadonly();

	public readonly formattedDate = computed(() => {
		const dates = this._mutableDate();
		return dates ? this.formatDates()(dates) : undefined;
	});

	public readonly dateChange = output<T[]>();

	public readonly labelableId = computed(() => this._trigger()?.triggerId());

	public readonly hasDate = computed(() => !!this._mutableDate()?.length);

	protected _onChange?: ChangeFn<T[]>;
	protected _onTouched?: TouchFn;

	protected _handleChange(value: T[] | undefined) {
		if (value === undefined) return;

		if (this._disabled()) return;
		const transformedDate = value !== undefined ? this.transformDates()(value) : value;

		this._mutableDate.set(transformedDate);
		this._onChange?.(transformedDate);
		this.dateChange.emit(transformedDate);

		if (this.autoCloseOnMaxSelection() && this._mutableDate()?.length === this.maxSelection()) {
			this._popoverState.set('closed');
		}
	}

	/** CONTROL VALUE ACCESSOR */
	public writeValue(value: T[] | null): void {
		this._mutableDate.set(value ? this.transformDates()(value) : undefined);
	}

	public registerOnChange(fn: ChangeFn<T[]>): void {
		this._onChange = fn;
	}

	public registerOnTouched(fn: TouchFn): void {
		this._onTouched = fn;
	}

	public setDisabledState(isDisabled: boolean): void {
		this._disabled.set(isDisabled);
	}

	public open() {
		this._popoverState.set('open');
	}

	public close() {
		this._popoverState.set('closed');
	}

	public reset() {
		this._mutableDate.set(undefined);
		this._onChange?.([]);
		this.dateChange.emit([]);
	}
}

export interface HlmDatePickerTriggerBase {
	triggerId: Signal<string>;
}

export const HlmDatePickerTriggerToken = new InjectionToken<HlmDatePickerTriggerBase>('HlmDatePickerTriggerToken');

export function provideHlmDatePickerTrigger(instance: Type<HlmDatePickerTriggerBase>): ExistingProvider {
	return { provide: HlmDatePickerTriggerToken, useExisting: instance };
}

@Component({
	selector: 'hlm-date-picker-trigger',
	imports: [HlmButtonImports, HlmPopoverTrigger, NgIcon, BrnFieldControlDescribedBy],
	providers: [provideIcons({ lucideChevronDown }), provideHlmDatePickerTrigger(HlmDatePickerTrigger)],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: { 'data-slot': 'date-picker-trigger' },
	template: `
		<button
			[id]="buttonId()"
			type="button"
			[class]="_computedClass()"
			[disabled]="_disabled()"
			[attr.aria-invalid]="_ariaInvalid()"
			[attr.data-invalid]="_ariaInvalid()"
			[attr.data-touched]="_touched?.() ? 'true' : null"
			[attr.data-dirty]="_dirty?.() ? 'true' : null"
			[attr.data-matches-spartan-invalid]="_spartanInvalid() ? 'true' : null"
			hlmBtn
			[variant]="variant()"
			hlmPopoverTrigger
			[hlmPopoverTriggerFor]="_popover()"
			brnFieldControlDescribedBy
			[attr.data-placeholder]="_isPlaceholder() ? '' : null"
		>
			<span class="truncate">
				@if (_formattedDate(); as formattedDate) {
					{{ formattedDate }}
				} @else {
					<ng-content />
				}
			</span>

			@if (showTrigger()) {
				<ng-icon name="lucideChevronDown" />
			}
		</button>
	`,
})
export class HlmDatePickerTrigger implements HlmDatePickerTriggerBase {
	private static _nextId = 0;

	private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
	private readonly _datePicker = injectHlmDatePicker();

	private readonly _invalid = this._fieldControl?.invalid;
	protected readonly _spartanInvalid = computed(() => this.forceInvalid() || this._fieldControl?.spartanInvalid());
	protected readonly _dirty = this._fieldControl?.dirty;
	protected readonly _touched = this._fieldControl?.touched;

	protected readonly _ariaInvalid = computed(() => (this._invalid?.() ? 'true' : null));

	public readonly userClass = input<ClassValue>('', { alias: 'class' });
	protected readonly _computedClass = computed(() =>
		hlm('data-placeholder:text-muted-foreground w-64 justify-between', this.userClass()),
	);

	protected readonly _isPlaceholder = computed(() => !this._datePicker.hasDate());

	/** The id of the button that opens the date picker. */
	public readonly buttonId = input<string>(`hlm-date-picker-${++HlmDatePickerTrigger._nextId}`);

	/** @internal The id of the button that opens the date picker, used for labeling. */
	public readonly triggerId = this.buttonId;

	/** Forces the invalid state visually, regardless of form control state. */
	public readonly forceInvalid = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	public readonly variant = input<ButtonVariants['variant']>('outline');

	public readonly showTrigger = input<boolean, BooleanInput>(true, { transform: booleanAttribute });

	protected readonly _popover = this._datePicker.popover;
	protected readonly _disabled = this._datePicker.disabledState;
	protected readonly _formattedDate = this._datePicker.formattedDate;
}

export interface HlmDatePickerBase<T> {
	popover: Signal<BrnPopover>;
	disabledState: Signal<boolean>;
	formattedDate: Signal<string | undefined>;
	hasDate: Signal<boolean>;
	/** Commit a date to the picker (e.g. from a parsed input). Pass `undefined` to clear. Optional. */
	updateDate?(value: T | undefined): void;
	// used for ControlValueAccessor
	touched?(): void;
}

export const HlmDatePickerToken = new InjectionToken<HlmDatePickerBase<unknown>>('HlmDatePickerToken');

export function provideHlmDatePicker(instance: Type<HlmDatePickerBase<unknown>>): ExistingProvider {
	return { provide: HlmDatePickerToken, useExisting: instance };
}

/**
 * Inject the date picker component.
 */
export function injectHlmDatePicker<T>(): HlmDatePickerBase<T> {
	return inject(HlmDatePickerToken) as HlmDatePickerBase<T>;
}

export interface HlmDatePickerConfig<T> {
	/**
	 * If true, the date picker will close when a date is selected.
	 */
	autoCloseOnSelect: boolean;

	/**
	 * Defines how the date should be displayed in the UI.
	 *
	 * @param date
	 * @returns formatted date
	 */
	formatDate: (date: T) => string;

	/**
	 * Defines how the date should be transformed before saving to model/form.
	 *
	 * @param date
	 * @returns transformed date
	 */
	transformDate: (date: T) => T;

	/**
	 * Parse a user-entered string into a date.
	 *
	 * @param value the raw string from the input
	 * @returns the parsed date, or `undefined` when the value can't be parsed
	 */
	parseDate: (value: string) => T | undefined;
}

function getDefaultConfig<T>(): HlmDatePickerConfig<T> {
	return {
		formatDate: (date) => (date instanceof Date ? date.toDateString() : `${date}`),
		transformDate: (date) => date,
		parseDate: (value) => {
			const date = new Date(value);
			return isNaN(date.getTime()) ? undefined : (date as T);
		},
		autoCloseOnSelect: false,
	};
}

const HlmDatePickerConfigToken = new InjectionToken<HlmDatePickerConfig<unknown>>('HlmDatePickerConfig');

export function provideHlmDatePickerConfig<T>(config: Partial<HlmDatePickerConfig<T>>): ValueProvider {
	return { provide: HlmDatePickerConfigToken, useValue: { ...getDefaultConfig(), ...config } };
}

export function injectHlmDatePickerConfig<T>(): HlmDatePickerConfig<T> {
	const injectedConfig = inject(HlmDatePickerConfigToken, { optional: true });
	return injectedConfig ? (injectedConfig as HlmDatePickerConfig<T>) : getDefaultConfig();
}

export const HLM_DATE_PICKER_VALUE_ACCESSOR = {
	provide: NG_VALUE_ACCESSOR,
	useExisting: forwardRef(() => HlmDatePicker),
	multi: true,
};

@Component({
	selector: 'hlm-date-picker',
	imports: [HlmPopoverImports, HlmCalendar],
	providers: [HLM_DATE_PICKER_VALUE_ACCESSOR, provideHlmDatePicker(HlmDatePicker), provideBrnLabelable(HlmDatePicker)],
	changeDetection: ChangeDetectionStrategy.OnPush,
	hostDirectives: [BrnFieldControl],
	host: { class: 'block' },
	template: `
		<hlm-popover
			sideOffset="5"
			[state]="_popoverState()"
			(stateChanged)="_popoverState.set($event)"
			(closed)="_onTouched?.()"
		>
			<ng-content />

			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
				<ng-content select="[hlmDatePickerHeader]" />
				<hlm-calendar
					class="rounded-none border-0"
					[captionLayout]="captionLayout()"
					[date]="_mutableDate()"
					[defaultFocusedDate]="_mutableDate() ?? defaultFocusedDate()"
					[min]="min()"
					[max]="max()"
					[disabled]="_disabled()"
					(dateChange)="_handleChange($event)"
				/>
				<ng-content select="[hlmDatePickerFooter]" />
			</hlm-popover-content>
		</hlm-popover>
	`,
})
export class HlmDatePicker<T> implements HlmDatePickerBase<T>, ControlValueAccessor {
	private readonly _config = injectHlmDatePickerConfig<T>();

	public readonly popover = viewChild.required(BrnPopover);

	private readonly _trigger = contentChild(HlmDatePickerTriggerToken);

	/** Show dropdowns to navigate between months or years. */
	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');

	/** The minimum date that can be selected.*/
	public readonly min = input<T>();

	/** The maximum date that can be selected. */
	public readonly max = input<T>();

	/** Determine if the date picker is disabled. */
	public readonly disabled = input<boolean, BooleanInput>(false, {
		transform: booleanAttribute,
	});

	/** The selected value. */
	public readonly date = input<T>();

	/** The date the calendar focuses on first open when no date is selected. */
	public readonly defaultFocusedDate = input<T>();

	protected readonly _mutableDate = linkedSignal(this.date);

	/** If true, the date picker will close when a date is selected. */
	public readonly autoCloseOnSelect = input<boolean, BooleanInput>(this._config.autoCloseOnSelect, {
		transform: booleanAttribute,
	});

	/** Defines how the date should be displayed in the UI.  */
	public readonly formatDate = input<(date: T) => string>(this._config.formatDate);

	/** Defines how the date should be transformed before saving to model/form. */
	public readonly transformDate = input<(date: T) => T>(this._config.transformDate);

	protected readonly _popoverState = signal<BrnOverlayState | null>(null);

	protected readonly _disabled = linkedSignal(this.disabled);

	/** @internal The disabled state as a readonly signal */
	public readonly disabledState = this._disabled.asReadonly();

	public readonly formattedDate = computed(() => {
		const date = this._mutableDate();
		return date ? this.formatDate()(date) : undefined;
	});

	public readonly dateChange = output<T>();

	public readonly labelableId = computed(() => this._trigger()?.triggerId());

	public readonly hasDate = computed(() => !!this._mutableDate());

	protected _onChange?: ChangeFn<T>;
	protected _onTouched?: TouchFn;

	protected _handleChange(value: T | undefined) {
		if (this._disabled()) return;
		this.updateDate(value);

		if (this.autoCloseOnSelect()) {
			this._popoverState.set('closed');
		}
	}

	/**
	 * Commit a date to the picker. Updates the internal model, notifies form
	 * controls, and emits `dateChange`. Unlike `_handleChange`, this does not
	 * close the popover - it's intended to be called from a text input that
	 * is parsing user-entered values while typing.
	 */
	public updateDate(value: T | undefined) {
		if (this._disabled()) return;
		const transformedDate = value !== undefined ? this.transformDate()(value) : undefined;

		this._mutableDate.set(transformedDate);
		this._onChange?.(transformedDate as T);
		this.dateChange.emit(transformedDate as T);
	}

	/** CONTROL VALUE ACCESSOR */
	public writeValue(value: T | null): void {
		this._mutableDate.set(value ? this.transformDate()(value) : undefined);
	}

	public registerOnChange(fn: ChangeFn<T>): void {
		this._onChange = fn;
	}

	public registerOnTouched(fn: TouchFn): void {
		this._onTouched = fn;
	}

	public touched(): void {
		this._onTouched?.();
	}

	public setDisabledState(isDisabled: boolean): void {
		this._disabled.set(isDisabled);
	}

	public open() {
		this._popoverState.set('open');
	}

	public close() {
		this._popoverState.set('closed');
	}

	public reset() {
		this._mutableDate.set(undefined);
		this._onChange?.(undefined as T);
		this.dateChange.emit(undefined as T);
	}
}

export interface HlmDateRangePickerConfig<T> {
	/**
	 * If true, the date picker will close when the max selection of dates is reached.
	 */
	autoCloseOnEndSelection: boolean;

	/**
	 * Defines how the date should be displayed in the UI.
	 *
	 * @param dates
	 * @returns formatted date
	 */
	formatDates: (dates: [T | undefined, T | undefined]) => string;

	/**
	 * Defines how the date should be transformed before saving to model/form.
	 *
	 * @param dates
	 * @returns transformed date
	 */
	transformDates: (dates: [T, T]) => [T, T];
}

function getDefaultConfig<T>(): HlmDateRangePickerConfig<T> {
	return {
		formatDates: (dates) =>
			dates
				.filter(Boolean)
				.map((date) => (date instanceof Date ? date.toDateString() : `${date}`))
				.join(' - '),
		transformDates: (dates) => dates,
		autoCloseOnEndSelection: false,
	};
}

const HlmDateRangePickerConfigToken = new InjectionToken<HlmDateRangePickerConfig<unknown>>('HlmDateRangePickerConfig');

export function provideHlmDateRangePickerConfig<T>(config: Partial<HlmDateRangePickerConfig<T>>): ValueProvider {
	return { provide: HlmDateRangePickerConfigToken, useValue: { ...getDefaultConfig(), ...config } };
}

export function injectHlmDateRangePickerConfig<T>(): HlmDateRangePickerConfig<T> {
	const injectedConfig = inject(HlmDateRangePickerConfigToken, { optional: true });
	return injectedConfig ? (injectedConfig as HlmDateRangePickerConfig<T>) : getDefaultConfig();
}

export const HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
	provide: NG_VALUE_ACCESSOR,
	useExisting: forwardRef(() => HlmDateRangePicker),
	multi: true,
};

@Component({
	selector: 'hlm-date-range-picker',
	imports: [HlmPopoverImports, HlmCalendarRange],
	providers: [
		HLM_DATE_RANGE_PICKER_VALUE_ACCESSOR,
		provideHlmDatePicker(HlmDateRangePicker),
		provideBrnLabelable(HlmDateRangePicker),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	hostDirectives: [BrnFieldControl],
	host: { class: 'block' },
	template: `
		<hlm-popover
			sideOffset="5"
			[state]="_popoverState()"
			(stateChanged)="_popoverState.set($event)"
			(closed)="_onClose(); _onTouched?.()"
		>
			<ng-content />

			<hlm-popover-content class="w-fit p-0" *hlmPopoverPortal="let ctx">
				<ng-content select="[hlmDatePickerHeader]" />
				<hlm-calendar-range
					class="rounded-none border-0"
					[startDate]="_start()"
					[captionLayout]="captionLayout()"
					[endDate]="_end()"
					[min]="min()"
					[max]="max()"
					[disabled]="_disabled()"
					(startDateChange)="_handleStartDayChange($event)"
					(endDateChange)="_handleEndDateChange($event)"
				/>
				<ng-content select="[hlmDatePickerFooter]" />
			</hlm-popover-content>
		</hlm-popover>
	`,
})
export class HlmDateRangePicker<T> implements HlmDatePickerBase<T>, ControlValueAccessor {
	private readonly _config = injectHlmDateRangePickerConfig<T>();

	public readonly popover = viewChild.required(BrnPopover);

	private readonly _trigger = contentChild(HlmDatePickerTriggerToken);

	/** Show dropdowns to navigate between months or years. */
	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');

	/** The minimum date that can be selected.*/
	public readonly min = input<T>();

	/** The maximum date that can be selected. */
	public readonly max = input<T>();

	/** Determine if the date picker is disabled. */
	public readonly disabled = input<boolean, BooleanInput>(false, {
		transform: booleanAttribute,
	});

	/** The selected value. */
	public readonly date = input<[T, T]>();

	protected readonly _mutableDate = linkedSignal(this.date);

	protected readonly _start = linkedSignal(() => this._mutableDate()?.[0]);
	protected readonly _end = linkedSignal(() => this._mutableDate()?.[1]);

	/** If true, the date picker will close when the end date is selected */
	public readonly autoCloseOnEndSelection = input<boolean, BooleanInput>(this._config.autoCloseOnEndSelection, {
		transform: booleanAttribute,
	});

	/** Defines how the date should be displayed in the UI.  */
	public readonly formatDates = input<(dates: [T | undefined, T | undefined]) => string>(this._config.formatDates);

	/** Defines how the date should be transformed before saving to model/form. */
	public readonly transformDates = input<(date: [T, T]) => [T, T]>(this._config.transformDates);

	protected readonly _popoverState = signal<BrnOverlayState | null>(null);

	protected readonly _disabled = linkedSignal(this.disabled);

	/** @internal The disabled state as a readonly signal */
	public readonly disabledState = this._disabled.asReadonly();

	public readonly formattedDate = computed(() => {
		const start = this._start();
		const end = this._end();
		return start || end ? this.formatDates()([start, end]) : undefined;
	});

	public readonly dateChange = output<[T, T] | null>();

	public readonly labelableId = computed(() => this._trigger()?.triggerId());

	public readonly hasDate = computed(() => !!this._start() || !!this._end());

	protected _onChange?: ChangeFn<[T, T] | null>;
	protected _onTouched?: TouchFn;

	protected _handleStartDayChange(value: T | undefined) {
		this._start.set(value);
	}

	protected _handleEndDateChange(value: T | undefined): void {
		this._end.set(value);
		if (this._disabled()) return;

		const start = this._start();
		if (start && value) {
			const transformedDates = this.transformDates()([start, value]);
			this._mutableDate.set(transformedDates);
			this.dateChange.emit(transformedDates);
			this._onChange?.(transformedDates);

			if (this.autoCloseOnEndSelection()) {
				this._popoverState.set('closed');
			}
		}
	}

	/** CONTROL VALUE ACCESSOR */
	public writeValue(value: [T, T] | null): void {
		untracked(() => {
			if (!value) {
				this._mutableDate.set(undefined);
			} else {
				this._mutableDate.set(this.transformDates()(value));
			}
		});
	}

	public registerOnChange(fn: ChangeFn<[T, T] | null>): void {
		this._onChange = fn;
	}

	public registerOnTouched(fn: TouchFn): void {
		this._onTouched = fn;
	}

	public setDisabledState(isDisabled: boolean): void {
		this._disabled.set(isDisabled);
	}

	public open() {
		this._popoverState.set('open');
	}

	public close() {
		this._popoverState.set('closed');
	}

	public reset() {
		this._mutableDate.set(undefined);
		this._start.set(undefined);
		this._end.set(undefined);
		this._onChange?.(null);
		this.dateChange.emit(null);
	}

	protected _onClose(): void {
		const dates = this._mutableDate();
		if (this._start() && !this._end() && dates) {
			this._start.set(dates[0]);
			this._end.set(dates[1]);
		}
	}
}

export const HlmDatePickerImports = [
	HlmDatePicker,
	HlmDatePickerAnchor,
	HlmDatePickerInput,
	HlmDatePickerMulti,
	HlmDateRangePicker,
	HlmDatePickerTrigger,
] as const;