import { useEffect } from 'react'
import { View, Text } from '@tarojs/components'
import { cn } from '@/utils/cn'

interface DialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  children: React.ReactNode
}

export function Dialog({ open, onOpenChange, children }: DialogProps) {
  useEffect(() => {
    if (open) {
      // 在 Taro 中，我们可以使用模态框或者自定义弹窗
      // 这里使用自定义实现
    }
  }, [open])

  const handleBackdropClick = () => {
    onOpenChange(false)
  }

  const handleContentClick = (e: any) => {
    // 阻止事件冒泡，避免点击内容区域时关闭弹窗
    e.stopPropagation()
  }

  if (!open) return null

  return (
    <View
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
      onClick={handleBackdropClick}
    >
      <View
        className="relative bg-white rounded-lg shadow-lg max-w-md w-full mx-4"
        onClick={handleContentClick}
      >
        {children}
      </View>
    </View>
  )
}

interface DialogContentProps {
  className?: string
  children: React.ReactNode
}

export function DialogContent({ className, children }: DialogContentProps) {
  return (
    <View className={cn("p-6", className)}>
      {children}
    </View>
  )
}

interface DialogHeaderProps {
  className?: string
  children: React.ReactNode
}

export function DialogHeader({ className, children }: DialogHeaderProps) {
  return (
    <View className={cn("mb-4", className)}>
      {children}
    </View>
  )
}

interface DialogTitleProps {
  className?: string
  children: React.ReactNode
}

export function DialogTitle({ className, children }: DialogTitleProps) {
  return (
    <Text className={cn("text-lg font-semibold text-gray-900", className)}>
      {children}
    </Text>
  )
}

interface DialogFooterProps {
  className?: string
  children: React.ReactNode
}

export function DialogFooter({ className, children }: DialogFooterProps) {
  return (
    <View className={cn("flex justify-end space-x-2", className)}>
      {children}
    </View>
  )
}