import { reactive } from "vue";
import type { ViewerSelectionStore } from "./ui/stores/viewerSelection";
import type { Selectable } from "./viewerTypes";

export interface HudPanelState {
  collapsed: boolean;
  summary: string;
  bodyText: string;
}

export type StatsOverlayMode = "hidden" | "compact" | "status" | "network" | "performance" | "full";

export interface StatsOverlayState {
  mode: StatsOverlayMode;
  lines: string[];
}

export interface HudHtmlPanelState {
  hidden: boolean;
  title: string;
  bodyHtml: string;
}

export interface HudErrorState {
  hidden: boolean;
  message: string;
}

export interface HudProgressBar {
  label: string;
  valueLabel: string;
  progress: number;
}

export interface OpsFactionCardState {
  kind: "faction";
  id: string;
  label: string;
  stateLines: string[];
  priorities: { label: string; value: string }[];
}

export interface OpsStationCardState {
  kind: "station";
  id: string;
  label: string;
  badge: string;
  selected: boolean;
  lines: string[];
  processes: HudProgressBar[];
}

export interface OpsShipCardState {
  kind: "ship";
  id: string;
  label: string;
  badge: string;
  selected: boolean;
  followed: boolean;
  locationLines: string[];
  lines: string[];
  action?: HudProgressBar;
  aiLines: string[];
}

export interface OpsStripState {
  factions: OpsFactionCardState[];
  stations: OpsStationCardState[];
  ships: OpsShipCardState[];
}

export interface HistoryWindowState {
  id: string;
  target: Selectable;
  title: string;
  bodyHtml: string;
  text: string;
  copyLabel: string;
  x: number;
  y: number;
  width: number;
  height: number;
  zIndex: number;
}

export interface HoverLabelState {
  hidden: boolean;
  text: string;
  x: number;
  y: number;
  connectorHidden: boolean;
  x1: number;
  y1: number;
  x2: number;
  y2: number;
}

export interface MarqueeState {
  visible: boolean;
  x: number;
  y: number;
  width: number;
  height: number;
}

export interface ViewerHudState {
  gamePanel: HudPanelState;
  networkPanel: HudPanelState;
  performancePanel: HudPanelState;
  statsOverlay: StatsOverlayState;
  systemPanel: HudHtmlPanelState;
  detailPanel: HudHtmlPanelState;
  error: HudErrorState;
  opsStrip: OpsStripState;
  historyWindows: HistoryWindowState[];
  hoverLabel: HoverLabelState;
  marquee: MarqueeState;
}

export interface ViewerHudBindings {
  state: ViewerHudState;
  selectionStore: ViewerSelectionStore;
  historyLayerEl: HTMLDivElement;
  marqueeEl: HTMLDivElement;
  hoverLabelEl: HTMLDivElement;
  hoverConnectorLineEl: SVGLineElement;
}

export function createViewerHudState(): ViewerHudState {
  return reactive({
    gamePanel: {
      collapsed: true,
      summary: "Bootstrapping",
      bodyText: "Bootstrapping",
    },
    networkPanel: {
      collapsed: true,
      summary: "Waiting",
      bodyText: "Waiting for snapshot.",
    },
    performancePanel: {
      collapsed: true,
      summary: "Waiting",
      bodyText: "Waiting for frame samples.",
    },
    statsOverlay: {
      mode: "compact",
      lines: [],
    },
    systemPanel: {
      hidden: false,
      title: "Deep Space",
      bodyHtml: "Waiting for the authoritative snapshot.",
    },
    detailPanel: {
      hidden: false,
      title: "Nothing selected",
      bodyHtml: "Waiting for the authoritative snapshot.",
    },
    error: {
      hidden: true,
      message: "",
    },
    opsStrip: {
      factions: [],
      stations: [],
      ships: [],
    },
    historyWindows: [],
    hoverLabel: {
      hidden: true,
      text: "",
      x: 0,
      y: 0,
      connectorHidden: true,
      x1: 0,
      y1: 0,
      x2: 0,
      y2: 0,
    },
    marquee: {
      visible: false,
      x: 0,
      y: 0,
      width: 0,
      height: 0,
    },
  });
}
