/**
 * 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 { CloseButton as BaseCloseButton } from './buttons/close-button';
import { SocialButton as BaseSocialButton } from './buttons/social-button';
import { AppStoreButton as BaseAppStoreButton, GooglePlayButton as BaseGooglePlayButton } from './buttons/app-store-buttons';
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 { Checkbox as BaseCheckbox } from './checkbox/checkbox';
import { PrivacyCheckbox as BasePrivacyCheckbox } from './checkbox/privacy-checkbox';
import { Toggle as BaseToggle } from './toggle/toggle';
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 { MultiSelect as BaseMultiSelect } from './select/multi-select';
import { NativeSelect as BaseNativeSelect } from './select/select-native';
import { RadioGroup as BaseRadioGroup, RadioButton as BaseRadioButton } from './radio-buttons/radio-buttons';

// Date pickers
import { DatePicker as BaseDatePicker } from './date-picker/date-picker';
import { DateRangePicker as BaseDateRangePicker } from './date-picker/date-range-picker';

// UI components
import PhotoWithFallbackBase from './photo-fallback/photo-fallback';
import { LoadingIndicator as BaseLoadingIndicator } from './loading-indicator/loading-indicator';
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 { AvatarProfilePhoto as BaseAvatarProfilePhoto } from './avatar/avatar-profile-photo';
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 { ProgressBar as BaseProgressBar } from './progress-indicators/progress-indicators';
import { ProgressBarCircle as BaseProgressBarCircle } from './progress-indicators/progress-circles';
import { CircleProgressBar as BaseCircleProgressBar } from './progress-indicators/simple-circle';
import { PaginationDot as BasePaginationDot } from './pagination/pagination-dot';
import { PaginationLine as BasePaginationLine } from './pagination/pagination-line';
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 './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 CloseButton = createThemedExport('close-button', BaseCloseButton);
export const SocialButton = createThemedExport('social-button', BaseSocialButton as unknown as React.ComponentType<Record<string, unknown>>);
export const AppStoreButton = createThemedExport('app-store-button', BaseAppStoreButton);
export const GooglePlayButton = createThemedExport('google-play-button', BaseGooglePlayButton);
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 Checkbox = createThemedExport('checkbox', BaseCheckbox);
export const PrivacyCheckbox = BasePrivacyCheckbox;
export const Toggle = createThemedExport('toggle', BaseToggle);
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 MultiSelect = createThemedExport('multi-select', BaseMultiSelect as unknown as React.ComponentType<Record<string, unknown>>);
export const NativeSelect = createThemedExport('native-select', BaseNativeSelect as unknown as React.ComponentType<Record<string, unknown>>);
export const RadioGroup = createThemedExport('radio-group', BaseRadioGroup as unknown as React.ComponentType<Record<string, unknown>>);
export const RadioButton = createThemedExport('radio-button', BaseRadioButton as unknown as React.ComponentType<Record<string, unknown>>);

// Date pickers
export const DatePicker = createThemedExport('date-picker', BaseDatePicker);
export const DateRangePicker = createThemedExport('date-range-picker', BaseDateRangePicker);

// UI components
export const PhotoWithFallback = createThemedExport('photo-fallback', PhotoWithFallbackBase);
export const LoadingIndicator = createThemedExport('loading-indicator', BaseLoadingIndicator);
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 AvatarProfilePhoto = createThemedExport('avatar-profile-photo', BaseAvatarProfilePhoto 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 ProgressBar = createThemedExport('progress-bar', BaseProgressBar as unknown as React.ComponentType<Record<string, unknown>>);
export const ProgressBarCircle = createThemedExport('progress-bar-circle', BaseProgressBarCircle as unknown as React.ComponentType<Record<string, unknown>>);
export const CircleProgressBar = createThemedExport('circle-progress-bar', BaseCircleProgressBar as unknown as React.ComponentType<Record<string, unknown>>);
export const PaginationDot = createThemedExport('pagination-dot', BasePaginationDot as unknown as React.ComponentType<Record<string, unknown>>);
export const PaginationLine = createThemedExport('pagination-line', BasePaginationLine 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 (they have subcomponents like .Root, .List, .DropZone, .Group, .Slot, etc.)
export { Tabs } from './tabs/tabs';
export { TagGroup, TagList, Tag } from './tags/tags';
export { Pagination } from './pagination/pagination-base';
export { SlideoutMenu } from './slideout-menus/slideout-menu';

// Re-export everything from subdirectories that doesn't need theming
export * from './rating/rating-stars';
export * from './rating/rating-badge';
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';
