/**
 * TypeScript definitions for @superleapai/flow-ui
 */

declare module "@superleapai/flow-ui" {
  // ============================================================================
  // SUPERLEAP SDK
  // ============================================================================

  export interface SuperLeapConfig {
    apiKey?: string;
    baseUrl?: string;
    clientId?: string;
    clientSecret?: string;
    cache?: {
      enabled?: boolean;
      maxSize?: number;
      defaultTTL?: number;
      ttl?: {
        schema?: number;
        records?: number;
        count?: number;
        user?: number;
      };
    };
  }

  // ============================================================================
  // CRM BRIDGE TYPES
  // ============================================================================

  /** Configuration passed to SuperLeap.connect() */
  export interface ConnectOptions {
    /** Unique identifier for this flow/form (must match CRM-side registration) */
    flowId: string;
    /** Expected CRM origin for validation (e.g., "https://app.superleap.com"). Optional for RN. */
    crmOrigin?: string;
    /** Whether to auto-call SuperLeap.init() with the SDK config from the CRM. Default: true */
    autoInit?: boolean;
    /** Handshake timeout in milliseconds. Default: 5000 */
    timeout?: number;
  }

  /** Context data provided by the CRM during handshake */
  export interface CRMContext {
    /** Organization ID */
    orgId: string;
    /** Current user ID */
    userId: string;
    /** Record ID (if iframe is in a record context) */
    recordId?: string;
    /** Object slug (e.g., "accounts", "contacts") */
    objectSlug?: string;
    /** Form ID (if iframe is inside a form) */
    formId?: string;
    /** Component ID within the form */
    componentId?: string;
    /** Any additional context data */
    [key: string]: any;
  }

  /** Configuration received from the CRM */
  export interface CRMConfig {
    /** SDK configuration for SuperLeap.init() */
    sdkConfig?: SuperLeapConfig;
    /** Any additional configuration */
    [key: string]: any;
  }

  /** Result of a successful SuperLeap.connect() call */
  export interface ConnectResult {
    /** Context data from the CRM */
    context: CRMContext;
    /** Configuration from the CRM */
    config: CRMConfig;
  }

  /** Unsubscribe function returned by SuperLeap.on() */
  export type EventUnsubscribe = () => void;

  export interface SuperLeap {
    // SDK Methods (from superleapClient.js)
    init(config?: SuperLeapConfig): void;
    getSdk(): any;
    isAvailable(): boolean;
    getDefaultConfig(): SuperLeapConfig;
    /** Current base URL from merged config (null if not initialized). Used by file-input and other components. */
    getBaseUrl(): string | null;

    // Bridge Methods (from crm.js)

    /**
     * Connect to the CRM via postMessage bridge.
     * Performs handshake, receives config, optionally auto-initializes the SDK.
     * @returns Promise that resolves with context and config from the CRM
     */
    connect(options: ConnectOptions): Promise<ConnectResult>;

    /** Check if the bridge is connected to the CRM */
    isConnected(): boolean;

    /** Disconnect from the CRM and clean up listeners */
    disconnect(): void;

    /**
     * Tell the CRM to show or hide a loading overlay
     * @param loading - Whether to show loading state
     */
    setLoading(loading: boolean): void;

    /** Tell the CRM to close the current form/modal */
    closeForm(): void;

    /**
     * Notify the CRM that the form was submitted successfully.
     * The CRM listens for this event and can react (e.g. close the form, refresh data).
     * @param payload - Optional data about the submission
     */
    formSubmittedSuccessfully(payload?: any): void;

    /**
     * Tell the CRM to show a toast notification
     * @param message - Toast message
     * @param type - Toast type
     * @param duration - Duration in milliseconds
     */
    toast(
      message: string,
      type?: "success" | "error" | "warning" | "info",
      duration?: number,
    ): void;

    /**
     * Tell the CRM to navigate to a URL
     * @param url - Navigation URL
     * @param newTab - Open in new tab (default: false)
     */
    navigate(url: string, newTab?: boolean): void;

    /**
     * Get the context data received from the CRM during handshake
     * @returns Context object or null if not connected
     */
    getContext(): CRMContext | null;

    /**
     * Send a custom event to the CRM
     * @param event - Event name
     * @param payload - Event data
     */
    send(event: string, payload?: any): void;

    /**
     * Listen for a custom event from the CRM
     * @param event - Event name
     * @param callback - Handler function
     * @returns Unsubscribe function
     */
    on(event: string, callback: (payload: any) => void): EventUnsubscribe;

    /**
     * Remove a specific event listener
     * @param event - Event name
     * @param callback - The same callback that was passed to on()
     */
    off(event: string, callback: (payload: any) => void): void;
  }

  export const SuperLeap: SuperLeap;

  // ============================================================================
  // STATE MANAGEMENT
  // ============================================================================

  export interface FlowUIState {
    [key: string]: any;
  }

  export interface ButtonConfig {
    text?: string;
    label?: string;
    variant?:
      | "primary"
      | "outline"
      | "ghost"
      | "link"
      | "primaryDestructive"
      | "outlineDestructive"
      | "ghostDestructive"
      | "dashed"
      | "toggleOff"
      | "toggleOn"
      | "ghostInline"
      | "linkInline";
    size?: "small" | "medium" | "default" | "large";
    type?: "button" | "submit" | "reset";
    disabled?: boolean;
    onClick?: (event: MouseEvent) => void;
    icon?: string;
    iconPosition?: "left" | "right";
    loading?: boolean;
  }

  export interface InputConfig {
    label: string;
    fieldId: string;
    placeholder?: string;
    required?: boolean;
    type?: "text" | "email" | "number" | "password" | "tel" | "url";
    helpText?: string;
    variant?:
      | "default"
      | "error"
      | "warning"
      | "success"
      | "borderless"
      | "inline";
    inputSize?: "default" | "large" | "small";
    disabled?: boolean;
    showReadOnlyIcon?: boolean;
  }

  export interface TextareaConfig {
    label: string;
    fieldId: string;
    placeholder?: string;
    required?: boolean;
    helpText?: string;
    variant?: "default" | "borderless" | "inline" | "error" | "warning";
    rows?: number;
    disabled?: boolean;
  }

  export interface SelectOption {
    value: string;
    label: string;
    slug?: string;
    id?: string;
    name?: string;
  }

  export interface SelectConfig {
    label: string;
    fieldId: string;
    options: SelectOption[];
    required?: boolean;
    onChange?: (value: string) => void;
    showSearch?: boolean;
    disabled?: boolean;
    helpText?: string;
  }

  export interface TimePickerConfig {
    label: string;
    fieldId: string;
    value?: string;
    placeholder?: string;
    required?: boolean;
    onChange?: (value: string) => void;
    disabled?: boolean;
    use24Hour?: boolean;
    /** 'default' | 'small' | 'large' */
    size?: "default" | "small" | "large";
    /** 'default' | 'error' | 'warning' | 'success' | 'borderless' | 'inline' */
    variant?:
      | "default"
      | "error"
      | "warning"
      | "success"
      | "borderless"
      | "inline";
    helpText?: string;
  }

  export interface DateTimePickerConfig {
    label: string;
    fieldId: string;
    value?: Date | string | number | null;
    placeholder?: string;
    required?: boolean;
    onChange?: (date: Date | undefined) => void;
    disabled?: boolean;
    hourCycle?: 12 | 24;
    granularity?: "day" | "hour" | "minute" | "second";
    size?: "small" | "default" | "large";
    /** 'default' | 'error' | 'warning' | 'success' | 'borderless' | 'inline' */
    variant?:
      | "default"
      | "error"
      | "warning"
      | "success"
      | "borderless"
      | "inline";
    fromDate?: Date;
    toDate?: Date;
    helpText?: string;
  }

  export interface RadioGroupConfig {
    label: string;
    fieldId: string;
    options: Array<{ value: string; label?: string; disabled?: boolean }>;
    required?: boolean;
    onChange?: (value: string) => void;
    helpText?: string;
    orientation?: "horizontal" | "vertical";
    disabled?: boolean;
  }

  export interface MultiSelectConfig {
    label: string;
    fieldId: string;
    options: SelectOption[];
    required?: boolean;
    onChange?: (values: string[]) => void;
    showSearch?: boolean;
    placeholder?: string;
    helpText?: string;
    variant?: "default" | "error" | "warning" | "borderless" | "inline";
    size?: "default" | "large" | "small";
    type?: "default" | "tags";
    disabled?: boolean;
  }

  export interface RecordSelectConfig {
    label: string;
    fieldId: string;
    objectSlug: string;
    placeholder?: string;
    searchPlaceholder?: string;
    required?: boolean;
    onChange?: (value: string, record?: any) => void;
    disabled?: boolean;
    variant?: "default" | "error" | "warning" | "borderless" | "inline";
    size?: "default" | "large" | "small";
    canClear?: boolean;
    showDisplayFields?: boolean;
    initialLimit?: number;
    helpText?: string;
  }

  export interface RecordMultiSelectConfig {
    label: string;
    fieldId: string;
    objectSlug: string;
    placeholder?: string;
    searchPlaceholder?: string;
    required?: boolean;
    onChange?: (values: string[], records?: any[]) => void;
    disabled?: boolean;
    variant?: "default" | "error" | "warning" | "borderless" | "inline";
    size?: "default" | "large" | "small";
    showDisplayFields?: boolean;
    initialLimit?: number;
    helpText?: string;
  }

  export interface EnumSelectConfig {
    label: string;
    fieldId: string;
    objectSlug: string;
    columnSlug: string;
    placeholder?: string;
    required?: boolean;
    onChange?: (value: string) => void;
    disabled?: boolean;
    variant?: "default" | "error" | "warning" | "borderless" | "inline";
    size?: "default" | "large" | "small";
    canClear?: boolean;
    currentRecordData?: Record<string, any>;
    helpText?: string;
  }

  export interface EnumMultiSelectConfig {
    label: string;
    fieldId: string;
    objectSlug: string;
    columnSlug: string;
    placeholder?: string;
    required?: boolean;
    onChange?: (values: string[]) => void;
    disabled?: boolean;
    variant?: "default" | "error" | "warning" | "borderless" | "inline";
    size?: "default" | "large" | "small";
    canClear?: boolean;
    currentRecordData?: Record<string, any>;
    helpText?: string;
  }

  export interface DurationConfig {
    label: string;
    fieldId: string;
    value?: number | null;
    formatType?: "seconds" | "milliseconds";
    placeholder?: string;
    required?: boolean;
    onChange?: (value: number | null) => void;
    disabled?: boolean;
    variant?:
      | "default"
      | "error"
      | "warning"
      | "success"
      | "borderless"
      | "inline";
    size?: "small" | "default" | "large";
    helpText?: string;
  }

  export interface EnumerationConfig {
    label: string;
    fieldId: string;
    totalElements: number;
    enabledIcon: string | HTMLElement;
    disabledIcon: string | HTMLElement;
    defaultValue?: number;
    required?: boolean;
    onChange?: (count: number) => void;
    disabled?: boolean;
    readOnly?: boolean;
    variant?:
      | "default"
      | "error"
      | "warning"
      | "success"
      | "borderless"
      | "inline";
    size?: "default" | "large" | "small";
    helpText?: string;
  }

  export interface FileUploadConfig {
    label: string;
    fieldId: string;
    multiple?: boolean;
    accept?: string;
    required?: boolean;
    helpText?: string;
    isPrivate?: boolean;
    maxFiles?: number;
    maxFileSize?: number;
  }

  export interface CurrencyConfig {
    label?: string;
    fieldId: string;
    column?: {
      properties?: {
        currency?: {
          currency?: string;
        };
      };
      placeholder?: string;
    };
    placeholder?: string;
    required?: boolean;
    helpText?: string;
    variant?: "inline" | "default" | "borderless" | "error" | "warning";
    size?: "small" | "default" | "large";
    disabled?: boolean;
    onChange?: (value: number | null) => void;
  }

  export interface PhoneInputConfig {
    label: string;
    fieldId: string;
    defaultCountryCode?: string;
    placeholder?: string;
    required?: boolean;
    helpText?: string;
    variant?: "default" | "error" | "warning" | "borderless" | "inline";
    inputSize?: "default" | "large" | "small";
    disabled?: boolean;
    disableCountrySelect?: boolean;
    hideCountrySelect?: boolean;
    onChange?: (fullValue: string, country: any) => void;
  }

  export interface CheckboxConfig {
    label: string;
    fieldId: string;
    checked?: boolean;
    indeterminate?: boolean;
    disabled?: boolean;
    helpText?: string;
    size?: "default" | "small" | "large";
    align?: "left" | "right";
    isLabelCaps?: boolean;
    onChange?: (isChecked: boolean) => void;
  }

  export interface DataTableConfig {
    columns: Array<{ key: string; label: string }>;
    data: any[];
    fieldId: string;
    idKey?: string;
    onSelect?: (row: any) => void;
  }

  export interface SearchInputConfig {
    placeholder?: string;
    fieldId: string;
    onSearch?: (query: string) => void;
  }

  export interface TableColumnConfig {
    header: string;
    accessor?: string;
    cell?: (row: any) => string | HTMLElement;
    width?: string;
  }

  export interface TableConfig {
    data: any[];
    columns: TableColumnConfig[];
    showHeader?: boolean;
    headerSize?: "small" | "default" | "large";
    hasBorder?: boolean;
    onRowClick?: (rowId: string) => void;
    onFetch?: () => void;
    hasMore?: boolean;
    isLoading?: boolean;
    emptyMessage?: string;
  }

  export interface BadgeConfig {
    variant?: "default" | "primary";
    color?: "default" | "info" | "warning" | "error" | "success";
    size?: "small" | "medium" | "large";
    startIcon?: string | HTMLElement;
    endIcon?: string | HTMLElement;
    icon?: string | HTMLElement;
    content?: string | HTMLElement;
    className?: string;
  }

  export interface AvatarUser {
    id: number;
    name: string;
    image?: string;
  }

  export interface AvatarConfig {
    name?: string;
    image?: string;
    size?: "small" | "default" | "large" | "custom";
    shape?: "circle" | "square";
    className?: string;
  }

  export interface AvatarGroupConfig {
    users: AvatarUser[];
    size?: "small" | "default" | "large" | "custom";
    className?: string;
  }

  export interface LoaderConfig {
    size?: "small" | "medium" | "large";
    color?: string;
    text?: string;
  }

  export interface StepConfig {
    id: string;
    label: string;
  }

  export interface TabsTabItem {
    value: string;
    label: string;
    content: HTMLElement | string;
  }

  export interface TabsConfig {
    defaultValue?: string;
    value?: string;
    onChange?: (value: string) => void;
    tabs: TabsTabItem[];
    size?: "default" | "small" | "large";
    listClassName?: string;
    contentClassName?: string;
  }

  export interface StepsStepItem {
    id: string;
    label: string;
    content?: HTMLElement | string;
  }

  export interface StepsConfig {
    steps: StepsStepItem[];
    defaultValue?: string;
    value?: string;
    onChange?: (stepId: string) => void;
    title?: string;
    description?: string;
    listClassName?: string;
    contentClassName?: string;
    showContent?: boolean;
  }

  export interface ToastAPI {
    close: () => void;
    element: HTMLElement | null;
  }

  export interface FlowUI {
    // State management
    initState(
      initialState: FlowUIState,
      onChangeCallback?: (state: FlowUIState) => void,
    ): void;
    getState(): FlowUIState;
    setState(partial: Partial<FlowUIState>): void;
    get(key: string): any;
    set(key: string, value: any): void;

    // Internal component access (for advanced use in clean globals mode)
    _getComponent(name: string): any;

    // Screen utilities
    createScreen(title: string, description: string): HTMLElement;
    createGrid(): HTMLElement;
    createFieldWrapper(
      label: string,
      required?: boolean,
      helpText?: string | null,
    ): HTMLElement;

    // Form components
    createInput(config: InputConfig): HTMLElement;
    createTextarea(config: TextareaConfig): HTMLElement;
    createSelect(config: SelectConfig): HTMLElement;
    createTimePicker(config: TimePickerConfig): HTMLElement;
    createDateTimePicker(config: DateTimePickerConfig): HTMLElement;
    createRadioGroup(config: RadioGroupConfig): HTMLElement;
    createMultiSelect(config: MultiSelectConfig): HTMLElement;
    createRecordSelect(config: RecordSelectConfig): HTMLElement;
    createRecordMultiSelect(config: RecordMultiSelectConfig): HTMLElement;
    createEnumSelect(config: EnumSelectConfig): HTMLElement;
    createEnumMultiSelect(config: EnumMultiSelectConfig): HTMLElement;
    createDuration(config: DurationConfig): HTMLElement;
    createEnumeration(config: EnumerationConfig): HTMLElement;
    createFileUpload(config: FileUploadConfig): HTMLElement;
    createCurrency(config: CurrencyConfig): HTMLElement;
    createPhoneInput(config: PhoneInputConfig): HTMLElement;
    createCheckbox(config: CheckboxConfig): HTMLElement;
    createButton(config: ButtonConfig): HTMLElement;

    // Stepper
    renderStepper(
      container: HTMLElement,
      steps: StepConfig[],
      currentStepId: string,
    ): void;
    createTabs(config: TabsConfig): HTMLElement;
    createSteps(config: StepsConfig): HTMLElement;

    // Alerts & Toasts
    showToast(
      message: string,
      type?: "success" | "error" | "warning" | "info" | "loading",
      duration?: number,
    ): ToastAPI;

    // Table
    createDataTable(config: DataTableConfig): HTMLElement;
    createTable(config: TableConfig): HTMLElement | any;
    createSearchInput(config: SearchInputConfig): HTMLElement;

    // Summary
    createSummaryRow(label: string, value: string): HTMLElement;

    // Badge & Loader
    createBadge(config: BadgeConfig): HTMLElement;
    createLoader(config?: LoaderConfig): HTMLElement;

    // Avatar
    createAvatar(config: AvatarConfig): HTMLElement;
    createVividAvatar(config: AvatarConfig): HTMLElement;
    createAvatarGroup(config: AvatarGroupConfig): HTMLElement;
    createVividAvatarGroup(config: AvatarGroupConfig): HTMLElement;
  }

  export const FlowUI: FlowUI;
}

declare global {
  interface Window {
    FlowUI: FlowUI;
    SuperLeap: SuperLeap;
  }
}