export type DevToolbarSeverity = "error" | "warning" | "info" | "suggestion";

export type DevToolbarCategory =
  | "runtime"
  | "stores"
  | "cache"
  | "components"
  | "hydration"
  | "database"
  | "queues"
  | "realtime"
  | "translations"
  | "configuration"
  | "upgrades"
  | "compiler"
  | "server"
  | "routing"
  | "accessibility"
  | "seo"
  | "performance"
  | "images"
  | "media"
  | "color"
  | "forms"
  | "links"
  | "html"
  | "css"
  | "javascript"
  | "security"
  | "network"
  | "responsive"
  | "best-practice";

export interface DevToolbarSourceLocation {
  file?: string;
  line?: number;
  column?: number;
  endLine?: number;
  endColumn?: number;
  component?: string;
  page?: string;
}

export interface DevToolbarElementTarget {
  selector?: string;
  tagName?: string;
  id?: string;
  classes?: string[];
  text?: string;
  sourceId?: string;
}

export interface DevToolbarFix {
  title: string;
  description?: string;
  replacement?: string;
  automatic?: boolean;
}

export interface DevToolbarIssue {
  id: string;
  ruleId: string;
  category: DevToolbarCategory;
  severity: DevToolbarSeverity;
  title: string;
  message: string;
  explanation?: string;
  recommendation?: string;
  documentation?: string;
  target?: DevToolbarElementTarget;
  source?: DevToolbarSourceLocation;
  fix?: DevToolbarFix;
  fingerprint: string;
  createdAt: number;
  confidence?: "high" | "medium" | "low";
  metadata?: Record<string, unknown>;
}

export interface DevToolbarMetrics {
  domNodes: number;
  htmlBytes?: number;
  cssResources: number;
  scriptResources: number;
  imageResources: number;
  totalTransferBytes?: number;
  largestImageBytes?: number;
  renderBlockingResources?: number;
  longTasks?: number;
  layoutShifts?: number;
  pageLoadMs?: number;
  hydrationMs?: number;
  hydratedComponents?: number;
  javascriptBytes?: number;
  cssBytes?: number;
  lcpMs?: number;
  cls?: number;
  inpMs?: number;
}

export interface DevToolbarPageReport {
  url: string;
  pathname: string;
  title: string;
  status: number;
  generatedAt: number;
  issues: DevToolbarIssue[];
  metrics: DevToolbarMetrics;
}

export interface DevToolbarConfig {
  enabled?: boolean;
  position?: "bottom-center" | "bottom-left" | "bottom-right";
  defaultOpen?: boolean;
  keyboardShortcut?: string;
  scanOnNavigation?: boolean;
  scanOnHmr?: boolean;
  openEditor?: boolean;
  editor?: string;
  rules?: Partial<Record<string, boolean>>;
  severity?: Partial<Record<string, DevToolbarSeverity>>;
  ignoredRules?: string[];
  ignoredPaths?: string[];
  slowRequestMs?: number;
  largeImageBytes?: number;
  veryLargeImageBytes?: number;
}

export type DevToolbarServerMessage =
  | { type: "toolbar:issues"; issues: DevToolbarIssue[] }
  | { type: "toolbar:clear"; scope?: string }
  | { type: "toolbar:scan"; reason?: string }
  | { type: "toolbar:route"; pathname: string; status: number }
  | { type: "toolbar:compiler-error"; issue: DevToolbarIssue }
  | { type: "toolbar:runtime-error"; issue: DevToolbarIssue };

export interface DevToolbarClientApi {
  open(): void;
  close(): void;
  toggle(): void;
  scan(): Promise<DevToolbarPageReport>;
  clear(): void;
  report(): DevToolbarPageReport | null;
  highlight(selector: string): void;
  configure(config: DevToolbarConfig): void;
}

declare global {
  interface Window {
    __wrnexusDevToolbar?: DevToolbarClientApi;
  }
}

export interface DevToolbarPanel {
  id: string;
  title: string;
  icon?: string;
  description?: string;
  badge?: number | string;
  order?: number;
  issues?: unknown[];
  data?: unknown;
  /** Optional issue category to show when this application is selected. Defaults to id. */
  category?: DevToolbarCategory;
}

export interface DevToolbarPlatformSnapshot {
  plugins?: Array<{ name: string; version?: string }>;
  runtimes?: Array<{ id: string; publicPath?: string; type?: string; load?: string }>;
  assets?: Array<{ id: string; publicPath?: string; contentType?: string }>;
  componentDirs?: string[];
  styles?: unknown[];
  routes?: { pages: number; api: number; realtime: number };
  [key: string]: unknown;
}
