import 'package:flutter/material.dart';
import 'package:tugas_akhir_supabase/core/theme/app_colors.dart';
import 'package:tugas_akhir_supabase/screens/community/components/guides_list_view.dart';
import 'package:tugas_akhir_supabase/screens/community/utils/plant_categorizer.dart';

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

  @override
  State<FarmingGuideTab> createState() => _FarmingGuideTabState();
}

class _FarmingGuideTabState extends State<FarmingGuideTab>
    with TickerProviderStateMixin {
  late AnimationController _headerAnimationController;
  late AnimationController _contentAnimationController;
  late Animation<double> _headerAnimation;
  late Animation<double> _contentAnimation;

  final List<CategoryModel> _categories = [
    CategoryModel(
      name: PlantCategorizer.TANAMAN_PANGAN,
      icon: Icons.grass,
      color: const Color(0xFF4CAF50),
      gradient: const LinearGradient(
        colors: [Color(0xFF66BB6A), Color(0xFF4CAF50)],
      ),
    ),
    CategoryModel(
      name: PlantCategorizer.SAYURAN,
      icon: Icons.eco,
      color: const Color(0xFF8BC34A),
      gradient: const LinearGradient(
        colors: [Color(0xFF9CCC65), Color(0xFF8BC34A)],
      ),
    ),
    CategoryModel(
      name: PlantCategorizer.BUAH_BUAHAN,
      icon: Icons.local_florist,
      color: const Color(0xFFFF9800),
      gradient: const LinearGradient(
        colors: [Color(0xFFFFB74D), Color(0xFFFF9800)],
      ),
    ),
    CategoryModel(
      name: PlantCategorizer.REMPAH,
      icon: Icons.spa,
      color: const Color(0xFF795548),
      gradient: const LinearGradient(
        colors: [Color(0xFF8D6E63), Color(0xFF795548)],
      ),
    ),
    CategoryModel(
      name: 'Kalender Tanam',
      icon: Icons.calendar_month,
      color: const Color(0xFF2196F3),
      gradient: const LinearGradient(
        colors: [Color(0xFF42A5F5), Color(0xFF2196F3)],
      ),
    ),
  ];

  String _selectedCategory = '';
  int _selectedIndex = -1;

  @override
  void initState() {
    super.initState();
    _headerAnimationController = AnimationController(
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );
    _contentAnimationController = AnimationController(
      duration: const Duration(milliseconds: 600),
      vsync: this,
    );

    _headerAnimation = CurvedAnimation(
      parent: _headerAnimationController,
      curve: Curves.easeOutCubic,
    );
    _contentAnimation = CurvedAnimation(
      parent: _contentAnimationController,
      curve: Curves.easeOutCubic,
    );

    _headerAnimationController.forward();
    _contentAnimationController.forward();
  }

  @override
  void dispose() {
    _headerAnimationController.dispose();
    _contentAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF8FFFE),
      body: CustomScrollView(
        slivers: [
          _buildAnimatedHeader(),
          _buildCategorySelector(),
          _buildContent(),
        ],
      ),
    );
  }

  Widget _buildAnimatedHeader() {
    return SliverToBoxAdapter(
      child: AnimatedBuilder(
        animation: _headerAnimation,
        builder: (context, child) {
          return Transform.translate(
            offset: Offset(0, 50 * (1 - _headerAnimation.value)),
            child: Opacity(
              opacity: _headerAnimation.value,
              child: Container(
                margin: const EdgeInsets.all(20),
                padding: const EdgeInsets.all(24),
                decoration: BoxDecoration(
                  gradient: const LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                      Color(0xFF1B5E20),
                      Color(0xFF2E7D32),
                      Color(0xFF388E3C),
                    ],
                  ),
                  borderRadius: BorderRadius.circular(20),
                  boxShadow: [
                    BoxShadow(
                      color: const Color(0xFF2E7D32).withOpacity(0.3),
                      blurRadius: 20,
                      offset: const Offset(0, 10),
                    ),
                  ],
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Container(
                          padding: const EdgeInsets.all(12),
                          decoration: BoxDecoration(
                            color: Colors.white.withOpacity(0.2),
                            borderRadius: BorderRadius.circular(12),
                          ),
                          child: const Icon(
                            Icons.agriculture,
                            color: Colors.white,
                            size: 28,
                          ),
                        ),
                        const SizedBox(width: 16),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const Text(
                                'Panduan Pertanian Cerdas',
                                style: TextStyle(
                                  fontSize: 24,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.white,
                                  letterSpacing: 0.5,
                                ),
                              ),
                              const SizedBox(height: 4),
                              Text(
                                'Solusi pertanian modern untuk petani Indonesia',
                                style: TextStyle(
                                  fontSize: 14,
                                  color: Colors.white.withOpacity(0.9),
                                  height: 1.3,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );
  }

  Widget _buildCategorySelector() {
    return SliverToBoxAdapter(
      child: Container(
        height: 110,
        margin: const EdgeInsets.only(bottom: 10),
        child: ListView.builder(
          padding: const EdgeInsets.symmetric(horizontal: 12),
          scrollDirection: Axis.horizontal,
          itemCount: _categories.length,
          itemBuilder: (context, index) {
            final category = _categories[index];
            final isSelected = index == _selectedIndex;

            return GestureDetector(
              onTap: () {
                setState(() {
                  _selectedCategory = isSelected ? '' : category.name;
                  _selectedIndex = isSelected ? -1 : index;
                  _contentAnimationController.reset();
                  _contentAnimationController.forward();
                });
              },
              child: AnimatedContainer(
                duration: const Duration(milliseconds: 300),
                margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 10),
                padding: const EdgeInsets.symmetric(horizontal: 20),
                decoration: BoxDecoration(
                  gradient: isSelected ? category.gradient : null,
                  color: isSelected ? null : Colors.white,
                  borderRadius: BorderRadius.circular(12),
                  boxShadow: [
                    BoxShadow(
                      color:
                          isSelected
                              ? category.color.withOpacity(0.4)
                              : Colors.black.withOpacity(0.05),
                      blurRadius: 10,
                      offset: const Offset(0, 5),
                    ),
                  ],
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(
                      category.icon,
                      color: isSelected ? Colors.white : category.color,
                      size: 28,
                    ),
                    const SizedBox(height: 8),
                    Text(
                      category.name,
                      style: TextStyle(
                        fontSize: 12,
                        fontWeight:
                            isSelected ? FontWeight.bold : FontWeight.normal,
                        color: isSelected ? Colors.white : Colors.black87,
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  Widget _buildContent() {
    return SliverFillRemaining(
      child: AnimatedBuilder(
        animation: _contentAnimation,
        builder: (context, child) {
          return FadeTransition(
            opacity: _contentAnimation,
            child: GuidesListView(categoryFilter: _selectedCategory),
          );
        },
      ),
    );
  }
}

class CategoryModel {
  final String name;
  final IconData icon;
  final Color color;
  final LinearGradient gradient;

  CategoryModel({
    required this.name,
    required this.icon,
    required this.color,
    required this.gradient,
  });
}