import 'package:flutter/material.dart';
import 'package:tugas_akhir_supabase/screens/community/models/farming_guide_model.dart';
import 'package:tugas_akhir_supabase/screens/community/services/guide_service.dart';

class GuideCard extends StatelessWidget {
  final FarmingGuideModel guide;
  final Function()? onTap;

  const GuideCard({super.key, required this.guide, this.onTap});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.only(bottom: 16),
      elevation: 2,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildCardHeader(),
            Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Expanded(
                        child: Text(
                          guide.title,
                          style: const TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      Container(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 8,
                          vertical: 4,
                        ),
                        decoration: BoxDecoration(
                          color: guide.getCategoryColor().withOpacity(0.1),
                          borderRadius: BorderRadius.circular(4),
                        ),
                        child: Text(
                          guide.category,
                          style: TextStyle(
                            color: guide.getCategoryColor(),
                            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: TextButton.icon(
                      onPressed: onTap,
                      icon: Icon(
                        Icons.article,
                        color: guide.getCategoryColor(),
                      ),
                      label: Text(
                        'Baca Selengkapnya',
                        style: TextStyle(color: guide.getCategoryColor()),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildCardHeader() {
    // Cek apakah ada URL gambar
    if (guide.imageUrl != null && guide.imageUrl!.isNotEmpty) {
      // Fix URL gambar jika perlu
      final fixedImageUrl = GuideService().fixImageUrl(guide.imageUrl);
      debugPrint('Menggunakan gambar dengan URL: $fixedImageUrl');

      return Container(
        height: 150,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.vertical(top: Radius.circular(12)),
          color: guide.getCategoryColor().withOpacity(0.1),
        ),
        child: ClipRRect(
          borderRadius: const BorderRadius.vertical(top: Radius.circular(12)),
          child: Stack(
            children: [
              // Gambar utama dengan error handling yang ditingkatkan
              fixedImageUrl != null
                  ? Stack(
                    children: [
                      // Add a placeholder or loading state
                      Container(
                        width: double.infinity,
                        height: 150,
                        color: guide.getCategoryColor().withOpacity(0.1),
                        child: Center(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Icon(
                                Icons.image,
                                color: guide.getCategoryColor().withOpacity(
                                  0.5,
                                ),
                                size: 36,
                              ),
                              const SizedBox(height: 8),
                              Text(
                                'Memuat gambar...',
                                style: TextStyle(
                                  color: guide.getCategoryColor(),
                                  fontSize: 14,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      // Actual image with error handling
                      Image.network(
                        fixedImageUrl,
                        width: double.infinity,
                        height: 150,
                        fit: BoxFit.cover,
                        errorBuilder: (context, error, stackTrace) {
                          debugPrint('Error loading image: $error');
                          debugPrint('URL gambar yang gagal: $fixedImageUrl');
                          // Fallback jika gambar gagal dimuat
                          return Container(
                            width: double.infinity,
                            height: 150,
                            color: guide.getCategoryColor().withOpacity(0.1),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Icon(
                                  Icons.broken_image,
                                  color: guide.getCategoryColor().withOpacity(
                                    0.5,
                                  ),
                                  size: 36,
                                ),
                                const SizedBox(height: 8),
                                const Text(
                                  'Gambar tidak dapat dimuat',
                                  style: TextStyle(
                                    color: Colors.grey,
                                    fontSize: 14,
                                  ),
                                ),
                              ],
                            ),
                          );
                        },
                      ),
                    ],
                  )
                  : _buildDefaultHeader(),
              // Overlay gradien untuk memastikan teks dapat terbaca
              Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Colors.transparent, Colors.black.withOpacity(0.5)],
                    stops: const [0.7, 1.0],
                  ),
                ),
              ),
              // Indikator kategori
              Positioned(
                bottom: 8,
                left: 8,
                child: Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 8,
                    vertical: 4,
                  ),
                  decoration: BoxDecoration(
                    color: guide.getCategoryColor().withOpacity(0.8),
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Icon(
                        guide.getCategoryIcon(),
                        color: Colors.white,
                        size: 16,
                      ),
                      const SizedBox(width: 4),
                      Text(
                        guide.category,
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      );
    } else {
      // Header default jika tidak ada URL gambar
      return _buildDefaultHeader();
    }
  }

  Widget _buildDefaultHeader() {
    return Container(
      height: 100,
      decoration: BoxDecoration(
        color: guide.getCategoryColor().withOpacity(0.2),
        borderRadius: const BorderRadius.vertical(top: Radius.circular(12)),
      ),
      child: Center(
        child: Icon(
          guide.getCategoryIcon(),
          size: 48,
          color: guide.getCategoryColor(),
        ),
      ),
    );
  }
}