import { useNavigation } from '@react-navigation/native'
import type {
  NativeStackNavigationOptions,
  NativeStackScreenProps,
} from '@react-navigation/native-stack'
import { startsWith } from 'lodash'
import React, { useCallback, useState } from 'react'
import {
  View,
  StyleSheet,
  TextInput,
  Linking,
  ScrollView,
  TouchableOpacity,
  Platform,
} from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import {
  Button,
  Spinner,
  Text,
  TextInlineButton,
  ImageAttachmentPreview,
  Icon,
  KeyboardScrollView,
} from '../components'
import {
  composeOptions,
  HeaderDismissButton,
  useHeaderRight,
  withLeftClose,
} from '../components/display/platform_modal_header_buttons'
import { VideoAttachmentPreview } from '../components/display/video_attachment_preview'
import { DefaultLoading } from '../components/page/loading'
import BlankState from '../components/primitive/blank_state_primitive'
import { SafeAreaModal } from '../components/safe_area_modal'
import { useTheme } from '../hooks'
import { useAppName } from '../hooks/use_app_name'
import { useReportBugAction } from '../hooks/use_report_bug_action'
import { useUploadClient } from '../hooks/use_upload_client'
import { ImagePicker, ImagePickerResult, platformFontWeightBold } from '../utils'

const MAX_DESCRIPTION_LENGTH = 2000

enum BUG_TYPE_OPTIONS {
  Chat = 'Chat',
  FindMyChurch = 'Find my church',
  LoggingIn = 'Logging in',
  UsingGroups = 'Using groups (events, resources, members)',
  CheckingIn = 'Checking in',
  MakingADonation = 'Making a donation',
  RegisteringForAnEvent = 'Registering for an event',
  MyProfileAndSchedule = 'My profile and schedule',
  Directory = 'Directory',
  Other = 'Other',
}

export const BugReportScreenOptions = ({
  navigation,
}: NativeStackScreenProps<any>): NativeStackNavigationOptions =>
  composeOptions(
    { presentation: 'modal', title: 'Report a bug' },
    withLeftClose({ onPress: () => navigation.goBack() })
  )

interface Attachment {
  id: string
  name: string
  type: string
}

enum QualifiedMobileAppName {
  chat = 'Chat', // There is no app name for the mobile app
  churchcenter = 'Church Center App',
  services = 'Services Mobile',
}

enum DisplayableAppName {
  chat = 'Chat',
  churchcenter = 'Church Center',
  services = 'Services',
}

export function BugReportScreen() {
  const styles = useStyles()
  const navigation = useNavigation()
  const name = useAppName()
  const appName = QualifiedMobileAppName[name]
  const [bugType, setBugType] = useState<BUG_TYPE_OPTIONS>(BUG_TYPE_OPTIONS.Chat)
  const [showBugTypePicker, setShowBugTypePicker] = useState(false)
  const [whatWereDoing, setWhatWereDoing] = useState('')
  const [whatExpected, setWhatExpected] = useState('')
  const uploadApi = useUploadClient()
  const [uploading, setUploading] = useState(false)
  const [attachment, setAttachment] = useState<Attachment | null>(null)
  const [uploadError, setUploadError] = useState<string | null>(null)
  const { mutate: createBugReport, status } = useReportBugAction()
  const formValid =
    bugType.trim().length > 0 &&
    whatWereDoing.trim().length > 0 &&
    whatExpected.trim().length > 0 &&
    status === 'idle' &&
    !uploading
  const [imagePreviewURI, setImagePreviewURI] = useState<string>('')
  const isImageAttachment = startsWith(attachment?.type, 'image/')

  const handleSubmit = useCallback(() => {
    const description = generateBugReportDescription(bugType, whatWereDoing, whatExpected)

    createBugReport({
      description,
      description_json: {
        bugType,
        whatWereDoing,
        whatExpected,
        appName: appName,
      },
      attachmentIds: attachment ? [attachment.id] : [],
    })
  }, [attachment, bugType, whatWereDoing, whatExpected, createBugReport, appName])

  const handleRemoveAttachment = useCallback(() => {
    setAttachment(null)
    setImagePreviewURI('')
  }, [])

  function uploadImagePickerResult(result: ImagePickerResult) {
    if (result.canceled || result.assets.length === 0) {
      setUploading(false)
      return
    }

    const asset = result.assets[0]

    uploadApi
      ?.uploadFile({
        uri: asset.uri,
        name: asset.fileName as string,
        type: asset.mimeType as string,
      })
      .then(uploadedResource => {
        setUploading(false)
        setImagePreviewURI(asset.uri)
        setAttachment({
          id: uploadedResource.id,
          name: asset.fileName || 'File',
          type: asset.mimeType as string,
        })
      })
      .catch(() => {
        setUploading(false)
        setUploadError(`Failed to upload attachment`)
      })
  }

  function pickImage() {
    setUploading(true)
    return ImagePicker.openImageLibraryAsync().then(result => uploadImagePickerResult(result))
  }

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

  if (status === 'pending') {
    return (
      <View style={[styles.container, styles.fullHeight]}>
        <DefaultLoading />
      </View>
    )
  }

  if (status === 'success') {
    return (
      <BlankState.Root>
        <BlankState.Imagery name="general.checkCircle" style={styles.successIcon} />
        <BlankState.Content>
          <BlankState.Heading style={styles.successTitle}>Thank you!</BlankState.Heading>
          <BlankState.Text style={styles.successSubtitle}>
            We appreciate you taking the time to help improve {DisplayableAppName[name]}! We'll take
            a look at the issue you reported.
          </BlankState.Text>
        </BlankState.Content>
        <BlankState.Button
          title="Return to chat"
          onPress={navigation.goBack}
          size="lg"
          variant="fill"
        />
      </BlankState.Root>
    )
  }

  if (status === 'error') {
    return (
      <View style={styles.container}>
        <Text>
          This is embarrassing, we can't submit your bug report right now. If you still need help or
          would like to submit this bug report another way please{' '}
          <TextInlineButton
            accessibilityRole="link"
            onPress={() =>
              Linking.openURL('https://support.planningcenteronline.com/hc/en-us/requests/new')
            }
          >
            contact our help center
          </TextInlineButton>
          .
        </Text>
        <Button title="Return to chat" onPress={navigation.goBack} variant="fill" size="lg" />
      </View>
    )
  }

  return (
    <KeyboardScrollView contentContainerStyle={styles.container}>
      <Text style={styles.description}>
        Thanks for helping us improve {DisplayableAppName[name]}. We won't be able to respond to
        your submission, but your feedback helps us improve the experience helps us improve the
        experience.
      </Text>

      <View style={styles.textInputContainer}>
        <Text style={styles.fieldLabel}>
          Where did you experience the issue? <Text style={styles.required}>*</Text>
        </Text>
        <TouchableOpacity style={styles.pickerButton} onPress={() => setShowBugTypePicker(true)}>
          <Text style={[styles.pickerText, !bugType && styles.pickerPlaceholder]}>{bugType}</Text>
          <Icon name="general.downChevron" style={styles.pickerArrow} accessibilityElementsHidden />
        </TouchableOpacity>
      </View>

      <SafeAreaModal
        visible={showBugTypePicker}
        animationType="slide"
        presentationStyle="pageSheet"
        onRequestClose={() => setShowBugTypePicker(false)}
      >
        <View style={styles.modalContainer}>
          <View style={styles.modalHeader}>
            <HeaderDismissButton title="Cancel" onPress={() => setShowBugTypePicker(false)} />
            <Text style={styles.modalTitle}>Select Bug Type</Text>
            <View style={styles.modalHeaderSpacer} />
          </View>
          <ScrollView style={styles.modalContent}>
            {Object.values(BUG_TYPE_OPTIONS).map(option => (
              <TouchableOpacity
                key={option}
                style={styles.modalOption}
                onPress={() => {
                  setBugType(option)
                  setShowBugTypePicker(false)
                }}
              >
                <Text style={styles.modalOptionText}>{option}</Text>
                {bugType === option && (
                  <Icon
                    name="general.check"
                    style={styles.modalCheckmark}
                    accessibilityElementsHidden
                  />
                )}
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>
      </SafeAreaModal>

      <View style={styles.textInputContainer}>
        <Text style={styles.fieldLabel}>
          What were you trying to do when you encountered the bug?{' '}
          <Text style={styles.required}>*</Text>
        </Text>
        <TextInput
          style={styles.textInput}
          multiline
          placeholder="Description"
          value={whatWereDoing}
          onChangeText={setWhatWereDoing}
          maxLength={MAX_DESCRIPTION_LENGTH}
        />
        {whatWereDoing.length >= MAX_DESCRIPTION_LENGTH - 100 && (
          <Text variant="footnote">
            {whatWereDoing.length}/{MAX_DESCRIPTION_LENGTH}
          </Text>
        )}
      </View>

      <View style={styles.textInputContainer}>
        <Text style={styles.fieldLabel}>
          What did you expect to happen? Please describe what actually happened.{' '}
          <Text style={styles.required}>*</Text>
        </Text>
        <TextInput
          style={styles.textInput}
          multiline
          placeholder="Description"
          value={whatExpected}
          onChangeText={setWhatExpected}
          maxLength={MAX_DESCRIPTION_LENGTH}
        />
        {whatExpected.length >= MAX_DESCRIPTION_LENGTH - 100 && (
          <Text variant="footnote">
            {whatExpected.length}/{MAX_DESCRIPTION_LENGTH}
          </Text>
        )}
      </View>

      <View style={styles.attachmentSection}>
        <View style={styles.attachmentHeader}>
          <Text style={styles.attachmentLabel}>
            Attachment <Text style={styles.subLabel}>(optional)</Text>
          </Text>
          {uploading && <Spinner />}
        </View>
        {uploadError && <Text style={styles.attachmentErrorText}>{uploadError}</Text>}
        {attachment ? (
          <View style={styles.attachmentPreviewContainer}>
            {isImageAttachment ? (
              <ImageAttachmentPreview
                uri={imagePreviewURI}
                fileName={attachment.name}
                onRemovePress={handleRemoveAttachment}
              />
            ) : (
              <VideoAttachmentPreview
                name={attachment.name}
                onRemovePress={handleRemoveAttachment}
              />
            )}
          </View>
        ) : (
          <Button
            title="Attach a screenshot or recording"
            accessibilityHint="Opens your device's image gallery"
            iconNameLeft="general.paperclip"
            onPress={pickImage}
            size="sm"
            variant="outline"
            style={styles.attachButton}
            disabled={uploading || Boolean(attachment)}
          />
        )}
        <Text variant="footnote">
          Screenshots and screen recordings help us reproduce and fix issues faster.{' '}
          <TextInlineButton
            accessibilityRole="link"
            variant="footnote"
            onPress={() => Linking.openURL(VIDEO_RECORDING_HELP_URL)}
          >
            How to record your screen
          </TextInlineButton>
        </Text>
      </View>

      <View style={styles.footer}>
        <Text variant="footnote">
          For details on how we process your data and ensure its security, please refer to our{' '}
          <TextInlineButton
            accessibilityRole="link"
            variant="footnote"
            onPress={() => Linking.openURL('https://www.planningcenter.com/privacy')}
          >
            Privacy Policy
          </TextInlineButton>
          .
        </Text>
      </View>
    </KeyboardScrollView>
  )
}

const VIDEO_RECORDING_HELP_URL = Platform.select({
  android: 'https://support.google.com/android/answer/9075928?hl=en',
  default: 'https://support.apple.com/en-us/102653',
})

const generateBugReportDescription = (
  bugType: BUG_TYPE_OPTIONS,
  whatWereDoing: string,
  whatExpected: string
) => {
  return `${whatWereDoing.substring(0, 100)}

  ## What kind of bug did you experience?
${bugType}

## What were you trying to do when you encountered the bug?
${whatWereDoing}

## What did you expect to happen? What actually happened?
${whatExpected}
`
}

const useStyles = () => {
  const { bottom } = useSafeAreaInsets()
  const { colors } = useTheme()
  return StyleSheet.create({
    container: {
      padding: 16,
      paddingBottom: 16 + bottom,
      gap: 24,
    },
    fullHeight: {
      flex: 1,
    },
    description: {
      color: colors.textColorDefaultSecondary,
    },
    textInputContainer: {
      gap: 8,
    },
    fieldLabel: {
      fontSize: 16,
      fontWeight: platformFontWeightBold,
      color: colors.textColorDefaultPrimary,
    },
    required: {
      color: colors.statusErrorText,
    },
    pickerButton: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      borderWidth: 1,
      borderColor: colors.borderColorDefaultBase,
      borderRadius: 8,
      paddingHorizontal: 16,
      paddingVertical: 12,
      backgroundColor: colors.surfaceColor100,
      minHeight: 48,
    },
    pickerText: {
      fontSize: 16,
      color: colors.textColorDefaultPrimary,
      flex: 1,
    },
    pickerPlaceholder: {
      color: colors.textColorDefaultSecondary,
    },
    pickerArrow: {
      fontSize: 12,
      color: colors.iconColorDefaultSecondary,
      marginLeft: 8,
    },
    modalContainer: {
      flex: 1,
      backgroundColor: colors.surfaceColor100,
    },
    modalHeader: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: 16,
      borderBottomWidth: 1,
      borderBottomColor: colors.borderColorDefaultBase,
    },
    modalTitle: {
      fontSize: 18,
      fontWeight: platformFontWeightBold,
      color: colors.textColorDefaultPrimary,
    },
    modalHeaderSpacer: {
      width: 50, // Same width as cancel button to center title
    },
    modalContent: {
      flex: 1,
    },
    modalOption: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingHorizontal: 16,
      paddingVertical: 16,
      borderBottomWidth: 1,
      borderBottomColor: colors.borderColorDefaultBase,
    },
    modalOptionText: {
      fontSize: 16,
      color: colors.textColorDefaultPrimary,
      flex: 1,
    },
    modalCheckmark: {
      fontSize: 16,
      color: colors.statusSuccessIcon,
    },
    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,
    },
    attachmentSection: {
      gap: 8,
    },
    attachmentHeader: {
      flexDirection: 'row',
      gap: 4,
      alignItems: 'center',
    },
    attachmentLabel: { fontWeight: platformFontWeightBold },
    subLabel: { fontWeight: 'normal', color: colors.textColorDefaultSecondary },
    attachmentPreviewContainer: {
      gap: 4,
    },
    attachmentErrorText: {
      color: colors.statusErrorText,
    },
    attachButton: {
      alignSelf: 'flex-start',
    },
    footer: { gap: 8 },
    successIcon: {
      color: colors.statusSuccessIcon,
      fontSize: 48,
    },
    successTitle: {
      fontSize: 24,
      marginBottom: 4,
    },
    successSubtitle: {
      fontSize: 16,
      marginBottom: 4,
    },
  })
}