import 'package:flutter/material.dart';
import '../../../core/routes/app_routes.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 页面标题
              const Text(
                '选择学习模块',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                ),
              ),
              const SizedBox(height: 8),
              const Text(
                '选择你想要学习的内容',
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.grey,
                ),
              ),
              const SizedBox(height: 24),
              
              // 学习模块网格
              Expanded(
                child: GridView.count(
                  crossAxisCount: 2,
                  crossAxisSpacing: 16,
                  mainAxisSpacing: 16,
                  childAspectRatio: 1.1,
                  children: [
                    _buildModuleCard(
                      context,
                      title: '词汇学习',
                      subtitle: '扩展词汇量',
                      icon: Icons.book,
                      color: Colors.blue,
                      route: Routes.vocabularyHome,
                    ),
                    _buildModuleCard(
                      context,
                      title: '听力训练',
                      subtitle: '提升听力技能',
                      icon: Icons.headphones,
                      color: Colors.green,
                      route: Routes.listeningHome,
                    ),
                    _buildModuleCard(
                      context,
                      title: '阅读理解',
                      subtitle: '增强阅读能力',
                      icon: Icons.menu_book,
                      color: Colors.orange,
                      route: Routes.readingHome,
                    ),
                    _buildModuleCard(
                      context,
                      title: '写作练习',
                      subtitle: '提高写作水平',
                      icon: Icons.edit,
                      color: Colors.purple,
                      route: Routes.writingHome,
                    ),
                    _buildModuleCard(
                      context,
                      title: '口语练习',
                      subtitle: '锻炼口语表达',
                      icon: Icons.mic,
                      color: Colors.red,
                      route: Routes.speakingHome,
                    ),
                    _buildModuleCard(
                      context,
                      title: '综合测试',
                      subtitle: '全面能力评估',
                      icon: Icons.quiz,
                      color: Colors.teal,
                      route: Routes.comprehensiveTest,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildModuleCard(
    BuildContext context, {
    required String title,
    required String subtitle,
    required IconData icon,
    required Color color,
    required String route,
  }) {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
      ),
      child: InkWell(
        onTap: () {
          // 使用根导航器来确保路由正确工作
          Navigator.of(context, rootNavigator: true).pushNamed(route);
        },
        borderRadius: BorderRadius.circular(16),
        child: Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16),
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                color.withOpacity(0.1),
                color.withOpacity(0.05),
              ],
            ),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: color.withOpacity(0.2),
                  shape: BoxShape.circle,
                ),
                child: Icon(
                  icon,
                  size: 32,
                  color: color,
                ),
              ),
              const SizedBox(height: 12),
              Text(
                title,
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                ),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 4),
              Text(
                subtitle,
                style: TextStyle(
                  fontSize: 12,
                  color: Colors.grey[600],
                ),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
    );
  }
}