import type {
  SduiActionWire,
  SduiHeaderWire,
  SduiScreenMetaWire,
  StyleWire,
} from '@proulr/sdui-contract';
import type { BdcComponent, BdcElement } from '../jsx-runtime';

type LayoutProps = {
  id?: string;
  gap?: number | string;
  padding?: number | string;
  height?: number;
  variant?: string;
  style?: StyleWire;
  children?: BdcElement[];
};

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

export const Screen: BdcComponent = (props) => ({
  type: 'screen',
  props,
  children: (props.children as BdcElement[]) ?? [],
});

export const Column: BdcComponent = (props) => layoutBlock('column', props as LayoutProps);

export const Row: BdcComponent = (props) => layoutBlock('row', props as LayoutProps);

export const Scroll: BdcComponent = (props) => layoutBlock('scroll', props as LayoutProps);

export const Spacer: BdcComponent = (props) => layoutBlock('spacer', props as LayoutProps);

type TextProps = LayoutProps & {
  text?: string;
  variant?: 'headline' | 'title' | 'body' | 'label';
};

export const Text: BdcComponent = (props) => layoutBlock('text', props as TextProps);

type ButtonProps = LayoutProps & {
  actionId: string;
  label?: string;
  variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger';
};

export const Button: BdcComponent = (props) => layoutBlock('button', props as ButtonProps);

type IconProps = LayoutProps & {
  /** AppIconName kebab-case (catalog) — ex.: 'gift', 'share'. */
  name: string;
  size?: number;
  /** ColorToken do tema M3 — ex.: 'primary', 'onSurfaceVariant'. */
  color?: string;
};

export const Icon: BdcComponent = (props) => layoutBlock('icon', props as IconProps);

type QrCodeProps = LayoutProps & {
  /** Conteúdo codificado no QR (URL de convite). */
  value: string;
  size?: number;
  /** Rótulo exibido sob o QR (ex.: '@handle'). */
  label?: string;
};

export const QrCode: BdcComponent = (props) => layoutBlock('qr_code', props as QrCodeProps);

type InfoBannerProps = LayoutProps & {
  message: string;
};

export const InfoBanner: BdcComponent = (props) => layoutBlock('info_banner', props as InfoBannerProps);

type NativeAdProps = LayoutProps & {
  placement?: string;
  width?: number;
  aspect_ratio?: number;
};

export const NativeAd: BdcComponent = (props) => layoutBlock('native_ad', props as NativeAdProps);

type CardProps = LayoutProps;

export const Card: BdcComponent = (props) => layoutBlock('card', props as CardProps);

type SectionHeaderProps = LayoutProps & {
  title?: string;
  actionLabel?: string;
  actionId?: string;
};

export const SectionHeader: BdcComponent = (props) =>
  layoutBlock('section_header', props as SectionHeaderProps);

type ListItemProps = LayoutProps & {
  title?: string;
  subtitle?: string;
  subtitleRef?: string;
  trailingText?: string;
  trailingRef?: string;
  actionId?: string;
  showDivider?: boolean;
  showChevron?: boolean;
};

export const ListItem: BdcComponent = (props) => layoutBlock('list_item', props as ListItemProps);

type ToggleRowProps = LayoutProps & {
  label?: string;
  hint?: string;
  dataRef?: string;
  toggleActionId?: string;
  disabled?: boolean;
};

export const ToggleRow: BdcComponent = (props) => layoutBlock('toggle_row', props as ToggleRowProps);

export type ScreenProps = {
  id: string;
  header?: SduiHeaderWire;
  headerSlot?: BdcElement | BdcElement[];
  actions?: Record<string, SduiActionWire>;
  meta?: SduiScreenMetaWire;
  data?: Record<string, unknown>;
  children?: BdcElement[];
};

export function screenProps(props: ScreenProps): ScreenProps {
  return props;
}