import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
import { Popup, Button } from '@nutui/nutui-react-taro'
import { gradientThemes, GradientTheme } from '@/styles/gradients'

interface GradientThemeSelectorProps {
  visible: boolean
  onClose: () => void
  onSelect: (theme: GradientTheme) => void
  currentTheme?: GradientTheme
}

const GradientThemeSelector: React.FC<GradientThemeSelectorProps> = ({
  visible,
  onClose,
  onSelect,
  currentTheme
}) => {
  const [selectedTheme, setSelectedTheme] = useState<GradientTheme | null>(currentTheme || null)

  const handleThemeSelect = (theme: GradientTheme) => {
    setSelectedTheme(theme)
  }

  const handleConfirm = () => {
    if (selectedTheme) {
      onSelect(selectedTheme)
      onClose()
    }
  }

  const renderThemeItem = (theme: GradientTheme) => {
    const isSelected = selectedTheme?.name === theme.name

    return (
      <View
        key={theme.name}
        className={`p-3 rounded-lg border-2 ${isSelected ? 'border-blue-500' : 'border-gray-200'}`}
        onClick={() => handleThemeSelect(theme)}
      >
        {/* 渐变预览 */}
        <View
          className="w-full h-16 rounded-lg mb-2"
          style={{
            background: theme.background
          }}
        >
          <View className="w-full h-full flex items-center justify-center">
            <Text className="text-white text-xs font-bold drop-shadow-sm">
              预览
            </Text>
          </View>
        </View>

        {/* 主题信息 */}
        <View className="text-center">
          <Text className="text-sm font-semibold text-gray-800 mb-1">
            {theme.description.split(' - ')[0]}
          </Text>
          <Text className="text-xs text-gray-500">
            {theme.description.split(' - ')[1]}
          </Text>
        </View>

        {/* 选中标识 */}
        {isSelected && (
          <View className="absolute top-1 right-1 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
            <Text className="text-white text-xs">✓</Text>
          </View>
        )}
      </View>
    )
  }

  return (
    <Popup
      visible={visible}
      position="bottom"
      onClose={onClose}
      style={{ height: '70vh' }}
    >
      <View className="p-4">
        <View className="flex items-center justify-between mb-4">
          <Text className="text-lg font-bold">选择主题</Text>
          <Button size="small" fill="outline" onClick={onClose}>
            取消
          </Button>
        </View>

        <Text className="text-sm text-gray-600 mb-4">
          选择您喜欢的渐变主题，让界面更符合您的个人风格
        </Text>

        {/* 主题网格 */}
        <View className="grid grid-cols-2 gap-3 mb-6">
          {gradientThemes.map(renderThemeItem)}
        </View>

        {/* 确认按钮 */}
        <Button
          type="primary"
          block
          disabled={!selectedTheme}
          onClick={handleConfirm}
        >
          应用主题
        </Button>
      </View>
    </Popup>
  )
}

export default GradientThemeSelector