import React from 'react';
import { Platform } from 'react-native';
import type { ViewStyle, StyleProp } from 'react-native';
import ReactNativeLiquidGlassView, {
  type GlassType,
} from './ReactNativeLiquidGlassViewNativeComponent';
import BlurView from './BlurView';

export interface LiquidGlassViewProps {
  /**
   * @description The type of glass effect to apply
   *
   * @default 'clear'
   *
   * @platform iOS 26+
   */
  glassType?: GlassType;

  /**
   * @description The tint color of the glass effect. Accepts hex color strings
   * like '#FFFFFF' or color names
   *
   * @default 'clear'
   *
   * @platform iOS 26+
   */
  glassTintColor?: string;

  /**
   * @description The opacity of the glass effect (0-1)
   *
   * @default 1.0
   *
   * @platform iOS 26+
   */
  glassOpacity?: number;

  /**
   * @description Fallback color when reduced transparency is enabled or on
   * older iOS versions
   *
   * @default '#FFFFFF'
   *
   * @platform iOS
   */
  reducedTransparencyFallbackColor?: string;

  /**
   * @description Whether the glass view should be interactive
   *
   * @default true
   *
   * @platform iOS
   */
  isInteractive?: boolean;

  /**
   * @description Whether the glass view should ignore safe area insets
   *
   * @default false
   *
   * @platform iOS
   */
  ignoreSafeArea?: boolean;

  /**
   * @description Style object for the liquid glass view
   *
   * @default undefined
   */
  style?: StyleProp<ViewStyle>;

  /**
   * Child components to render inside the liquid glass view
   *
   * @default undefined
   */
  children?: React.ReactNode;
}

/**
 * A Liquid Glass view component that provides iOS 26+ glass effects.
 *
 * This component uses the new UIKit glass effect API available on iOS 26+.
 * On older iOS versions or when reduced transparency is enabled, it falls back
 * to a solid color background.
 *
 * **Platform Support:**
 * - iOS 26+: Native glass effect with full functionality
 * - iOS < 26 or Android: Fallback to reducedTransparencyFallbackColor
 *
 * This component automatically handles the proper positioning pattern where the glass
 * effect is positioned absolutely behind the content, ensuring interactive elements
 * work correctly.
 *
 * @example
 * ```tsx
 * import { LiquidGlassView } from '@sbaiahmed1/react-native-blur';
 *
 * <LiquidGlassView
 *   glassType="clear"
 *   glassTintColor="#007AFF"
 *   glassOpacity={0.8}
 *   style={{ flex: 1 }}
 * >
 *   <Text>Content on top of liquid glass</Text>
 *   <Button title="Interactive Button" onPress={() => {}} />
 * </LiquidGlassView>
 * ```
 *
 * @platform ios
 */
export const LiquidGlassView: React.FC<LiquidGlassViewProps> = ({
  glassType = 'clear',
  glassTintColor = 'clear',
  glassOpacity = 1.0,
  reducedTransparencyFallbackColor = '#FFFFFF',
  isInteractive = true,
  ignoreSafeArea = true,
  style,
  children,
  ...props
}) => {
  const isIos = Platform.OS === 'ios';

  // Only render on iOS 26+ (fallback otherwise)
  if (!isIos || (isIos && Number.parseInt(String(Platform.Version), 10) < 26)) {
    console.warn(
      'LiquidGlassView is only supported on iOS. Rendering children without glass effect.'
    );

    // Compute overlay color with opacity for Android native handling
    const overlayColorWithAlpha =
      glassTintColor +
      Math.floor(glassOpacity * 255)
        .toString(16)
        .padStart(2, '0');

    return (
      <BlurView
        blurAmount={70}
        overlayColor={overlayColorWithAlpha}
        reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
        ignoreSafeArea={ignoreSafeArea}
        style={style}
      >
        {children}
      </BlurView>
    );
  }

  // If children exist, use the absolute positioning pattern
  return (
    <ReactNativeLiquidGlassView
      glassType={glassType}
      glassTintColor={glassTintColor}
      glassOpacity={glassOpacity}
      reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
      isInteractive={isInteractive}
      ignoreSafeArea={ignoreSafeArea}
      style={style}
      {...props}
    >
      {children}
    </ReactNativeLiquidGlassView>
  );
};

export default LiquidGlassView;
