import { Pressable, StyleSheet, Text, View } from 'react-native';
import { colors } from '../../../src/theme';
import { Modal } from './Modal';

interface Props {
  visible: boolean;
  /** 「同意」= 勾选协议并继续原动作 */
  onAccept: () => void;
  /** 「拒绝」= 关闭弹窗，不执行动作 */
  onDecline: () => void;
  /** 点击协议名跳转协议详情 */
  onOpenAgreement?: () => void;
}

/** 协议确认弹窗（对齐参考样式）：未勾选协议点登录时拦截，拒绝/同意双按钮 */
export function AgreementModal({ visible, onAccept, onDecline, onOpenAgreement }: Props) {
  return (
    <Modal visible={visible} onClose={onDecline}>
      <Text style={styles.message}>
        请阅读并同意
        <Text style={styles.link} onPress={onOpenAgreement}>《轻松聘用户协议》</Text>
        和
        <Text style={styles.link} onPress={onOpenAgreement}>《隐私政策》</Text>
        ，允许轻松聘统一管理本人账号信息
      </Text>
      <View style={styles.btnRow}>
        <Pressable style={[styles.btn, styles.declineBtn]} onPress={onDecline} hitSlop={4}>
          <Text style={styles.declineText}>拒绝</Text>
        </Pressable>
        <Pressable style={[styles.btn, styles.acceptBtn]} onPress={onAccept} hitSlop={4}>
          <Text style={styles.acceptText}>同意</Text>
        </Pressable>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  message: { fontSize: 15, lineHeight: 24, color: colors.textPrimary, textAlign: 'center' },
  link: { color: colors.primary },
  btnRow: { flexDirection: 'row', gap: 14, marginTop: 20 },
  btn: {
    flex: 1,
    height: 46,
    borderRadius: 23,
    alignItems: 'center',
    justifyContent: 'center',
  },
  declineBtn: { backgroundColor: colors.borderLight },
  declineText: { fontSize: 16, fontWeight: '600', color: colors.textPrimary },
  acceptBtn: { backgroundColor: colors.primary },
  acceptText: { fontSize: 16, fontWeight: '700', color: colors.textInverse },
});