mobile_adaptive_learning/lib/features/learning/screens/learning_screen.dart

import 'package:english_learning/features/auth/provider/user_provider.dart';
import 'package:english_learning/features/learning/provider/section_provider.dart';
import 'package:english_learning/features/learning/widgets/section_card.dart';
import 'package:english_learning/features/learning/modules/topics/screens/topics_list_screen.dart';
import 'package:english_learning/features/learning/widgets/section_card_shimmer.dart';
import 'package:flutter/material.dart';
import 'package:english_learning/core/utils/styles/theme.dart';
import 'package:provider/provider.dart';

class LearningScreen extends StatefulWidget {
  const LearningScreen({
    super.key,
  });

  @override
  State<LearningScreen> createState() => _LearningScreenState();
}

class _LearningScreenState extends State<LearningScreen> {
  @override
  void initState() {
    super.initState();
    _fetchSections();
  }

  Future<void> _fetchSections() async {
    final userProvider = Provider.of<UserProvider>(context, listen: false);
    final token = await userProvider.getValidToken();

    if (token != null) {
      await Provider.of<SectionProvider>(context, listen: false)
          .fetchSections(token);
    } else {
      print('No valid token found. User might need to log in.');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.bgSoftColor,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.only(top: 28.0, left: 16.0, right: 16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Choose what you want to learn!',
                style: AppTextStyles.blueTextStyle.copyWith(
                  fontSize: 18,
                  fontWeight: FontWeight.w900,
                ),
              ),
              const SizedBox(height: 8),
              Text(
                'Develop your English skills by studying the topics in each section below.',
                style: AppTextStyles.greyTextStyle.copyWith(
                  fontSize: 12,
                  fontWeight: FontWeight.w600,
                ),
              ),
              const SizedBox(height: 15),
              Expanded(
                child: Consumer<SectionProvider>(
                  builder: (context, sectionProvider, _) {
                    if (sectionProvider.isLoading) {
                      return _buildShimmerLoading();
                    } else if (sectionProvider.error != null) {
                      return Center(
                          child: Text('Error: ${sectionProvider.error}'));
                    } else {
                      return ListView.builder(
                        itemCount: sectionProvider.sections.length,
                        itemBuilder: (context, index) {
                          final section = sectionProvider.sections[index];
                          return LearningCard(
                            section: section,
                            onTap: () => Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder: (context) => TopicsListScreen(
                                  sectionId: section.id,
                                ),
                              ),
                            ),
                          );
                        },
                      );
                    }
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildShimmerLoading() {
    return ListView.builder(
      itemCount: 5, // Misalnya, kita menampilkan 5 shimmer items
      itemBuilder: (context, index) {
        return ShimmerWidget(
          child: Container(
            margin: const EdgeInsets.only(bottom: 16),
            child: Row(
              children: [
                Container(
                  width: 80,
                  height: 80,
                  decoration: BoxDecoration(
                    color: Colors.grey[300],
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
                const SizedBox(width: 16),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        height: 20,
                        decoration: BoxDecoration(
                          color: Colors.grey[300],
                          borderRadius: BorderRadius.circular(8),
                        ),
                      ),
                      const SizedBox(height: 8),
                      Container(
                        height: 20,
                        decoration: BoxDecoration(
                          color: Colors.grey[300],
                          borderRadius: BorderRadius.circular(8),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}