import { StaticScreenProps, useNavigation, StackActions } from '@react-navigation/native'
import type {
  NativeStackNavigationOptions,
  NativeStackScreenProps,
} from '@react-navigation/native-stack'
import React, { useCallback, useLayoutEffect, useMemo, useState } from 'react'
import { View, StyleSheet, TextInput } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { Spinner, Text, KeyboardScrollView } from '../components'
import {
  composeOptions,
  useHeaderRight,
  withLeftClose,
} from '../components/display/platform_modal_header_buttons'
import BlankState from '../components/primitive/blank_state_primitive'
import { useTheme } from '../hooks'
import { useConversationMessages } from '../hooks/use_conversation_messages'
import { useReportMessage } from '../hooks/use_report_message'
import { MessageResource } from '../types'
import { MessageReportReason } from '../types/resources/message_report'
import { platformFontWeightBold } from '../utils'
import { MessagePreview } from './message_report/components/message_preview'
import { ReportReasonList } from './message_report/components/report_reason_list'

const MAX_DETAIL_LENGTH = 500

export const MessageReportScreenOptions = ({
  navigation,
  route,
}: NativeStackScreenProps<any>): NativeStackNavigationOptions => {
  const handleClose = () =>
    navigation.dispatch(
      StackActions.popTo(
        'Conversation',
        { conversation_id: route.params?.conversation_id },
        { merge: true }
      )
    )

  return composeOptions(
    { presentation: 'modal', title: 'Report message' },
    withLeftClose({ onPress: handleClose })
  )
}

export type MessageReportScreenProps = StaticScreenProps<{
  conversation_id: number
  message_id: string
}>

export function MessageReportScreen({ route }: MessageReportScreenProps) {
  const { conversation_id, message_id } = route.params

  const { messages } = useConversationMessages({ conversation_id }, { refetchOnMount: false })
  const message = messages.find(m => m.id === message_id)

  if (!message) return null

  return <MessageReportScreenContent message={message} conversation_id={conversation_id} />
}

function MessageReportScreenContent({
  message,
  conversation_id,
}: {
  message: MessageResource
  conversation_id: number
}) {
  const styles = useStyles()
  const navigation = useNavigation()
  const [selectedReason, setSelectedReason] = useState<MessageReportReason | null>(null)
  const [reasonDetail, setReasonDetail] = useState('')
  const { mutate: submitReport, status } = useReportMessage(conversation_id, message.id)

  const handleReasonChange = useCallback((reason: MessageReportReason) => {
    setSelectedReason(reason)

    if (reason !== 'other') {
      setReasonDetail('')
    }
  }, [])

  const isFormValid = useMemo(() => {
    if (selectedReason === null) return false

    if (selectedReason === 'other' && reasonDetail.trim().length === 0) {
      return false
    }

    if (status === 'pending') return false

    return true
  }, [selectedReason, reasonDetail, status])

  const handleSubmit = useCallback(() => {
    if (!isFormValid || !selectedReason) return

    submitReport({
      reason: selectedReason,
      reasonDetail: selectedReason === 'other' ? reasonDetail : undefined,
    })
  }, [isFormValid, selectedReason, reasonDetail, submitReport])

  const handleClose = useCallback(() => {
    navigation.dispatch(StackActions.popTo('Conversation', { conversation_id }, { merge: true }))
  }, [navigation, conversation_id])

  const formVisible = status !== 'pending' && status !== 'success'

  useHeaderRight({
    icon: 'general.upArrow',
    accessibilityLabel: 'Submit',
    prominent: true,
    onPress: handleSubmit,
    disabled: !isFormValid,
    enabled: formVisible,
  })

  useLayoutEffect(() => {
    if (formVisible) {
      navigation.setOptions({ headerTitle: 'Report message' })
    }
  }, [formVisible, navigation])

  if (status === 'pending') {
    return (
      <View style={styles.fullScreenContainer}>
        <Spinner />
        <Text style={styles.loadingText}>Submitting report...</Text>
      </View>
    )
  }

  if (status === 'success') {
    return (
      <View style={styles.fullScreenContainer}>
        <BlankState.Root>
          <BlankState.Imagery name="general.checkCircle" style={styles.successIcon} />
          <BlankState.Content>
            <BlankState.Heading style={styles.successTitle}>Message reported</BlankState.Heading>
            <BlankState.Text style={styles.successSubtitle}>
              The message has been reported and a church leader will be contacted.
            </BlankState.Text>
          </BlankState.Content>
          <BlankState.Button title="Close" onPress={handleClose} size="lg" variant="fill" />
        </BlankState.Root>
      </View>
    )
  }

  if (status === 'error') {
    return (
      <BlankState.Root>
        <BlankState.Imagery name="general.exclamationTriangle" />
        <BlankState.Content>
          <BlankState.Heading>Unable to submit report</BlankState.Heading>
          <BlankState.Text>
            We were unable to report this message. Please try again.
          </BlankState.Text>
        </BlankState.Content>
        <BlankState.Button title="Close" onPress={handleClose} size="lg" variant="outline" />
      </BlankState.Root>
    )
  }

  return (
    <KeyboardScrollView contentContainerStyle={styles.container}>
      <Text style={styles.warningText} maxFontSizeMultiplier={1.5}>
        Reporting this message will notify a church leader. The person you are reporting will not
        receive a notification from Church Center. If someone is in immediate danger, call local
        emergency services. Don&apos;t wait.
      </Text>

      <MessagePreview message={message} />

      <View style={styles.reasonSection}>
        <Text style={styles.fieldLabel}>
          What best describes the problem? <Text style={styles.required}>*</Text>
        </Text>

        <View style={styles.reasonListContainer}>
          <ReportReasonList selectedReason={selectedReason} onReasonChange={handleReasonChange} />
        </View>
      </View>

      {selectedReason === 'other' && (
        <View style={styles.detailSection}>
          <Text style={styles.fieldLabel}>
            Please provide more details <Text style={styles.required}>*</Text>
          </Text>
          <TextInput
            style={styles.textInput}
            multiline
            placeholder="Describe the issue..."
            value={reasonDetail}
            onChangeText={setReasonDetail}
            maxLength={MAX_DETAIL_LENGTH}
            accessibilityLabel="Additional details"
            accessibilityHint="Provide more information about why you're reporting this message"
          />
          {reasonDetail.length >= MAX_DETAIL_LENGTH - 100 && (
            <Text variant="footnote">
              {reasonDetail.length}/{MAX_DETAIL_LENGTH}
            </Text>
          )}
        </View>
      )}
    </KeyboardScrollView>
  )
}

const useStyles = () => {
  const { bottom } = useSafeAreaInsets()
  const { colors } = useTheme()

  return StyleSheet.create({
    container: {
      padding: 16,
      paddingBottom: 16 + bottom,
      gap: 24,
    },
    fullHeight: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    fullScreenContainer: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: colors.surfaceColor100,
    },
    loadingText: {
      marginTop: 16,
      fontSize: 16,
      fontWeight: '600',
      color: colors.textColorDefaultPrimary,
    },
    warningText: {
      fontSize: 14,
      lineHeight: 20,
      color: colors.textColorDefaultSecondary,
    },
    reasonSection: {
      gap: 8,
    },
    fieldLabel: {
      fontSize: 16,
      fontWeight: platformFontWeightBold,
      color: colors.textColorDefaultPrimary,
    },
    required: {
      color: colors.statusErrorText,
    },
    reasonListContainer: {
      backgroundColor: colors.surfaceColor100,
    },
    detailSection: {
      gap: 8,
    },
    textInput: {
      color: colors.textColorDefaultPrimary,
      fontSize: 16,
      textAlignVertical: 'top',
      minHeight: 120,
      maxHeight: 200,
      borderWidth: 1,
      borderColor: colors.borderColorDefaultBase,
      borderRadius: 8,
      paddingHorizontal: 16,
      paddingVertical: 12,
      backgroundColor: colors.surfaceColor100,
    },
    successIcon: {
      color: colors.statusSuccessIcon,
      fontSize: 48,
    },
    successTitle: {
      fontSize: 24,
      marginBottom: 4,
    },
    successSubtitle: {
      fontSize: 16,
      marginBottom: 4,
    },
  })
}