import { reactive, readonly } from 'vue';

export type DialogResult<T = string | null> = { status: boolean; value: T };

type BaseOptions = {
  /**
   * Title of the dialog
   */
  title?: string;
  /**
   * Message to display in the dialog
   */
  message?: string;
  /**
   * Text for the confirm button
   */
  confirmText?: string;
  /**
   * Color class for the confirm button (e.g., 'is-primary', 'is-danger')
   */
  confirmColor?: string;
};

export type PromptOptions = BaseOptions & {
  /**
   * Text for the input field
   */
  initial?: string;
  /**
   * Placeholder text for the input field
   */
  placeholder?: string;
  /**
   * Text for the cancel button
   */
  cancelText?: string;
  /**
   * Function to validate the input value
   * @returns true if valid, or an error message string if invalid
   */
  validate?: (v: string) => true | string;
};

export type ConfirmOptions = BaseOptions & {
  /**
   * Text for the confirm button
   */
  cancelText?: string;
  /**
   * Raw HTML content to include in the dialog message.
   */
  rawHTML?: string;
};

export type AlertOptions = BaseOptions & {};

type QueueItem = {
  type: 'prompt' | 'confirm' | 'alert';
  opts: PromptOptions | ConfirmOptions | AlertOptions;
  resolve: (r: DialogResult<any>) => void;
};

type DialogState = {
  current: QueueItem | null;
  queue: QueueItem[];
  errorMsg: string | null;
  input: string;
};

export const useDialog = () => {
  const raw = useState<DialogState>('dialog:state', () =>
    reactive({
      current: null,
      queue: [],
      errorMsg: null,
      input: '',
    } as DialogState),
  );

  const state = raw.value;

  const _dequeue = () => {
    if (!state.current && state.queue.length) {
      state.current = state.queue.shift()!;
      state.errorMsg = null;
      state.input =
        state.current.type === 'prompt'
          ? ((state.current.opts as PromptOptions).initial ?? '')
          : '';
    }
  };

  const promptDialog = (opts: PromptOptions) =>
    new Promise<DialogResult<string>>((resolve) => {
      state.queue.push({ type: 'prompt', opts, resolve });
      _dequeue();
    });

  const confirmDialog = (opts: ConfirmOptions) =>
    new Promise<DialogResult<null>>((resolve) => {
      state.queue.push({ type: 'confirm', opts, resolve });
      _dequeue();
    });

  const alertDialog = (opts: AlertOptions) =>
    new Promise<DialogResult<null>>((resolve) => {
      state.queue.push({ type: 'alert', opts, resolve });
      _dequeue();
    });

  const confirm = (value?: string) => {
    if (!state.current) return;
    if (state.current.type === 'prompt') {
      const val = value ?? state.input;
      const v = (state.current.opts as PromptOptions).validate?.(val);
      if (v && v !== true) {
        state.errorMsg = v;
        return;
      }
      state.current.resolve({ status: true, value: val });
    } else {
      state.current.resolve({ status: true, value: null });
    }
    state.current = null;
    _dequeue();
  };

  const cancel = () => {
    if (!state.current) return;
    state.current.resolve({ status: false, value: null });
    state.current = null;
    _dequeue();
  };

  return {
    promptDialog,
    confirmDialog,
    alertDialog,
    confirm,
    cancel,
    state: readonly(state) as Readonly<DialogState>,
  };
};