import { useLanguage } from '@/common/hooks/useStrings';
import BottomSheetLib, {
  BottomSheetTextInput as BSTextInput,
  BottomSheetBackdrop,
  BottomSheetModal,
  BottomSheetView,
} from '@gorhom/bottom-sheet';
import { X } from 'lucide-react-native';
import { forwardRef, useCallback, useEffect, useRef, type ReactNode } from 'react';
import {
  Pressable,
  StyleSheet,
  TextInput,
  View,
  type TextInputProps,
  type TextStyle,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Text } from './Text';
import { useColors } from './styles';

type BottomSheetProps = {
  visible: boolean;
  onClose: () => void;
  title: string;
  children: ReactNode;
};

export function BottomSheet({ visible, onClose, title, children }: BottomSheetProps) {
  const c = useColors();
  const insets = useSafeAreaInsets();
  const ref = useRef<BottomSheetModal>(null);

  useEffect(() => {
    if (visible) {
      ref.current?.present();
    } else {
      ref.current?.dismiss();
    }
  }, [visible]);

  const renderBackdrop = useCallback(
    (props: any) => (
      <BottomSheetBackdrop
        {...props}
        disappearsOnIndex={-1}
        appearsOnIndex={0}
        pressBehavior="close"
      />
    ),
    []
  );

  const bottomPadding = 24;

  return (
    <BottomSheetModal
      ref={ref}
      enableDynamicSizing
      enablePanDownToClose
      keyboardBehavior="interactive"
      keyboardBlurBehavior="restore"
      backdropComponent={renderBackdrop}
      onDismiss={onClose}
      handleIndicatorStyle={styles.handle}
      backgroundStyle={{ backgroundColor: c.surface }}
      bottomInset={insets.bottom}
      style={{ marginHorizontal: 12 }}
    >
      <BottomSheetView style={{ paddingHorizontal: 24, paddingBottom: bottomPadding }}>
        <View style={styles.header}>
          <Text style={[styles.title, { color: c.text }]}>{title}</Text>
          <Pressable onPress={onClose} hitSlop={12}>
            <X size={24} color={c.text} />
          </Pressable>
        </View>
        {children}
      </BottomSheetView>
    </BottomSheetModal>
  );
}

const FONT_SCALE = 1.15;
const fonts = { en: 'CormorantGaramond_600SemiBold', ko: 'NanumMyeongjo_400Regular' };

export const BottomSheetTextInput = forwardRef<TextInput, TextInputProps>(
  ({ style, ...props }, ref) => {
    const { language } = useLanguage();
    const flat = StyleSheet.flatten(style) as TextStyle | undefined;
    const size = (flat?.fontSize ?? 14) * FONT_SCALE;
    return (
      <BSTextInput
        ref={ref as any}
        style={[style, { fontFamily: fonts[language], fontSize: size, letterSpacing: 0.3 }]}
        {...props}
      />
    );
  }
);
BottomSheetTextInput.displayName = 'BottomSheetTextInput';

export { BottomSheetLib as BottomSheetRaw };

const styles = StyleSheet.create({
  handle: {
    width: 36,
    height: 4,
    backgroundColor: '#D1D5DB',
    borderRadius: 2,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20,
  },
  title: { fontSize: 20, fontWeight: '700' },
});