import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { ConfigProvider, Grid } from '@nutui/nutui-react-taro'
import { useUser } from '@/hooks/useUser'
import { useThemeStyles } from '@/hooks/useTheme'
import { Edit } from '@nutui/icons-react-taro'

function Admin() {
  const { isAdmin } = useUser()
  const themeStyles = useThemeStyles()

  if (!isAdmin()) {
    return (
      <View className="bg-gray-100 min-h-screen flex items-center justify-center">
        <View className="text-center">
          <Text className="text-gray-400 text-sm">暂无访问权限</Text>
        </View>
      </View>
    )
  }

  return (
    <View className="bg-gray-100 min-h-screen">
      <View className="px-4 py-6" style={themeStyles.primaryBackground}>
        <Text className="text-white text-lg font-bold">内容管理</Text>
        <View className="mt-1">
          <Text className="text-white text-sm opacity-80">管理文章、内容等数据</Text>
        </View>
      </View>

      <View className="bg-white mx-4 mt-4 rounded-xl p-4">
        <Text className="font-semibold text-gray-800 mb-4 block">管理工具</Text>
        <ConfigProvider>
          <Grid columns={4}>
            <Grid.Item text="文章管理" onClick={() => Taro.navigateTo({ url: '/admin/article/index' })}>
              <View className="text-center">
                <View className="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mx-auto mb-2">
                  <Edit color="#3b82f6" size="20" />
                </View>
              </View>
            </Grid.Item>
          </Grid>
        </ConfigProvider>
      </View>
    </View>
  )
}

export default Admin