import { Feather, FontAwesome, MaterialCommunityIcons } from '@expo/vector-icons'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import {
  Linking,
  Platform,
  Pressable,
  Share,
  StyleSheet,
  Text,
  View,
  findNodeHandle,
} from 'react-native'
import { SheetManager } from 'react-native-actions-sheet'

import { BlurView } from 'expo-blur'
import { setGlobal } from 'reactn'
import { musiclandShareHeading, musiclandShareMessage, musiclandShareUrl } from '../../data'
import { isWeb } from '../../hooks/useLayoutType'
import { Palette } from '../../styles'
import { FONT_FAMILY } from '../../styles/Fonts'
import AppActionSheet from '../AppActionSheet'

const ShareModal = ({ payload }) => {
  const heading = payload?.heading ?? musiclandShareHeading
  const url = payload?.url ?? musiclandShareUrl
  const shareTitle = payload?.shareTitle ?? heading
  const shareMessage = payload?.shareMessage ?? musiclandShareMessage
  const copyUrl = payload?.copyUrl ?? payload?.qrUrl ?? payload?.url ?? musiclandShareUrl
  const linkLabel = payload?.linkLabel ?? copyUrl
  const sectionTitle = payload?.sectionTitle ?? 'Partager sur...'
  const qrTitle = payload?.qrTitle ?? musiclandShareHeading
  const qrUrl = payload?.qrUrl ?? musiclandShareUrl

  const [copied, setCopied] = useState(false)
  const copyTimeout = useRef(null)
  const shareQrTimeoutRef = useRef(null)
  const modalRef = useRef(null)
  const [webVisible, setWebVisible] = useState(true)
  const blurProps = Platform.OS === 'android' ? { experimentalBlurMethod: 'dimezisBlurView' } : {}

  const closeSheet = useCallback(() => {
    if (isWeb) {
      setWebVisible(false)
    }

    try {
      const maybePromise = SheetManager.hide('Share')
      return Promise.resolve(maybePromise)
    } catch (error) {
      console.error('share.sheet.close', error)
      return Promise.resolve()
    }
  }, [])

  useEffect(() => {
    if (isWeb) {
      setWebVisible(true)
    }
  }, [payload])

  const shareText = useMemo(() => {
    return [shareMessage, url].filter(Boolean).join(' ')
  }, [shareMessage, url])

  const encodedUrl = useMemo(() => encodeURIComponent(url), [url])
  const encodedShareText = useMemo(() => encodeURIComponent(shareText), [shareText])

  useEffect(() => {
    return () => {
      if (copyTimeout.current) {
        clearTimeout(copyTimeout.current)
      }
    }
  }, [])

  useEffect(() => {
    if (!isWeb || typeof document === 'undefined' || !webVisible) {
      return
    }

    const handlePointerDown = (event) => {
      const node = modalRef.current
      if (!node) {
        return
      }

      const domNode = findNodeHandle(node)
      if (domNode && typeof domNode.contains === 'function') {
        if (domNode.contains(event.target)) {
          return
        }
      }

      if (domNode === event.target) {
        return
      }

      closeSheet()
    }

    const handleKeyDown = (event) => {
      if (event.key === 'Escape') {
        closeSheet()
      }
    }

    document.addEventListener('pointerdown', handlePointerDown)
    document.addEventListener('keydown', handleKeyDown)

    return () => {
      document.removeEventListener('pointerdown', handlePointerDown)
      document.removeEventListener('keydown', handleKeyDown)
    }
  }, [closeSheet, webVisible])

  const handleCopy = useCallback(async () => {
    try {
      if (copyTimeout.current) {
        clearTimeout(copyTimeout.current)
      }

      if (isWeb && typeof navigator !== 'undefined' && navigator.clipboard) {
        await navigator.clipboard.writeText(copyUrl)
      } else {
        const Clipboard = await import('expo-clipboard')
        if (typeof Clipboard?.setStringAsync === 'function') {
          await Clipboard.setStringAsync(copyUrl)
        } else if (typeof Clipboard?.default?.setStringAsync === 'function') {
          await Clipboard.default.setStringAsync(copyUrl)
        }
      }

      setCopied(true)
      copyTimeout.current = setTimeout(() => {
        setCopied(false)
      }, 2000)
    } catch (error) {
      console.error('share.copy.failed', error)
    }
  }, [copyUrl])

  const handleSystemShare = useCallback(async () => {
    if (Platform.OS === 'web' && typeof navigator !== 'undefined') {
      try {
        if (typeof navigator.share === 'function') {
          await navigator.share({
            url,
            text: shareText,
            title: shareTitle,
          })
          return
        }
      } catch (error) {
        console.error('share.system.web', error)
      }
    }

    try {
      await Share.share(
        Platform.select({
          ios: url
            ? { url, message: shareText, title: shareTitle }
            : { message: shareText, title: shareTitle },
          android: { message: shareText, title: shareTitle },
          default: { message: shareText, title: shareTitle },
        })
      )
    } catch (error) {
      console.error('share.system.native', error)
    }
  }, [shareText, shareTitle, url])

  const handleShareOption = useCallback(
    async (option) => {
      if (option?.type === 'qr') {
        console.log('share.modal.handleShareOption', {
          key: option?.key,
          platform: Platform.OS,
        })

        if (shareQrTimeoutRef.current) {
          clearTimeout(shareQrTimeoutRef.current)
        }

        const openQrModal = () => {
          console.log('share.modal.openQrModal', {
            platform: Platform.OS,
            url: qrUrl,
            title: qrTitle,
          })
          shareQrTimeoutRef.current = null
          setGlobal({
            shareQrModal: {
              visible: true,
              url: qrUrl,
              title: qrTitle,
            },
          })
        }

        if (Platform.OS === 'web') {
          console.log('share.modal.scheduleQr', { platform: Platform.OS })
          const maybePromise = closeSheet()
          shareQrTimeoutRef.current = setTimeout(openQrModal, 80)
          if (maybePromise && typeof maybePromise.catch === 'function') {
            maybePromise.catch((error) => {
              console.error('share.modal.closeSheet.error', error)
            })
          }
        } else {
          await closeSheet()
          openQrModal()
        }

        return
      }

      const target = option?.target

      if (!target) {
        await handleSystemShare()
        await closeSheet()
        return
      }

      try {
        if (Platform.OS === 'web') {
          window.open(target, '_blank', 'noopener,noreferrer')
          await closeSheet()
          return
        }

        const supported = await Linking.canOpenURL(target)
        if (supported) {
          await Linking.openURL(target)
          await closeSheet()
          return
        }
      } catch (error) {
        console.error(`share.option.error.${option?.key || 'unknown'}`, error)
      }

      await handleSystemShare()
      await closeSheet()
    },
    [closeSheet, handleSystemShare, qrTitle, qrUrl]
  )

  const onSystemShare = useCallback(async () => {
    await handleSystemShare()
    await closeSheet()
  }, [closeSheet, handleSystemShare])

  const shareOptions = useMemo(() => {
    if (Array.isArray(payload?.options) && payload.options.length) {
      return payload.options
    }

    return [
      {
        key: 'facebook',
        label: 'Partager sur Facebook',
        Icon: (props) => <FontAwesome name="facebook" {...props} />,
        target: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
      },
      {
        key: 'instagram',
        label: 'Partager sur Instagram',
        Icon: (props) => <FontAwesome name="instagram" {...props} />,
        target: `https://www.instagram.com/?url=${encodedUrl}`,
      },
      {
        key: 'x',
        label: 'Partager sur X',
        Icon: (props) => <FontAwesome name="twitter" {...props} />,
        target: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedShareText}`,
      },
      {
        key: 'email',
        label: 'Partager par e-mail',
        Icon: (props) => <Feather name="mail" {...props} />,
        target: `mailto:?subject=${encodeURIComponent(shareTitle)}&body=${encodedShareText}`,
      },
      {
        key: 'qr',
        type: 'qr',
        label: 'Partager par QR-code',
        Icon: (props) => <MaterialCommunityIcons name="qrcode-scan" {...props} />,
      },
    ]
  }, [encodedShareText, encodedUrl, payload?.options, shareTitle])

  const mobileContent = (
    <View style={styles.container}>
      <BlurView style={[styles.card, styles.blurCard]} tint="dark" intensity={40} {...blurProps}>
        <Text style={styles.heading}>{heading}</Text>
        <View style={styles.linkRow}>
          <Text numberOfLines={1} style={styles.linkText}>
            {linkLabel}
          </Text>
          <View style={styles.linkActions}>
            <Pressable hitSlop={8} onPress={handleCopy} style={styles.iconButton}>
              <Feather name={copied ? 'check' : 'copy'} size={16} color={Palette.white} />
            </Pressable>
            <Pressable hitSlop={8} onPress={onSystemShare} style={styles.iconButton}>
              <Feather name="share-2" size={16} color={Palette.white} />
            </Pressable>
          </View>
        </View>
        {copied ? <Text style={styles.copiedText}>Lien copié</Text> : null}
      </BlurView>

      <BlurView intensity={40} tint="dark" style={styles.card} {...blurProps}>
        <Text style={styles.sectionHeading}>{sectionTitle}</Text>
        <View style={styles.optionsList}>
          {shareOptions.map((option, index) => {
            const Icon = option?.Icon ?? Feather
            return (
              <BlurView
                key={option?.key || index}
                style={styles.optionBlur}
                intensity={100}
                {...blurProps}
              >
                <Pressable onPress={() => handleShareOption(option)} style={styles.optionRow}>
                  <View style={styles.optionIconWrapper}>
                    <Icon size={18} color={Palette.white} />
                  </View>
                  <Text style={styles.optionLabel}>{option?.label}</Text>
                </Pressable>
              </BlurView>
            )
          })}
        </View>
      </BlurView>
    </View>
  )

  if (isWeb && !webVisible) {
    return null
  }

  return (
    <AppActionSheet id="Share" webModal={isWeb} onClose={closeSheet}>
      {isWeb ? (
        <View ref={modalRef} collapsable={false} style={styles.webContainer}>
          <View style={styles.webHeader}>
            <Text style={styles.webHeading}>{heading}</Text>
            <Pressable onPress={closeSheet} hitSlop={12} style={styles.webCloseButton}>
              <Feather name="x" size={16} color={Palette.white} />
            </Pressable>
          </View>

          <Text style={styles.webSubheading}>{shareMessage}</Text>

          <View style={styles.webContent}>
            <View style={styles.webLinkCard}>
              <Text style={styles.webLinkLabel}>{linkLabel}</Text>
              <View style={styles.webLinkActions}>
                <Pressable
                  onPress={handleCopy}
                  style={[
                    styles.webActionButton,
                    styles.webPrimaryButton,
                    copied && styles.webActionButtonActive,
                  ]}
                >
                  <Feather name={copied ? 'check' : 'copy'} size={16} color={Palette.white} />
                  <Text style={styles.webActionLabel}>
                    {copied ? 'Lien copié' : 'Copier le lien'}
                  </Text>
                </Pressable>

                {/* <Pressable
                  onPress={onSystemShare}
                  style={[styles.webActionButton, styles.webSecondaryButton]}
                >
                  <Feather name="share-2" size={16} color={Palette.white} />
                  <Text style={styles.webActionLabel}>Partager</Text>
                </Pressable> */}
              </View>
            </View>

            <View style={styles.webOptionsCard}>
              <Text style={styles.webSectionHeading}>{sectionTitle}</Text>
              <View style={styles.webOptionsGrid}>
                {shareOptions.map((option, index) => {
                  const Icon = option?.Icon ?? Feather
                  return (
                    <Pressable
                      key={option?.key || index}
                      onPress={() => handleShareOption(option)}
                      style={styles.webOptionRow}
                    >
                      <View style={styles.webOptionIcon}>
                        <Icon size={18} color={Palette.white} />
                      </View>
                      <Text style={styles.webOptionLabel}>{option?.label}</Text>
                      <Feather name="chevron-right" size={16} color="rgba(255, 255, 255, 0.6)" />
                    </Pressable>
                  )
                })}
              </View>
            </View>
          </View>
        </View>
      ) : (
        mobileContent
      )}
    </AppActionSheet>
  )
}

const styles = StyleSheet.create({
  container: {
    gap: 24,
  },
  card: {
    backgroundColor: Palette.glass,
    overflow: 'hidden',
    borderRadius: 24,
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.08)',
    paddingHorizontal: 20,
    paddingVertical: 18,
    gap: 16,
  },
  blurCard: {
    overflow: 'hidden',
    position: 'relative',
  },
  closeButton: {
    position: 'absolute',
    top: 16,
    right: 16,
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.12)',
    zIndex: 2,
  },
  heading: {
    fontSize: 16,
    color: Palette.white,
    textAlign: 'center',
    fontFamily: FONT_FAMILY.HelveticaNeueMedium,
  },
  linkRow: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.06)',
    borderRadius: 16,
    paddingHorizontal: 14,
    paddingVertical: 10,
    gap: 12,
  },
  linkText: {
    flex: 1,
    color: Palette.white,
    fontSize: 15,
    fontFamily: FONT_FAMILY.InterMedium,
  },
  linkActions: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  iconButton: {
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: 'rgba(255, 255, 255, 0.08)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  copiedText: {
    fontSize: 12,
    textAlign: 'center',
    color: Palette.white,
    opacity: 0.8,
    fontFamily: FONT_FAMILY.InterMedium,
  },
  sectionHeading: {
    fontSize: 18,
    color: Palette.white,
    fontFamily: FONT_FAMILY.HelveticaNeueMedium,
    textAlign: 'center',
  },
  optionsList: {
    gap: 12,
  },
  optionBlur: {
    borderRadius: 18,
    overflow: 'hidden',
  },
  optionRow: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.04)',
    // borderRadius: 18,
    paddingHorizontal: 14,
    paddingVertical: 14,
    gap: 14,
  },
  optionIconWrapper: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: 'rgba(255, 255, 255, 0.08)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  optionLabel: {
    flex: 1,
    fontSize: 15,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterMedium,
  },
  webContainer: {
    gap: 24,
  },
  webHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    gap: 12,
  },
  webHeading: {
    flex: 1,
    fontSize: 24,
    color: Palette.white,
    fontFamily: FONT_FAMILY.HelveticaNeueMedium,
  },
  webCloseButton: {
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: 'rgba(255, 255, 255, 0.08)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  webSubheading: {
    fontSize: 14,
    color: 'rgba(255, 255, 255, 0.65)',
    fontFamily: FONT_FAMILY.InterMedium,
  },
  webContent: {
    gap: 20,
  },
  webLinkCard: {
    backgroundColor: 'rgba(255, 255, 255, 0.06)',
    borderRadius: 20,
    paddingHorizontal: 20,
    paddingVertical: 18,
    gap: 16,
  },
  webLinkLabel: {
    color: Palette.white,
    fontSize: 15,
    fontFamily: FONT_FAMILY.InterMedium,
    overflow: 'hidden',
  },
  webLinkActions: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    flexWrap: 'wrap',
  },
  webActionButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 10,
    paddingHorizontal: 18,
    paddingVertical: 12,
    borderRadius: 16,
  },
  webPrimaryButton: {
    backgroundColor: Palette.primary,
  },
  webSecondaryButton: {
    backgroundColor: 'rgba(255, 255, 255, 0.08)',
  },
  webActionButtonActive: {
    backgroundColor: Palette.darkRadioactivGreen,
  },
  webActionLabel: {
    fontSize: 14,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterMedium,
  },
  webOptionsCard: {
    backgroundColor: 'rgba(255, 255, 255, 0.06)',
    borderRadius: 20,
    paddingHorizontal: 20,
    paddingVertical: 22,
    gap: 16,
  },
  webSectionHeading: {
    fontSize: 18,
    color: Palette.white,
    fontFamily: FONT_FAMILY.HelveticaNeueMedium,
  },
  webOptionsGrid: {
    gap: 12,
  },
  webOptionRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 12,
    backgroundColor: 'rgba(255, 255, 255, 0.04)',
    borderRadius: 16,
    paddingHorizontal: 18,
    paddingVertical: 14,
  },
  webOptionIcon: {
    width: 36,
    height: 36,
    borderRadius: 18,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.08)',
    marginRight: 4,
  },
  webOptionLabel: {
    flex: 1,
    fontSize: 15,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterMedium,
  },
})

export default ShareModal