// sigpro-ui.d.ts

declare module 'sigpro-ui' {
  // Tipos básicos
  type Signal<T> = {
    (): T;
    (value: T | ((prev: T) => T)): void;
  };

  type ComponentFunction<P = {}> = (props?: P, children?: any) => HTMLElement | string | null;
  type ComponentChild = HTMLElement | string | number | boolean | null | undefined;
  type ComponentChildren = ComponentChild | ComponentChild[];

  // Utils
  function val<T>(value: T | (() => T)): T;
  function ui(baseClass: string, ...additional: (string | (() => string) | undefined)[]): string | (() => string);
  function getIcon(icon: string | (() => string) | HTMLElement | null | undefined): HTMLElement | null;
  function tt(key: 'close' | 'confirm' | 'cancel' | 'search' | 'loading' | 'nodata'): () => string;

  // Props comunes
  interface BaseProps {
    class?: string | (() => string);
    style?: string | Record<string, string> | (() => string | Record<string, string>);
    id?: string | (() => string);
  }

  interface EventProps {
    onclick?: (event: MouseEvent) => void;
    oninput?: (event: Event) => void;
    onchange?: (event: Event) => void;
    onblur?: (event: FocusEvent) => void;
    onfocus?: (event: FocusEvent) => void;
    onkeydown?: (event: KeyboardEvent) => void;
    onkeyup?: (event: KeyboardEvent) => void;
    onmouseenter?: (event: MouseEvent) => void;
    onmouseleave?: (event: MouseEvent) => void;
    onsubmit?: (event: Event) => void;
    ondragover?: (event: DragEvent) => void;
    ondragleave?: (event: DragEvent) => void;
    ondrop?: (event: DragEvent) => void;
    [key: `on${string}`]: ((event: any) => void) | undefined;
  }

  // Accordion
  interface AccordionProps extends BaseProps, EventProps {
    title: string | (() => string);
    name?: string;
    open?: boolean | (() => boolean);
  }
  function Accordion(props: AccordionProps, children: ComponentChildren): HTMLElement;

  // Alert
  type AlertType = 'info' | 'success' | 'warning' | 'error';
  interface AlertProps extends BaseProps, EventProps {
    type?: AlertType;
    soft?: boolean;
    actions?: ComponentFunction | ComponentChildren;
    message?: string | (() => string);
  }
  function Alert(props: AlertProps, children?: ComponentChildren): HTMLElement;

  // Autocomplete
  interface AutocompleteOption {
    label: string;
    value: string;
  }
  interface AutocompleteProps extends BaseProps, EventProps {
    items?: string[] | AutocompleteOption[] | (() => (string[] | AutocompleteOption[]));
    value?: Signal<string> | string;
    onSelect?: (option: string | AutocompleteOption) => void;
    label?: string | (() => string);
    placeholder?: string | (() => string);
  }
  function Autocomplete(props: AutocompleteProps): HTMLElement;

  // Badge
  interface BadgeProps extends BaseProps, EventProps {}
  function Badge(props: BadgeProps, children: ComponentChildren): HTMLElement;

  // Button
  interface ButtonProps extends BaseProps, EventProps {
    disabled?: boolean | (() => boolean);
    loading?: boolean | (() => boolean);
    icon?: string | (() => string) | HTMLElement;
  }
  function Button(props: ButtonProps, children: ComponentChildren): HTMLElement;

  // Checkbox
  interface CheckboxProps extends BaseProps, EventProps {
    value?: Signal<boolean> | boolean;
    label?: string | (() => string);
    tooltip?: string | (() => string);
    toggle?: boolean | (() => boolean);
  }
  function Checkbox(props: CheckboxProps): HTMLElement;

  // Colorpicker
  interface ColorpickerProps extends BaseProps, EventProps {
    value?: Signal<string> | string;
    label?: string | (() => string);
  }
  function Colorpicker(props: ColorpickerProps): HTMLElement;

  // Datepicker
  interface DateRange {
    start: string;
    end: string | null;
    startHour?: number;
    endHour?: number;
  }
  interface DatepickerProps extends BaseProps, EventProps {
    value?: Signal<string | DateRange> | string | DateRange;
    range?: boolean | (() => boolean);
    label?: string | (() => string);
    placeholder?: string | (() => string);
    hour?: boolean;
  }
  function Datepicker(props: DatepickerProps): HTMLElement;

  // Drawer
  interface DrawerProps extends BaseProps, EventProps {
    id?: string;
    open?: Signal<boolean> | boolean;
    side: ComponentFunction | ComponentChildren;
    content: ComponentFunction | ComponentChildren;
  }
  function Drawer(props: DrawerProps, children?: ComponentChildren): HTMLElement;

  // Dropdown
  interface DropdownItem {
    label: string | (() => string);
    icon?: string | HTMLElement | (() => string | HTMLElement);
    onclick?: (event: MouseEvent) => void;
    class?: string;
  }
  interface DropdownProps extends BaseProps, EventProps {
    label?: string | (() => string);
    icon?: string | HTMLElement | (() => string | HTMLElement);
    items?: DropdownItem[] | (() => DropdownItem[]);
  }
  function Dropdown(props: DropdownProps): HTMLElement;

  // Fab
  interface FabAction {
    label?: string;
    icon?: string | HTMLElement;
    text?: string;
    onclick?: (event: MouseEvent) => void;
    class?: string;
  }
  interface FabProps extends BaseProps, EventProps {
    icon?: string | HTMLElement;
    label?: string;
    actions?: FabAction[] | (() => FabAction[]);
    position?: string;
  }
  function Fab(props: FabProps): HTMLElement;

  // Fieldset
  interface FieldsetProps extends BaseProps, EventProps {
    legend?: string | (() => string);
  }
  function Fieldset(props: FieldsetProps, children: ComponentChildren): HTMLElement;

  // Fileinput
  interface FileinputProps extends BaseProps, EventProps {
    tooltip?: string;
    max?: number;
    accept?: string;
    onSelect?: (files: File[]) => void;
  }
  function Fileinput(props: FileinputProps): HTMLElement;

  // Indicator
  interface IndicatorProps extends BaseProps, EventProps {
    value?: number | string | (() => number | string);
  }
  function Indicator(props: IndicatorProps, children: ComponentChildren): HTMLElement;

  // Input
  interface InputProps extends BaseProps, EventProps {
    value?: Signal<string> | string;
    type?: string;
    icon?: string | HTMLElement | (() => string | HTMLElement);
    placeholder?: string | (() => string);
    disabled?: boolean | (() => boolean);
    size?: string;
    validate?: (value: string) => string | null | undefined;
    label?: string | (() => string);
  }
  function Input(props: InputProps): HTMLElement;

  // Label
  interface LabelProps extends BaseProps, EventProps {
    value?: string | (() => string);
    floating?: boolean;
    error?: string | (() => string);
    required?: boolean;
  }
  function Label(props: LabelProps, children: ComponentChildren): HTMLElement;

  // List
  interface ListProps<T = any> extends BaseProps, EventProps {
    items: T[] | (() => T[]);
    header?: string | HTMLElement | (() => string | HTMLElement);
    render: (item: T, index: number) => ComponentChild;
    keyFn?: (item: T, index: number) => string | number;
  }
  function List<T>(props: ListProps<T>): HTMLElement;

  // Menu
  interface MenuItem {
    label: string | (() => string);
    icon?: string | HTMLElement;
    onclick?: (event: MouseEvent) => void;
    active?: boolean | (() => boolean);
    children?: MenuItem[];
    open?: boolean;
  }
  interface MenuProps extends BaseProps, EventProps {
    items: MenuItem[] | (() => MenuItem[]);
  }
  function Menu(props: MenuProps): HTMLElement;

  // Modal
  interface ModalProps extends BaseProps, EventProps {
    open?: Signal<boolean> | boolean;
    title?: string | HTMLElement | (() => string | HTMLElement);
    buttons?: ComponentFunction | ComponentFunction[];
  }
  function Modal(props: ModalProps, children: ComponentChildren): HTMLElement;

  // Navbar
  interface NavbarProps extends BaseProps, EventProps {}
  function Navbar(props: NavbarProps, children: ComponentChildren): HTMLElement;

  // Radio
  interface RadioProps extends BaseProps, EventProps {
    value?: Signal<any> | any;
    inputValue?: any;
    name?: string;
    label?: string | (() => string);
    tooltip?: string | (() => string);
  }
  function Radio(props: RadioProps): HTMLElement;

  // Range
  interface RangeProps extends BaseProps, EventProps {
    value?: Signal<number> | number;
    label?: string | (() => string);
    tooltip?: string | (() => string);
    min?: number;
    max?: number;
    step?: number;
    disabled?: boolean | (() => boolean);
  }
  function Range(props: RangeProps): HTMLElement;

  // Rating
  interface RatingProps extends BaseProps, EventProps {
    value?: Signal<number> | number;
    count?: number | (() => number);
    mask?: string;
    readonly?: boolean | (() => boolean);
    onchange?: (value: number) => void;
  }
  function Rating(props: RatingProps): HTMLElement;

  // Select
  interface SelectOption {
    label: string;
    value: string | number;
  }
  interface SelectProps extends BaseProps, EventProps {
    label?: string | (() => string);
    items?: SelectOption[] | (() => SelectOption[]);
    value?: Signal<string | number> | string | number;
  }
  function Select(props: SelectProps): HTMLElement;

  // Stack
  interface StackProps extends BaseProps, EventProps {}
  function Stack(props: StackProps, children: ComponentChildren): HTMLElement;

  // Stat
  interface StatProps extends BaseProps, EventProps {
    icon?: string | HTMLElement;
    label?: string | (() => string);
    value?: string | number | (() => string | number);
    desc?: string | (() => string);
  }
  function Stat(props: StatProps): HTMLElement;

  // Swap
  interface SwapProps extends BaseProps, EventProps {
    value?: Signal<boolean> | boolean;
    on: ComponentChildren;
    off: ComponentChildren;
  }
  function Swap(props: SwapProps): HTMLElement;

  // Table
  interface TableColumn<T = any> {
    label: string | (() => string);
    key?: keyof T;
    render?: (item: T, index: number) => ComponentChild;
    class?: string;
  }
  interface TableProps<T = any> extends BaseProps, EventProps {
    items: T[] | (() => T[]);
    columns: TableColumn<T>[];
    keyFn?: (item: T, index: number) => string | number;
    zebra?: boolean | (() => boolean);
    pinRows?: boolean | (() => boolean);
    empty?: string | HTMLElement | (() => string | HTMLElement);
  }
  function Table<T>(props: TableProps<T>): HTMLElement;

  // Tabs
  interface TabItem {
    label: string | HTMLElement | (() => string | HTMLElement);
    content: ComponentFunction | ComponentChildren;
    active?: boolean | (() => boolean);
    disabled?: boolean | (() => boolean);
    onclick?: () => void;
  }
  interface TabsProps extends BaseProps, EventProps {
    items: TabItem[] | (() => TabItem[]);
  }
  function Tabs(props: TabsProps): HTMLElement;

  // Timeline
  interface TimelineItem {
    title: string | HTMLElement | (() => string | HTMLElement);
    detail: string | HTMLElement | (() => string | HTMLElement);
    type?: 'info' | 'success' | 'warning' | 'error';
    icon?: string | HTMLElement;
    completed?: boolean | (() => boolean);
  }
  interface TimelineProps extends BaseProps, EventProps {
    items: TimelineItem[] | (() => TimelineItem[]);
    vertical?: boolean | (() => boolean);
    compact?: boolean | (() => boolean);
  }
  function Timeline(props: TimelineProps): HTMLElement;

  // Toast
  type ToastType = 'alert-info' | 'alert-success' | 'alert-warning' | 'alert-error';
  function Toast(
    message: string | (() => string),
    type?: ToastType,
    duration?: number
  ): () => void;

  // Tooltip
  interface TooltipProps extends BaseProps, EventProps {
    tip: string | (() => string);
    ui?: string;
  }
  function Tooltip(props: TooltipProps, children: ComponentChildren): HTMLElement;

  // Objeto principal
  const SigProUI: {
    Accordion: typeof Accordion;
    Alert: typeof Alert;
    Autocomplete: typeof Autocomplete;
    Badge: typeof Badge;
    Button: typeof Button;
    Checkbox: typeof Checkbox;
    Colorpicker: typeof Colorpicker;
    Datepicker: typeof Datepicker;
    Drawer: typeof Drawer;
    Dropdown: typeof Dropdown;
    Fab: typeof Fab;
    Fieldset: typeof Fieldset;
    Fileinput: typeof Fileinput;
    Indicator: typeof Indicator;
    Input: typeof Input;
    Label: typeof Label;
    List: typeof List;
    Menu: typeof Menu;
    Modal: typeof Modal;
    Navbar: typeof Navbar;
    Radio: typeof Radio;
    Range: typeof Range;
    Rating: typeof Rating;
    Select: typeof Select;
    Stack: typeof Stack;
    Stat: typeof Stat;
    Swap: typeof Swap;
    Table: typeof Table;
    Tabs: typeof Tabs;
    Timeline: typeof Timeline;
    Toast: typeof Toast;
    Tooltip: typeof Tooltip;
    Utils: {
      val: typeof val;
      ui: typeof ui;
      getIcon: typeof getIcon;
    };
    tt: typeof tt;
    install: (target?: Window) => void;
  };

  export default SigProUI;
  export {
    Accordion, Alert, Autocomplete, Badge, Button, Checkbox, Colorpicker,
    Datepicker, Drawer, Dropdown, Fab, Fieldset, Fileinput, Indicator,
    Input, Label, List, Menu, Modal, Navbar, Radio, Range, Rating,
    Select, Stack, Stat, Swap, Table, Tabs, Timeline, Toast, Tooltip,
    val, ui, getIcon, tt,
    // Tipos
    AccordionProps, AlertProps, AutocompleteProps, BadgeProps, ButtonProps,
    CheckboxProps, ColorpickerProps, DatepickerProps, DrawerProps, DropdownProps,
    FabProps, FieldsetProps, FileinputProps, IndicatorProps, InputProps,
    LabelProps, ListProps, MenuProps, ModalProps, NavbarProps, RadioProps,
    RangeProps, RatingProps, SelectProps, StackProps, StatProps, SwapProps,
    TableProps, TabsProps, TimelineProps, TooltipProps,
    DateRange, AutocompleteOption, DropdownItem, FabAction, MenuItem,
    SelectOption, TabItem, TableColumn, TimelineItem, ToastType, AlertType
  };
}

// Declaraciones globales
declare global {
  const Accordion: typeof import('sigpro-ui').Accordion;
  const Alert: typeof import('sigpro-ui').Alert;
  const Autocomplete: typeof import('sigpro-ui').Autocomplete;
  const Badge: typeof import('sigpro-ui').Badge;
  const Button: typeof import('sigpro-ui').Button;
  const Checkbox: typeof import('sigpro-ui').Checkbox;
  const Colorpicker: typeof import('sigpro-ui').Colorpicker;
  const Datepicker: typeof import('sigpro-ui').Datepicker;
  const Drawer: typeof import('sigpro-ui').Drawer;
  const Dropdown: typeof import('sigpro-ui').Dropdown;
  const Fab: typeof import('sigpro-ui').Fab;
  const Fieldset: typeof import('sigpro-ui').Fieldset;
  const Fileinput: typeof import('sigpro-ui').Fileinput;
  const Indicator: typeof import('sigpro-ui').Indicator;
  const Input: typeof import('sigpro-ui').Input;
  const Label: typeof import('sigpro-ui').Label;
  const List: typeof import('sigpro-ui').List;
  const Menu: typeof import('sigpro-ui').Menu;
  const Modal: typeof import('sigpro-ui').Modal;
  const Navbar: typeof import('sigpro-ui').Navbar;
  const Radio: typeof import('sigpro-ui').Radio;
  const Range: typeof import('sigpro-ui').Range;
  const Rating: typeof import('sigpro-ui').Rating;
  const Select: typeof import('sigpro-ui').Select;
  const Stack: typeof import('sigpro-ui').Stack;
  const Stat: typeof import('sigpro-ui').Stat;
  const Swap: typeof import('sigpro-ui').Swap;
  const Table: typeof import('sigpro-ui').Table;
  const Tabs: typeof import('sigpro-ui').Tabs;
  const Timeline: typeof import('sigpro-ui').Timeline;
  const Toast: typeof import('sigpro-ui').Toast;
  const Tooltip: typeof import('sigpro-ui').Tooltip;
  const Utils: typeof import('sigpro-ui').Utils;
  const tt: typeof import('sigpro-ui').tt;

  interface Window {
    Accordion: typeof Accordion;
    Alert: typeof Alert;
    Autocomplete: typeof Autocomplete;
    Badge: typeof Badge;
    Button: typeof Button;
    Checkbox: typeof Checkbox;
    Colorpicker: typeof Colorpicker;
    Datepicker: typeof Datepicker;
    Drawer: typeof Drawer;
    Dropdown: typeof Dropdown;
    Fab: typeof Fab;
    Fieldset: typeof Fieldset;
    Fileinput: typeof Fileinput;
    Indicator: typeof Indicator;
    Input: typeof Input;
    Label: typeof Label;
    List: typeof List;
    Menu: typeof Menu;
    Modal: typeof Modal;
    Navbar: typeof Navbar;
    Radio: typeof Radio;
    Range: typeof Range;
    Rating: typeof Rating;
    Select: typeof Select;
    Stack: typeof Stack;
    Stat: typeof Stat;
    Swap: typeof Swap;
    Table: typeof Table;
    Tabs: typeof Tabs;
    Timeline: typeof Timeline;
    Toast: typeof Toast;
    Tooltip: typeof Tooltip;
    Utils: typeof Utils;
    tt: typeof tt;
    SigProUI: typeof import('sigpro-ui').default;
  }
}