import type { BdcComponent, BdcElement } from '../jsx-runtime';

type LayoutProps = {
  id?: string;
  gap?: number | string;
  padding?: number | string;
  style?: Record<string, unknown>;
  children?: BdcElement[];
};

function layoutBlock(type: string, props: LayoutProps): BdcElement {
  return { type, props: { ...props }, children: props.children ?? [] };
}

type SegmentedTabsProps = LayoutProps & {
  segmentsRef?: string;
  activeRef?: string;
  actionPrefix?: string;
};

export const SegmentedTabs: BdcComponent = (props) =>
  layoutBlock('segmented_tabs', props as SegmentedTabsProps);

type EmptyStateProps = LayoutProps & {
  title?: string;
  titleRef?: string;
  hint?: string;
  hintRef?: string;
};

export const EmptyState: BdcComponent = (props) => layoutBlock('empty_state', props as EmptyStateProps);

type InboxPersonRowProps = LayoutProps & {
  variant: 'visit' | 'flash' | 'chat';
  rowRef: string;
  actionId?: string;
  actionParams?: Record<string, string>;
};

export const InboxPersonRow: BdcComponent = (props) =>
  layoutBlock('inbox_person_row', props as InboxPersonRowProps);

type InboxSearchFieldProps = LayoutProps & {
  placeholder?: string;
  layout?: 'wide_only' | 'always';
  segment?: string;
};

export const InboxSearchField: BdcComponent = (props) =>
  layoutBlock('inbox_search_field', props as InboxSearchFieldProps);

type InboxCapabilitiesProps = {
  id?: string;
  dataRef?: string;
};

function leafBlock(type: string, props: Record<string, unknown>): BdcElement {
  return { type, props: { ...props }, children: [] };
}

export const ChatInboxCapabilities: BdcComponent = (props) =>
  leafBlock('chat_inbox_capabilities', props as InboxCapabilitiesProps);

export const FlashInboxCapabilities: BdcComponent = (props) =>
  leafBlock('flash_inbox_capabilities', props as InboxCapabilitiesProps);

export const ProfileVisitsCapabilities: BdcComponent = (props) =>
  leafBlock('profile_visits_capabilities', props as InboxCapabilitiesProps);

export type FloatingCreateMenuActionProps = {
  id: string;
  label: string;
  tone?: 'primary' | 'surface';
  icon?: string;
  actionId: string;
};

type FloatingCreateMenuProps = {
  id?: string;
  closedLabel?: string;
  actions: FloatingCreateMenuActionProps[];
};

type InboxHubChromeProps = {
  id?: string;
  hubRef?: string;
  activeFilterRef?: string;
};

/**
 * Overlay do seletor/filtros do hub inbox (sibling do Scroll).
 * Hybrid nativo: collapse + badges realtime; actions via onAction.
 */
export const InboxHubChrome: BdcComponent = (props) =>
  leafBlock('inbox_hub_chrome', {
    ...(typeof (props as InboxHubChromeProps).id === 'string'
      ? { id: (props as InboxHubChromeProps).id }
      : {}),
    hub_ref: (props as InboxHubChromeProps).hubRef ?? 'hub',
    active_filter_ref:
      (props as InboxHubChromeProps).activeFilterRef ?? 'active_filter',
  });

/** Overlay FAB “+” (sibling do Scroll) — ações via action_id do wire. */
export const FloatingCreateMenu: BdcComponent = (props) => {
  const menu = props as FloatingCreateMenuProps;
  return leafBlock('floating_create_menu', {
    ...(menu.id ? { id: menu.id } : {}),
    closedLabel: menu.closedLabel,
    // Nested objects não passam por camelToSnake — normaliza action_id aqui.
    actions: (menu.actions ?? []).map((action) => ({
      id: action.id,
      label: action.label,
      tone: action.tone,
      icon: action.icon,
      action_id: action.actionId,
    })),
  });
};