import { PlatformPressable } from '@react-navigation/elements'
import { StaticScreenProps, useNavigation } from '@react-navigation/native'
import { type ReactNode } from 'react'
import { FlatList, Platform, StyleSheet, View, type ViewProps, type ViewStyle } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { Badge, Heading, Icon, Text } from '../components'
import { useTheme } from '../hooks'
import { isDefined } from '../types'
import { chatTypeLabel } from '../utils'
import { useGroups } from './notification_settings/hooks/groups'
import { useChatTypes } from './preferred_app/hooks/use_chat_types'

// =========================================
// ====== Factory Constants & Types ========
// =========================================

enum SectionTypes {
  header,
  hidden,
  setting,
  view,
  link,
}

type SectionListData = Array<
  | DataItem<{ title: string }, SectionTypes.header>
  | DataItem<ViewProps, SectionTypes.view>
  | DataItem<SettingRowProps, SectionTypes.setting>
  | DataItem<LinkRowProps, SectionTypes.link>
  | DataItem<any, SectionTypes.hidden>
>

interface DataItem<T, TName extends SectionTypes> {
  type: TName
  data: T
  sectionOuterStyle?: ViewStyle
  sectionInnerStyle?: ViewStyle
  showBottomBorder?: boolean
}

// =================================
// ====== Components ===============
// =================================

export type NotificationSettingsScreenProps = StaticScreenProps<{}>

export function NotificationSettingsScreen({}: NotificationSettingsScreenProps) {
  const navigation = useNavigation()
  const styles = useStyles()
  const { data: chatTypes } = useChatTypes()
  const { data: groups } = useGroups()

  // Build section data
  const listData = [
    {
      type: SectionTypes.header,
      data: { title: 'Preferred app' },
      sectionInnerStyle: styles.sectionInnerHeader,
    },
    {
      type: SectionTypes.view,
      data: {
        children: (
          <Text variant="tertiary" style={styles.sectionDescription}>
            Choose which app receives each type of chat notification
          </Text>
        ),
      },
      showBottomBorder: true,
    },
    ...chatTypes.map(type => ({
      type: SectionTypes.link,
      data: {
        title: chatTypeLabel(type.title),
        rightLabel: type.preferredApp,
        onPress: () =>
          navigation.navigate('PreferredAppSelection', {
            chatTypeId: type.id,
          }),
      },
      sectionInnerStyle: { paddingVertical: 0 },
      showBottomBorder: true,
    })),
    {
      type: groups.length === 0 ? SectionTypes.hidden : SectionTypes.header,
      data: {
        title: 'Manage chat settings',
      },
      sectionInnerStyle: styles.sectionInnerHeader,
    },
    {
      type: groups.length === 0 ? SectionTypes.hidden : SectionTypes.view,
      data: {
        children: (
          <Text variant="tertiary" style={styles.sectionDescription}>
            Notification settings for all of your group, team and event related conversations
          </Text>
        ),
      },
      showBottomBorder: true,
    },
    ...groups.map(group => ({
      type: SectionTypes.link,
      data: {
        title: group.name,
        subtitle: group.myGroupMembership?.notificationLevelDescription,
        rightLabel: group.sourceType,
        onPress: () =>
          navigation.navigate('GroupNotificationSettings', {
            groupId: group.id,
            title: group.name || 'Group',
          }),
      },
      sectionInnerStyle: { paddingVertical: 0 },
      showBottomBorder: true,
    })),
  ].filter(item => item.type !== SectionTypes.hidden)

  const headerIndices = listData
    .map(({ type }, index) => (type === SectionTypes.header ? index : undefined))
    .filter(isDefined)

  return (
    <View style={styles.listContainer}>
      <FlatList
        data={listData as SectionListData}
        contentContainerStyle={styles.contentContainer}
        renderItem={({ item, index }) => {
          const [isStart, isEnd] = [
            index === 0 || headerIndices.includes(index),
            index === listData.length - 1 || headerIndices.includes(index + 1),
          ]

          switch (item.type) {
            case SectionTypes.header:
              return (
                <ListSection
                  isStart={isStart}
                  isEnd={isEnd}
                  showBottomBorder={item?.showBottomBorder}
                  outerStyle={item?.sectionOuterStyle}
                  innerStyle={item?.sectionInnerStyle}
                >
                  <Heading variant="h2">{item.data.title}</Heading>
                </ListSection>
              )
            case SectionTypes.setting:
              return (
                <ListSection
                  isStart={isStart}
                  isEnd={isEnd}
                  showBottomBorder={item?.showBottomBorder}
                  outerStyle={item?.sectionOuterStyle}
                  innerStyle={item?.sectionInnerStyle}
                >
                  <SettingRow {...item.data} />
                </ListSection>
              )
            case SectionTypes.view:
              return (
                <ListSection
                  isStart={isStart}
                  isEnd={isEnd}
                  showBottomBorder={item?.showBottomBorder}
                  outerStyle={item?.sectionOuterStyle}
                  innerStyle={item?.sectionInnerStyle}
                >
                  <View {...item.data} style={item.data.style} />
                </ListSection>
              )
            case SectionTypes.link:
              return (
                <ListSection
                  isStart={isStart}
                  isEnd={isEnd}
                  showBottomBorder={item?.showBottomBorder}
                  outerStyle={item?.sectionOuterStyle}
                  innerStyle={item?.sectionInnerStyle}
                >
                  <LinkRow {...item.data} />
                </ListSection>
              )
            case SectionTypes.hidden:
            default:
              return null
          }
        }}
      />
    </View>
  )
}

interface ListSectionProps {
  isStart?: boolean
  isEnd?: boolean
  showBottomBorder?: boolean
  outerStyle?: ViewStyle
  innerStyle?: ViewStyle
  children: ReactNode
}

function ListSection({
  isStart,
  isEnd,
  showBottomBorder,
  outerStyle,
  innerStyle,
  children,
}: ListSectionProps) {
  const styles = useStyles({ isStart, isEnd })
  const bottomBorder = showBottomBorder ? styles.sectionInnerBottomBorder : {}

  return (
    <View style={[styles.sectionOuterBase, outerStyle]}>
      <View style={[styles.sectionInnerBase, bottomBorder, innerStyle]}>{children}</View>
    </View>
  )
}

interface SettingRowProps {
  title: string
  style?: ViewStyle
  rightItem?: ReactNode
  rightLabel?: string
  rightItemStyle?: ViewStyle
}

function SettingRow({ title, style, rightLabel, rightItem, rightItemStyle = {} }: SettingRowProps) {
  const styles = useStyles()

  return (
    <View style={[styles.settingRow, style]}>
      <View style={styles.settingRowContent}>
        <Text variant="plain" style={styles.settingRowText}>
          {title}
        </Text>
        {Boolean(rightLabel) && <Text variant="footnote">{rightLabel}</Text>}
      </View>
      {Boolean(rightItem) && <View style={rightItemStyle}>{rightItem}</View>}
    </View>
  )
}

interface LinkRowProps {
  title: string
  subtitle?: string
  rightLabel: string
  onPress: () => void
}

function LinkRow({ title, subtitle, rightLabel, onPress }: LinkRowProps) {
  const styles = useLinkRowStyles()
  const isSourceType = rightLabel === 'Team' || rightLabel === 'Group' || rightLabel === 'PlanTeam'

  return (
    <PlatformPressable
      style={styles.row}
      onPress={onPress}
      accessibilityRole="link"
      accessibilityLabel={title}
      accessibilityHint={`Navigate to ${title} settings`}
    >
      <View style={styles.innerContainer}>
        <View style={styles.leftContent}>
          <Text style={styles.title} numberOfLines={2}>
            {title}
          </Text>
          {Boolean(subtitle) && <Text variant="tertiary">{subtitle}</Text>}
        </View>
        <View style={styles.rightContent}>
          {isSourceType ? (
            <Badge label={rightLabel} appearance="neutral" variant="meta" />
          ) : (
            <Text numberOfLines={1} style={styles.rightLabelText}>
              {rightLabel}
            </Text>
          )}
          {Platform.OS === 'ios' && (
            <Icon name="general.rightChevron" size={16} style={styles.icon} />
          )}
        </View>
      </View>
    </PlatformPressable>
  )
}

// =================================
// ====== Styles ===================
// =================================

const useStyles = ({}: { isStart?: boolean; isEnd?: boolean } = {}) => {
  const { colors } = useTheme()
  const { bottom } = useSafeAreaInsets()
  const headerBottomPadding = 0

  return StyleSheet.create({
    listContainer: {
      flex: 1,
    },
    contentContainer: {
      paddingBottom: bottom,
    },
    sectionOuterBase: {
      paddingLeft: 16,
    },
    sectionInnerBase: {
      paddingRight: 16,
      paddingVertical: 16,
    },
    sectionInnerHeader: {
      paddingTop: 24,
      paddingBottom: headerBottomPadding,
    },
    sectionInnerBottomBorder: {
      borderBottomColor: colors.borderColorDefaultBase,
      borderBottomWidth: 1,
    },
    sectionDescription: {
      color: colors.textColorDefaultSecondary,
    },
    settingRow: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      gap: 8,
    },
    settingRowContent: {
      flex: 1,
    },
    settingRowText: {
      lineHeight: 20,
    },
  })
}

const useLinkRowStyles = () => {
  const theme = useTheme()

  return StyleSheet.create({
    row: {
      paddingLeft: 0,
      paddingVertical: 16,
    },
    innerContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      gap: 12,
    },
    leftContent: {
      flex: 1,
      gap: 4,
    },
    rightContent: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 8,
    },
    title: {},
    rightLabelText: {
      color: theme.colors.textColorDefaultSecondary,
    },
    icon: {
      color: theme.colors.iconColorDefaultDisabled,
    },
  })
}