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

class CategoryDetailScreen extends ConsumerWidget {
  final String categoryId;

  const CategoryDetailScreen({super.key, required this.categoryId});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final guideData = ref.watch(separationGuideProvider);

    return Scaffold(
      body: guideData.when(
        data: (data) {
          final category = data.categorias.firstWhere(
            (c) => c.id == categoryId,
          );
          return CustomScrollView(
            slivers: [
              SliverAppBar(
                title: Text(category.nombre),
                backgroundColor: category.colorValue,
                expandedHeight: 120,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  background: Container(
                    color: category.colorValue,
                    alignment: Alignment.bottomLeft,
                    padding: const EdgeInsets.only(left: 16, bottom: 24),
                    child: Text(
                      category.descripcion,
                      style: Theme.of(
                        context,
                      ).textTheme.titleMedium?.copyWith(color: Colors.white),
                    ),
                  ),
                ),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate((context, index) {
                  final example = category.ejemplos[index];
                  return ListTile(
                    leading: Icon(
                      example.acepta ? Icons.check_circle : Icons.cancel,
                      color: example.acepta ? Colors.green : Colors.red,
                    ),
                    title: Text(example.nombre),
                    subtitle: example.razon != null
                        ? Chip(
                            label: Text(example.razon!),
                            backgroundColor: Colors.red.withOpacity(0.1),
                          )
                        : null,
                  );
                }, childCount: category.ejemplos.length),
              ),
            ],
          );
        },
        loading: () => const Center(child: CircularProgressIndicator()),
        error: (err, stack) => Center(child: Text('Error: $err')),
      ),
      bottomNavigationBar: guideData.maybeWhen(
        data: (data) {
          final category = data.categorias.firstWhere(
            (c) => c.id == categoryId,
          );
          return BottomAppBar(
            color: category.colorValue,
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text(
                category.consejo,
                style: const TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
                textAlign: TextAlign.center,
              ),
            ),
          );
        },
        orElse: () => null,
      ),
    );
  }
}
