import React, { useState, useEffect } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { Button, Empty, Tabs, PullToRefresh } from '@nutui/nutui-react-taro'
import './index.scss'

const ProjectList: React.FC = () => {
  const [activeTab, setActiveTab] = useState('all')
  const [projects, setProjects] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)

  // 模拟数据
  const mockProjects = [
    {
      id: 1,
      name: '我的企业官网',
      type: 'pro',
      description: '企业品牌展示官网',
      appCount: 2,
      memberCount: 3,
      apiCallCount: 12580,
      status: 'active',
      updatedAt: '2026-04-10',
    },
    {
      id: 2,
      name: '电商小程序',
      type: 'enterprise',
      description: '多端电商解决方案',
      appCount: 5,
      memberCount: 8,
      apiCallCount: 98650,
      status: 'active',
      updatedAt: '2026-04-12',
    },
    {
      id: 3,
      name: '内部管理系统',
      type: 'basic',
      description: 'OA办公系统',
      appCount: 1,
      memberCount: 5,
      apiCallCount: 3200,
      status: 'active',
      updatedAt: '2026-04-08',
    },
  ]

  // 加载数据
  const loadData = async () => {
    try {
      setLoading(true)
      // TODO: 替换为真实 API 调用
      // const result = await pageMyProject({ type: activeTab === 'all' ? undefined : activeTab })
      await new Promise((resolve) => setTimeout(resolve, 500))
      setProjects(mockProjects)
    } catch (error) {
      console.error('加载失败', error)
      Taro.showToast({ title: '加载失败', icon: 'none' })
    } finally {
      setLoading(false)
    }
  }

  // 下拉刷新
  const onRefresh = async () => {
    setRefreshing(true)
    await loadData()
    setRefreshing(false)
  }

  useEffect(() => {
    loadData()
  }, [activeTab])

  // 获取项目类型标签
  const getTypeBadge = (type: string) => {
    const badges: Record<string, { text: string; color: string }> = {
      basic: { text: '基础', color: '#6b7280' },
      pro: { text: '专业', color: '#3b82f6' },
      enterprise: { text: '企业', color: '#f59e0b' },
    }
    return badges[type] || badges.basic
  }

  // 跳转创建页面
  const handleCreate = () => {
    Taro.navigateTo({ url: '/developer/project/create' })
  }

  // 跳转项目详情
  const handleProjectClick = (id: number) => {
    Taro.navigateTo({ url: `/developer/project/${id}` })
  }

  return (
    <View className="project-list-page">
      <PullToRefresh refreshing={refreshing} onRefresh={onRefresh}>
        {/* 标签页 */}
        <View className="tabs-wrapper">
          <Tabs value={activeTab} onChange={(v) => setActiveTab(v as string)}>
            <Tabs.TabPane title="全部项目" value="all" />
            <Tabs.TabPane title="基础版" value="basic" />
            <Tabs.TabPane title="专业版" value="pro" />
            <Tabs.TabPane title="企业版" value="enterprise" />
          </Tabs>
        </View>

        <ScrollView scrollY className="project-list-page__scroll">
          {/* 项目列表 */}
          <View className="project-list">
            {loading ? (
              <View className="project-list__loading">
                <Text>加载中...</Text>
              </View>
            ) : projects.length === 0 ? (
              <Empty description="暂无项目" />
            ) : (
              <View className="project-list__content">
                {projects.map((project) => {
                  const badge = getTypeBadge(project.type)
                  return (
                    <View key={project.id} className="project-card" onClick={() => handleProjectClick(project.id)}>
                      <View className="project-card__header">
                        <View className="project-card__title-row">
                          <Text className="project-card__name">{project.name}</Text>
                          <View className="project-card__badge" style={{ backgroundColor: `${badge.color}15`, color: badge.color }}>
                            <Text className="project-card__badgeText">{badge.text}</Text>
                          </View>
                        </View>
                        <Text className="project-card__desc">{project.description}</Text>
                      </View>

                      <View className="project-card__stats">
                        <View className="project-card__stat">
                          <Text className="project-card__statValue">{project.appCount}</Text>
                          <Text className="project-card__statLabel">应用</Text>
                        </View>
                        <View className="project-card__stat">
                          <Text className="project-card__statValue">{project.memberCount}</Text>
                          <Text className="project-card__statLabel">成员</Text>
                        </View>
                        <View className="project-card__stat">
                          <Text className="project-card__statValue">{project.apiCallCount}</Text>
                          <Text className="project-card__statLabel">API调用</Text>
                        </View>
                      </View>

                      <View className="project-card__footer">
                        <Text className="project-card__time">更新于 {project.updatedAt}</Text>
                        <View className="project-card__action">
                          <Text className="project-card__actionText">查看详情 ›</Text>
                        </View>
                      </View>
                    </View>
                  )
                })}
              </View>
            )}
          </View>

          {/* 底部安全区域 */}
          <View className="safe-area-bottom" />
        </ScrollView>

        {/* 创建按钮 */}
        <View className="create-btn-wrapper">
          <Button type="primary" block onClick={handleCreate}>
            创建新项目
          </Button>
        </View>
      </PullToRefresh>
    </View>
  )
}

export default ProjectList