import type React from "react";
import type { RequiresToggle } from "./settingsSchema";
import type { BaseTabProps } from "./tabs/types";
import type { Settings, TabId } from "./types";

export type ExtensionViewStateValue =
  string | number | boolean | null | undefined;
export type ExtensionViewState = Record<string, ExtensionViewStateValue>;

export type FieldNavigationTarget = {
  id: string;
  tabId: TabId;
  subTab?: string;
};

export type ShowToast = (payload: {
  type: "success" | "error" | "info";
  message: string;
  durationMs?: number;
}) => void;

export type PreviewSlotProps = {
  rawSettings: Record<string, unknown>;
  showLabels: boolean;
  showLabelsColors: boolean;
  enableTooltips: boolean;
  layoutPaddingTop: number;
  layoutPaddingRight: number;
  layoutPaddingBottom: number;
  layoutPaddingLeft: number;
  labelFontSize: number | string;
  labelTextColor: string;
  selectedColor: string;
  swatchWidth: number;
  swatchHeight: number;
  swatchGap: number;
  selectedIndex: number;
  onSelectIndex: (idx: number) => void;
  adminColor: string;
};

export type SectionComponentProps = {
  settings: Settings;
  setSettings: React.Dispatch<React.SetStateAction<Settings>>;
  adminColor: string;
  restUrl: string;
  nonce: string;
  showToast: ShowToast;
  onOpenAnimations?: () => void;
};

export type ExtensionTabDefinition = {
  id: TabId;
  label: string;
  Icon?: React.ComponentType<{ className?: string }>;
};

export type GeneralExtrasSlotProps = BaseTabProps & {
  slot: "layout" | "size" | "options";
  showToast: ShowToast;
};

export type ExtensionTabSlots = {
  general?: React.ComponentType<GeneralExtrasSlotProps>;
  chips?: React.ComponentType<BaseTabProps>;
  advanced?: React.ComponentType<BaseTabProps>;
};

export type UsageStats = {
  by_type: Record<string, number | undefined>;
};

export type StatsSlotProps = {
  usageStats: UsageStats;
  slot: "breakdown" | "cards";
};

export type ExtensionViewStateSetter = React.Dispatch<
  React.SetStateAction<ExtensionViewState>
>;

export interface ExtensionSearchFieldOverride {
  description?: string;
  keywords?: string[];
  isExtended?: boolean;
  label?: string;
  tabId?: TabId;
  tabLabel?: string;
  section?: string;
  subTab?: string;
  requiresToggle?: RequiresToggle;
}

export type ExtensionSearchSchemaOverrides = Record<
  string,
  ExtensionSearchFieldOverride
>;

export type ExtensionBridge = {
  tabs?: ExtensionTabDefinition[];
  tabSlots?: ExtensionTabSlots;
  previewSlot?: React.ComponentType<PreviewSlotProps>;
  statsSlot?: React.ComponentType<StatsSlotProps>;
  typographySection?: React.ComponentType<SectionComponentProps>;
  tooltipsSection?: React.ComponentType<SectionComponentProps>;
  animationsSection?: React.ComponentType<{
    settings: Settings;
    setSettings: React.Dispatch<React.SetStateAction<Settings>>;
    adminColor: string;
    navigateToField?: (target: FieldNavigationTarget) => void;
  }>;
  accessProvider?: React.ComponentType<{
    children: React.ReactNode;
    data?: Partial<B3WvsData>;
  }>;
  statusBadge?: React.ComponentType<{ className?: string }>;
  heroDescription?: string;
  searchSchemaOverrides?: ExtensionSearchSchemaOverrides;
  initialViewState?: ExtensionViewState;
  syncViewState?: (args: {
    target: { tabId: TabId; subTab?: string };
    setViewState: ExtensionViewStateSetter;
  }) => void;
  renderExtensionTab?: (args: {
    activeSection: TabId;
    settings: Settings;
    setSettings: React.Dispatch<React.SetStateAction<Settings>>;
    adminColor: string;
    extensionViewState: ExtensionViewState;
    setExtensionViewState: ExtensionViewStateSetter;
    navigateToField: (target: FieldNavigationTarget) => void;
    restUrl: string;
    nonce: string;
    showToast: ShowToast;
  }) => React.ReactNode;
};