import {useCallback, useState} from 'react'
import {View} from 'react-native'
import {Image} from 'expo-image'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useQuery} from '@tanstack/react-query'

import {getLinkMeta} from '#/lib/link-meta/link-meta'
import {cleanError} from '#/lib/strings/errors'
import {toNiceDomain} from '#/lib/strings/url-helpers'
import {definitelyUrl} from '#/lib/strings/url-helpers'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useLiveNowConfig} from '#/state/service-config'
import {useAgent, useSession} from '#/state/session'
import {useTickEveryMinute} from '#/state/shell'
import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {atoms as a, ios, native, platform, useTheme, web} from '#/alf'
import {Admonition} from '#/components/Admonition'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import * as TextField from '#/components/forms/TextField'
import {CircleX_Stroke2_Corner0_Rounded as CircleXIcon} from '#/components/icons/CircleX'
import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe'
import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
import {Loader} from '#/components/Loader'
import * as ProfileCard from '#/components/ProfileCard'
import * as Select from '#/components/Select'
import {Text} from '#/components/Typography'
import type * as bsky from '#/types/bsky'
import {useUpsertLiveStatusMutation} from './queries'
import {displayDuration, useDebouncedValue} from './utils'

export function GoLiveDialog({
  control,
  profile,
}: {
  control: Dialog.DialogControlProps
  profile: bsky.profile.AnyProfileView
}) {
  return (
    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
      <Dialog.Handle />
      <DialogInner profile={profile} />
    </Dialog.Outer>
  )
}

// Possible durations: max 4 hours, 5 minute intervals
const DURATIONS = Array.from({length: (4 * 60) / 5}).map((_, i) => (i + 1) * 5)

function DialogInner({profile}: {profile: bsky.profile.AnyProfileView}) {
  const control = Dialog.useDialogContext()
  const {_, i18n} = useLingui()
  const t = useTheme()
  const agent = useAgent()
  const [liveLink, setLiveLink] = useState('')
  const [liveLinkError, setLiveLinkError] = useState('')
  const [imageLoadError, setImageLoadError] = useState(false)
  const [duration, setDuration] = useState(60)
  const moderationOpts = useModerationOpts()
  const tick = useTickEveryMinute()
  const liveNowConfig = useLiveNowConfig()
  const {currentAccount} = useSession()

  const config = liveNowConfig.find(cfg => cfg.did === currentAccount?.did)

  const time = useCallback(
    (offset: number) => {
      tick!

      const date = new Date()
      date.setMinutes(date.getMinutes() + offset)
      return i18n
        .date(date, {hour: 'numeric', minute: '2-digit', hour12: true})
        .toLocaleUpperCase()
        .replace(' ', '')
    },
    [tick, i18n],
  )

  const onChangeDuration = useCallback((newDuration: string) => {
    setDuration(Number(newDuration))
  }, [])

  const liveLinkUrl = definitelyUrl(liveLink)
  const debouncedUrl = useDebouncedValue(liveLinkUrl, 500)

  const {
    data: linkMeta,
    isSuccess: hasValidLinkMeta,
    isLoading: linkMetaLoading,
    error: linkMetaError,
  } = useQuery({
    enabled: !!debouncedUrl,
    queryKey: ['link-meta', debouncedUrl],
    queryFn: async () => {
      if (!debouncedUrl) return null
      if (!config) throw new Error(_(msg`You are not allowed to go live`))

      const urlp = new URL(debouncedUrl)
      if (!config.domains.includes(urlp.hostname)) {
        throw new Error(_(msg`${urlp.hostname} is not a valid URL`))
      }

      return getLinkMeta(agent, debouncedUrl)
    },
  })

  const {
    mutate: goLive,
    isPending: isGoingLive,
    error: goLiveError,
  } = useUpsertLiveStatusMutation(duration, linkMeta)

  const isSourceInvalid = !!liveLinkError || !!linkMetaError

  const hasLink = !!debouncedUrl && !isSourceInvalid

  return (
    <Dialog.ScrollableInner
      label={_(msg`Go Live`)}
      style={web({maxWidth: 420})}>
      <View style={[a.gap_xl]}>
        <View style={[a.gap_sm]}>
          <Text style={[a.font_bold, a.text_2xl]}>
            <Trans>Go Live</Trans>
          </Text>
          <Text style={[a.text_md, a.leading_snug, t.atoms.text_contrast_high]}>
            <Trans>
              Add a temporary live status to your profile. When someone clicks
              on your avatar, they’ll see information about your live event.
            </Trans>
          </Text>
        </View>
        {moderationOpts && (
          <ProfileCard.Header>
            <ProfileCard.Avatar
              profile={profile}
              moderationOpts={moderationOpts}
              liveOverride
              disabledPreview
            />
            <ProfileCard.NameAndHandle
              profile={profile}
              moderationOpts={moderationOpts}
            />
          </ProfileCard.Header>
        )}
        <View style={[a.gap_sm]}>
          <View>
            <TextField.LabelText>
              <Trans>Live link</Trans>
            </TextField.LabelText>
            <TextField.Root isInvalid={isSourceInvalid}>
              <TextField.Input
                label={_(msg`Live link`)}
                placeholder={_(msg`www.mylivestream.tv`)}
                value={liveLink}
                onChangeText={setLiveLink}
                onFocus={() => setLiveLinkError('')}
                onBlur={() => {
                  if (!definitelyUrl(liveLink)) {
                    setLiveLinkError('Invalid URL')
                  }
                }}
                returnKeyType="done"
                autoCapitalize="none"
                autoComplete="url"
                autoCorrect={false}
              />
            </TextField.Root>
          </View>
          {(liveLinkError || linkMetaError) && (
            <View style={[a.flex_row, a.gap_xs, a.align_center]}>
              <WarningIcon
                style={[{color: t.palette.negative_500}]}
                size="sm"
              />
              <Text
                style={[
                  a.text_sm,
                  a.leading_snug,
                  a.flex_1,
                  a.font_bold,
                  {color: t.palette.negative_500},
                ]}>
                {liveLinkError ? (
                  <Trans>This is not a valid link</Trans>
                ) : (
                  cleanError(linkMetaError)
                )}
              </Text>
            </View>
          )}

          {(linkMeta || linkMetaLoading) && (
            <View
              style={[
                a.w_full,
                a.border,
                t.atoms.border_contrast_low,
                t.atoms.bg,
                a.flex_row,
                a.rounded_sm,
                a.overflow_hidden,
                a.align_stretch,
              ]}>
              {(!linkMeta || linkMeta.image) && (
                <View
                  style={[
                    t.atoms.bg_contrast_25,
                    {minHeight: 64, width: 114},
                    a.justify_center,
                    a.align_center,
                  ]}>
                  {linkMeta?.image && (
                    <Image
                      source={linkMeta.image}
                      accessibilityIgnoresInvertColors
                      transition={200}
                      style={[a.absolute, a.inset_0]}
                      contentFit="cover"
                      onLoad={() => setImageLoadError(false)}
                      onError={() => setImageLoadError(true)}
                    />
                  )}
                  {linkMeta && imageLoadError && (
                    <CircleXIcon
                      style={[t.atoms.text_contrast_low]}
                      size="xl"
                    />
                  )}
                </View>
              )}
              <View
                style={[
                  a.flex_1,
                  a.justify_center,
                  a.py_sm,
                  a.gap_xs,
                  a.px_md,
                ]}>
                {linkMeta ? (
                  <>
                    <Text
                      numberOfLines={2}
                      style={[a.leading_snug, a.font_bold, a.text_md]}>
                      {linkMeta.title || linkMeta.url}
                    </Text>
                    <View style={[a.flex_row, a.align_center, a.gap_2xs]}>
                      <GlobeIcon
                        size="xs"
                        style={[t.atoms.text_contrast_low]}
                      />
                      <Text
                        numberOfLines={1}
                        style={[
                          a.text_xs,
                          a.leading_snug,
                          t.atoms.text_contrast_medium,
                        ]}>
                        {toNiceDomain(linkMeta.url)}
                      </Text>
                    </View>
                  </>
                ) : (
                  <>
                    <LoadingPlaceholder height={16} width={128} />
                    <LoadingPlaceholder height={12} width={72} />
                  </>
                )}
              </View>
            </View>
          )}
        </View>

        {hasLink && (
          <View>
            <TextField.LabelText>
              <Trans>Go live for</Trans>
            </TextField.LabelText>
            <Select.Root
              value={String(duration)}
              onValueChange={onChangeDuration}>
              <Select.Trigger label={_(msg`Select duration`)}>
                <Text style={[ios(a.py_xs)]}>
                  {displayDuration(i18n, duration)}
                  {'  '}
                  <Text style={[t.atoms.text_contrast_low]}>
                    {time(duration)}
                  </Text>
                </Text>

                <Select.Icon />
              </Select.Trigger>
              <Select.Content
                renderItem={(item, _i, selectedValue) => {
                  const label = displayDuration(i18n, item)
                  return (
                    <Select.Item value={String(item)} label={label}>
                      <Select.ItemIndicator />
                      <Select.ItemText>
                        {label}
                        {'  '}
                        <Text
                          style={[
                            native(a.text_md),
                            web(a.ml_xs),
                            selectedValue === String(item)
                              ? t.atoms.text_contrast_medium
                              : t.atoms.text_contrast_low,
                            a.font_normal,
                          ]}>
                          {time(item)}
                        </Text>
                      </Select.ItemText>
                    </Select.Item>
                  )
                }}
                items={DURATIONS}
                valueExtractor={d => String(d)}
              />
            </Select.Root>
          </View>
        )}

        {goLiveError && (
          <Admonition type="error">{cleanError(goLiveError)}</Admonition>
        )}

        <View
          style={platform({
            native: [a.gap_md, a.pt_lg],
            web: [a.flex_row_reverse, a.gap_md, a.align_center],
          })}>
          {hasLink && (
            <Button
              label={_(msg`Go Live`)}
              size={platform({native: 'large', web: 'small'})}
              color="primary"
              variant="solid"
              onPress={() => goLive()}
              disabled={
                isGoingLive || !hasValidLinkMeta || debouncedUrl !== liveLinkUrl
              }>
              <ButtonText>
                <Trans>Go Live</Trans>
              </ButtonText>
              {isGoingLive && <ButtonIcon icon={Loader} />}
            </Button>
          )}
          <Button
            label={_(msg`Cancel`)}
            onPress={() => control.close()}
            size={platform({native: 'large', web: 'small'})}
            color="secondary"
            variant={platform({native: 'solid', web: 'ghost'})}>
            <ButtonText>
              <Trans>Cancel</Trans>
            </ButtonText>
          </Button>
        </View>
      </View>
      <Dialog.Close />
    </Dialog.ScrollableInner>
  )
}