import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:recolecta_app/features/separation_guide/providers/separation_guide_provider.dart';
import 'package:recolecta_app/features/separation_guide/models/separation_guide_model.dart'
    as guide;

class SeparationGuideScreen extends ConsumerWidget {
  const SeparationGuideScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final guideData = ref.watch(separationGuideProvider);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Guía de Separación'),
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(20.0),
          child: Text(
            'Funciona sin internet',
            style: Theme.of(context).textTheme.titleSmall,
          ),
        ),
      ),
      body: guideData.when(
        data: (data) => GridView.builder(
          padding: const EdgeInsets.all(16.0),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 16.0,
            mainAxisSpacing: 16.0,
            childAspectRatio: 1.2,
          ),
          itemCount: data.categorias.length,
          itemBuilder: (context, index) {
            final category = data.categorias[index];
            return CategoryCard(category: category);
          },
        ),
        loading: () => const Center(child: CircularProgressIndicator()),
        error: (err, stack) => Center(child: Text('Error: $err')),
      ),
    );
  }
}

class CategoryCard extends StatelessWidget {
  const CategoryCard({super.key, required this.category});

  final guide.Category category;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => context.go('/guide/${category.id}'),
      child: Card(
        color: category.colorValue.withOpacity(0.15),
        elevation: 0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16),
          side: BorderSide(color: category.colorValue, width: 1),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(category.iconData, size: 40, color: category.colorValue),
            const SizedBox(height: 12),
            Text(
              category.nombre,
              style: Theme.of(context).textTheme.titleMedium?.copyWith(
                fontWeight: FontWeight.bold,
                color: category.colorValue,
              ),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}
