import React, {
  createContext,
  useContext,
  useRef,
  type ReactNode,
  type RefObject,
} from 'react';
import { BlurTargetView, BlurView } from 'expo-blur';
import {
  Platform,
  StyleSheet,
  View,
  type StyleProp,
  type ViewProps,
  type ViewStyle,
} from 'react-native';
import { colors } from '../theme/proulr-theme';
import {
  CHROME_GLASS_ANDROID_BLUR_METHOD,
  CHROME_GLASS_BLUR_INTENSITY,
  CHROME_GLASS_BLUR_TINT,
} from '../theme/chrome-glass';
import { chromePillStyles } from '../theme/chrome-pill-styles';

const absoluteFill: ViewStyle = {
  position: 'absolute',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
};

/**
 * Android: `BlurView` só faz blur real apontando para um `BlurTargetView`
 * (ref via `blurTarget`) — iOS/web usam o backdrop nativo e ignoram o target.
 */
const ChromeGlassTargetContext = createContext<RefObject<View | null> | null>(null);

/** Provider do alvo de blur — envolve chrome + conteúdo (uma vez por shell). */
export function ChromeGlassTargetProvider({ children }: { children: ReactNode }) {
  const targetRef = useRef<View | null>(null);
  return (
    <ChromeGlassTargetContext.Provider value={targetRef}>
      {children}
    </ChromeGlassTargetContext.Provider>
  );
}

type ChromeGlassBlurTargetProps = {
  children: ReactNode;
  style?: StyleProp<ViewStyle>;
};

/**
 * Envolve o conteúdo que fica atrás do vidro. No Android vira `BlurTargetView`;
 * nas demais plataformas (ou sem provider) é um `View` comum.
 *
 * Descendentes NÃO recebem o target: um BlurView aninhado dentro do próprio
 * alvo cria ciclo de render nodes no hwui (recursão infinita em
 * computeTransformImpl → SIGSEGV na RenderThread). Glass dentro do conteúdo
 * (ex.: compose pill do chat) cai no fallback translúcido no Android.
 */
export function ChromeGlassBlurTarget({ children, style }: ChromeGlassBlurTargetProps) {
  const targetRef = useContext(ChromeGlassTargetContext);
  if (Platform.OS !== 'android' || !targetRef) {
    return <View style={style}>{children}</View>;
  }
  return (
    <BlurTargetView ref={targetRef} style={style}>
      <ChromeGlassTargetContext.Provider value={null}>
        {children}
      </ChromeGlassTargetContext.Provider>
    </BlurTargetView>
  );
}

function useAndroidBlurProps(): {
  blurTarget: RefObject<View | null>;
  blurMethod: typeof CHROME_GLASS_ANDROID_BLUR_METHOD;
} | null {
  const targetRef = useContext(ChromeGlassTargetContext);
  if (Platform.OS !== 'android' || !targetRef) return null;
  return { blurTarget: targetRef, blurMethod: CHROME_GLASS_ANDROID_BLUR_METHOD };
}

type ChromeGlassLayerProps = {
  style?: StyleProp<ViewStyle>;
  pointerEvents?: ViewProps['pointerEvents'];
};

/**
 * Camada de frost única do sistema (igual AppSideDrawer topo/base).
 * BlurView + `colors.chromeGlassOverlay` — sem cast cinza.
 *
 * Web: BlurView vira `backdrop-filter` em camada fixa sobre conteúdo que rola —
 * repaint contínuo no scroll (custo direto de INP). Fallback: pílula OLED opaca
 * (`colors.chromePillBackground`), mesmo visual do chrome sem glass.
 */
export function ChromeGlassLayer({
  style,
  pointerEvents = 'none',
}: ChromeGlassLayerProps) {
  const androidBlurProps = useAndroidBlurProps();
  if (Platform.OS === 'web') {
    return (
      <View
        style={[absoluteFill, styles.webGlassFallback, style]}
        pointerEvents={pointerEvents}
      />
    );
  }
  return (
    <View style={[absoluteFill, style]} pointerEvents={pointerEvents}>
      <BlurView
        intensity={CHROME_GLASS_BLUR_INTENSITY}
        tint={CHROME_GLASS_BLUR_TINT}
        style={StyleSheet.absoluteFill}
        {...(androidBlurProps ?? {})}
      />
      <View style={[absoluteFill, styles.tint]} />
    </View>
  );
}

type ChromeGlassShellProps = {
  children: ReactNode;
  style?: StyleProp<ViewStyle>;
  contentStyle?: StyleProp<ViewStyle>;
};

/**
 * Pílula chrome com o mesmo glass do drawer (shell + blur + overlay).
 */
export function ChromeGlassShell({ children, style, contentStyle }: ChromeGlassShellProps) {
  return (
    <View style={[chromePillStyles.shell, styles.shellTransparent, style]}>
      <ChromeGlassLayer />
      <View style={[styles.content, contentStyle]}>{children}</View>
    </View>
  );
}

const styles = StyleSheet.create({
  tint: {
    backgroundColor: colors.chromeGlassOverlay,
  },
  webGlassFallback: {
    backgroundColor: colors.chromePillBackground,
  },
  shellTransparent: {
    backgroundColor: 'transparent',
  },
  content: {
    zIndex: 1,
  },
});