import type { ReactNode } from 'react'
import { Modal, View, Text, ScrollView, Pressable, StyleSheet } from 'react-native'

import { USER_AGREEMENT_MARKDOWN } from '@/lib/userAgreement'
import { theme } from '@/constants/theme'

function renderAgreementBody(md: string) {
  const lines = md.split('\n')
  const out: ReactNode[] = []
  lines.forEach((line, i) => {
    if (line.startsWith('# ')) {
      out.push(
        <Text key={i} style={styles.h1}>
          {line.slice(2)}
        </Text>
      )
      return
    }
    if (line.startsWith('## ')) {
      out.push(
        <Text key={i} style={styles.h2}>
          {line.slice(3)}
        </Text>
      )
      return
    }
    if (line.startsWith('* ')) {
      out.push(
        <Text key={i} style={styles.li}>
          • {line.slice(2)}
        </Text>
      )
      return
    }
    if (line.trim() === '') {
      out.push(<View key={i} style={styles.gap} />)
      return
    }
    out.push(
      <Text key={i} style={styles.p}>
        {line}
      </Text>
    )
  })
  return out
}

type Props = {
  visible: boolean
  onClose: () => void
}

const AGREEMENT_BODY = USER_AGREEMENT_MARKDOWN.replace(/^# 用户使用协议\n+/, '')

export function UserAgreementModal({ visible, onClose }: Props) {
  return (
    <Modal visible={visible} animationType="slide" transparent onRequestClose={onClose}>
      <View style={styles.backdrop}>
        <View style={styles.sheet}>
          <Text style={styles.sheetTitle}>用户使用协议</Text>
          <ScrollView style={styles.scroll} contentContainerStyle={styles.scrollInner}>
            {renderAgreementBody(AGREEMENT_BODY)}
          </ScrollView>
          <Pressable style={styles.closeBtn} onPress={onClose}>
            <Text style={styles.closeBtnText}>关闭</Text>
          </Pressable>
        </View>
      </View>
    </Modal>
  )
}

const styles = StyleSheet.create({
  backdrop: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.55)',
    justifyContent: 'center',
    padding: 16,
  },
  sheet: {
    maxHeight: '88%',
    borderRadius: 14,
    backgroundColor: theme.bgCard,
    borderWidth: 1,
    borderColor: 'rgba(124,92,255,0.22)',
    paddingTop: 14,
    paddingHorizontal: 14,
    paddingBottom: 12,
  },
  sheetTitle: {
    fontSize: 17,
    fontWeight: '700',
    color: theme.text,
    marginBottom: 10,
    textAlign: 'center',
  },
  scroll: { flexGrow: 0 },
  scrollInner: { paddingBottom: 8 },
  h1: {
    fontSize: 17,
    fontWeight: '700',
    color: theme.text,
    marginBottom: 8,
  },
  h2: {
    fontSize: 15,
    fontWeight: '600',
    color: theme.text,
    marginTop: 10,
    marginBottom: 6,
  },
  p: {
    fontSize: 13,
    color: theme.muted,
    lineHeight: 21,
    marginBottom: 4,
  },
  li: {
    fontSize: 13,
    color: theme.muted,
    lineHeight: 21,
    marginBottom: 4,
    paddingLeft: 4,
  },
  gap: { height: 6 },
  closeBtn: {
    marginTop: 10,
    paddingVertical: 12,
    borderRadius: 10,
    backgroundColor: theme.bgElevated,
    alignItems: 'center',
    borderWidth: 1,
    borderColor: theme.border,
  },
  closeBtnText: { fontSize: 15, fontWeight: '600', color: theme.accent },
})