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 view = ref.watch(recipesViewProvider).maybeWhen(
          data: (v) => v,
          orElse: () => (mode: RecipesViewMode.grid, columns: 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.',
              );
            }

            if (view.mode == RecipesViewMode.grid) {
              return GridView.builder(
                padding: const EdgeInsets.only(bottom: 88),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: view.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,
                    ),
                  );
                },
              );
            } else {
              return ListView.builder(
                padding: const EdgeInsets.only(bottom: 88),
                itemCount: recipes.length,
                itemBuilder: (context, index) {
                  final recipe = recipes[index];
                  return InkWell(
                    onTap: () => context.push('/recipes/${recipe.id}'),
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 12, vertical: 6),
                      child: Row(
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.circular(6),
                            child: recipe.imageUrl != null
                                ? Image.network(
                                    recipe.imageUrl!,
                                    width: 72,
                                    height: 72,
                                    fit: BoxFit.cover,
                                  )
                                : Container(
                                    width: 72,
                                    height: 72,
                                    color: Colors.grey[200],
                                    child: const Icon(Icons.restaurant,
                                        size: 32),
                                  ),
                          ),
                          const SizedBox(width: 12),
                          Expanded(
                            child: Text(
                              recipe.title,
                              style: Theme.of(context).textTheme.titleMedium,
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              );
            }
          },
        ),
        Positioned(
          right: 16,
          bottom: 16,
          child: FloatingActionButton(
            tooltip: 'Nytt recept',
            onPressed: () => context.push('/recipes/create'),
            child: const Icon(Icons.add),
          ),
        ),
      ],
    );
  }
}
