import { PlatformPressable } from '@react-navigation/elements'
import { StackActions, useNavigation } from '@react-navigation/native'
import { RefObject, useRef, useState } from 'react'
import { FlatList, Pressable, StyleSheet, TextInput, View } from 'react-native'
import { Avatar, Badge, Banner, Icon, KeyboardView, Spinner, Text } from '../../components'
import { ActionButton } from '../../components/display/action_button'
import { AutoFocusAwareTextInput } from '../../components/display/text_input'
import { ComponentErrorBoundary } from '../../components/page/component_error_boundary'
import { useTheme } from '../../hooks'
import { useDirectMessageAffiliations } from '../../hooks/direct_messages/use_direct_message_affiliations'
import { useDirectMessageCandidates } from '../../hooks/direct_messages/use_direct_message_candidates'
import { useDirectMessageConversationValidate } from '../../hooks/direct_messages/use_direct_message_conversation_validate'
import { useFindOrCreateDirectMessageConversation } from '../../hooks/direct_messages/use_find_or_create_direct_message_conversation'
import { useDebouncedSearchTerm } from '../../hooks/use_debounced_search_term'
import { availableFeatures, useFeatures } from '../../hooks/use_features'
import { DirectMessageCandidateResource } from '../../types/resources/direct_message_candidate'
import { ResultsHeading } from './components/results_heading'
import { ConversationSelectRecipientsScreenProps } from './types/screen_props'

const MAX_RECIPIENTS = 9

export function ConversationSelectDirectMessageRecipientsScreen({
  route,
}: ConversationSelectRecipientsScreenProps) {
  const { preselected_people = [] } = route.params ?? {}
  const styles = useStyles()
  const navigation = useNavigation()
  const { featureEnabled } = useFeatures()
  const [searchTerm, setSearchTerm] = useState('')
  const debouncedTerm = useDebouncedSearchTerm(searchTerm)
  const [selectedPeople, setSelectedPeople] = useState<Map<string, DirectMessageCandidateResource>>(
    () =>
      new Map(
        preselected_people.map(person => [
          person.id,
          {
            ...person,
            type: 'DirectMessageCandidate' as const,
            groups: [],
            teams: [],
            under_18: false,
            directMessagesDisabled: false,
          },
        ])
      )
  )
  const searchInputRef = useRef<TextInput>(null)

  const selectPerson = (person: DirectMessageCandidateResource) => {
    if (selectedPeople.size >= MAX_RECIPIENTS) return
    setSelectedPeople(prev => new Map(prev).set(person.id, person))
    setSearchTerm('')
    // Controlled TextInput can retain stale native text on iOS when the value
    // is cleared while it stays focused (keyboardShouldPersistTaps keeps it
    // focused through the tap) — clear() forces the native view to sync. Gated
    // so EAP reporters can toggle the fix on their devices to confirm it.
    if (featureEnabled(availableFeatures.dm_search_clear_fix)) {
      searchInputRef.current?.clear()
    }
  }

  const removePerson = (id: string) => {
    setSelectedPeople(prev => {
      const next = new Map(prev)
      next.delete(id)
      return next
    })
  }

  const recipientIds = [...selectedPeople.keys()]
  const { warnings, validationPending } = useDirectMessageConversationValidate({ recipientIds })

  const handleSuccess = (conversationId: number) => {
    navigation
      .getParent()
      ?.dispatch(StackActions.replace('Conversation', { conversation_id: conversationId }))
  }

  const { findOrCreateConversation, directMessageExists, isFinding, isError } =
    useFindOrCreateDirectMessageConversation({ recipientIds, onSuccess: handleSuccess })

  const buttonText = (() => {
    if (selectedPeople.size === 0) return 'Start conversation'
    if (selectedPeople.size === 1) {
      const firstName = selectedPeople.values().next().value!.name.split(' ')[0]
      return directMessageExists ? `Open message with ${firstName}` : `Message ${firstName}`
    }
    return directMessageExists
      ? `Open direct message (${selectedPeople.size})`
      : `Start direct message (${selectedPeople.size})`
  })()

  return (
    <KeyboardView>
      {isError && (
        <Banner
          appearance="error"
          description="There was an issue starting the conversation. Please try again."
          style={styles.errorBanner}
        />
      )}
      <ToField
        selectedPeople={selectedPeople}
        searchTerm={searchTerm}
        onSearchChange={setSearchTerm}
        onRemove={removePerson}
        onClear={() => setSelectedPeople(new Map())}
        searchInputRef={searchInputRef}
      />
      <View style={styles.candidateResultsContainer}>
        <ComponentErrorBoundary
          key={debouncedTerm}
          fallback={
            <Banner
              appearance="error"
              description="Couldn't load people right now. Try again."
              style={styles.errorBanner}
            />
          }
        >
          <CandidateResults
            term={debouncedTerm}
            selectedPeople={selectedPeople}
            onSelect={selectPerson}
          />
        </ComponentErrorBoundary>
      </View>
      <ActionButton
        title={buttonText}
        disabled={
          selectedPeople.size === 0 || validationPending || warnings.length > 0 || isFinding
        }
        loading={validationPending || isFinding}
        onPress={() => findOrCreateConversation(recipientIds)}
        warnings={warnings}
      />
    </KeyboardView>
  )
}

function ToField({
  selectedPeople,
  searchTerm,
  onSearchChange,
  onRemove,
  onClear,
  searchInputRef,
}: {
  selectedPeople: Map<string, DirectMessageCandidateResource>
  searchTerm: string
  onSearchChange: (term: string) => void
  onRemove: (id: string) => void
  onClear: () => void
  searchInputRef: RefObject<TextInput | null>
}) {
  const styles = useStyles()
  const { colors } = useTheme()
  const hasSelections = selectedPeople.size > 0

  return (
    <View style={styles.toField}>
      <View style={styles.toFieldHeader}>
        <Text style={styles.toLabel}>To</Text>
        {hasSelections && (
          <Pressable onPress={onClear} hitSlop={8}>
            <Text style={styles.clearButton}>Clear</Text>
          </Pressable>
        )}
      </View>
      <View style={styles.toInputArea}>
        {[...selectedPeople.values()].map(person => (
          <PersonChip key={person.id} person={person} onRemove={onRemove} />
        ))}
        <AutoFocusAwareTextInput
          autoFocus
          inputRef={searchInputRef}
          placeholder="Search"
          placeholderTextColor={colors.textColorDefaultPlaceholder}
          value={searchTerm}
          onChangeText={onSearchChange}
          style={styles.toTextInput}
          returnKeyType="search"
        />
      </View>
    </View>
  )
}

function PersonChip({
  person,
  onRemove,
}: {
  person: DirectMessageCandidateResource
  onRemove: (id: string) => void
}) {
  const styles = useStyles()

  return (
    <View style={styles.chip}>
      <Avatar sourceUri={person.avatar} size="sm" showFallback={!person.avatar} />
      <Text style={styles.chipName}>{person.name}</Text>
      <Pressable
        onPress={() => onRemove(person.id)}
        hitSlop={8}
        accessibilityLabel={`Remove ${person.name}`}
      >
        <Icon name="general.x" size={12} style={styles.chipRemoveIcon} />
      </Pressable>
    </View>
  )
}

function CandidateResults({
  term,
  selectedPeople,
  onSelect,
}: {
  term: string
  selectedPeople: Map<string, DirectMessageCandidateResource>
  onSelect: (candidate: DirectMessageCandidateResource) => void
}) {
  const styles = useStyles()
  const { data, isFetching } = useDirectMessageCandidates(term)
  const { groups, teams, resultsDescription } = useDirectMessageAffiliations()

  if (term.length < 1) {
    if (selectedPeople.size > 0) return null

    return (
      <View style={styles.emptyState}>
        <Icon name="churchCenter.people" size={40} style={styles.emptyStateIcon} />
        <Text style={styles.emptyStateTitle}>Search for people to direct message</Text>
        <Text variant="secondary" style={styles.emptyStateSubtitle}>
          Start a conversation with people in your groups and teams.
        </Text>
      </View>
    )
  }

  const isAtLimit = selectedPeople.size >= MAX_RECIPIENTS

  if (isAtLimit) {
    return (
      <View style={styles.emptyState}>
        <Text variant="secondary" style={styles.emptyStateSubtitle}>
          You can add up to {MAX_RECIPIENTS} people to a direct message.
        </Text>
      </View>
    )
  }

  const unselectedCandidates = (data?.data ?? []).filter(c => !selectedPeople.has(c.id))
  const hasTruncated = (data?.meta.totalCount ?? 0) > (data?.data.length ?? 0)

  if (isFetching && unselectedCandidates.length === 0) {
    return (
      <View style={styles.emptyState}>
        <Spinner />
      </View>
    )
  }

  if (!isFetching && unselectedCandidates.length === 0) {
    return (
      <View style={styles.emptyState}>
        <Icon name="general.search" size={32} style={styles.emptyStateIcon} />
        <Text style={styles.emptyStateTitle}>No matches for "{term}"</Text>
        <Text variant="secondary" style={styles.emptyStateSubtitle}>
          Try a different name, or check that you share a group or team with them.
        </Text>
      </View>
    )
  }

  return (
    <CandidateList
      candidates={unselectedCandidates}
      hasTruncated={hasTruncated}
      description={resultsDescription}
      groups={groups}
      teams={teams}
      onSelect={onSelect}
    />
  )
}

function candidateBadges(candidate: DirectMessageCandidateResource) {
  const badges = []
  if (candidate.directMessagesDisabled) badges.push({ title: 'DMs off' })
  if (candidate.under_18) badges.push({ title: 'Under 18' })
  return badges
}

function candidateAffiliationNames(
  candidate: DirectMessageCandidateResource,
  groups: Map<number, string>,
  teams: Map<number, string>
) {
  return [
    ...candidate.groups.flatMap(id => {
      const name = groups.get(id)
      return name ? [name] : []
    }),
    ...candidate.teams.flatMap(id => {
      const name = teams.get(id)
      return name ? [name] : []
    }),
  ]
}

function CandidateList({
  candidates,
  hasTruncated,
  description,
  groups,
  teams,
  onSelect,
}: {
  candidates: DirectMessageCandidateResource[]
  hasTruncated: boolean
  description: string | null
  groups: Map<number, string>
  teams: Map<number, string>
  onSelect: (candidate: DirectMessageCandidateResource) => void
}) {
  const styles = useStyles()
  const available = candidates.filter(c => !c.directMessagesDisabled)
  const dmDisabled = candidates.filter(c => c.directMessagesDisabled)

  return (
    <FlatList<DirectMessageCandidateResource>
      data={available}
      keyboardShouldPersistTaps="handled"
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <CandidateItem
          candidate={item}
          badges={candidateBadges(item)}
          affiliationNames={candidateAffiliationNames(item, groups, teams)}
          onSelect={() => onSelect(item)}
        />
      )}
      ListHeaderComponent={<ResultsHeading description={description} />}
      ListFooterComponent={
        <>
          {dmDisabled.length > 0 && (
            <>
              <View style={styles.unavailableHeader}>
                <Text variant="secondary" style={styles.unavailableLabel}>
                  Unavailable for direct messages
                </Text>
              </View>
              {dmDisabled.map(candidate => (
                <CandidateItem
                  key={candidate.id}
                  candidate={candidate}
                  badges={candidateBadges(candidate)}
                  affiliationNames={candidateAffiliationNames(candidate, groups, teams)}
                  disabled
                />
              ))}
            </>
          )}
          {hasTruncated && (
            <View style={styles.truncatedFooter}>
              <Text variant="secondary" style={styles.truncatedText}>
                Keep typing to narrow your results.
              </Text>
            </View>
          )}
        </>
      }
    />
  )
}

function CandidateItem({
  candidate,
  badges,
  affiliationNames,
  onSelect,
  disabled = false,
}: {
  candidate: DirectMessageCandidateResource
  badges: { title: string }[]
  affiliationNames: string[]
  onSelect?: () => void
  disabled?: boolean
}) {
  const styles = useStyles()

  return (
    <PlatformPressable
      onPress={disabled ? undefined : onSelect}
      accessibilityRole="button"
      accessibilityLabel={`Select ${candidate.name}`}
      accessibilityState={{ disabled }}
    >
      <View style={[styles.row, disabled && styles.candidateDisabled]}>
        <Avatar sourceUri={candidate.avatar} size="lg" showFallback={!candidate.avatar} />
        <View style={styles.rowInfo}>
          <Text style={styles.rowName}>{candidate.name}</Text>
          {affiliationNames.length > 0 && (
            <Text style={styles.rowAffiliations} numberOfLines={2}>
              {affiliationNames.join(', ')}
            </Text>
          )}
          {badges.length > 0 && (
            <View style={styles.badgeRow}>
              {badges.map(({ title }) => (
                <Badge key={title} label={title} />
              ))}
            </View>
          )}
        </View>
      </View>
    </PlatformPressable>
  )
}

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

  return StyleSheet.create({
    candidateResultsContainer: {
      flex: 1,
    },
    toField: {
      paddingHorizontal: 16,
      paddingTop: 16,
      paddingBottom: 8,
    },
    toFieldHeader: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginBottom: 8,
    },
    toLabel: {
      fontWeight: '600',
      color: colors.textColorDefaultSecondary,
    },
    clearButton: {
      color: colors.interaction,
    },
    toInputArea: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      alignItems: 'center',
      gap: 6,
      borderWidth: 1,
      borderColor: colors.borderColorDefaultBase,
      borderRadius: 8,
      paddingHorizontal: 10,
      paddingVertical: 8,
    },
    toTextInput: {
      flex: 1,
      minWidth: 80,
      color: colors.textColorDefaultPrimary,
      fontSize: 16,
      paddingVertical: 2,
    },
    chip: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 4,
      borderWidth: 1,
      borderColor: colors.borderColorDefaultBase,
      borderRadius: 100,
      paddingLeft: 4,
      paddingRight: 6,
      paddingVertical: 3,
    },
    chipName: {
      fontSize: 14,
    },
    chipRemoveIcon: {
      color: colors.iconColorDefaultSecondary,
    },
    errorBanner: {
      margin: 16,
    },
    emptyState: {
      alignItems: 'center',
      paddingTop: 32,
      paddingHorizontal: 32,
      gap: 8,
    },
    emptyStateIcon: {
      color: colors.iconColorDefaultSecondary,
      marginBottom: 4,
    },
    emptyStateTitle: {
      fontWeight: '600',
      textAlign: 'center',
    },
    emptyStateSubtitle: {
      textAlign: 'center',
      fontSize: 14,
    },
    row: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 12,
      paddingHorizontal: 16,
      paddingVertical: 12,
      borderBottomWidth: 1,
      borderColor: colors.borderColorDefaultDim,
    },
    rowInfo: {
      flex: 1,
      gap: 2,
    },
    rowName: {
      fontSize: 15,
      fontWeight: '500',
    },
    rowAffiliations: {
      fontSize: 12,
      color: colors.textColorDefaultSecondary,
    },
    badgeRow: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      gap: 4,
      marginTop: 4,
    },

    candidateDisabled: {
      opacity: 0.5,
    },
    unavailableHeader: {
      paddingHorizontal: 16,
      paddingTop: 16,
      paddingBottom: 8,
    },
    unavailableLabel: {
      fontSize: 13,
    },
    truncatedFooter: {
      paddingHorizontal: 16,
      paddingTop: 12,
      paddingBottom: 8,
    },
    truncatedText: {
      fontSize: 13,
      textAlign: 'center',
    },
  })
}