import { CSSResult } from 'lit';
import { LitElement } from 'lit';
import { TemplateResult } from 'lit-html';

/**
 * Badge configuration displayed on a story group thumbnail.
 * @category Story Types
 */
declare interface BadgeTypes {
    bg_c: string;
    t: string;
    t_c: string;
    e_t: string;
    template: string;
}

/**
 * Data for a single banner slide.
 * @category Banner Types
 */
declare interface BannerData {
    banner_id: number;
    status: "active" | "inactive" | "test";
    title?: string;
    goal?: string;
    start_date?: string;
    end_date?: string;
    schedule?: object;
    audience_id?: number;
    audience_target?: "Include" | "Exclude";
    labels?: string[];
    layout: TLayoutContainer[];
    created_at?: string;
    updated_at?: string;
    name?: string;
    duration?: number;
}

/**
 * Visual style configuration for the banner widget.
 * @category Banner Types
 */
declare interface BannerStyle {
    progress_position: "left" | "center" | "right";
    progress_color: string;
    progress_bg_color?: string;
    progress_type?: "progress_bar" | "dots" | "dash" | "none" | null;
    /**
     * Legacy corner radius in pixels. Superseded by {@link BannerStyle.content_radius} — kept as
     * the fallback for payloads that predate it.
     */
    shape_radius: number;
    /** Corner style switch: `"sharp"` forces square corners, `"rounded"` applies the radius. */
    shape?: "sharp" | "rounded";
    /** Corner radius in pixels applied when `shape` is not `"sharp"`. */
    content_radius?: number;
    autoplay: boolean;
    autoplay_seconds: number;
    ratio: number;
    /** Display template — `"slideshow"` shows one banner at a time; `"carousel"` shows multiple banners side-by-side with optional peek. */
    template?: "slideshow" | "carousel";
    /** Number of slides fully visible per view (carousel template). A 25% peek of the next slide is added automatically. */
    slides_per_view?: number;
    /** Horizontal gap between slides in pixels (carousel template). */
    horizontal_spacing?: number;
    /** Vertical gap between the slides area and the progress indicator in pixels (carousel template). */
    vertical_spacing?: number;
    /** Per-slide width in pixels (carousel template). */
    slide_width?: number;
    /** Per-slide height in pixels (carousel template). */
    slide_height?: number;
    /** Per-slide design-reference width — content sizes inside layout tree are designed relative to this (carousel template). */
    base_slide_width?: number;
    /** Per-slide design-reference height — content sizes inside layout tree are designed relative to this (carousel template). */
    base_slide_height?: number;
    /** Left padding in pixels applied around the banner container. */
    padding_left?: number;
    /** Right padding in pixels applied around the banner container. */
    padding_right?: number;
    /** Top padding in pixels applied around the banner container. */
    padding_top?: number;
    /** Bottom padding in pixels applied around the banner container. */
    padding_bottom?: number;
    /** Border thickness in pixels for the slide. */
    border?: number;
    /** Border color as hex string for the slide. */
    border_color?: string;
    /** Background color as hex string for the banner container. */
    bg_color?: string;
    /**
     * Maximum number of lines the disclosure text may occupy. Longer text is truncated
     * with an ellipsis. When omitted, the disclosure text is not clamped.
     */
    disclosure_max_lines?: number;
    /**
     * Font family of the disclosure text. Resolved into the banner layout tree, so the
     * disclosure text layer already carries the matching `font` descriptor — kept here for
     * reference only.
     */
    disclosure_font_family?: string;
    /**
     * Font size of the disclosure text in pixels. Resolved into the banner layout tree as the
     * disclosure text layer's `f_s` — kept here for reference only.
     */
    disclosure_font_size?: number;
    /**
     * Placement of the disclosure area relative to the banner content. Resolved into the banner
     * layout tree as a dedicated disclosure container — kept here for reference only.
     */
    disclosure_mode?: "below";
}

/**
 * Content data for the banner widget containing slides and styling.
 * @category Banner Types
 */
declare interface BannerWidgetData {
    items: BannerData[];
    style: BannerStyle;
}

/**
 * Public API surface of the Banner widget, returned by {@link StorylyPlacement.init}
 * when the placement contains a banner widget.
 *
 * @category Widget Types
 */
declare interface BannerWidgetTypes {
    token: string;
    widgetData: Omit<WidgetData, "w_content"> & {
        w_content: BannerWidgetData;
    };
    on(eventName: string, callback: (params?: any) => void): void;
}

/**
 * Base style properties shared across Stories and Video Feed widgets.
 * @category Story Types
 */
declare interface baseStyleTypes {
    sg_border_unseen: string[];
    sg_border_seen: string[];
    sg_text_unseen: string;
    sg_text_seen: string;
    pin_bg: string;
    animation: {
        type: "pulse";
        mode: boolean;
    };
    progress_bg: string;
    progress_fill: string;
    story_title_visible: boolean;
    story_cover_visible: boolean;
    story_close_visible: boolean;
    b_m_t?: number;
    b_m_b?: number;
    b_m_s?: number;
    b_m_e?: number;
    b_bg?: string;
    b_sg_h_space: number;
    sg_c_w: number;
    sg_c_h: number;
    sg_t_space: number;
    sg_t_visible: boolean;
    sg_t_a?: string;
    sg_t_s: number;
    sg_t_f: {
        name: string;
        url: string;
    };
    sg_t_lc: number;
    pin_i: string | null;
    pin_i_c?: string;
    pin_s: number;
    pin_r: number;
    pin_p?: string;
    sg_b_r: number;
    sg_b_t: number;
    sg_b_s: number;
    s_h_s_visible: boolean;
    badge_t_s: number;
    badge_p: string;
    card_per_view?: number;
}

/**
 * Base layout properties shared by all banner layer types.
 * @category Banner Types
 */
declare type BaseType = {
    /** Unique key identifier for the layer. */
    key?: string;
    /** Top margin in pixels. */
    m_t?: number;
    /** Bottom margin in pixels. */
    m_b?: number;
    /** Left margin in pixels. */
    m_l?: number;
    /** Right margin in pixels. */
    m_r?: number;
};

/**
 * A single item within the Canvas widget grid.
 * @category Canvas Types
 */
declare interface CanvasItem {
    canvas_item_id: number | string;
    product?: CanvasItemProduct;
    action_url?: string;
    image_url?: string;
    video_url?: string;
    thumbnail_url?: string;
    focal_point?: {
        x: number;
        y: number;
        z: number;
    };
}

/**
 * Product reference within a canvas item.
 * @category Canvas Types
 */
declare interface CanvasItemProduct {
    /** Product identifier. */
    product_id?: string | number;
    /** Product group identifier. */
    product_group_id?: string | number;
    /** Generic identifier. */
    id?: string | number;
}

/**
 * Content data for the Canvas widget.
 * @category Canvas Types
 */
declare interface CanvasWidgetData {
    items: CanvasItem[];
    style: {
        horizontal_padding: number;
        vertical_padding: number;
        spacing: number;
        media_radius: number;
        title_font: {
            name: string;
            style: string;
            url: string;
        };
        title_text_color: string;
        button_font: {
            name: string;
            style: string;
            url: string;
        };
        button_text_color: string;
        title_text_size: number;
        button_text_size: number;
        background_color?: string;
        title_spacing: number;
        button_spacing: number;
        template_ratio?: number;
    };
    title?: string;
    button_text?: string;
    button_url?: string;
    /**
     * Template adedi / tipi; ör: "6-grid|4-grid|7-grid"
     */
    template?: string;
}

/**
 * Public API surface of the Canvas widget, returned by {@link StorylyPlacement.init}
 * when the placement contains a canvas grid widget.
 *
 * @category Widget Types
 */
declare interface CanvasWidgetTypes {
    token: string;
    widgetData: Omit<WidgetData, "w_content"> & {
        w_content: CanvasWidgetData;
    };
    on(eventName: string, callback: (params?: any) => void): void;
}

/**
 * Font definition for text rendering within story layers.
 * @category Story Types
 */
declare interface Font {
    line_height_ratio: number;
    name: string;
    style: string;
    url: string;
    weight: string;
}

/**
 * Product references associated with a story group, keyed by layer UID.
 * @category Story Types
 */
declare interface GroupProducts {
    [key: string]: {
        i: string;
        pgid: string;
        pid: string;
        s: number;
    };
}

/**
 * Visual style configuration for a story group thumbnail.
 * @category Story Types
 */
declare interface GroupStyle {
    focal: {
        x: number;
        y: number;
        z: number;
    };
    b_u_c?: string[];
    badge?: BadgeTypes;
}

/** @category Story Types */
declare type HexColor = `#${string}`;

/**
 * Scroll indicator styling for the story bar.
 * @category Story Types
 */
declare interface indicatorStyles {
    indicatorWidth: number;
    indicatorHeight: number;
    indicatorBorderRadius: number;
    indicatorBorderWidth: number;
    indicatorBorderColor: HexColor;
    indicatorBoxBackgroundColor: HexColor;
    indicatorDefaultIconsColor: HexColor;
    indicatorBoxShadow: string;
    customLeftIndicator: string;
    customRightIndicator: string;
    leftIndicatorMargin: number;
    rightIndicatorMargin: number;
    leftIndicatorBackgroundColor: HexColor;
    rightIndicatorBackgroundColor: HexColor;
}

/**
 * An interactive or visual layer within a story's media content.
 * Layers represent individual UI elements such as text, images, buttons,
 * polls, quizzes, product tags, and more.
 *
 * @category Story Types
 */
declare interface Layer {
    h?: number;
    w?: number;
    x?: number;
    y?: number;
    image_url?: string;
    bg_color?: string;
    is_bg?: boolean;
    f_s?: number;
    font?: Font;
    is_bold?: boolean;
    is_italic?: boolean;
    l_c?: number;
    line_h?: number;
    t_v_a?: number;
    text?: string;
    text_alignment?: number;
    text_color?: string;
    text_size?: number;
    text_span_color?: string;
    type: string;
    custom_payload?: string;
    has_title?: boolean;
    l_o_text?: string;
    l_o_vote_count?: number;
    o_h?: number;
    p_text?: string;
    primary_color?: string;
    r_o_text?: string;
    r_o_vote_count?: number;
    r_p_v?: boolean;
    scale?: number;
    secondary_color?: string;
    theme?: string;
    uid?: string;
    position?: string;
    sizing?: string;
    studio_component_type?: string;
    end_time?: number;
    start_time?: number;
    content_mode?: number;
    placeholder?: boolean;
    rotation?: number;
    c_b_text?: string;
    collection_id?: number;
    is_price_visible?: boolean;
    is_s_price_visible?: boolean;
    is_title_visible?: boolean;
    p_b_icon?: string;
    p_b_text?: string;
    products?: ProductRef[];
    s_b_cart_text?: string;
    s_message?: string;
    w_a_m?: string;
    w_i?: string;
    w_r_m?: string;
    w_v?: boolean;
    outlink?: string;
    border_color?: string;
    border_thickness?: number;
    l_h?: number;
    conditions?: {
        i: number;
        r: {
            p: number;
        };
    };
}

/**
 * Media content of a story, containing layers and an optional thumbnail.
 * @category Story Types
 */
declare interface Media {
    layers: Layer[];
    thumbnail_url?: string;
}

/**
 * Configuration for nudge (attention-grabbing) animations on story groups.
 * @category Story Types
 */
declare interface NudgeSettings {
    start: number;
    frequency: number;
    max: number;
}

/**
 * Full product data model used in shoppable stories, wishlists, and carts.
 * @category Data Models
 */
declare interface Product {
    id: string;
    account_id: number;
    feed_id: string;
    product_id: string;
    product_group_id: string;
    title: string;
    description: string;
    url: string;
    mobile_url: string;
    image_urls: string[];
    price: number;
    sales_price?: number;
    price_date: string;
    price_currency: string;
    unit_pricing_measure: string;
    availability: string;
    category: string;
    type: string;
    brand: string;
    condition: string;
    age_group: string;
    gender: string;
    tags: string;
    variant: Variant[];
    wishlist?: boolean;
    lowest_price?: number;
}

/**
 * Lightweight product reference used within story layers.
 * @category Story Types
 */
declare interface ProductRef {
    id: string;
    product_group_id: string;
    product_id: string;
}

/**
 * Top-level placement data containing widgets and navigation rules.
 * Returned by the Storyly API and consumed by {@link StorylyPlacement.init}.
 *
 * @category Data Models
 */
declare interface RecipeData {
    recipe_id: number;
    initial_w: number;
    rules: RecipeRule[];
    widgets: WidgetData[];
}

/**
 * A navigation rule defining how user actions on one widget trigger transitions to another.
 * @category Data Models
 */
declare interface RecipeRule {
    s_w_id: number;
    s_w_type: string;
    s_action: string;
    s_info: SourceInfo;
    t_w_id: number;
    t_w_type: string;
    t_action: string;
    t_info: TargetInfo;
}

/**
 * Source widget information in a recipe navigation rule.
 * @category Data Models
 */
declare interface SourceInfo {
    uid?: string;
    item_id?: string;
    [key: string]: string | undefined;
}

/**
 * Content data for the Stories widget, containing story groups and styling.
 * @category Story Types
 */
declare interface StoriesData {
    ratio: number;
    type: string;
    story_groups: StoryGroup[];
    style: styleTypes;
    nude_settings?: NudgeSettings;
}

/**
 * Style configuration for the Stories widget (classic & energized).
 * @category Story Types
 */
declare interface storiesStyleTypes extends baseStyleTypes {
    b_sg_padding?: number;
    sg_c_bg?: string;
    sg_c_visible?: boolean;
    sg_c_t_p?: string;
    t_w?: number;
    t_h?: number;
    t_r?: number;
    i_s?: indicatorStyles;
}

/**
 * Public API surface of the Stories widget, returned by {@link StorylyPlacement.init}
 * when the placement contains a story bar widget.
 *
 * @category Widget Types
 */
declare type StoriesWidgetTypes = {
    /** Sets the current shopping cart items for shoppable stories. */
    setProductCartItems(products: Product[]): void;
    /** Sets the UI language and translation strings. */
    setLang(param: {
        language: string;
        json: Record<string, string>;
    }): void;
    /** Updates user property data for personalization. */
    setUserPropertiesData(userPropertiesData: Record<string, any>): Promise<void>;
    /** Provides initial wishlist state for product layers. */
    setWishlistHydration(hydration: Product[]): void;
    /** Updates the shopping cart contents. */
    updateCart(products: Product[]): void;
    /** Provides hydration data for Storyly content. */
    setStorylyHydration(hydration: any[]): void;
    /** Closes the currently open story viewer. */
    close(): void;
    /**
     * Programmatically opens a specific story.
     *
     * @param options.group - Story group ID to open.
     * @param options.story - Story ID within the group.
     * @param options.playMode - Play mode: `"s"` for single story, `"sg"` for full group (default).
     */
    openStory(options: {
        group: number;
        story: number;
        playMode?: string;
    }): void;
};

/**
 * A single story within a story group, containing media content and metadata.
 * @category Story Types
 */
declare interface Story {
    is_sharable: boolean;
    media: Media;
    preview_url: string;
    story_id: number;
    title: string;
    conditions?: any[];
    visible?: boolean;
    alt_text: string;
    name: string;
    preview_path?: string;
    image_path?: string;
    image_url?: string;
    video_path?: string;
    video_url?: string;
    type: string;
}

/**
 * A story group containing an ordered list of stories, displayed as a
 * thumbnail in the story bar.
 *
 * @category Story Types
 */
declare interface StoryGroup {
    user_fields?: string[];
    products?: GroupProducts;
    group_id: number;
    icon_image_url: string;
    icon_thumbnail_url: string;
    icon_video_url: string;
    order: number;
    pinned: boolean;
    smart_order: number;
    stories: Story[];
    template: null | string;
    title: string;
    type: string;
    web_html_file_path: null | string;
    style?: GroupStyle;
    onView: boolean;
    hidden: boolean;
    conditional?: boolean;
    nudge?: boolean;
    currentOrder?: number;
    instance: Object;
    name: string;
    is_user_property_used?: boolean;
    media_host?: string;
}

/**
 * Network host overrides for the Storyly Placement SDK.
 *
 * Every field is optional. Omitted fields fall back to the Storyly defaults
 * selected by {@link StorylyPlacementConfig.env}. Use this to route SDK
 * traffic through your own domain or reverse proxy.
 *
 * A value may be a bare host (`"api.acme.com"`, resolved as `https://`), a full
 * origin (`"https://api.acme.com"`), or an origin with a path prefix
 * (`"https://proxy.acme.com/storyly"`). Invalid values are ignored and the
 * default host is used.
 *
 * @example
 * ```typescript
 * const config: StorylyPlacementConfig = {
 *   token: "your-placement-token",
 *   direction: "ltr",
 *   locale: "en_US",
 *   language: "en",
 *   country: "US",
 *   networkConfig: {
 *     listHost: "https://api.acme.com",
 *     analyticHost: "https://trk.acme.com",
 *     productHost: "https://api.acme.com",
 *   },
 * };
 * ```
 *
 * @category Core
 */
declare interface StorylyNetworkConfig {
    /** Host serving the placement (story list) API. Defaults to `https://api.storyly.io`. */
    listHost?: string;
    /** Host receiving analytics events. Defaults to `https://metric.storyly.io`. */
    analyticHost?: string;
    /** Host serving the product/catalog API. Defaults to `https://core.storyly.io`. */
    productHost?: string;
}

/**
 * The main web component for rendering Storyly placements.
 *
 * Supports five widget types: Stories, Video Feed, Banner, Swipe Card, and Canvas.
 * Register via custom element `<storyly-placement>`.
 *
 * @example
 * ```html
 * <storyly-placement id="placement"></storyly-placement>
 * <script type="module">
 *   const el = document.getElementById("placement");
 *   const widget = await el.init({
 *     token: "your-token",
 *     direction: "ltr",
 *     locale: "en_US",
 *     language: "en",
 *     country: "US",
 *   });
 *
 *   el.on("widgetReady", ({ widget, ratio }) => {
 *     console.log("Widget is ready", widget);
 *   });
 * </script>
 * ```
 *
 * @category Core
 */
export declare class StorylyPlacement extends LitElement {
    static styles: CSSResult;
    private token;
    private widgetData;
    private storylyContext;
    private initPromise;
    /** Unique placement instance identifier decoded from the JWT token. */
    instanceId: number;
    private uuid;
    private sessionId;
    private parentResizeObserver?;
    private placementConfig;
    private activeWidget;
    private pendingLabels?;
    private userConfigChanged;
    /**
     * Initializes the placement with the given configuration.
     *
     * Decodes the JWT token, sets up the API client, attaches fonts, observes
     * the parent container for resize events, fetches placement data, and
     * renders the appropriate widget.
     *
     * @param config - Placement configuration object.
     * @returns A promise that resolves with the rendered widget instance.
     *
     * @example
     * ```typescript
     * const widget = await placement.init({
     *   token: "eyJ...",
     *   direction: "ltr",
     *   locale: "en_US",
     *   language: "en",
     *   country: "US",
     * });
     * ```
     */
    init(config: StorylyPlacementConfig): Promise<StoriesWidgetTypes | VideoFeedWidgetTypes | BannerWidgetTypes | SwipeCardWidgetTypes | CanvasWidgetTypes>;
    private attachFonts;
    private setPropsByParams;
    private isCacheValid;
    private fetchPlacementData;
    private handleRecipe;
    private hasStoryGroups;
    private handleWidgets;
    private attachCustomEventListeners;
    private handleI18n;
    private getPayload;
    /* Excluded from this release type: updatePlacementData */
    /**
     * Sets audience segment labels for targeting.
     *
     * Can be called before or after {@link init}. If called before `init`,
     * labels are queued and applied once initialization completes.
     *
     * @param labels - Array of audience segment label strings.
     *
     * @example
     * ```typescript
     * placement.setLabels(["premium", "returning-user"]);
     * ```
     */
    setLabels(labels: string[]): void;
    /**
     * Registers an event callback. Must be called after {@link init}.
     *
     * Waits for the initialization promise to resolve before registering
     * the callback, ensuring the widget is ready to emit events.
     *
     * @param eventName - Name of the event to listen to (see {@link CustomerEventTypes}, {@link AppEvents}).
     * @param callback - Function invoked when the event fires.
     *
     * @example
     * ```typescript
     * await placement.on("storyGroupViewed", (data) => {
     *   console.log("Story group viewed:", data);
     * });
     * ```
     */
    on(eventName: string, callback: (detail?: any) => void): Promise<void>;
    disconnectedCallback(): void;
    private observeParentResize;
    render(): TemplateResult<1>;
}

/**
 * Configuration object for initializing a {@link StorylyPlacement} instance.
 *
 * @example
 * ```typescript
 * const config: StorylyPlacementConfig = {
 *   token: "your-placement-token",
 *   direction: "ltr",
 *   locale: "en_US",
 *   language: "en",
 *   country: "US",
 *   labels: ["premium", "returning-user"],
 *   networkConfig: { listHost: "https://api.acme.com" },
 * };
 *
 * const placement = document.querySelector("storyly-placement");
 * const widget = await placement.init(config);
 * ```
 *
 * @category Core
 */
declare interface StorylyPlacementConfig {
    /** JWT authentication token identifying the placement instance. */
    token: string;
    /** Text direction for the placement UI. Defaults to the document's `dir` attribute or `"ltr"`. */
    direction: "ltr" | "rtl";
    /** Locale identifier used for API requests (e.g. `"en_US"`). */
    locale: string;
    /** Language code for content localization (e.g. `"en"`). */
    language: string;
    /** ISO country code (e.g. `"US"`). */
    country: string;
    /** Visual theme for the placement UI. Accepts only `"light"` or `"dark"`. Defaults to `"light"`. */
    theme?: "light" | "dark";
    /** When `true`, enables inbox story mode. */
    inboxStory?: boolean;
    /** Product feed data map used for shoppable story personalization. */
    productFeed?: Record<string, any>;
    /** Key-value pairs for user property–based personalization (e.g. `{"{name}": "John"}`). */
    userProperties?: Record<string, any>;
    /** Custom parameter sent with analytics events for segmentation or tracking. */
    customParameter?: string;
    /** When `true`, enables fallback product rendering if the primary product is unavailable. */
    isProductFallbackEnabled?: boolean;
    /** Audience segment labels used for targeting specific story groups. */
    labels?: string[];
    /** When `true`, enables test mode — test stories become visible and caching is bypassed. */
    isTestMode?: boolean;
    /** When `true`, activates the built-in shopping cart UI within stories. */
    isStorylyCartActive?: boolean;
    /** Layout style for the video feed widget. */
    videoFeedView?: "bar" | "grid";
    /** Number of sections (rows) displayed in the video feed grid layout. */
    videoFeedSectionCount?: number;
    /** Scale multiplier applied to the widget rendering. */
    scaleRatio?: number;
    /** Target environment. Use `"qa"` or `"blue"` for non-production environments. Defaults to production. */
    env?: string;
    /**
     * Overrides the network hosts the SDK talks to. Applied on top of the defaults
     * selected by {@link StorylyPlacementConfig.env}. See {@link StorylyNetworkConfig}.
     */
    networkConfig?: StorylyNetworkConfig;
    /* Excluded from this release type: _placementData */
}

/**
 * Union of all widget style types.
 * Used where the widget type is not yet known (e.g. StoriesData.style).
 * @category Story Types
 */
declare type styleTypes = storiesStyleTypes | videoFeedStyleTypes;

/**
 * A single product card within the Swipe Card widget.
 * @category Swipe Card Types
 */
declare interface SwipeCardItem {
    /** Unique item identifier. */
    id: number | string;
    /** Product title. */
    title: string;
    /** Formatted price text. */
    priceText: string;
    /** Product image URL. */
    imageUrl: string;
    /** Formatted original price (shown as strikethrough when on sale). */
    oldPriceText?: string;
    /** Product detail page URL. */
    url?: string;
}

/**
 * Content data for the Swipe Card widget.
 * @category Swipe Card Types
 */
declare interface SwipeCardWidgetData {
    items: SwipeCardItem[];
    title?: string;
    style: {
        card_height: number;
        card_width: number;
        title_text_size: number;
        desc_text_size: number;
        icon_size: number;
        empty_text_size: number;
        bg_color: string;
        font: {
            name: string;
            style: string;
            url: string;
        };
        left_icon: string;
        left_icon_color: string;
        left_icon_bg_color: string;
        right_icon: string;
        right_icon_color: string;
        right_icon_bg_color: string;
        cart_icon: string;
        cart_icon_color: string;
        cart_icon_bg_color: string;
        title_color: string;
        description_color: string;
    };
    products?: Array<Record<string, any>>;
    desc?: string;
    empty_message?: string;
    cta_type?: string;
    swipe_card_id: number;
}

/**
 * Public API surface of the Swipe Card widget, returned by {@link StorylyPlacement.init}
 * when the placement contains a swipe card widget.
 *
 * @category Widget Types
 */
declare interface SwipeCardWidgetTypes {
    token: string;
    widgetData: Omit<WidgetData, "w_content"> & {
        w_content: SwipeCardWidgetData;
    };
    on(eventName: string, callback: (params?: any) => void): void;
}

/**
 * Target widget information in a recipe navigation rule.
 * @category Data Models
 */
declare interface TargetInfo {
    sg?: string;
    s?: string;
    [key: string]: string | undefined;
}

/**
 * Button layer within a banner layout.
 * @category Banner Types
 */
declare type TButtonLayer = BaseType & {
    type: "button";
    /** Button label text. */
    text: string;
    /** Action URL opened on click. */
    url?: string;
    /** Text decoration: `"u"` = underline, `"s"` = strikethrough, `"u+s"` = both. */
    t_s?: "u" | "s" | "u+s";
    /** Text color as hex string. */
    t_c?: string;
    /** Background color as hex string. */
    bg_c?: string;
    /** Font size in pixels. */
    f_s: number;
    /** Top padding in pixels. */
    p_t?: number;
    /** Bottom padding in pixels. */
    p_b?: number;
    /** Left padding in pixels. */
    p_l?: number;
    /** Right padding in pixels. */
    p_r?: number;
    /** Border radius in pixels. */
    b_r?: number;
    /** Border thickness in pixels. */
    b_t?: number;
    /** Border color as hex string. */
    b_c?: string;
};

/**
 * Image or video layer within a banner layout.
 * @category Banner Types
 */
declare type TImageLayer = BaseType & {
    type: "image";
    /** URL of the image asset. */
    img_url?: string;
    /** URL of the video asset (if video layer). */
    video_url?: string;
    /** URL of the video thumbnail. */
    thumbnail_url?: string;
    /** Focal point for image cropping/positioning. */
    f_p: {
        x: number;
        y: number;
        z: number;
    };
};

/**
 * Flex layout container that holds child layers in a banner.
 * @category Banner Types
 */
declare type TLayoutContainer = BaseType & {
    type: "container";
    /** Layout direction of children. */
    orientation: "horizontal" | "vertical";
    /** Vertical alignment of children. */
    v_a: "start" | "center" | "end";
    /** Horizontal alignment of children. */
    h_a: "start" | "center" | "end";
    /** Height sizing mode. */
    height?: "fill" | "content";
    /** Width sizing mode. */
    width?: "fill" | "content";
    /** Flex weight for proportional sizing (default: 1). */
    weight?: number;
    /** Gap between children in pixels. */
    gap?: number;
    /** Top padding in pixels. */
    p_t?: number;
    /** Bottom padding in pixels. */
    p_b?: number;
    /** Left padding in pixels. */
    p_l?: number;
    /** Right padding in pixels. */
    p_r?: number;
    /** Border radius as a percentage (0–100) of the container's smaller side. */
    b_r?: number;
    /** Child layers within this container. */
    children: TLayoutLayer[];
    /** Background color as hex string. */
    bg_c?: string;
    /** Background image layer. */
    bg_l?: TImageLayer;
    /** Focal point for background positioning. */
    f_p: {
        x: number;
        y: number;
        z: number;
    };
};

/**
 * Union of all possible banner layout layer types.
 * @category Banner Types
 */
declare type TLayoutLayer = TTextLayer | TImageLayer | TButtonLayer | TLayoutContainer;

/**
 * Text layer within a banner layout.
 * @category Banner Types
 */
declare type TTextLayer = BaseType & {
    type: "text";
    /** Text content to display. */
    text: string;
    /** Font size in pixels. */
    f_s: number;
    /** Text color as hex string. */
    t_c?: string;
    /** Font configuration. */
    font: {
        name: string;
        url: string;
        weight: string;
        style: "normal" | "italic";
    };
    /** Text alignment: `0` = left, `1` = center, `2` = right. */
    t_a?: 0 | 1 | 2;
    /** Text decoration: `"u"` = underline, `"s"` = strikethrough, `"u+s"` = both. */
    t_s?: "u" | "s" | "u+s";
};

/**
 * A product variant (e.g. size, color).
 * @category Data Models
 */
declare interface Variant {
    /** Variant name (e.g. "Size", "Color"). */
    n: string;
    /** Variant value (e.g. "M", "Red"). */
    v: string;
}

/**
 * Style configuration for the Video Feed widget.
 * @category Story Types
 */
declare interface videoFeedStyleTypes extends baseStyleTypes {
    b_o?: "horizontal" | "vertical";
    b_s?: number;
    b_c_h_space?: number;
    b_c_v_space?: number;
    b_c_w?: number;
    b_c_h?: number;
    b_c_bg?: string;
    b_c_cr?: number;
    b_c_t_visible?: boolean;
    b_c_t_s?: number;
    b_c_t_f?: {
        name: string;
        url: string;
    };
    b_c_t_c?: string;
    b_c_like_visible?: boolean;
    b_c_like_i?: string;
    b_c_like_min?: number;
    b_c_impression_visible?: boolean;
    b_c_impression_min?: number;
    template?: string;
    pv_progress_visible?: boolean;
    pv_progress_c?: string;
    pv_progress_bg?: string;
    pv_title_visible?: boolean;
    pv_close_visible?: boolean;
    pv_like_visible?: boolean;
    pv_like_i?: string;
    pv_share_visible?: boolean;
}

/**
 * Public API surface of the Video Feed widget, returned by {@link StorylyPlacement.init}
 * when the placement contains a video feed widget.
 *
 * @category Widget Types
 */
declare type VideoFeedWidgetTypes = {
    /** Sets the current shopping cart items for shoppable stories. */
    setProductCartItems(products: Product[]): void;
    /** Sets the UI language and translation strings. */
    setLang(param: {
        language: string;
        json: Record<string, string>;
    }): void;
    /** Updates user property data for personalization. */
    setUserPropertiesData(userPropertiesData: Record<string, any>): Promise<void>;
    /** Provides initial wishlist state for product layers. */
    setWishlistHydration(hydration: Product[]): void;
    /** Updates the shopping cart contents. */
    updateCart(products: Product[]): void;
    /** Provides hydration data for Storyly content. */
    setStorylyHydration(hydration: any[]): void;
    /** Closes the currently open story viewer. */
    close(): void;
    /**
     * Programmatically opens a specific story.
     *
     * @param options.group - Story group ID to open.
     * @param options.story - Story ID within the group.
     * @param options.playMode - Play mode: `"s"` for single story, `"sg"` for full group (default).
     */
    openStory(options: {
        group: number;
        story: number;
        playMode?: string;
    }): void;
};

/**
 * Generic widget data envelope returned by the Storyly API.
 * Contains the widget identifier, type, sizing, and type-specific content data.
 *
 * @category Data Models
 */
declare interface WidgetData {
    w_id: number;
    w_type: string;
    w_size: any;
    w_content: StoriesData | BannerWidgetData | SwipeCardWidgetData | CanvasWidgetData;
    recipeWidget?: boolean;
}

export { }