/**
 * Copyright Aquera Inc 2026
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { html, nothing } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styles } from './nile-timestamp-builder.css';
import NileElement from '../internal/nile-element';
import type { CSSResultGroup, PropertyValues } from 'lit';
import type { NileFormControl } from '../internal/nile-element';
import { FormControlController } from '../internal/form';
import { defaultValue } from '../internal/default-value';
import {
  EPOCH_WALLCLOCK,
  TimestampField,
  WallClock,
  clampWallClock,
  daysInMonth,
  epochToFields,
  fieldsToEpoch,
  formatWallClock,
  formatZonedValue,
  getLocalTimeZone,
  getTimezoneList,
  isValidTimeZone,
  normalizeValueInput,
  parseZonedValue,
} from './nile-timestamp-builder-utils';

/**
 * @event nile-init - Emitted when the component is added to the DOM.
 * @event nile-destroy - Emitted when the component is removed from the DOM.
 * @event nile-change - Emitted when the value is committed.
 * @event nile-input - Emitted as fields change, before the value is committed.
 * @event nile-expand - Emitted when the editor opens.
 * @event nile-collapse - Emitted when the editor closes.
 * @event nile-copy - Emitted after the value is written to the clipboard.
 * @event nile-copy-error - Emitted when the clipboard write is refused.
 */
@customElement('nile-timestamp-builder')
export class NileTimestampBuilder
  extends NileElement
  implements NileFormControl
  {
    static get styles(): CSSResultGroup {
      return [styles];
    }

  private formControlController: FormControlController | null = null;
  private internalValueUpdate = false;
  private internalTimezoneUpdate = false;
  @query('.value-input') valueInput!: HTMLInputElement;private _value: Date | null = null;
  @property({
    attribute: 'value',
    converter: {
      fromAttribute: (value: string | null) => value,
      toAttribute: (value: Date | null) =>
        value === null ? null : value.toISOString(),
    },
  })
  get value(): Date | null {
    return this._value;
  }

  set value(input: Date | number | string | null) {
    if (typeof input === 'string') {
      const zoned = parseZonedValue(input);
      if (zoned && isValidTimeZone(zoned.timezone)) {
        this.timezone = zoned.timezone;
      }
    }
    const oldValue = this._value;
    const next = normalizeValueInput(input);
    if (next?.getTime() === oldValue?.getTime()) {
      this.internalValueUpdate = false;
      return;
    }
    this._value = next;
    this.requestUpdate('value', oldValue);
  }

  @defaultValue() defaultValue: Date | null = null;
  @property({ type: String, reflect: true }) timezone: string =
    getLocalTimeZone();
  @property({ type: String, reflect: true }) name = '';
  @property({ type: Boolean, reflect: true }) disabled = false;
  @property({ type: Boolean, reflect: true }) required = false;
  @property({ type: Boolean, reflect: true }) readonly = false;
  @property({ type: Boolean, reflect: true }) copyable = false;
  @property({ type: String, reflect: true }) form = '';
  @property({ type: Boolean, reflect: true }) open = false;
  @property({ type: String, reflect: true }) label = '';
  @property({ attribute: true, type: Number, reflect: true }) minYear = 1;
  @property({ attribute: true, type: Number, reflect: true }) maxYear = 9999;
  @state() wallClock: WallClock = EPOCH_WALLCLOCK;
  @state() timezoneList: string[] = [];
  @state() hasValue = false;
  @state() justCopied = false;

  get validity(): ValidityState {
    return this.valueInput?.validity;
  }

  get validationMessage(): string {
    return this.valueInput?.validationMessage ?? '';
  }

  connectedCallback() {
    super.connectedCallback();

    this.timezoneList = getTimezoneList();

    if (!isValidTimeZone(this.timezone)) {
      this.timezone = getLocalTimeZone();
    }

    if (this.value !== null) {
      this.wallClock = epochToFields(this.value.getTime(), this.timezone);
      this.hasValue = true;
    } else {
      this.wallClock = epochToFields(Date.now(), this.timezone);
      this.hasValue = false;
    }

    this.formControlController = new FormControlController(this, {
      assumeInteractionOn: ['nile-change'],
      value: input => {
        const el = input as NileTimestampBuilder;
        return el.value === null ? undefined : (el.valueString() ?? undefined);
      },
      defaultValue: input => (input as NileTimestampBuilder).defaultValue,
      setValue: (input, val) => {
        (input as NileTimestampBuilder).value = val as string | null;
      },
    });

    this.emit('nile-init');
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    window.clearTimeout(this.copiedTimer);
    this.emit('nile-destroy');
  }

  protected willUpdate(changedProperties: PropertyValues): void {
    if (changedProperties.has('value')) {
      if (this.internalValueUpdate) {
        this.internalValueUpdate = false;
      } else {
        if (this.value === null) {
          this.hasValue = false;
        } else {
          this.wallClock = epochToFields(this.value.getTime(), this.timezone);
          this.hasValue = true;
        }
      }
    } else if (this.isTimezoneReassigned(changedProperties) && !this.open) {
      this.syncValueToTimezone();
    }
  }

  protected updated(changedProperties: PropertyValues): void {
    if (this.isTimezoneReassigned(changedProperties)) {
      if (this.internalTimezoneUpdate) {
        this.internalTimezoneUpdate = false;
      } else {
        this.emit('nile-input', this.liveDetail());
      }
    }
  }

  private isTimezoneReassigned(changedProperties: PropertyValues): boolean {
    return (
      changedProperties.has('timezone') &&
      changedProperties.get('timezone') !== undefined
    );
  }

  private syncValueToTimezone(): void {
    if (!this.hasValue || this.value === null) return;
    const epoch = fieldsToEpoch(this.wallClock, this.timezone);
    if (Number.isNaN(epoch) || epoch === this.value.getTime()) return;
    this.internalValueUpdate = true;
    this.value = new Date(epoch);
    this.syncHiddenInput();
  }

  private valueString(): string | null {
    return this.value === null ? null : this.value.toISOString();
  }

  private syncHiddenInput(): void {
    if (this.valueInput) {
      this.valueInput.value = this.valueString() ?? '';
    }
    this.formControlController?.updateValidity();
  }

  private changeDetail(): {
    value: string | null;
    localTimezoneValue: Date | null;
    unix: number | null;
    timezone: string;
  } {
    if (this.value === null) {
      return {
        value: null,
        localTimezoneValue: null,
        unix: null,
        timezone: this.timezone,
      };
    }
    const epoch = this.value.getTime();
    return {
      value: formatZonedValue(this.wallClock, this.timezone),
      localTimezoneValue: new Date(epoch),
      // Unix time (epoch milliseconds, matching Date.getTime()).
      unix: epoch,
      timezone: this.timezone,
    };
  }


  private liveDetail(): {
    value: string | null;
    localTimezoneValue: Date | null;
    unix: number | null;
    timezone: string;
  } {
    const epoch = fieldsToEpoch(this.wallClock, this.timezone);
    if (Number.isNaN(epoch)) {
      return {
        value: null,
        localTimezoneValue: null,
        unix: null,
        timezone: this.timezone,
      };
    }
    return {
      value: formatZonedValue(this.wallClock, this.timezone),
      localTimezoneValue: new Date(epoch),
      // Unix time (epoch milliseconds, matching Date.getTime()).
      unix: epoch,
      timezone: this.timezone,
    };
  }

  private commit(): void {
    const epoch = fieldsToEpoch(this.wallClock, this.timezone);
    this.internalValueUpdate = true;
    this.value = new Date(epoch);
    this.hasValue = true;
    this.syncHiddenInput();
    this.emit('nile-change', this.changeDetail());
  }


  private onFieldChange(field: TimestampField) {
    return (event: CustomEvent) => {
      event.stopPropagation();
      const raw = Number(event.detail?.value);
      const next = clampWallClock(
        { ...this.wallClock, [field]: raw },
        this.minYear,
        this.maxYear
      );
      this.wallClock = next;
      this.emit('nile-input', this.liveDetail());
    };
  }

  private onTimezoneChange(event: CustomEvent) {
    event.stopPropagation();
    const next = event.detail?.value;
    if (typeof next === 'string' && isValidTimeZone(next)) {
      this.internalTimezoneUpdate = true;
      this.timezone = next;
      this.emit('nile-input', this.liveDetail());
    }
  }

  private handleSetNow = () => {
    if (this.disabled || this.readonly) return;
    const now = Date.now();
    this.wallClock = epochToFields(now, this.timezone);
    this.commit();
  };

  /** Copies the canonical zoned value */
  private handleCopy = async () => {
    if (this.disabled || !this.hasValue) return;
    const text = formatZonedValue(this.wallClock, this.timezone);
    try {
      await navigator.clipboard.writeText(text);
    } catch {
      this.emit('nile-copy-error', { value: text });
      return;
    }
    this.justCopied = true;
    window.clearTimeout(this.copiedTimer);
    this.copiedTimer = window.setTimeout(() => {
      this.justCopied = false;
    }, NileTimestampBuilder.COPIED_FEEDBACK_MS);
    this.emit('nile-copy', { value: text });
  };

  private handleStageNow = () => {
    if (this.disabled || this.readonly) return;
    const now = Date.now();
    this.wallClock = epochToFields(now, this.timezone);
    this.emit('nile-input', this.liveDetail());
  };

  private handleUseLocalTz = () => {
    if (this.disabled || this.readonly) return;
    this.internalTimezoneUpdate = true;
    this.timezone = getLocalTimeZone();
    this.emit('nile-input', this.liveDetail());
  };

  private handleUseUtc = () => {
    if (this.disabled || this.readonly) return;
    this.internalTimezoneUpdate = true;
    this.timezone = 'UTC';
    this.emit('nile-input', this.liveDetail());
  };

  /** Touch input has no reliable `dblclick`, so double-taps are timed by hand. */
  private static readonly DOUBLE_TAP_MS = 300;
  private static readonly COPIED_FEEDBACK_MS = 1600;
  private lastTapAt = 0;
  private copiedTimer = 0;

  private handleDisplayDoubleClick = () => {
    this.handleEdit();
  };

  private handleDisplayPointerUp = (event: PointerEvent) => {
    if (event.pointerType === 'mouse') return;
    const now = Date.now();
    if (now - this.lastTapAt <= NileTimestampBuilder.DOUBLE_TAP_MS) {
      this.lastTapAt = 0;
      this.handleEdit();
      return;
    }
    this.lastTapAt = now;
  };

  /** Keyboard equivalent of the double-click/double-tap edit affordance. */
  private handleDisplayKeyDown = (event: KeyboardEvent) => {
    if (event.key !== 'Enter' && event.key !== ' ') return;
    event.preventDefault();
    this.handleEdit();
  };

  private handleEdit = () => {
    if (this.disabled || this.readonly || this.open) return;
    if (this.value === null) {
      this.wallClock = epochToFields(Date.now(), this.timezone);
    }
    this.open = true;
    this.emit('nile-expand', { open: true });
  };

  private handleDone = () => {
    this.open = false;
    this.commit();
    this.emit('nile-collapse', { open: false });
  };

  checkValidity(): boolean {
    return this.valueInput?.checkValidity() ?? true;
  }

  reportValidity(): boolean {
    return this.valueInput?.reportValidity() ?? true;
  }

  setCustomValidity(message: string): void {
    this.valueInput?.setCustomValidity(message);
    this.formControlController?.updateValidity();
  }

  getForm(): HTMLFormElement | null {
    return this.formControlController?.getForm() ?? null;
  }

  private renderField(
    field: TimestampField,
    fieldLabel: string,
    val: number,
    min: number,
    max: number
  ) {
    return html`
      <div class="tsb__field" part="field">
        <nile-input
          type="number"
          exportparts="base:field__base, input:field__input"
          size="medium"
          label=${fieldLabel}
          ?disabled=${this.disabled}
          ?readonly=${this.readonly}
          min=${min}
          max=${max}
          step="1"
          .value=${String(val)}
          @nile-change=${this.onFieldChange(field)}
        ></nile-input>
      </div>
    `;
  }

  private renderCollapsed() {
    const wc = this.wallClock;
    const editable = !this.disabled && !this.readonly;
    return html`
      <div class="tsb__collapsed" part="display">
        <div
          class=${classMap({
            tsb__display: true,
            'tsb__display--editable': editable,
          })}
          part="display-content"
          role=${editable ? 'button' : nothing}
          tabindex=${this.disabled ? nothing : '0'}
          aria-labelledby=${this.label ? 'tsb-label tsb-display-value' : nothing}
          aria-readonly=${this.readonly ? 'true' : nothing}
          @dblclick=${this.handleDisplayDoubleClick}
          @pointerup=${this.handleDisplayPointerUp}
          @keydown=${this.handleDisplayKeyDown}
        >
          <span
            id="tsb-display-value"
            class=${classMap({
              tsb__value: true,
              'tsb__value--empty': !this.hasValue,
            })}
            part="value"
          >
            ${this.hasValue ? formatWallClock(wc) : 'No timestamp set'}
          </span>
          <span class="tsb__tz" part="timezone-label">${this.timezone}</span>
        </div>
        ${editable ? this.renderEditActions() : nothing}
        ${this.copyable && this.readonly && !this.disabled
          ? this.renderCopyAction()
          : nothing}
      </div>
    `;
  }

  private renderEditActions() {
    return html`
      <div class="tsb__actions" part="actions">
        <nile-button
          variant="secondary-grey"
          ?disabled=${this.disabled}
          @click=${this.handleSetNow}
          >Now</nile-button
        >
        <nile-button
          variant="primary"
          title="Edit"
          ?disabled=${this.disabled}
          @click=${this.handleEdit}
          ><nile-glyph
            name="ng-pencil"
            size="16"
            method="stroke"
            color="currentColor"
          ></nile-glyph
        ></nile-button
        >
      </div>
    `;
  }

  private renderCopyAction() {
    return html`
      <div class="tsb__actions" part="actions">
        <nile-button
          variant="ghost"
          title=${this.justCopied ? 'Copied' : 'Copy timestamp'}
          aria-label=${this.justCopied ? 'Copied' : 'Copy timestamp'}
          ?disabled=${!this.hasValue}
          @click=${this.handleCopy}
          ><nile-glyph
            name=${this.justCopied ? 'ng-copy-check' : 'ng-copy'}
            size="16"
            method="stroke"
            color="currentColor"
          ></nile-glyph
        ></nile-button>
      </div>
    `;
  }

  private renderExpanded() {
    const wc = this.wallClock;
    const maxDay = daysInMonth(wc.year, wc.month);
    return html`
      <div class="tsb__expanded" part="editor">
        <div class="tsb__fields" part="fields">
          ${this.renderField(
            TimestampField.Year,
            'Year',
            wc.year,
            this.minYear,
            this.maxYear
          )}
          ${this.renderField(TimestampField.Month, 'Month', wc.month, 1, 12)}
          ${this.renderField(TimestampField.Day, 'Day', wc.day, 1, maxDay)}
          ${this.renderField(TimestampField.Hour, 'Hour', wc.hour, 0, 23)}
          ${this.renderField(
            TimestampField.Minute,
            'Minute',
            wc.minute,
            0,
            59
          )}
          ${this.renderField(
            TimestampField.Second,
            'Second',
            wc.second,
            0,
            59
          )}
          ${this.renderField(
            TimestampField.Millisecond,
            'Milliseconds',
            wc.millisecond,
            0,
            999
          )}
        </div>

        <div class="tsb__timezone" part="timezone-select">
          <nile-select
            searchEnabled
            label="Timezone"
            size="medium"
            ?disabled=${this.disabled}
            .value=${this.timezone}
            @nile-change=${this.onTimezoneChange}
          >
            ${this.timezoneList.map(
              tz => html`<nile-option value=${tz}>${tz}</nile-option>`
            )}
          </nile-select>
        </div>

        <div class="tsb__actions" part="editor-actions">
          <nile-button
            variant="secondary-grey"
            ?disabled=${this.disabled}
            @click=${this.handleStageNow}
            >Set to Now</nile-button
          >
          <nile-button
            variant="secondary-grey"
            ?disabled=${this.disabled}
            @click=${this.handleUseLocalTz}
            >Use Local Timezone</nile-button
          >
          <nile-button
            variant="secondary-grey"
            ?disabled=${this.disabled}
            @click=${this.handleUseUtc}
            >Use UTC</nile-button
          >
          <nile-button
            variant="primary"
            ?disabled=${this.disabled}
            @click=${this.handleDone}
            >Done</nile-button
          >
        </div>
      </div>
    `;
  }

  render() {
    return html`
      <div
        class="tsb"
        part="base"
        role="group"
        aria-labelledby=${this.label ? 'tsb-label' : nothing}
      >
        ${this.label
          ? html`<label id="tsb-label" class="tsb__label" part="label"
              >${this.label}</label
            >`
          : ''}
        ${this.open && !this.readonly
          ? this.renderExpanded()
          : this.renderCollapsed()}

        <input
          class="value-input"
          type="text"
          ?required=${this.required}
          ?disabled=${this.disabled}
          .value=${this.valueString() ?? ''}
          tabindex="-1"
          aria-hidden="true"
        />
      </div>
    `;
  }
}

export default NileTimestampBuilder;

declare global {
  interface HTMLElementTagNameMap {
    'nile-timestamp-builder': NileTimestampBuilder;
  }
}