import 'package:flutter/material.dart';
import '../../navigation/bottom_nav_bar.dart';

class ServicesScreen extends StatelessWidget {
  const ServicesScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('服务'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 服务分类
            const Text(
              '服务分类',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 16),
            GridView.count(
              crossAxisCount: 4,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              childAspectRatio: 1.0,
              children: [
                _buildServiceCategory(
                  icon: Icons.cloud,
                  title: '云服务',
                  color: Colors.blue,
                ),
                _buildServiceCategory(
                  icon: Icons.storage,
                  title: '存储',
                  color: Colors.green,
                ),
                _buildServiceCategory(
                  icon: Icons.security,
                  title: '安全',
                  color: Colors.orange,
                ),
                _buildServiceCategory(
                  icon: Icons.analytics,
                  title: '分析',
                  color: Colors.purple,
                ),
                _buildServiceCategory(
                  icon: Icons.code,
                  title: '开发',
                  color: Colors.red,
                ),
                _buildServiceCategory(
                  icon: Icons.dns,
                  title: '数据库',
                  color: Colors.teal,
                ),
                _buildServiceCategory(
                  icon: Icons.api,
                  title: 'API',
                  color: Colors.pink,
                ),
                _buildServiceCategory(
                  icon: Icons.more_horiz,
                  title: '更多',
                  color: Colors.grey,
                ),
              ],
            ),
            const SizedBox(height: 30),
            
            // 热门服务
            const Text(
              '热门服务',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 16),
            ListView.builder(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: 5,
              itemBuilder: (context, index) {
                return _buildHotServiceItem(index);
              },
            ),
            const SizedBox(height: 30),
            
            // 推荐服务
            const Text(
              '推荐服务',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 16),
            Card(
              elevation: 3,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12),
              ),
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                  children: [
                    Row(
                      children: [
                        Container(
                          width: 50,
                          height: 50,
                          decoration: BoxDecoration(
                            color: Colors.blue[100],
                            borderRadius: BorderRadius.circular(25),
                          ),
                          child: const Icon(
                            Icons.star,
                            color: Colors.blue,
                          ),
                        ),
                        const SizedBox(width: 16),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: const [
                              Text(
                                'VIP专属服务',
                                style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              SizedBox(height: 4),
                              Text(
                                '尊享VIP特权，获得更好的服务体验',
                                style: TextStyle(
                                  fontSize: 14,
                                  color: Colors.grey,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 16),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        TextButton(
                          onPressed: () {},
                          child: const Text('了解更多'),
                        ),
                        ElevatedButton(
                          onPressed: () {},
                          style: ElevatedButton.styleFrom(
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(20),
                            ),
                          ),
                          child: const Text('立即开通'),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: const BottomNavBar(initialIndex: 2),
    );
  }
  
  Widget _buildServiceCategory({
    required IconData icon,
    required String title,
    required Color color,
  }) {
    return Column(
      children: [
        Container(
          width: 60,
          height: 60,
          decoration: BoxDecoration(
            color: Color.lerp(Colors.white, Colors.transparent, 0.9)!,  // 0.3表示30%透明
            borderRadius: BorderRadius.circular(30),
          ),
          child: Icon(
            icon,
            color: color,
            size: 30,
          ),
        ),
        const SizedBox(height: 8),
        Text(
          title,
          style: const TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w500,
          ),
          textAlign: TextAlign.center,
        ),
      ],
    );
  }
  
  Widget _buildHotServiceItem(int index) {
    final services = [
      {'title': '云服务器', 'desc': '弹性计算，按需付费'},
      {'title': '对象存储', 'desc': '安全可靠的文件存储'},
      {'title': 'CDN加速', 'desc': '全球内容分发网络'},
      {'title': '数据库服务', 'desc': '高性能数据库解决方案'},
      {'title': 'API网关', 'desc': '统一API管理和调度'},
    ];
    
    return Card(
      margin: const EdgeInsets.only(bottom: 12),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      child: ListTile(
        leading: Container(
          width: 40,
          height: 40,
          decoration: BoxDecoration(
            color: Color.lerp(
              Colors.primaries[index % Colors.primaries.length],
              Colors.transparent,
              0.9,  // 90% 透明 = 10% 不透明度
            )!,
            borderRadius: BorderRadius.circular(20),
          ),
          child: Icon(
            Icons.cloud_circle,
            color: Colors.primaries[index % Colors.primaries.length],
          ),
        ),
        title: Text(
          services[index]['title']!,
          style: const TextStyle(
            fontWeight: FontWeight.bold,
          ),
        ),
        subtitle: Text(services[index]['desc']!),
        trailing: const Icon(Icons.chevron_right),
        onTap: () {},
      ),
    );
  }
}