import {useEffect} from 'react'
import {Linking, View} from 'react-native'
import * as Notification from 'expo-notifications'
import {Trans, useLingui} from '@lingui/react/macro'
import {useQuery, useQueryClient} from '@tanstack/react-query'

import {useAppState} from '#/lib/appState'
import {
  type AllNavigatorParams,
  type NativeStackScreenProps,
} from '#/lib/routes/types'
import {
  useChatNotificationSettingsQuery,
  useNotificationSettingsQuery,
} from '#/state/queries/notifications/settings'
import {atoms as a} from '#/alf'
import {Admonition} from '#/components/Admonition'
import * as Dialog from '#/components/Dialog'
import {NotificationSettingsDialog} from '#/components/dialogs/NotificationSettingsDialog'
import {At_Stroke2_Corner2_Rounded as AtIcon} from '#/components/icons/At'
import {BellRinging_Stroke2_Corner0_Rounded as BellRingingIcon} from '#/components/icons/BellRinging'
import {Bubble_Stroke2_Corner2_Rounded as BubbleIcon} from '#/components/icons/Bubble'
import {Envelope_Stroke2_Corner2_Rounded as EnvelopeIcon} from '#/components/icons/Envelope'
import {Haptic_Stroke2_Corner2_Rounded as HapticIcon} from '#/components/icons/Haptic'
import {
  Heart2_Stroke2_Corner0_Rounded as HeartIcon,
  LikeRepost_Stroke2_Corner2_Rounded as LikeRepostIcon,
} from '#/components/icons/Heart2'
import {Message_Stroke2_Corner0_Rounded as MessageIcon} from '#/components/icons/Message'
import {PersonPlus_Stroke2_Corner2_Rounded as PersonPlusIcon} from '#/components/icons/Person'
import {CloseQuote_Stroke2_Corner0_Rounded as CloseQuoteIcon} from '#/components/icons/Quote'
import {
  Repost_Stroke2_Corner2_Rounded as RepostIcon,
  RepostRepost_Stroke2_Corner2_Rounded as RepostRepostIcon,
} from '#/components/icons/Repost'
import {Shapes_Stroke2_Corner0_Rounded as ShapesIcon} from '#/components/icons/Shapes'
import * as Layout from '#/components/Layout'
import {IS_ANDROID, IS_IOS, IS_WEB} from '#/env'
import * as SettingsList from '../components/SettingsList'
import {ChatNotificationDialogs} from './components/ChatNotificationDialogs'
import {ItemTextWithSubtitle} from './components/ItemTextWithSubtitle'
import {SettingPreview} from './components/SettingPreview'

const RQKEY = ['notification-permissions']

type Props = NativeStackScreenProps<AllNavigatorParams, 'NotificationSettings'>
export function NotificationSettingsScreen({}: Props) {
  const {t: l} = useLingui()
  const queryClient = useQueryClient()
  const {data: settings, isError} = useNotificationSettingsQuery()
  const {data: chatSettings, isError: chatError} =
    useChatNotificationSettingsQuery()

  const likeDialogControl = Dialog.useDialogControl()
  const followDialogControl = Dialog.useDialogControl()
  const replyDialogControl = Dialog.useDialogControl()
  const mentionDialogControl = Dialog.useDialogControl()
  const quoteDialogControl = Dialog.useDialogControl()
  const repostDialogControl = Dialog.useDialogControl()
  const activityDialogControl = Dialog.useDialogControl()
  const likeRepostDialogControl = Dialog.useDialogControl()
  const repostRepostDialogControl = Dialog.useDialogControl()
  const chatDialogControl = Dialog.useDialogControl()
  const chatRequestDialogControl = Dialog.useDialogControl()
  const miscDialogControl = Dialog.useDialogControl()

  const {data: permissions, refetch} = useQuery({
    queryKey: RQKEY,
    queryFn: async () => {
      if (IS_WEB) return null
      return await Notification.getPermissionsAsync()
    },
  })

  const appState = useAppState()
  useEffect(() => {
    if (appState === 'active') {
      void refetch()
    }
  }, [appState, refetch])

  const onRequestPermissions = async () => {
    if (IS_WEB) return
    if (permissions?.canAskAgain) {
      const response = await Notification.requestPermissionsAsync({
        ios: {
          /*
           * These default to true only when no argument is passed, so set them
           * explicitly to preserve behavior alongside
           * provideAppNotificationSettings.
           */
          allowAlert: true,
          allowBadge: true,
          allowSound: true,
          provideAppNotificationSettings: true,
        },
      })
      queryClient.setQueryData(RQKEY, response)
    } else {
      if (IS_ANDROID) {
        try {
          await Linking.sendIntent(
            'android.settings.APP_NOTIFICATION_SETTINGS',
            [
              {
                key: 'android.provider.extra.APP_PACKAGE',
                value: 'xyz.blueskyweb.app',
              },
            ],
          )
        } catch {
          void Linking.openSettings()
        }
      } else if (IS_IOS) {
        void Linking.openSettings()
      }
    }
  }

  return (
    <Layout.Screen>
      <Layout.Header.Outer>
        <Layout.Header.BackButton />
        <Layout.Header.Content>
          <Layout.Header.TitleText>
            <Trans>Notifications</Trans>
          </Layout.Header.TitleText>
        </Layout.Header.Content>
        <Layout.Header.Slot />
      </Layout.Header.Outer>
      <Layout.Content>
        <SettingsList.Container>
          {permissions && !permissions.granted && (
            <>
              <SettingsList.PressableItem
                label={l`Enable push notifications`}
                onPress={() => void onRequestPermissions()}>
                <SettingsList.ItemIcon icon={HapticIcon} />
                <SettingsList.ItemText>
                  <Trans>Enable push notifications</Trans>
                </SettingsList.ItemText>
              </SettingsList.PressableItem>
              <SettingsList.Divider />
            </>
          )}
          {isError && (
            <View style={[a.px_lg, a.pb_md]}>
              <Admonition type="error">
                <Trans>Failed to load notification settings.</Trans>
              </Admonition>
            </View>
          )}
          <View style={[a.gap_sm]}>
            <SettingsList.PressableItem
              label={l`Settings for like notifications`}
              onPress={likeDialogControl.open}
              contentContainerStyle={[a.align_start]}>
              <SettingsList.ItemIcon icon={HeartIcon} />
              <ItemTextWithSubtitle
                titleText={<Trans>Likes</Trans>}
                subtitleText={<SettingPreview preference={settings?.like} />}
                showSkeleton={!settings}
              />
            </SettingsList.PressableItem>
            <SettingsList.PressableItem
              label={l`Settings for new follower notifications`}
              onPress={followDialogControl.open}
              contentContainerStyle={[a.align_start]}>
              <SettingsList.ItemIcon icon={PersonPlusIcon} />
              <ItemTextWithSubtitle
                titleText={<Trans>New followers</Trans>}
                subtitleText={<SettingPreview preference={settings?.follow} />}
                showSkeleton={!settings}
              />
            </SettingsList.PressableItem>
            <SettingsList.PressableItem
              label={l`Settings for reply notifications`}
              onPress={replyDialogControl.open}
              contentContainerStyle={[a.align_start]}>
              <SettingsList.ItemIcon icon={BubbleIcon} />
              <ItemTextWithSubtitle
                titleText={<Trans>Replies</Trans>}
                subtitleText={<SettingPreview preference={settings?.reply} />}
                showSkeleton={!settings}
              />
            </SettingsList.PressableItem>
            <SettingsList.PressableItem
              label={l`Settings for mention notifications`}
              onPress={mentionDialogControl.open}
              contentContainerStyle={[a.align_start]}>
              <SettingsList.ItemIcon icon={AtIcon} />
              <ItemTextWithSubtitle
                titleText={<Trans>Mentions</Trans>}
                subtitleText={<SettingPreview preference={settings?.mention} />}
                showSkeleton={!settings}
              />
            </SettingsList.PressableItem>
            <SettingsList.PressableItem
              label={l`Settings for quote notifications`}
              onPress={quoteDialogControl.open}
              contentContainerStyle={[a.align_start]}>
              <SettingsList.ItemIcon icon={CloseQuoteIcon} />
              <ItemTextWithSubtitle
                titleText={<Trans>Quotes</Trans>}
                subtitleText={<SettingPreview preference={settings?.quote} />}
                showSkeleton={!settings}
              />
            </SettingsList.PressableItem>
            <SettingsList.PressableItem
              label={l`Settings for repost notifications`}
              onPress={repostDialogControl.open}
              contentContainerStyle={[a.align_start]}>
              <SettingsList.ItemIcon icon={RepostIcon} />
              <ItemTextWithSubtitle
                titleText={<Trans>Reposts</Trans>}
                subtitleText={<SettingPreview preference={settings?.repost} />}
                showSkeleton={!settings}
              />
            </SettingsList.PressableItem>
            <SettingsList.PressableItem
              label={l`Settings for activity from others`}
              onPress={activityDialogControl.open}
              contentContainerStyle={[a.align_start]}>
              <SettingsList.ItemIcon icon={BellRingingIcon} />
              <ItemTextWithSubtitle
                titleText={<Trans>Activity from others</Trans>}
                subtitleText={
                  <SettingPreview preference={settings?.subscribedPost} />
                }
                showSkeleton={!settings}
              />
            </SettingsList.PressableItem>
            <SettingsList.PressableItem
              label={l`Settings for notifications for likes of your reposts`}
              onPress={likeRepostDialogControl.open}
              contentContainerStyle={[a.align_start]}>
              <SettingsList.ItemIcon icon={LikeRepostIcon} />
              <ItemTextWithSubtitle
                titleText={<Trans>Likes of your reposts</Trans>}
                subtitleText={
                  <SettingPreview preference={settings?.likeViaRepost} />
                }
                showSkeleton={!settings}
              />
            </SettingsList.PressableItem>
            <SettingsList.PressableItem
              label={l`Settings for notifications for reposts of your reposts`}
              onPress={repostRepostDialogControl.open}
              contentContainerStyle={[a.align_start]}>
              <SettingsList.ItemIcon icon={RepostRepostIcon} />
              <ItemTextWithSubtitle
                titleText={<Trans>Reposts of your reposts</Trans>}
                subtitleText={
                  <SettingPreview preference={settings?.repostViaRepost} />
                }
                showSkeleton={!settings}
              />
            </SettingsList.PressableItem>
            <SettingsList.PressableItem
              label={l`Settings for notifications for new messages`}
              onPress={chatDialogControl.open}
              contentContainerStyle={[a.align_start]}>
              <SettingsList.ItemIcon icon={MessageIcon} />
              <ItemTextWithSubtitle
                titleText={<Trans>New messages</Trans>}
                subtitleText={
                  chatError ? (
                    <Trans>Failed to load notification settings.</Trans>
                  ) : (
                    <SettingPreview preference={chatSettings?.chat} />
                  )
                }
                showSkeleton={!chatSettings && !chatError}
              />
            </SettingsList.PressableItem>
            <SettingsList.PressableItem
              label={l`Settings for notifications for new message requests`}
              onPress={chatRequestDialogControl.open}
              contentContainerStyle={[a.align_start]}>
              <SettingsList.ItemIcon icon={EnvelopeIcon} />
              <ItemTextWithSubtitle
                titleText={<Trans>New message requests</Trans>}
                subtitleText={
                  chatError ? (
                    <Trans>Failed to load notification settings.</Trans>
                  ) : (
                    <SettingPreview preference={chatSettings?.chatRequest} />
                  )
                }
                showSkeleton={!chatSettings && !chatError}
              />
            </SettingsList.PressableItem>
            <SettingsList.PressableItem
              label={l`Settings for notifications for everything else`}
              onPress={miscDialogControl.open}
              contentContainerStyle={[a.align_start]}>
              <SettingsList.ItemIcon icon={ShapesIcon} />
              <ItemTextWithSubtitle
                titleText={<Trans>Everything else</Trans>}
                // technically a bundle of several settings, but since they're set together
                // and are most likely in sync we'll just show the state of one of them
                subtitleText={
                  <SettingPreview preference={settings?.starterpackJoined} />
                }
                showSkeleton={!settings}
              />
            </SettingsList.PressableItem>
          </View>
        </SettingsList.Container>
      </Layout.Content>
      <NotificationSettingsDialog
        control={likeDialogControl}
        name="like"
        icon={HeartIcon}
        titleText={<Trans>Likes</Trans>}
        subtitleText={
          <Trans>Get notifications when people like your posts.</Trans>
        }
      />
      <NotificationSettingsDialog
        control={followDialogControl}
        name="follow"
        icon={PersonPlusIcon}
        titleText={<Trans>New followers</Trans>}
        subtitleText={<Trans>Get notifications when people follow you.</Trans>}
      />
      <NotificationSettingsDialog
        control={replyDialogControl}
        name="reply"
        icon={BubbleIcon}
        titleText={<Trans>Replies</Trans>}
        subtitleText={
          <Trans>Get notifications when people reply to your posts.</Trans>
        }
      />
      <NotificationSettingsDialog
        control={mentionDialogControl}
        name="mention"
        icon={AtIcon}
        titleText={<Trans>Mentions</Trans>}
        subtitleText={<Trans>Get notifications when people mention you.</Trans>}
      />
      <NotificationSettingsDialog
        control={quoteDialogControl}
        name="quote"
        icon={CloseQuoteIcon}
        titleText={<Trans>Quotes</Trans>}
        subtitleText={
          <Trans>Get notifications when people quote your posts.</Trans>
        }
      />
      <NotificationSettingsDialog
        control={repostDialogControl}
        name="repost"
        icon={RepostIcon}
        titleText={<Trans>Reposts</Trans>}
        subtitleText={
          <Trans>Get notifications when people repost your posts.</Trans>
        }
      />
      <NotificationSettingsDialog
        control={activityDialogControl}
        name="subscribedPost"
        icon={BellRingingIcon}
        titleText={<Trans>Activity from others</Trans>}
        subtitleText={
          <Trans>
            Get notifications when there's activity on posts you're subscribed
            to.
          </Trans>
        }
        allowDisableInApp={false}
      />
      <NotificationSettingsDialog
        control={likeRepostDialogControl}
        name="likeViaRepost"
        icon={LikeRepostIcon}
        titleText={<Trans>Likes of your reposts</Trans>}
        subtitleText={
          <Trans>Get notifications when people like your reposts.</Trans>
        }
      />
      <NotificationSettingsDialog
        control={repostRepostDialogControl}
        name="repostViaRepost"
        icon={RepostRepostIcon}
        titleText={<Trans>Reposts of your reposts</Trans>}
        subtitleText={
          <Trans>Get notifications when people repost your reposts.</Trans>
        }
      />
      <ChatNotificationDialogs
        chatControl={chatDialogControl}
        chatRequestControl={chatRequestDialogControl}
      />
      <NotificationSettingsDialog
        control={miscDialogControl}
        name="starterpackJoined"
        syncOthers={['verified', 'unverified']}
        icon={ShapesIcon}
        titleText={<Trans>Everything else</Trans>}
        subtitleText={
          <Trans>
            Get notifications for starter pack joins, verification, and other
            activity.
          </Trans>
        }
        allowDisableInApp={false}
      />
    </Layout.Screen>
  )
}