import * as React from 'react';
import { SxProps, Theme as MuiTheme } from '@mui/material';

// Theme types
export interface ThemeColors {
  grey: Record<number, string>;
  primary: Record<number, string>;
  greenAccent: Record<number, string>;
  redAccent: Record<number, string>;
  blueAccent: Record<number, string>;
}

export interface ColorModeContextType {
  toggleColorMode: () => void;
}

export declare const ColorModeContext: React.Context<ColorModeContextType>;
export declare const useMode: () => { theme: MuiTheme; colorMode: ColorModeContextType };
export declare const tokens: (mode: 'light' | 'dark') => ThemeColors;

// Component Props
export interface HeaderProps {
  title?: string;
  subtitle?: string;
}

export interface SidebarProps {
  className?: string;
}

export interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'tertiary';
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
}

export interface CustomButtonProps extends ButtonProps {
  color?: string;
  size?: 'small' | 'medium' | 'large';
}

export interface CustomTextFieldProps {
  label?: string;
  value?: string;
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  error?: boolean;
  helperText?: string;
}

// Style Provider types
export interface StyleVariant {
  fontSize: string;
  fontWeight: number;
  lineHeight: string;
}

export interface StyleProviderProps {
  children: React.ReactNode;
}

export interface UseStyleVariantsReturn {
  variants: Record<string, StyleVariant>;
  getVariant: (variantName: string) => StyleVariant;
}

// User Data Context types
export interface UserData {
  token: string;
  name: string;
  userName: string;
  logintime: string;
}

export interface UserDataContextType {
  user: UserData;
  setUser: (user: UserData) => void;
  activeFields: Record<string, boolean>;
  toggleActiveField: (field: string) => void;
  resetActiveFields: () => void;
}

export interface UserDataProviderProps {
  children: React.ReactNode;
}

// Component Exports
export declare const Header: React.FC<HeaderProps>;
export declare const Footer: React.FC;
export declare const Sidebar: React.FC<SidebarProps>;
export declare const Button: React.FC<ButtonProps>;
export declare const CustomButton: React.FC<CustomButtonProps>;
export declare const CustomTextField: React.FC<CustomTextFieldProps>;
export declare const GenericDataGrid: React.FC<any>;
export declare const DynamicTable: React.FC<any>;
export declare const SaveButton: React.FC<ButtonProps>;
export declare const CancelButton: React.FC<ButtonProps>;
export declare const DeleteButton: React.FC<ButtonProps>;

// Provider Exports
export declare const StyleProvider: React.FC<StyleProviderProps>;
export declare const UserDataProvider: React.FC<UserDataProviderProps>;

// Hook Exports
export declare const useStyleVariants: () => UseStyleVariantsReturn;

// Utility Exports
export declare const getVariantStyle: (variantName: string, additionalStyles?: any) => any;
export declare const createSxWithVariant: (variantName: string, additionalSx?: SxProps<MuiTheme>) => SxProps<MuiTheme>;

// Theme Exports
export declare const Theme: any;
export declare const darkTheme: MuiTheme;
export declare const lightTheme: MuiTheme;

// CSS Generator Utilities
export declare const styleObjectToCss: (styleObject: any, selector: string) => string;
export declare const generateVariantCss: (variants: Record<string, StyleVariant>) => string;
export declare const generateButtonCss: (buttonStyles: any) => string;
export declare const generateDataGridCss: (dataGridStyles: any) => string;
export declare const generateResponsiveCss: (breakpoints: any, styles: any) => string;
export declare const exportCssFile: (cssContent: string, filename?: string) => void;
export declare const generateCompleteCss: (config?: any) => string;