import { JSX as JSX_2 } from 'react/jsx-runtime';
import { ReactNode } from 'react';

declare interface ButtonBaseStyles {
    backgroundColor?: string;
    textColor?: string;
    borderRadius?: string;
    borderColor?: string;
    borderEnabled?: boolean;
    fontSize?: string;
    fontWeight?: FontWeight;
    opacity?: Opacity;
}

declare interface ButtonStyles extends ButtonBaseStyles {
    hover?: ButtonBaseStyles;
    disabled?: ButtonBaseStyles;
    loaderColor?: string;
}

/**
 * CardElement - React component
 *
 * Same API as the original React SDK
 *
 * @example
 * ```tsx
 * <CardElement
 *   paymentId="pay_xxx"
 *   onComplete={(result) => {
 *     if (result.status === 'CHECKOUT_SUCCESS') {
 *       window.location.href = '/success';
 *     }
 *   }}
 * />
 * ```
 */
export declare function CardElement(props: CardElementProps & {
    config?: SDKConfig;
}): JSX_2.Element;

declare class CardElement_2 {
    private sdk;
    private container;
    private mounted;
    constructor(config: InternalSDKConfig, options: CardElementOptions);
    /**
     * Mount the CardElement to the DOM
     * This will create and display the iframe
     */
    mount(): void;
    /**
     * Destroy the CardElement and cleanup
     */
    destroy(): void;
}

declare interface CardElementOptions {
    /** Container element or CSS selector where the iframe will be mounted */
    container: string | HTMLElement;
    /** Payment ID for this transaction */
    paymentId: string;
    /** Callback when payment completes */
    onComplete?: (result: PaymentResult) => void;
    /** Callback when payment fails */
    onError?: (error: any) => void;
    /** Callback when user closes the payment */
    onClose?: () => void;
    /** Custom styling for the card element */
    style?: CSSProperties;
    /** Custom button text (default: "Complete Payment") */
    buttonText?: string;
    /** Custom placeholder text for inputs */
    placeholders?: {
        cardNumber?: string;
        expiry?: string;
        cvc?: string;
    };
    /** Show default success UI after payment (default true). If false, only unmount iframe. */
    showDefaultSuccessUI?: boolean;
}

export declare interface CardElementProps {
    paymentId: string;
    onReady?: () => void;
    onChange?: (state: CardElementState) => void;
    onComplete?: (result: PaymentResult) => void;
    onError?: (error: PaymentError) => void;
    style?: CSSProperties;
    buttonText?: string;
    placeholders?: {
        cardNumber?: string;
        expiry?: string;
        cvc?: string;
    };
    /** Show default success UI after payment (default true). If false, only unmount iframe. */
    showDefaultSuccessUI?: boolean;
}

export declare interface CardElementState {
    complete: boolean;
}

declare interface CSSProperties {
    fontFamily?: FontFamily;
    fillParent?: boolean;
    inputContainer?: InputContainerStyles;
    input?: InputStyles;
    button?: ButtonStyles;
    disclaimerColor?: string;
    fieldErrorColor?: string;
    generalError?: GeneralMessageStyles;
    generalSuccess?: GeneralMessageStyles;
    dark?: ThemeStyles;
}

declare type FontFamily = 'DM Sans' | 'Inter' | 'Poppins' | 'Nunito' | 'Work Sans' | 'Manrope' | 'Rubik' | 'Karla' | 'Figtree' | 'Outfit' | 'Space Grotesk' | 'Urbanist';

declare type FontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'normal' | 'bold' | 'lighter' | 'bolder';

declare interface GeneralMessageStyles {
    textColor?: string;
    backgroundColor?: string;
    borderEnabled?: boolean;
    borderRadius?: string;
    borderColor?: string;
}

/**
 * InflowPayProvider - React component
 *
 * Same API as the original React SDK
 *
 * @example
 * ```tsx
 * <InflowPayProvider config={{ apiKey: 'inflow_pub_xxx' }}>
 *   <CardElement
 *     paymentId="pay_xxx"
 *     onComplete={(result) => {
 *       if (result.status === 'CHECKOUT_SUCCESS') {
 *         window.location.href = '/success';
 *       }
 *     }}
 *   />
 * </InflowPayProvider>
 * ```
 */
export declare function InflowPayProvider({ config, children, }: {
    config: SDKConfig;
    children: ReactNode;
}): JSX_2.Element;

declare interface InputContainerStyles {
    backgroundColor?: string;
    borderColor?: string;
    borderEnabled?: boolean;
    borderRadius?: string;
}

declare interface InputStyles {
    backgroundColor?: string;
    borderColor?: string;
    borderEnabled?: boolean;
    borderRadius?: string;
    textColor?: string;
    placeholderColor?: string;
}

declare interface InternalSDKConfig {
    publicKey: string;
    iframeUrl: string;
    timeout: number;
    debug: boolean;
    locale?: Locale;
}

/**
 * Type definitions for SDK v2
 */
declare type Locale = 'en' | 'de' | 'es' | 'fr' | 'it' | 'nl' | 'pl' | 'pt';

declare type Opacity = number | string;

export declare interface PaymentError {
    code: PaymentResultErrorCode;
    message: string;
    retryable: boolean;
}

export declare interface PaymentResult {
    status: PaymentResultStatus;
    paymentId: string;
    error?: PaymentError;
}

export declare enum PaymentResultErrorCode {
    THREE_DS_FAILED = "THREE_DS_FAILED",
    PAYMENT_PROCESSING_ERROR = "PAYMENT_PROCESSING_ERROR"
}

export declare enum PaymentResultStatus {
    SUCCESS = "SUCCESS",
    FAILED = "FAILED"
}

declare class PaymentSDK {
    private config;
    private iframeUrl;
    private timeout;
    private debug;
    /**
     * Initialize the InflowPay Payment SDK
     *
     * @param config - SDK configuration
     *
     * @example
     * ```typescript
     * const sdk = new PaymentSDK({
     *   apiKey: 'inflow_pub_local_xxx'
     * });
     * ```
     */
    constructor(config: PaymentSDKConfig);
    /**
     * Create a CardElement for iframe-based payment UI
     *
     * @param options - CardElement configuration
     * @returns CardElement instance
     *
     * @example
     * ```typescript
     * const cardElement = sdk.createCardElement({
     *   container: '#card-container',
     *   paymentId: 'pay_123',
     *   onComplete: (result) => {
     *     if (result.status === 'CHECKOUT_SUCCESS') {
     *       window.location.href = '/success';
     *     }
     *   }
     * });
     *
     * cardElement.mount();
     * ```
     */
    createCardElement(options: {
        container: string | HTMLElement;
        paymentId: string;
        style?: CSSProperties;
        buttonText?: string;
        placeholders?: {
            cardNumber?: string;
            expiry?: string;
            cvc?: string;
        };
        onComplete?: (result: PaymentResult) => void;
        onError?: (error: any) => void;
        onClose?: () => void;
    }): CardElement_2;
    /**
     * Get the iframe URL being used
     */
    getIframeUrl(): string;
    /**
     * Get the API key
     */
    getApiKey(): string;
}

declare interface PaymentSDKConfig {
    /** Public API key */
    publicKey: string;
    /** Locale for the UI. Defaults to 'en' */
    locale?: Locale;
}

export declare interface SDKConfig {
    publicKey: string;
    /** Locale for the payment UI. Defaults to 'en' */
    locale?: Locale;
}

declare interface ThemeStyles {
    inputContainer?: InputContainerStyles;
    input?: InputStyles;
    button?: ButtonStyles;
    disclaimerColor?: string;
    fieldErrorColor?: string;
    generalError?: GeneralMessageStyles;
    generalSuccess?: GeneralMessageStyles;
}

/**
 * useInflowPay - Hook to access InflowPay SDK instance
 *
 * @example
 * ```tsx
 * function CustomComponent() {
 *   const inflow = useInflowPay();
 *
 *   const checkStatus = async () => {
 *     const status = await inflow.getPaymentStatus('pay_xxx');
 *     console.log(status);
 *   };
 *
 *   return <button onClick={checkStatus}>Check Status</button>;
 * }
 * ```
 */
export declare function useInflowPay(): PaymentSDK;

export { }