import { strings } from '@/common/strings';
import { createContext, ReactNode, useCallback, useContext, useState } from 'react';
import { Modal, Platform, Pressable, Alert as RNAlert, StyleSheet, View } from 'react-native';
import { font, radius, useColors } from './styles';
import { Text } from './Text';

type AlertButton = {
  text: string;
  onPress?: () => void;
  style?: 'default' | 'cancel' | 'destructive';
};

type AlertConfig = {
  title: string;
  message?: string;
  buttons?: AlertButton[];
};

type AlertContextType = {
  alert: (title: string, message?: string, buttons?: AlertButton[]) => void;
  showAlert: (title: string, message?: string) => void;
  showConfirm: (title: string, message: string, onConfirm: () => void) => void;
};

const AlertContext = createContext<AlertContextType | null>(null);

export function useAlert() {
  const ctx = useContext(AlertContext);
  if (!ctx) throw new Error('useAlert must be used within AlertProvider');
  return ctx;
}

export function AlertProvider({ children }: { children: ReactNode }) {
  const [config, setConfig] = useState<AlertConfig | null>(null);
  const c = useColors();

  const alert = useCallback((title: string, message?: string, buttons?: AlertButton[]) => {
    if (Platform.OS === 'ios') {
      RNAlert.alert(title, message, buttons);
      return;
    }
    setConfig({ title, message, buttons: buttons || [{ text: strings.common.ok }] });
  }, []);

  const showAlert = useCallback(
    (title: string, message?: string) => {
      alert(title, message, [{ text: strings.common.ok }]);
    },
    [alert]
  );

  const showConfirm = useCallback(
    (title: string, message: string, onConfirm: () => void) => {
      alert(title, message, [
        { text: strings.common.cancel, style: 'cancel' },
        { text: strings.common.confirm, style: 'destructive', onPress: onConfirm },
      ]);
    },
    [alert]
  );

  const close = useCallback(() => setConfig(null), []);

  const handlePress = (button: AlertButton) => {
    close();
    button.onPress?.();
  };

  const buttons = config?.buttons || [{ text: strings.common.ok }];
  const isHorizontal = buttons.length === 2;

  return (
    <AlertContext.Provider value={{ alert, showAlert, showConfirm }}>
      {children}

      {Platform.OS === 'android' && config && (
        <Modal visible transparent animationType="fade">
          <View style={styles.backdrop}>
            <View style={[styles.dialog, { backgroundColor: c.surface }]}>
              <View style={styles.body}>
                <Text style={[styles.title, { color: c.text }]}>{config.title}</Text>
                {config.message && (
                  <Text style={[styles.message, { color: c.secondaryText }]}>{config.message}</Text>
                )}
              </View>

              <View style={[styles.separator, { backgroundColor: c.border }]} />

              <View style={isHorizontal ? styles.buttonsRow : styles.buttonsColumn}>
                {buttons.map((btn, i) => {
                  const isDestructive = btn.style === 'destructive';
                  const isCancel = btn.style === 'cancel';
                  const showSeparator = isHorizontal && i === 0;

                  return (
                    <View
                      key={i}
                      style={[
                        isHorizontal ? styles.buttonWrapperRow : styles.buttonWrapperColumn,
                        showSeparator && [styles.verticalSeparator, { borderColor: c.border }],
                      ]}
                    >
                      {!isHorizontal && i > 0 && (
                        <View style={[styles.separator, { backgroundColor: c.border }]} />
                      )}
                      <Pressable
                        style={({ pressed }) => [styles.button, pressed && styles.pressed]}
                        onPress={() => handlePress(btn)}
                      >
                        <Text
                          style={[
                            styles.buttonText,
                            { color: isDestructive ? c.danger : c.accent },
                            isCancel && styles.cancelText,
                          ]}
                        >
                          {btn.text}
                        </Text>
                      </Pressable>
                    </View>
                  );
                })}
              </View>
            </View>
          </View>
        </Modal>
      )}
    </AlertContext.Provider>
  );
}

const styles = StyleSheet.create({
  backdrop: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.4)',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 48,
  },
  dialog: {
    width: '100%',
    maxWidth: 300,
    borderRadius: radius.lg,
    overflow: 'hidden',
  },
  body: {
    paddingHorizontal: 20,
    paddingTop: 20,
    paddingBottom: 16,
    alignItems: 'center',
  },
  title: {
    fontSize: font.lg,
    fontWeight: '600',
    textAlign: 'center',
  },
  message: {
    fontSize: font.sm,
    textAlign: 'center',
    marginTop: 4,
    lineHeight: 18,
  },
  separator: {
    height: StyleSheet.hairlineWidth,
  },
  buttonsRow: {
    flexDirection: 'row',
  },
  buttonsColumn: {
    flexDirection: 'column',
  },
  buttonWrapperRow: {
    flex: 1,
  },
  buttonWrapperColumn: {},
  verticalSeparator: {
    borderRightWidth: StyleSheet.hairlineWidth,
  },
  button: {
    paddingVertical: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    fontSize: font.lg,
    fontWeight: '400',
  },
  cancelText: {
    fontWeight: '600',
  },
  pressed: {
    backgroundColor: 'rgba(0, 0, 0, 0.05)',
  },
});