import React from 'react';
import { QueryClient } from '@tanstack/react-query';

interface Logger {
    error(message: string, context?: LogContext): void;
    warn(message: string, context?: LogContext): void;
    info(message: string, context?: LogContext): void;
    debug(message: string, context?: LogContext): void;
}
interface LogContext {
    component?: string;
    operation?: string;
    requestId?: string;
    userId?: string;
    table?: string;
    query?: Record<string, unknown>;
    error?: Error | string;
    stack?: string;
    timestamp?: string;
    [key: string]: unknown;
}
type LogLevel = 'error' | 'warn' | 'info' | 'debug' | 'silent';
interface LoggerOptions {
    level?: LogLevel;
    includeStack?: boolean;
    includeTimestamp?: boolean;
    colorize?: boolean;
    format?: 'json' | 'text' | 'pretty';
}
declare function generateId(): string;
declare function createLogger(options?: LoggerOptions): Logger;

/**
 * ============================================================================
 * UI CUSTOMIZATION TYPES
 * ============================================================================
 */
/**
 * CSS class names for customizing component appearance
 * @interface ClassNames
 *
 * @remarks
 * The `className` prop (single string) takes precedence over `classNames` (object with specific element classes).
 * Use `className` for simple class overrides on the main container.
 * Use `classNames` for granular control over specific elements within the component.
 */
interface ClassNames {
    /** Container wrapper class name */
    container?: string;
    /** Table wrapper class name */
    tableWrapper?: string;
    /** Table element class name */
    table?: string;
    /** Table header cell class name */
    header?: string;
    /** Table data cell class name */
    cell?: string;
    /** Filter container class name */
    filter?: string;
    /** Filter input class name */
    filterInput?: string;
    /** Pagination container class name */
    pagination?: string;
    /** Pagination button class name */
    paginationButton?: string;
    /** Pagination info text class name */
    paginationInfo?: string;
    /** Page size selector class name */
    pageSize?: string;
    /** Table selector container class name */
    tableSelector?: string;
    /** Table selector dropdown class name */
    tableSelectorDropdown?: string;
    /** Table selector sidebar class name */
    tableSelectorSidebar?: string;
    /** Empty state class name */
    empty?: string;
    /** Loading state class name */
    loading?: string;
    /** Error state class name */
    error?: string;
    /** Retry button class name */
    retry?: string;
    /** Info text class name */
    info?: string;
    /** Filter column selector class name */
    filterColumnSelector?: string;
    /** Filter column selector button class name */
    filterColumnSelectorButton?: string;
    /** Filter column selector dropdown class name */
    filterColumnSelectorDropdown?: string;
    /** Filter column selector header class name */
    filterColumnSelectorHeader?: string;
    /** Filter column selector action button class name */
    filterColumnSelectorAction?: string;
    /** Filter column selector list class name */
    filterColumnSelectorList?: string;
    /** Filter column selector item class name */
    filterColumnSelectorItem?: string;
    /** Filter column selector checkbox class name */
    filterColumnSelectorCheckbox?: string;
    /** Filter column selector checkbox indicator class name */
    filterColumnSelectorCheckboxIndicator?: string;
    /** Filter column selector column name class name */
    filterColumnSelectorColumnName?: string;
    /** Filter column selector default badge class name */
    filterColumnSelectorDefaultBadge?: string;
    /** Filter column selector footer class name */
    filterColumnSelectorFooter?: string;
    /** Filter column selector cancel button class name */
    filterColumnSelectorCancel?: string;
    /** Filter column selector apply button class name */
    filterColumnSelectorApply?: string;
    /** Screen reader only class name */
    srOnly?: string;
}
/**
 * CSS style properties for customizing component appearance
 * @interface Styles
 */
interface Styles {
    /** Container wrapper styles */
    container?: React.CSSProperties;
    /** Table wrapper styles */
    tableWrapper?: React.CSSProperties;
    /** Table element styles */
    table?: React.CSSProperties;
    /** Table header cell styles */
    th?: React.CSSProperties;
    /** Table data cell styles */
    td?: React.CSSProperties;
    /** Table header styles (alias for th) */
    header?: React.CSSProperties;
    /** Table cell styles (alias for td) */
    cell?: React.CSSProperties;
    /** Sortable column header styles */
    sortable?: React.CSSProperties;
    /** Sorted column header styles */
    sorted?: React.CSSProperties;
    /** Filter container styles */
    filter?: React.CSSProperties;
    /** Filter input styles */
    filterInput?: React.CSSProperties;
    /** Pagination container styles */
    pagination?: React.CSSProperties;
    /** Pagination button styles */
    paginationButton?: React.CSSProperties;
    /** Pagination button disabled styles */
    paginationButtonDisabled?: React.CSSProperties;
    /** Pagination info text styles */
    paginationInfo?: React.CSSProperties;
    /** Pagination input field styles */
    paginationInput?: React.CSSProperties;
    /** Page size selector styles */
    pageSize?: React.CSSProperties;
    /** Table selector container styles */
    tableSelector?: React.CSSProperties;
    /** Table selector dropdown styles */
    tableSelectorDropdown?: React.CSSProperties;
    /** Table selector sidebar styles */
    tableSelectorSidebar?: React.CSSProperties;
    /** Empty state styles */
    empty?: React.CSSProperties;
    /** Loading state styles */
    loading?: React.CSSProperties;
    /** Loading spinner styles */
    spinner?: React.CSSProperties;
    /** Error state styles */
    error?: React.CSSProperties;
    /** Retry button styles */
    retry?: React.CSSProperties;
    /** Info text styles */
    info?: React.CSSProperties;
    /** Filter column selector styles */
    filterColumnSelector?: React.CSSProperties;
    /** Filter column selector button styles */
    filterColumnSelectorButton?: React.CSSProperties;
    /** Filter column selector dropdown styles */
    filterColumnSelectorDropdown?: React.CSSProperties;
    /** Filter column selector header styles */
    filterColumnSelectorHeader?: React.CSSProperties;
    /** Filter column selector action button styles */
    filterColumnSelectorAction?: React.CSSProperties;
    /** Filter column selector action button disabled styles */
    filterColumnSelectorActionDisabled?: React.CSSProperties;
    /** Filter column selector list styles */
    filterColumnSelectorList?: React.CSSProperties;
    /** Filter column selector item styles */
    filterColumnSelectorItem?: React.CSSProperties;
    /** Filter column selector checkbox styles */
    filterColumnSelectorCheckbox?: React.CSSProperties;
    /** Filter column selector checkbox checked styles */
    filterColumnSelectorCheckboxChecked?: React.CSSProperties;
    /** Filter column selector checkbox indicator styles */
    filterColumnSelectorCheckboxIndicator?: React.CSSProperties;
    /** Filter column selector column name styles */
    filterColumnSelectorColumnName?: React.CSSProperties;
    /** Filter column selector column name default styles */
    filterColumnSelectorColumnNameDefault?: React.CSSProperties;
    /** Filter column selector default badge styles */
    filterColumnSelectorDefaultBadge?: React.CSSProperties;
    /** Filter column selector footer styles */
    filterColumnSelectorFooter?: React.CSSProperties;
    /** Filter column selector cancel button styles */
    filterColumnSelectorCancel?: React.CSSProperties;
    /** Filter column selector apply button styles */
    filterColumnSelectorApply?: React.CSSProperties;
    /** Filter column selector apply button disabled styles */
    filterColumnSelectorApplyDisabled?: React.CSSProperties;
    /** Screen reader only styles */
    srOnly?: React.CSSProperties;
    /** Table selector sidebar label styles */
    tableSelectorSidebarLabel?: React.CSSProperties;
    /** Table selector sidebar button styles */
    tableSelectorSidebarButton?: React.CSSProperties;
    /** Table selector sidebar button active state styles */
    tableSelectorSidebarButtonActive?: React.CSSProperties;
    /** Sortable column hover indicator styles */
    sortableHover?: React.CSSProperties;
    /** Empty state button styles */
    emptyStateButton?: React.CSSProperties;
    /** Error icon styles */
    errorIcon?: React.CSSProperties;
    /** Error title styles */
    errorTitle?: React.CSSProperties;
    /** Error message styles */
    errorMessage?: React.CSSProperties;
    /** Error content wrapper styles */
    errorContent?: React.CSSProperties;
}
/**
 * ============================================================================
 * CONFIGURATION TYPES
 * ============================================================================
 */
/**
 * Table selector display mode
 * @type {TableSelectorMode}
 */
type TableSelectorMode = 'dropdown' | 'sidebar' | 'none';
/**
 * Filter input position
 * @type {FilterPosition}
 */
type FilterPosition = 'top' | 'bottom' | 'both';
/**
 * Pagination controls position
 * @type {PaginationPosition}
 */
type PaginationPosition = 'top' | 'bottom' | 'both';
/**
 * ============================================================================
 * COMPONENT PROPS
 * ============================================================================
 */
/**
 * Props for the DatabaseViewer component
 * @interface DatabaseViewerProps
 */
interface DatabaseViewerProps {
    /**
     * API endpoint path for fetching data
     */
    path: string;
    /**
     * Initial table to select (optional)
     */
    initialTable?: string;
    /**
     * Table selector display mode
     * @default 'dropdown'
     */
    tableSelector?: TableSelectorMode;
    /**
     * Label for the table selector
     * @default 'Select Table'
     */
    tableSelectorLabel?: string;
    /**
     * Custom table selector component
     */
    tableSelectorComponent?: React.FC<{
        tables: string[];
        selectedTable: string | undefined;
        onSelectTable: (table: string) => void;
    }>;
    /**
     * Function to get authentication headers
     */
    getAuthHeaders?: () => Promise<Record<string, string>>;
    /**
     * Static headers to include in requests
     */
    headers?: Record<string, string>;
    /**
     * Whether to show the filter input
     * @default true
     */
    showFilter?: boolean;
    /**
     * Placeholder text for the filter input
     * @default 'Filter...'
     */
    filterPlaceholder?: string;
    /**
     * Position of the filter input
     * @default 'top'
     */
    filterPosition?: FilterPosition;
    /**
     * Debounce delay for filter input in milliseconds
     * @default 300
     */
    filterDebounceMs?: number;
    /**
     * Custom filter input component
     */
    filterComponent?: React.FC<{
        value: string;
        onChange: (value: string) => void;
    }>;
    /**
     * Default filter columns per table
     * If not specified for a table, auto-detects text columns
     * @example
     * defaultFilterColumns={{
     *   persons: ['name', 'surname', 'email'],
     *   products: ['title', 'description', 'sku'],
     *   orders: ['order_id', 'customer_name']
     * }}
     */
    defaultFilterColumns?: Record<string, string[]>;
    /**
     * Whether to show the filter column selector
     * @default true
     */
    showFilterColumnSelector?: boolean;
    /**
     * Whether to show pagination controls
     * @default true
     */
    showPagination?: boolean;
    /**
     * Number of records per page
     * @default 10
     */
    pageSize?: number;
    /**
     * Available page size options
     * @default [10, 25, 50, 100]
     */
    pageSizeOptions?: number[];
    /**
     * Whether to show the page size selector
     * @default true
     */
    showPageSizeSelector?: boolean;
    /**
     * Position of pagination controls
     * @default 'bottom'
     */
    paginationPosition?: PaginationPosition;
    /**
     * Custom pagination component
     */
    paginationComponent?: React.FC<{
        pageIndex: number;
        pageCount: number;
        pageSize: number;
        canPreviousPage: boolean;
        canNextPage: boolean;
        previousPage: () => void;
        nextPage: () => void;
        firstPage: () => void;
        lastPage: () => void;
        setPageSize: (size: number) => void;
    }>;
    /**
     * Whether to enable column sorting
     * @default true
     */
    enableSorting?: boolean;
    /**
     * Array of column names that can be sorted
     * If not provided, all columns are sortable
     */
    sortableColumns?: string[];
    /**
     * Default sort configuration
     */
    defaultSort?: {
        column: string;
        direction: 'asc' | 'desc';
    };
    /**
     * Whether to enable multi-column sorting
     * @default false
     */
    multiSort?: boolean;
    /**
     * Custom sort icon component
     */
    sortIcon?: React.FC<{
        direction: 'asc' | 'desc' | null;
    }>;
    /**
     * Custom column header formatter function
     * Converts column names to display format
     * @default Default humanization (snake_case to Title Case)
     * @example formatHeader={(name) => name.toUpperCase()}
     * @example formatHeader={null} // disable default formatting
     */
    formatHeader?: ((columnName: string) => string) | null;
    /**
     * Custom cell value formatter function
     * Enables custom cell renderers (badges, avatars, links, etc.)
     * @example formatCell={(value, column) => column === 'email' ? <a href={`mailto:${value}`}>{value}</a> : value}
     */
    formatCell?: (value: unknown, column: string) => React.ReactNode;
    /**
     * Additional CSS class name for the container
     * @remarks
     * Takes precedence over `classNames.container` for backward compatibility.
     * Use this for simple class overrides on the main container element.
     */
    className?: string;
    /**
     * Custom CSS class names for specific elements
     * @remarks
     * Provides granular control over specific elements within the component.
     * Use this when you need to style individual elements (table, header, cells, etc.).
     * The `className` prop takes precedence over `classNames.container` only.
     */
    classNames?: ClassNames;
    /**
     * Custom inline styles for the container
     * @remarks
     * Takes precedence over `styles.container` for backward compatibility.
     * Use this for simple style overrides on the main container element.
     */
    style?: React.CSSProperties;
    /**
     * Custom inline styles for specific elements
     * @remarks
     * Provides granular control over specific elements within the component.
     * Use this when you need to style individual elements (table, header, cells, etc.).
     * The `style` prop takes precedence over `styles.container` only.
     */
    styles?: Styles;
    /**
     * Custom loading component
     */
    loadingComponent?: React.FC;
    /**
     * Custom error component
     */
    errorComponent?: React.FC<{
        error: Error;
        retry: () => void;
    }>;
    /**
     * Custom empty state component
     */
    emptyComponent?: React.FC;
    /**
     * Callback function for error handling
     */
    onError?: (error: Error) => void;
    /**
     * Additional options for TanStack Query
     */
    queryOptions?: {
        staleTime?: number;
        cacheTime?: number;
        retry?: number | boolean;
        retryDelay?: number;
        refetchOnWindowFocus?: boolean;
        refetchOnReconnect?: boolean;
        refetchOnMount?: boolean;
    };
    /**
     * Interval in milliseconds for automatic refetching
     */
    refetchInterval?: number;
    /**
     * Custom logger instance
     */
    logger?: Logger;
    /**
     * Whether to enable logging
     * @default false
     */
    enableLogging?: boolean;
    /**
     * Log level for filtering log messages
     * @default 'info'
     */
    logLevel?: LogLevel;
    /**
     * Whether to log fetch errors
     * @default true
     */
    logFetchErrors?: boolean;
    /**
     * Whether to log query errors
     * @default true
     */
    logQueryErrors?: boolean;
    /**
     * Whether to log performance metrics
     * @default false
     */
    logPerformanceMetrics?: boolean;
}

/**
 * Main DatabaseViewer component - displays database tables with filtering, sorting, and pagination
 *
 * @component
 * @example
 * ```tsx
 * // Basic usage
 * <DatabaseViewer path="/api/database" initialTable="users" />
 * ```
 *
 * @example
 * ```tsx
 * // With authentication
 * <DatabaseViewer
 *   path="/api/database"
 *   initialTable="users"
 *   getAuthHeaders={async () => ({
 *     Authorization: `Bearer ${token}`,
 *   })}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Custom styling
 * <DatabaseViewer
 *   path="/api/database"
 *   initialTable="users"
 *   className="my-custom-class"
 *   styles={{
 *     container: { padding: '2rem' },
 *     header: { backgroundColor: '#f0f0f0' },
 *   }}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // With custom components
 * <DatabaseViewer
 *   path="/api/database"
 *   initialTable="users"
 *   loadingComponent={() => <div>Loading...</div>}
 *   errorComponent={({ error, retry }) => (
 *     <div>
 *       <p>Error: {error.message}</p>
 *       <button onClick={retry}>Retry</button>
 *     </div>
 *   )}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // With custom sorting and filtering
 * <DatabaseViewer
 *   path="/api/database"
 *   initialTable="users"
 *   enableSorting={true}
 *   sortableColumns={['name', 'email', 'created_at']}
 *   defaultSort={{ column: 'name', direction: 'asc' }}
 *   showFilter={true}
 *   filterDebounceMs={500}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // With custom pagination
 * <DatabaseViewer
 *   path="/api/database"
 *   initialTable="users"
 *   pageSize={25}
 *   pageSizeOptions={[10, 25, 50, 100]}
 *   paginationPosition="both"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // With custom header and cell formatting
 * <DatabaseViewer
 *   path="/api/database"
 *   initialTable="users"
 *   formatHeader={(columnName) => {
 *     // Convert snake_case to Title Case
 *     return columnName.split('_').map(word =>
 *       word.charAt(0).toUpperCase() + word.slice(1)
 *     ).join(' ');
 *   }}
 *   formatCell={(value, column) => {
 *     if (column === 'created_at' && typeof value === 'string') {
 *       return new Date(value).toLocaleDateString();
 *     }
 *     return value;
 *   }}
 * />
 * ```
 */
declare const DatabaseViewer: React.FC<DatabaseViewerProps>;
declare const DatabaseViewerWithProvider: React.FC<DatabaseViewerProps & {
    queryClient?: QueryClient;
}>;

export { DatabaseViewer, DatabaseViewerWithProvider, type LogContext, type LogLevel, type Logger, type LoggerOptions, createLogger, generateId };