export type ElementInfo = {
  ref: string;
  role: string;
  name: string;
  value?: string;
  disabled?: boolean;
  checked?: boolean;
  options?: { label: string; value: string; selected: boolean }[];
};

export type Snapshot = {
  tab: string;
  url: string;
  title: string;
  text: string;
  elements: ElementInfo[];
  truncated: boolean;
  frames: { url: string; title: string }[];
  diagnostics: string[];
};

export type Image = { type: "image"; data: string; mimeType: "image/png" };
export type Crop = { x: number; y: number; width: number; height: number };
export type Action =
  | { action: "open"; url: string }
  | { action: "tabs" }
  | { action: "snapshot"; tab: string }
  | { action: "click"; tab: string; ref: string }
  | { action: "fill"; tab: string; ref: string; text: string }
  | { action: "select"; tab: string; ref: string; value: string }
  | { action: "press"; tab: string; key: string; ref?: string }
  | { action: "scroll"; tab: string; x: number; y: number }
  | { action: "navigate"; tab: string; url: string }
  | { action: "back" | "forward" | "reload"; tab: string }
  | { action: "wait"; tab: string; ms: number }
  | { action: "close"; tab: string }
  | { action: "reset" };

export type Event =
  | { type: "observed"; version: 1; action: string; snapshot: Snapshot; at: number }
  | { type: "closed"; version: 1; tab: string; at: number }
  | { type: "reset"; version: 1; at: number };

export type State = {
  tabs: Snapshot[];
  history: { action: string; tab: string; url: string; at: number }[];
};

export type BrowserViewData = {
  active: boolean;
  tabs: Snapshot[];
  history: State["history"];
  screenshots: { tab: string; image: Image }[];
};