import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import 'package:tugas_akhir_supabase/core/theme/app_colors.dart';

class FarmingGuidesList extends StatefulWidget {
  final String categoryFilter;

  const FarmingGuidesList({super.key, this.categoryFilter = ''});

  @override
  State<FarmingGuidesList> createState() => _FarmingGuidesListState();
}

class _FarmingGuidesListState extends State<FarmingGuidesList> {
  bool _isLoading = true;
  List<Map<String, dynamic>> _guides = [];
  final String _errorMessage = '';
  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _loadGuides();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  void _loadGuides() {
    setState(() {
      _isLoading = true;
    });

    // Gunakan data statis saja untuk menghindari crash
    Future.delayed(Duration.zero, () {
      if (mounted) {
        setState(() {
          _guides = _getStaticGuides();
          _isLoading = false;
        });
      }
    });
  }

  // Data statis sebagai konten utama
  List<Map<String, dynamic>> _getStaticGuides() {
    final allGuides = [
      {
        'id': '1',
        'title': 'Panduan Bertanam Padi',
        'content':
            'Panduan lengkap cara bertanam padi dengan metode modern untuk hasil panen maksimal. Padi adalah tanaman pangan pokok di Indonesia. Dengan produktivitas yang tinggi, padi menjadi sumber pangan utama bagi masyarakat Indonesia. Pertanian modern telah mengembangkan berbagai teknik untuk meningkatkan produktivitas padi, seperti penggunaan varietas unggul, pengendalian hama, dan pengelolaan lahan yang baik.',
        'category': 'Tanaman Pangan',
        'created_at': DateTime.now().toString(),
      },
      {
        'id': '2',
        'title': 'Cara Budidaya Cabai',
        'content':
            'Teknik budidaya cabai yang tepat untuk menghindari hama dan penyakit. Cabai adalah komoditas hortikultura bernilai tinggi di Indonesia. Dengan produktivitas yang tinggi, cabai menjadi komoditas penting bagi masyarakat Indonesia. Pertanian modern telah mengembangkan berbagai teknik untuk meningkatkan produktivitas cabai, seperti penggunaan pembibitan steril, pengendalian hama, dan pengelolaan lahan yang baik.',
        'category': 'Sayuran',
        'created_at': DateTime.now().toString(),
      },
      {
        'id': '3',
        'title': 'Perawatan Tanaman Jeruk',
        'content':
            'Panduan perawatan tanaman jeruk mulai dari pembibitan hingga panen. Jeruk adalah buah yang banyak dibudidayakan di Indonesia. Dengan produktivitas yang tinggi, jeruk menjadi buah yang penting bagi masyarakat Indonesia. Pertanian modern telah mengembangkan berbagai teknik untuk meningkatkan produktivitas jeruk, seperti penggunaan bibit unggul, pengendalian hama, dan pengelolaan lahan yang baik.',
        'category': 'Buah-buahan',
        'created_at': DateTime.now().toString(),
      },
      {
        'id': '4',
        'title': 'Budidaya Jahe Merah',
        'content':
            'Panduan lengkap cara budidaya jahe merah yang memiliki nilai ekonomi tinggi. Jahe merah adalah rempah yang memiliki banyak manfaat kesehatan. Dengan teknik budidaya yang tepat, jahe merah dapat menghasilkan panen yang melimpah dan berkualitas tinggi.',
        'category': 'Rempah',
        'created_at': DateTime.now().toString(),
      },
      {
        'id': '5',
        'title': 'Kalender Tanam Padi',
        'content':
            'Informasi lengkap tentang waktu yang tepat untuk menanam padi berdasarkan musim dan wilayah di Indonesia. Kalender tanam membantu petani menentukan waktu yang tepat untuk memulai budidaya padi.',
        'category': 'Kalender Tanam',
        'created_at': DateTime.now().toString(),
      },
      {
        'id': '6',
        'title': 'Teknik Hidroponik Sayuran',
        'content':
            'Panduan lengkap cara bertanam sayuran dengan teknik hidroponik untuk hasil maksimal tanpa memerlukan lahan yang luas. Hidroponik adalah metode bertanam tanpa menggunakan tanah, melainkan menggunakan larutan nutrisi mineral dalam air.',
        'category': 'Sayuran',
        'created_at': DateTime.now().toString(),
      },
    ];

    // Filter berdasarkan kategori jika ada
    if (widget.categoryFilter.isNotEmpty) {
      return allGuides.where((guide) {
        final category = guide['category'].toString().toLowerCase();
        return category.contains(widget.categoryFilter.toLowerCase());
      }).toList();
    }

    return allGuides;
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return const Center(child: CircularProgressIndicator());
    }

    if (_errorMessage.isNotEmpty) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.error_outline, color: Colors.red, size: 48),
            const SizedBox(height: 16),
            Text(
              _errorMessage,
              style: const TextStyle(color: Colors.red),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      );
    }

    if (_guides.isEmpty) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.menu_book, size: 48, color: Colors.grey[400]),
            const SizedBox(height: 16),
            Text(
              widget.categoryFilter.isEmpty
                  ? 'Belum ada panduan tersedia'
                  : 'Belum ada panduan untuk kategori ${widget.categoryFilter}',
              style: TextStyle(fontSize: 16, color: Colors.grey[600]),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      );
    }

    // Implementasi sederhana tanpa SliverAppBar
    return Column(
      children: [
        // Header tetap di bagian atas (tidak di-scroll)
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          decoration: BoxDecoration(
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.05),
                blurRadius: 2,
                offset: const Offset(0, 2),
              ),
            ],
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                widget.categoryFilter.isEmpty
                    ? 'Semua Panduan'
                    : 'Panduan ${widget.categoryFilter}',
                style: const TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                ),
              ),
              IconButton(
                icon: const Icon(Icons.refresh, color: Colors.green),
                onPressed: _loadGuides,
                tooltip: 'Refresh',
              ),
            ],
          ),
        ),

        // Konten yang dapat di-scroll - dalam Expanded
        Expanded(
          child: Stack(
            children: [
              // ListView sederhana
              ListView.builder(
                controller: _scrollController,
                padding: const EdgeInsets.all(16),
                // Gunakan NeverScrollableScrollPhysics untuk menghindari efek refresh
                physics: const AlwaysScrollableScrollPhysics(),
                itemCount: _guides.length,
                itemBuilder: (context, index) {
                  final guide = _guides[index];
                  return _buildGuideCard(guide);
                },
              ),

              // Tombol kembali ke atas
              Positioned(
                right: 16,
                bottom: 16,
                child: FloatingActionButton.small(
                  backgroundColor: Colors.green.shade700,
                  onPressed: () {
                    _scrollController.animateTo(
                      0,
                      duration: const Duration(milliseconds: 500),
                      curve: Curves.easeInOut,
                    );
                  },
                  child: const Icon(Icons.arrow_upward, color: Colors.white),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildGuideCard(Map<String, dynamic> guide) {
    return InkWell(
      onTap: () => _showGuideDetail(guide),
      child: Card(
        margin: const EdgeInsets.only(bottom: 16),
        elevation: 2,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              height: 100,
              decoration: BoxDecoration(
                color: _getCategoryColor(guide['category']).withOpacity(0.2),
                borderRadius: const BorderRadius.vertical(
                  top: Radius.circular(12),
                ),
              ),
              child: Center(
                child: Icon(
                  _getCategoryIcon(guide['category']),
                  size: 48,
                  color: _getCategoryColor(guide['category']),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Expanded(
                        child: Text(
                          guide['title'] ?? 'Tanpa Judul',
                          style: const TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      Container(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 8,
                          vertical: 4,
                        ),
                        decoration: BoxDecoration(
                          color: _getCategoryColor(
                            guide['category'],
                          ).withOpacity(0.1),
                          borderRadius: BorderRadius.circular(4),
                        ),
                        child: Text(
                          guide['category'] ?? 'Umum',
                          style: TextStyle(
                            color: _getCategoryColor(guide['category']),
                            fontSize: 12,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 8),
                  Text(
                    guide['content'] ?? '',
                    style: TextStyle(color: Colors.grey[600]),
                    maxLines: 3,
                    overflow: TextOverflow.ellipsis,
                  ),
                  const SizedBox(height: 12),
                  Align(
                    alignment: Alignment.centerRight,
                    child: Container(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 12,
                        vertical: 8,
                      ),
                      decoration: BoxDecoration(
                        color: _getCategoryColor(
                          guide['category'],
                        ).withOpacity(0.1),
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Icon(
                            Icons.article,
                            color: _getCategoryColor(guide['category']),
                            size: 16,
                          ),
                          const SizedBox(width: 4),
                          Text(
                            'Baca Selengkapnya',
                            style: TextStyle(
                              color: _getCategoryColor(guide['category']),
                              fontWeight: FontWeight.w500,
                              fontSize: 13,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // Fungsi untuk menampilkan detail panduan dalam dialog
  void _showGuideDetail(Map<String, dynamic> guide) {
    showDialog(
      context: context,
      builder:
          (context) => Dialog(
            insetPadding: const EdgeInsets.all(16),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            child: Container(
              width: double.maxFinite,
              constraints: const BoxConstraints(maxHeight: 600),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  // Header dengan judul dan tombol tutup
                  Container(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 16,
                      vertical: 12,
                    ),
                    decoration: BoxDecoration(
                      color: _getCategoryColor(
                        guide['category'],
                      ).withOpacity(0.1),
                      borderRadius: const BorderRadius.vertical(
                        top: Radius.circular(16),
                      ),
                    ),
                    child: Row(
                      children: [
                        Icon(
                          _getCategoryIcon(guide['category']),
                          color: _getCategoryColor(guide['category']),
                        ),
                        const SizedBox(width: 8),
                        Expanded(
                          child: Text(
                            guide['title'] ?? 'Detail Panduan',
                            style: TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                              color: _getCategoryColor(guide['category']),
                            ),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                        IconButton(
                          icon: const Icon(Icons.close),
                          onPressed: () => Navigator.of(context).pop(),
                          padding: EdgeInsets.zero,
                          constraints: const BoxConstraints(),
                        ),
                      ],
                    ),
                  ),

                  // Badge kategori
                  Container(
                    width: double.infinity,
                    padding: const EdgeInsets.symmetric(vertical: 4),
                    color: _getCategoryColor(
                      guide['category'],
                    ).withOpacity(0.05),
                    child: Center(
                      child: Container(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 12,
                          vertical: 4,
                        ),
                        decoration: BoxDecoration(
                          color: _getCategoryColor(
                            guide['category'],
                          ).withOpacity(0.1),
                          borderRadius: BorderRadius.circular(50),
                        ),
                        child: Text(
                          guide['category'] ?? 'Umum',
                          style: TextStyle(
                            color: _getCategoryColor(guide['category']),
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                    ),
                  ),

                  // Konten artikel
                  Expanded(
                    child: SingleChildScrollView(
                      physics: const BouncingScrollPhysics(),
                      padding: const EdgeInsets.all(16),
                      child: Text(
                        guide['content'] ?? 'Tidak ada konten',
                        style: const TextStyle(height: 1.5),
                      ),
                    ),
                  ),

                  // Footer dengan tanggal
                  Container(
                    padding: const EdgeInsets.all(12),
                    decoration: BoxDecoration(
                      color: Colors.grey[100],
                      borderRadius: const BorderRadius.vertical(
                        bottom: Radius.circular(16),
                      ),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Icon(
                          Icons.calendar_today,
                          size: 14,
                          color: Colors.grey,
                        ),
                        const SizedBox(width: 4),
                        Text(
                          'Dipublikasikan: ${_formatDate(guide['created_at'])}',
                          style: const TextStyle(
                            fontSize: 12,
                            color: Colors.grey,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
    );
  }

  // Formatter untuk tanggal
  String _formatDate(String? dateString) {
    if (dateString == null) return 'Tanggal tidak tersedia';
    try {
      final date = DateTime.parse(dateString);
      return '${date.day}-${date.month}-${date.year}';
    } catch (e) {
      return 'Format tanggal tidak valid';
    }
  }

  // Fungsi untuk menentukan warna berdasarkan kategori
  Color _getCategoryColor(String? category) {
    if (category == null) return AppColors.primary;

    switch (category.toLowerCase()) {
      case 'tanaman pangan':
        return Colors.green.shade700;
      case 'sayuran':
        return Colors.lightGreen.shade700;
      case 'buah-buahan':
        return Colors.orange.shade700;
      case 'rempah':
        return Colors.deepOrange.shade700;
      case 'kalender tanam':
        return Colors.blue.shade700;
      default:
        return AppColors.primary;
    }
  }

  // Fungsi untuk menentukan icon berdasarkan kategori
  IconData _getCategoryIcon(String? category) {
    if (category == null) return Icons.agriculture;

    switch (category.toLowerCase()) {
      case 'tanaman pangan':
        return Icons.grass;
      case 'sayuran':
        return Icons.eco;
      case 'buah-buahan':
        return Icons.apple;
      case 'rempah':
        return Icons.spa;
      case 'kalender tanam':
        return Icons.calendar_today;
      default:
        return Icons.agriculture;
    }
  }
}
