import { PortalProvider } from '@gorhom/portal'
import React, { useState } from 'react'
import { Alert, Platform, StyleSheet, Text, View } from 'react-native'

import { BlurView } from 'expo-blur'
import { Fonts, Palette, gutters } from '../styles'
import GradientButton from './GradientButton'
import { LinearGradient } from './LinearGradient/LinearGradient'
import Overlay from './Overlay'
const WebAlertModal = ({ title, description, options, onDismiss }) => {
  const [visible, setVisible] = useState(true)

  const confirmOption = options?.find(({ style }) => style !== 'cancel')
  const cancelOption = options?.find(({ style }) => style === 'cancel')
  const hasSecondaryAction = Boolean(cancelOption)
  const buttonContainerStyle = hasSecondaryAction ? styles.actionButton : styles.singleActionButton

  const dismiss = (callback) => {
    setVisible(false)
    setTimeout(onDismiss, 500)
    callback?.()
  }

  const onConfirm = () => {
    dismiss(confirmOption?.onPress)
  }

  const onCancel = () => {
    dismiss(cancelOption?.onPress)
  }

  const renderDescription = () => {
    if (typeof description === 'string' || typeof description === 'number') {
      return <Text style={styles.description}>{description}</Text>
    }

    if (!description) {
      return null
    }

    return <View style={styles.customDescription}>{description}</View>
  }

  return (
    <PortalProvider>
      <Overlay isVisible={visible} contentContainerStyle={styles.overlayContent}>
        <View style={styles.modalWrapper}>
          <LinearGradient
            colors={['rgba(255,255,255,0.18)', 'rgba(255,255,255,0.04)']}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
            style={styles.modalBorder}
          >
            <BlurView intensity={100} tint="dark" style={styles.modalContainer}>
              <Text style={styles.title}>{title}</Text>
              {renderDescription()}
              <View style={styles.divider} />
              <View style={hasSecondaryAction ? styles.actionsRow : styles.actions}>
                {cancelOption && (
                  <GradientButton
                    title={cancelOption.text}
                    onPress={onCancel}
                    colors={['rgba(255,255,255,0.16)', 'rgba(255,255,255,0.08)']}
                    textStyle={styles.secondaryButtonText}
                    gradientStyle={styles.secondaryButtonGradient}
                    containerStyle={buttonContainerStyle}
                  />
                )}
                <GradientButton
                  title={confirmOption?.text || 'OK'}
                  onPress={onConfirm}
                  containerStyle={buttonContainerStyle}
                />
              </View>
            </BlurView>
          </LinearGradient>
        </View>
      </Overlay>
    </PortalProvider>
  )
}

const alertPolyfill = (title, description, options, extra) => {
  const rootDiv = document.createElement('div')
  document.body.appendChild(rootDiv)

  const { createRoot } = require('react-dom/client')
  const root = createRoot(rootDiv)

  const closeModal = () => {
    root.unmount()
    rootDiv.remove()
  }

  const WebAlertComponent = () => (
    <WebAlertModal
      title={title}
      description={description}
      options={options}
      onDismiss={closeModal}
    />
  )

  root.render(<WebAlertComponent />)
}

const customAlert = (title, description, options, extra) => {
  // Utilisation de la propriété userInterfaceStyle pour le mettre en mode sombre
  Alert.alert(title, description, options, {
    ...extra,
    userInterfaceStyle: 'dark',
  })
}

const alert = Platform.OS === 'web' ? alertPolyfill : customAlert

export const showPremiumRequiredAlert = () =>
  alert(
    'Accès premium requis',
    'Vous devez payer pour créer une nouvelle musique.'
    // [{ text: "OK", style: "cancel" }]
  )

export default alert

const styles = StyleSheet.create({
  overlayContent: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalWrapper: {
    width: '90%',
    maxWidth: 460,
    paddingHorizontal: 12,
  },
  modalBorder: {
    borderRadius: 24,
    padding: 1,
  },
  modalContainer: {
    borderRadius: 23,
    paddingHorizontal: gutters * 1.8,
    paddingVertical: gutters,
    backgroundColor: 'rgba(15, 12, 20, 0.9)',
    overflow: 'hidden',
    gap: gutters * 0.75,
  },
  title: Fonts({
    type: 'mainTitle',
    fontSize: 3,
    style: { textAlign: 'center' },
  }),
  description: Fonts({
    type: 'default',
    color: Palette.gray,
    fontSize: 2,
    style: { lineHeight: 22, textAlign: 'center' },
  }),
  divider: {
    height: 1,
    backgroundColor: 'rgba(255,255,255,0.08)',
    marginVertical: 0,
  },
  customDescription: {
    width: '100%',
  },
  actionsRow: {
    flexDirection: 'row',
    gap: gutters,
    width: '100%',
  },
  actions: {
    width: '100%',
    gap: gutters,
  },
  actionButton: {
    flex: 1,
  },
  singleActionButton: {
    width: '100%',
  },
  secondaryButtonGradient: {
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.2)',
  },
  secondaryButtonText: {
    color: Palette.gray,
  },
})