import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

import '../../../core/api/api_error_mapper.dart';
import '../../../core/ui/async_state_views.dart';
import '../data/recipe_providers.dart';
import '../data/recipes_grid_provider.dart';

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final recipesAsync = ref.watch(recipesProvider);
    final columns = ref.watch(recipesGridProvider).maybeWhen(
          data: (v) => v,
          orElse: () => 2,
        );

    return Stack(
      children: [
        recipesAsync.when(
          loading: () => const LoadingStateView(label: 'Laddar recept...'),
          error: (error, _) => ErrorStateView(
            message: mapErrorToUserMessage(error, context),
            onRetry: () => ref.invalidate(recipesProvider),
          ),
          data: (recipes) {
            if (recipes.isEmpty) {
              return const EmptyStateView(
                title: 'Inga recept hittades',
                description: 'Lägg till ett recept för att komma igång.',
              );
            }

            return GridView.builder(
              padding: const EdgeInsets.only(bottom: 88),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: columns,
                crossAxisSpacing: 4,
                mainAxisSpacing: 4,
              ),
              itemCount: recipes.length,
              itemBuilder: (context, index) {
                final recipe = recipes[index];
                return GestureDetector(
                  onTap: () => context.push('/recipes/${recipe.id}'),
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8.0),
                      color: Colors.grey[200],
                      image: recipe.imageUrl != null
                          ? DecorationImage(
                              image: NetworkImage(recipe.imageUrl!),
                              fit: BoxFit.cover,
                            )
                          : null,
                    ),
                    child: recipe.imageUrl == null
                        ? const Center(child: Icon(Icons.restaurant, size: 32))
                        : null,
                  ),
                );
              },
            );
          },
        ),
        Positioned(
          right: 16,
          bottom: 16,
          child: FloatingActionButton(
            tooltip: 'Nytt recept',
            onPressed: () => context.push('/recipes/create'),
            child: const Icon(Icons.add),
          ),
        ),
      ],
    );
  }
}