/**
 * Data Deletion Modal - For privacy compliance
 * Allows users to delete their synced data from Supabase
 */

import { useState } from 'react'
import { View, Modal, Pressable, StyleSheet } from 'react-native'
import { useTranslation } from 'react-i18next'
import { useThemeColors } from '@/src/shared/theme'
import { StyledText } from '@/src/shared/components/StyledText'
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
import { RADIUS } from '@/src/shared/constants/borderRadius'
import { TEXT, RED, DARK } from '@/src/shared/constants/colors'
import { Icon } from '@/src/shared/components/Icon'

interface DataDeletionModalProps {
  visible: boolean
  onDelete: () => Promise<void>
  onCancel: () => void
}

export function DataDeletionModal({
  visible,
  onDelete,
  onCancel,
}: DataDeletionModalProps) {
  const { t } = useTranslation('screens')
  const colors = useThemeColors()
  const [isDeleting, setIsDeleting] = useState(false)

  const handleDelete = async () => {
    setIsDeleting(true)
    await onDelete()
    setIsDeleting(false)
  }

  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      onRequestClose={onCancel}
    >
      <View style={[styles.overlay, { backgroundColor: DARK.SCRIM }]}>
        <View
          style={[styles.container, { backgroundColor: colors.bg.surface }]}
        >
          {/* Warning Icon */}
          <View
            style={[
              styles.iconContainer,
              { backgroundColor: RED.DIM },
            ]}
          >
            <Icon name="exclamationmark.triangle.fill" size={40} tintColor={RED[500]} />
          </View>

          {/* Title */}
          <StyledText
            size={22}
            weight="bold"
            color={colors.text.primary}
            style={styles.title}
          >
            {t('dataDeletion.title')}
          </StyledText>

          {/* Description */}
          <StyledText
            size={15}
            color={colors.text.secondary}
            style={styles.description}
          >
            {t('dataDeletion.description')}
          </StyledText>

          <StyledText
            size={14}
            color={colors.text.tertiary}
            style={styles.note}
          >
            {t('dataDeletion.note')}
          </StyledText>

          {/* Actions */}
          <Pressable
            style={[styles.deleteButton, isDeleting && styles.disabled]}
            onPress={handleDelete}
            disabled={isDeleting}
          >
            <StyledText preset="HEADLINE" color={TEXT.PRIMARY}>
              {isDeleting ? 'Deleting...' : t('dataDeletion.deleteButton')}
            </StyledText>
          </Pressable>

          <Pressable style={styles.cancelButton} onPress={onCancel}>
            <StyledText size={15} color={colors.text.secondary}>
              {t('dataDeletion.cancelButton')}
            </StyledText>
          </Pressable>
        </View>
      </View>
    </Modal>
  )
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: SPACING[4],
  },
  container: {
    width: '100%',
    maxWidth: 360,
    borderRadius: RADIUS.XL,
    padding: SPACING[6],
    alignItems: 'center',
  },
  iconContainer: {
    width: 80,
    height: 80,
    borderRadius: RADIUS.FULL,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: SPACING[4],
  },
  title: {
    textAlign: 'center',
    marginBottom: SPACING[4],
  },
  description: {
    textAlign: 'center',
    marginBottom: SPACING[3],
    lineHeight: 22,
  },
  note: {
    textAlign: 'center',
    marginBottom: SPACING[6],
    lineHeight: 20,
  },
  deleteButton: {
    width: '100%',
    height: LAYOUT.BUTTON_HEIGHT,
    backgroundColor: RED[500],
    borderRadius: RADIUS.MD,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: SPACING[3],
  },
  cancelButton: {
    padding: SPACING[3],
  },
  disabled: {
    opacity: 0.6,
  },
})
