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';

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final recipesAsync = ref.watch(recipesProvider);
    return Scaffold(
      body: recipesAsync.when(
        loading: () => const LoadingStateView(label: 'Laddar recept...'),
        error: (error, _) => ErrorStateView(
          message: mapErrorToUserMessage(error),
          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 ListView.builder(
            itemCount: recipes.length,
            itemBuilder: (context, index) {
              final recipe = recipes[index];
              return ListTile(
                leading: recipe.imageUrl != null
                    ? Image.network(recipe.imageUrl!, width: 56, fit: BoxFit.cover)
                    : const Icon(Icons.restaurant),
                title: Text(recipe.title),
                subtitle: recipe.description != null
                    ? Text(
                        recipe.description!,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      )
                    : null,
                trailing: const Icon(Icons.chevron_right),
                onTap: () => context.push('/recipes/${recipe.id}'),
              );
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Nytt recept',
        onPressed: () => context.push('/recipes/create'),
        child: const Icon(Icons.add),
      ),
    );
  }
}