import { wp } from '@/utils/ui/screenUtils'
import React, { useState, useCallback } from 'react'
import { TouchableOpacity, Pressable, Keyboard, StyleSheet } from 'react-native'
import { Dialog, YStack, XStack, Paragraph, Separator,useTheme } from 'tamagui'
import CustomText from '@/components/common/CustomText.jsx'
import useThemeColors from '@/hooks/useThemeColors.js'

/**
 * CustomDialog - 通用弹窗组件
 * 
 * 基于 Tamagui Dialog 封装的通用弹窗组件，支持多种按钮配置方式和内容展示形式。
 * 提供了灵活的 API 设计，可以满足各种弹窗使用场景。
 * 
 * 主要特性：
 * - 支持受控和非受控两种使用模式
 * - 灵活的按钮配置：字符串、React元素、配置对象数组
 * - 自适应内容区域：支持文本和自定义 JSX 内容
 * - 完整的回调支持：取消、确认、自定义按钮事件
 * - 响应式设计：基于屏幕尺寸的自适应布局
 * 
 * Props 详细说明：
 * 
 * 【状态控制】
 * @param {boolean} [open] - 受控模式下的弹窗打开状态
 * @param {boolean} [defaultOpen=false] - 非受控模式下的默认打开状态
 * @param {function} [onOpenChange] - 弹窗状态变化回调 (open: boolean) => void
 * 
 * 【内容配置】
 * @param {string|React.ReactNode} [content] - 弹窗内容区域
 *   - string: 显示为居中的文本段落
 *   - React.ReactNode: 直接渲染自定义组件
 * 
 * 【按钮配置】
 * @param {string|React.ReactNode|Array} [buttons] - 按钮区域配置
 *   - string: 单个确认按钮，显示指定文本
 *   - React.ReactNode: 自定义按钮组件
 *   - Array: 按钮数组，支持以下格式：
 *     * string: 文本按钮（第一个为取消，第二个为确认）
 *     * React.ReactNode: 自定义按钮组件
 *     * Object: 按钮配置对象 {
 *         text: string,              // 按钮文本
 *         onPress?: () => void,      // 点击回调
 *         type?: 'default'|'primary'|'destructive', // 按钮类型（影响颜色）
 *         closeOnPress?: boolean     // 点击后是否关闭弹窗
 *       }
 * 
 * 【默认按钮回调】
 * @param {function} [onCancel] - 取消按钮点击回调
 * @param {function} [onConfirm] - 确认按钮点击回调
 * @param {boolean} [closeOnCancel=true] - 点击取消按钮后是否关闭弹窗
 * @param {boolean} [closeOnConfirm=true] - 点击确认按钮后是否关闭弹窗
 * 
 * 【样式配置】
 * @param {number} [width=320] - 弹窗宽度（像素）
 * @param {number} [contentPadding=16] - 内容区域内边距（像素）
 * />
 */

const CustomDialog = ({
  open,
  defaultOpen = false,
  onOpenChange,
  content,
  buttons,
  onCancel,
  onConfirm,
  closeOnCancel = true,
  closeOnConfirm = true,
  width = 320,
  contentPadding = 16,
  // 新增：遮罩点击是否收起键盘（默认开启）
  dismissKeyboardOnOverlayPress = true,
  // 新增：遮罩点击是否关闭弹窗（默认关闭，仅收起键盘）
  closeOnOverlayPress = false,
  // 新增：弹窗关闭时是否兜底收起键盘（默认开启）
  dismissKeyboardOnClose = true,
}) => {
  const [pressedButton, setPressedButton] = useState(null)

  // ==================== 状态管理 ====================
  
  // 内部状态：用于非受控模式下的弹窗开关状态
  const [internalOpen, setInternalOpen] = useState(defaultOpen)
  
  // 判断是否为受控模式：如果传入了 open 参数则为受控模式
  const isControlled = typeof open === 'boolean'
  
  // 当前弹窗状态：受控模式使用外部 open，非受控模式使用内部 internalOpen
  const currentOpen = isControlled ? open : internalOpen
  
  // 获取主题色：用于按钮颜色配置
  const { primary: primaryColor } = useThemeColors()
  
  // 分隔线颜色（降低亮度，避免过渡时的白色高亮）
  const dividerColor = 'rgba(0,0,0,0.08)'
  
  /**
   * 统一的状态设置方法
   * 根据受控/非受控模式选择不同的状态更新方式
   * @param {boolean} v - 新的弹窗状态
   */
  const setOpen = (v) => {
    // 一致性兜底：弹窗关闭时收起键盘
    if (!v && dismissKeyboardOnClose) {
      try { Keyboard.dismiss() } catch (_) {}
    }
    if (isControlled) {
      // 受控模式：通过回调通知父组件更新状态
      onOpenChange && onOpenChange(v)
    } else {
      // 非受控模式：直接更新内部状态
      setInternalOpen(v)
    }
  }

  /**
   * 关闭弹窗的便捷方法
   * 使用 useCallback 优化性能，避免不必要的重新渲染
   */
  const close = useCallback(() => setOpen(false), [setOpen])

  // ==================== 按钮渲染逻辑 ====================
  
  /**
   * 按钮区域渲染方法
   * 根据 buttons 参数的不同类型，渲染对应的按钮布局
   * 支持四种按钮配置方式：null/undefined、字符串、React元素、数组
   */
  const renderButtons = useCallback(() => {
    // 情况1：没有传入 buttons 参数
    // 返回 null，不显示按钮区域
    if (!buttons) {
      return null
    }

    // 情况2：buttons 是字符串
    // 渲染单个确认按钮，使用传入的字符串作为按钮文本
    if (typeof buttons === 'string') {
      return (
        <XStack borderTopWidth={wp(1)} borderColor={dividerColor}>
          <YStack flex={1} alignItems="center" justifyContent="center">
            <TouchableOpacity
              style={{
                width: '100%',
                height: wp(50), // 响应式高度：44dp
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: pressedButton === 'single' ? '#f0f0f0' : 'transparent',
                borderBottomLeftRadius: wp(12),
                borderBottomRightRadius: wp(12)
              }}
              activeOpacity={1}
              onPressIn={() => setPressedButton('single')}
              onPressOut={() => setPressedButton(null)}
              onPress={() => {
                // 触发确认回调
                onConfirm && onConfirm()
                // 根据配置决定是否关闭弹窗
                if (closeOnConfirm) close()
              }}
            >
              <CustomText style={{ color: '#E6454A', fontSize: wp(16) }}>
                {buttons}
              </CustomText>
            </TouchableOpacity>
          </YStack>
        </XStack>
      )
    }

    // 情况3：buttons 是 React 元素
    // 直接渲染自定义的按钮组件，提供最大的灵活性
    if (React.isValidElement(buttons)) {
      return (
        <XStack borderTopWidth={wp(1)} borderColor={dividerColor}>
          {buttons}
        </XStack>
      )
    }

    // 情况4：buttons 是数组
    // 遍历数组，根据每个元素的类型进行不同的渲染处理
    if (Array.isArray(buttons)) {
      return (
        <XStack borderTopWidth={wp(1)} borderColor={dividerColor}>
          {buttons.map((btn, idx) => {
            // 数组元素类型1：字符串按钮
            // 按照索引位置自动分配功能：第一个为取消，第二个为确认，其他为普通关闭
            if (typeof btn === 'string') {
              return (
                <React.Fragment key={idx}>
                  {/* 取消使用外部分隔线，改为内部左边框避免缝隙 */}
                  <YStack flex={1} alignItems="center" justifyContent="center">
                    <TouchableOpacity
                    flex={1}
                      style={{
                        width: '100%',
                        height: wp(50), // 响应式高度
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: pressedButton === `array-${idx}` ? '#f0f0f0' : 'transparent',
                        borderBottomLeftRadius: idx === 0 ? wp(12) : 0,
                        borderBottomRightRadius: idx === buttons.length - 1 ? wp(12) : 0,
                        borderLeftWidth: idx !== 0 ? wp(1) : 0,
                        borderLeftColor: dividerColor,
                      }}
                      activeOpacity={1}
                      onPressIn={() => setPressedButton(`array-${idx}`)}
                      onPressOut={() => setPressedButton(null)}
                      onPress={() => {
                        // 按钮点击逻辑：根据索引位置执行不同的回调
                        if (idx === 0 && onCancel) {
                          // 第一个按钮：取消按钮
                          onCancel()
                          if (closeOnCancel) close()
                        } else if (idx === 1 && onConfirm) {
                          // 第二个按钮：确认按钮
                          onConfirm()
                          if (closeOnConfirm) close()
                        } else {
                          // 其他按钮：直接关闭弹窗
                          close()
                        }
                      }}
                    >
                      {/* 按钮文本颜色：第一个按钮为灰色，其他使用主题色 */}
                      <CustomText style={{ color: idx === 0 ? '#666' : primaryColor, fontSize: wp(16) }}>
                        {btn}
                      </CustomText>
                    </TouchableOpacity>
                  </YStack>
                </React.Fragment>
              )
            }

            // 数组元素类型2：React 元素
            // 直接渲染自定义组件，保持统一的布局结构
            if (React.isValidElement(btn)) {
              return (
                <React.Fragment key={idx}>
                  {/* 取消使用外部分隔线，改为内部左边框避免缝隙 */}
                  <YStack flex={1} alignItems="center" justifyContent="center">
                    <TouchableOpacity
                      style={{
                        width: '100%',
                        height: wp(50),
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: pressedButton === `array-${idx}` ? '#f0f0f0' : 'transparent',
                        borderBottomLeftRadius: idx === 0 ? wp(12) : 0,
                        borderBottomRightRadius: idx === buttons.length - 1 ? wp(12) : 0,
                        borderLeftWidth: idx !== 0 ? wp(1) : 0,
                        borderLeftColor: dividerColor,
                      }}
                      activeOpacity={1}
                      onPressIn={() => setPressedButton(`array-${idx}`)}
                      onPressOut={() => setPressedButton(null)}
                    >
                      {btn}
                    </TouchableOpacity>
                  </YStack>
                </React.Fragment>
              )
            }

            // 数组元素类型3：配置对象
            // 解构配置对象，提供默认值
            const { text, onPress, type = 'default', closeOnPress = true } = btn || {}
            
            // 根据按钮类型确定颜色
            // destructive: 危险操作（红色）
            // primary: 主要操作（紫色）
            // default: 普通操作（深灰色）
            const color = type === 'destructive' ? '#E6454A' : type === 'primary' ? '#DE428C' : '#333'

            return (
              <React.Fragment key={idx}>
                {/* 取消使用外部分隔线，改为内部左边框避免缝隙 */}
                <YStack flex={1} alignItems="center" justifyContent="center">
                  <TouchableOpacity
                    style={{
                      width: '100%',
                      height: wp(50), // 响应式高度
                      justifyContent: 'center',
                      alignItems: 'center',
                      backgroundColor: pressedButton === `array-${idx}` ? '#f0f0f0' : 'transparent',
                      borderBottomLeftRadius: idx === 0 ? wp(12) : 0,
                      borderBottomRightRadius: idx === buttons.length - 1 ? wp(12) : 0,
                      borderLeftWidth: idx !== 0 ? wp(1) : 0,
                      borderLeftColor: dividerColor,
                    }}
                    activeOpacity={1}
                    onPressIn={() => setPressedButton(`array-${idx}`)}
                    onPressOut={() => setPressedButton(null)}
                    onPress={() => {
                      // 执行自定义点击回调
                      onPress && onPress()
                      // 根据配置决定是否关闭弹窗
                      if (closeOnPress) close()
                    }}
                  >
                  <CustomText style={{ color: color, fontSize: wp(16) }}>
                    {text}
                  </CustomText>
                  </TouchableOpacity>
                </YStack>
              </React.Fragment>
            )
          })}
        </XStack>
      )
    }

    // 如果以上条件都不满足，返回 null（不应该发生）
    return null
  }, [buttons, onCancel, onConfirm, closeOnCancel, closeOnConfirm, close])

  // ==================== 内容渲染逻辑 ====================
  
  /**
   * 内容区域渲染方法
   * 根据 content 参数的类型进行不同的渲染处理
   */
  const renderBody = useCallback(() => {
    // 如果 content 是字符串，渲染为居中的文本段落
    if (typeof content === 'string') {
      return (
        <YStack minHeight={wp(100)} alignItems="center" justifyContent="center">
          <CustomText style={{fontSize:wp(16),lineHeight:wp(22),color:'#191919',textAlign:'center'}}>
            {content}
          </CustomText>
        </YStack>
      )
    }
    // 如果 content 是 React 元素，直接渲染；如果为空则返回 null
    return content || null
  }, [content])

  // ==================== 组件渲染 ====================
  
  return (
    /* 
      Tamagui Dialog 根组件
      - open: 控制弹窗显示状态
      - onOpenChange: 状态变化回调
      - modal: 模态弹窗模式，阻止背景交互
    */
    <Dialog open={currentOpen} onOpenChange={setOpen} modal>
      {/* Dialog.Portal: 将弹窗内容渲染到 DOM 树的顶层，避免 z-index 问题 */}
      <Dialog.Portal>
        {/* 
          Dialog.Overlay: 弹窗背景遮罩层
          - 半透明黑色背景
          - 支持进入/退出动画
          - 点击遮罩层可关闭弹窗（Tamagui 默认行为）
        */}
        {/* 
          Dialog.Overlay: 弹窗背景遮罩层
          - animation="medium": 中等速度动画
          - enterStyle/exitStyle: 进入/退出时透明度为0
          - backgroundColor: 半透明黑色背景
          - 点击遮罩层可关闭弹窗（Tamagui 默认行为）
        */}
        <Dialog.Overlay
          key="overlay"
          animation="fast"
          enterStyle={{ opacity: 0 }}
          exitStyle={{ opacity: 0 }}
          backgroundColor="rgba(0, 0, 0, 0.5)"
        >
          {/* 在遮罩内部直接捕获点击：可配置是否收起键盘与关闭弹窗 */}
          {(dismissKeyboardOnOverlayPress || closeOnOverlayPress) && (
            <Pressable
              key="overlayDismiss"
              style={StyleSheet.absoluteFill}
              onPress={() => {
                if (dismissKeyboardOnOverlayPress) {
                  try { Keyboard.dismiss() } catch (_) {}
                }
                if (closeOnOverlayPress) {
                  // 使用内部 close 保持与受控/非受控模式一致
                  close()
                }
              }}
            />
          )}
        </Dialog.Overlay>

        {/* 
          Dialog.Content: 弹窗主体内容容器
          - bordered={false}: 不显示边框
          - elevate: 启用阴影效果
          - backgroundColor: 白色背景
          - width/maxWidth: 自定义宽度和最大宽度限制
          - borderRadius: 圆角半径
          - padding={0}: 内边距为0，由内部组件控制
          - shadowRadius: 阴影半径
          - animation: 中等速度动画
          - enterStyle/exitStyle: 进入/退出时透明+缩小效果
        */}
        <Dialog.Content
          key="content"
          bordered={false}
          elevate
          backgroundColor="#fff"
          width={wp(width)}
          maxWidth={wp(340)}
          borderRadius={wp(12)}
          padding={0}
          shadowRadius={wp(20)}
          animation="fast"
          enterStyle={{ opacity: 0, scale: 0.9 }}
          exitStyle={{ opacity: 0, scale: 0.9 }}
        >
          {/* 
            内容区域容器
            - 垂直布局，居中对齐
            - 自定义内边距
            - 元素间距为 $2（Tamagui 间距单位）
          */}
          <YStack 
            p={wp(contentPadding)} 
            alignItems="center" 
            gap="$2"
          >
            {renderBody()}
          </YStack>

          {/* 按钮区域：渲染底部操作按钮 */}
          {renderButtons()}
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog>
  )
}

export default CustomDialog