export type HotspotSpotlightShape = "square" | "rounded" | "circle";

export interface HotspotTranslation {
    text?: string;
    voiceover?: string;
}

export interface Hotspot {
    id: string;
    frameStart: number;
    frameEnd: number;
    x: number;
    y: number;
    width: number;
    height: number;
    style: "circle" | "rectangle" | "pulse" | "callout";
    /** Optional copy shown in tooltips/callouts. */
    text?: string;
    backgroundColor?: string;
    textColor?: string;
    spotlight?: boolean;
    spotlightShape?: HotspotSpotlightShape;
    spotlightOverlayColor?: string;
    spotlightOverlayOpacity?: number;
    spotlightBorderOpacity?: number;
    translations?: Record<string, HotspotTranslation>;
    voiceoverScript?: string;
    action: HotspotAction;
}

export type HotspotAction =
    | { type: "none" }
    | { type: "this_step" }
    | { type: "next_step" }
    | { type: "step"; stepId: string }
    | { type: "seek"; targetFrame: number }
    | { type: "url"; href: string; newTab: boolean }
    // Legacy: stored as action in older sessions (migrated into `Hotspot.text` on load).
    | { type: "tooltip"; text: string };

export interface WalkthroughStep {
    id: string;
    title: string;
    frameStart: number;
    frameEnd: number;
    description?: string;
}