/**
 * Centralized Elements Exports
 * All commonly used elements export from here with theme variant support
 * Includes: Buttons, Form inputs, Date pickers, UI components
 * Excludes: .demo.tsx, .story.tsx, and specialized sub-components
 */

'use client';

import React from 'react';
import { getThemedComponent } from '../../lib/component-registry';
import { useTheme } from '../../contexts/ThemeContext';

// Import all base components - Buttons
import { Button as BaseButton } from './buttons/button';
import { RoundButton as BaseRoundButton } from './buttons/round-button';
import { ButtonGroup as BaseButtonGroup } from './button-group/button-group';

// Form inputs
import { Input as BaseInput, InputBase as BaseInputBase } from './input/input';
import { InputGroup as BaseInputGroup } from './input/input-group';
import { TextArea as BaseTextarea } from './textarea/textarea';
import { PrivacyCheckbox as BasePrivacyCheckbox } from './checkbox/privacy-checkbox';
import { Form as BaseForm } from './form/form';
import { FormContainer as BaseFormContainer } from './form-container/form-container';
import { Label as BaseLabel } from './input/label';
import { HintText as BaseHintText } from './input/hint-text';
import { Select as BaseSelect } from './select/select';
import { SelectItem as BaseSelectItem } from './select/select-item';
import { NativeSelect as BaseNativeSelect } from './select/select-native';

// UI components
import PhotoWithFallbackBase from './photo-fallback/photo-fallback';
import { Badge as BaseBadge, BadgeWithDot as BaseBadgeWithDot } from './badges/badges';
import { BadgeGroup as BaseBadgeGroup } from './badges/badge-groups';
import { RatingStars as BaseRatingStars } from './rating/rating-stars';
import { RatingBadge as BaseRatingBadge } from './rating/rating-badge';
import { Tooltip as BaseTooltip } from './tooltip/tooltip';
import { Avatar as BaseAvatar } from './avatar/avatar';
import { AvatarLabelGroup as BaseAvatarLabelGroup } from './avatar/avatar-label-group';
import { VerifiedTick as BaseVerifiedTick } from './avatar/base-components';
import { Breadcrumb as BaseBreadcrumb } from './breadcrumb/Breadcrumb';
import { FeaturedIcon as BaseFeaturedIcon } from './featured-icon/featured-icon';
import { PaginationPageDefault as BasePaginationPageDefault, PaginationPageMinimalCenter as BasePaginationPageMinimalCenter } from './pagination/pagination';
import BaseGoogleMap from './map/GoogleMap';
import BaseMarkdownRenderer from './markdown-renderer/MarkdownRenderer';

// Import variant files to trigger registration (only ones that exist)
import './buttons/button.aman';
import './buttons/button.barelux';
import './buttons/button.balance';
import './input/input.aman';
import './textarea/textarea.aman';
import './select/select.aman';

/**
 * Create themed component wrapper
 * Uses type erasure to store components with different prop requirements
 * Type casts are used internally to allow components with required props
 */
function createThemedExport<P extends Record<string, unknown>>(
  componentName: string,
  // The base component is cast internally - the actual component type is preserved at usage sites
  BaseComponent: React.ComponentType<P>
) {
  return function ThemedComponent(props: P) {
    const { theme } = useTheme();
    
    try {
      const Component = getThemedComponent(componentName, theme);
      // Type erasure: components are stored without prop type information
      // but are type-checked where they're actually used
      return React.createElement(Component as React.ComponentType<P>, props);
    } catch {
      // No variant registered, use base component
      return React.createElement(BaseComponent, props);
    }
  };
}

// All elements wrapped (falls back to base if no variant)
// Buttons
export const Button = createThemedExport('button', BaseButton);
export const RoundButton = createThemedExport('round-button', BaseRoundButton);
export const ButtonGroup = createThemedExport('button-group', BaseButtonGroup);

// Form inputs
export const Input = createThemedExport('input', BaseInput);
export const InputBase = BaseInputBase;
export const Textarea = createThemedExport('textarea', BaseTextarea);
export const PrivacyCheckbox = BasePrivacyCheckbox;
export const Form = createThemedExport('form', BaseForm);
export const FormContainer = createThemedExport('form-container', BaseFormContainer as unknown as React.ComponentType<Record<string, unknown>>);
export const InputGroup = createThemedExport('input-group', BaseInputGroup as unknown as React.ComponentType<Record<string, unknown>>);
export const Label = createThemedExport('label', BaseLabel as unknown as React.ComponentType<Record<string, unknown>>);
export const HintText = createThemedExport('hint-text', BaseHintText as unknown as React.ComponentType<Record<string, unknown>>);
export const Select = createThemedExport('select', BaseSelect as unknown as React.ComponentType<Record<string, unknown>>);
export const SelectItem = createThemedExport('select-item', BaseSelectItem as unknown as React.ComponentType<Record<string, unknown>>);
export const NativeSelect = createThemedExport('native-select', BaseNativeSelect as unknown as React.ComponentType<Record<string, unknown>>);

// UI components
export const PhotoWithFallback = createThemedExport('photo-fallback', PhotoWithFallbackBase);
export const Badge = createThemedExport('badge', BaseBadge as unknown as React.ComponentType<Record<string, unknown>>);
export const BadgeWithDot = createThemedExport('badge-with-dot', BaseBadgeWithDot as unknown as React.ComponentType<Record<string, unknown>>);
export const BadgeGroup = createThemedExport('badge-group', BaseBadgeGroup as unknown as React.ComponentType<Record<string, unknown>>);
export const RatingStars = createThemedExport('rating-stars', BaseRatingStars);
export const RatingBadge = createThemedExport('rating-badge', BaseRatingBadge);
export const Tooltip = createThemedExport('tooltip', BaseTooltip as unknown as React.ComponentType<Record<string, unknown>>);
export const Avatar = createThemedExport('avatar', BaseAvatar);
export const AvatarLabelGroup = createThemedExport('avatar-label-group', BaseAvatarLabelGroup as unknown as React.ComponentType<Record<string, unknown>>);
export const VerifiedTick = createThemedExport('verified-tick', BaseVerifiedTick as unknown as React.ComponentType<Record<string, unknown>>);
export const Breadcrumb = createThemedExport('breadcrumb', BaseBreadcrumb as unknown as React.ComponentType<Record<string, unknown>>);
export const FeaturedIcon = createThemedExport('featured-icon', BaseFeaturedIcon as unknown as React.ComponentType<Record<string, unknown>>);
export const PaginationPageDefault = createThemedExport('pagination-page-default', BasePaginationPageDefault as unknown as React.ComponentType<Record<string, unknown>>);
export const PaginationPageMinimalCenter = createThemedExport('pagination-page-minimal-center', BasePaginationPageMinimalCenter as unknown as React.ComponentType<Record<string, unknown>>);
export const GoogleMap = createThemedExport('google-map', BaseGoogleMap as unknown as React.ComponentType<Record<string, unknown>>);
export const MarkdownRenderer = createThemedExport('markdown-renderer', BaseMarkdownRenderer as unknown as React.ComponentType<Record<string, unknown>>);

// Re-export compound components directly
export { Pagination } from './pagination/pagination-base';

// Re-export everything from subdirectories that doesn't need theming
export * from './rating/rating-stars';
export * from './rating/rating-badge';
export { SocialIcon, getSocialIcon } from './social-icons';
export * from './carousel/carousel';
export { CarouselSectionWrapper } from './carousel/carousel-section-wrapper';

// Re-export combobox (still exists in select directory but not wrapped with theming)
export { ComboBox } from './select/combobox';

// Video components (no theming needed)
export { VideoModal } from './video-modal';
export { VideoPlayButton } from './video-play-button';
