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

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

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

  @override
  ConsumerState<RecipesScreen> createState() => _RecipesScreenState();
}

class _RecipesScreenState extends ConsumerState<RecipesScreen> {
  int _selectedColumns = 2;

  @override
  void initState() {
    super.initState();
    _loadSelectedColumns();
  }

  Future<void> _loadSelectedColumns() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _selectedColumns = prefs.getInt('selectedColumns') ?? 2;
    });
  }

  Future<void> _saveSelectedColumns(int columns) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setInt('selectedColumns', columns);
  }

  @override
  Widget build(BuildContext context) {
    final recipesAsync = ref.watch(recipesProvider);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Recept'),
        actions: [
          PopupMenuButton<int>(
            icon: const Icon(Icons.grid_view),
            tooltip: 'Välj antal kolumner',
            onSelected: (int columns) {
              setState(() {
                _selectedColumns = columns;
              });
              _saveSelectedColumns(columns);
            },
            itemBuilder: (BuildContext context) => <PopupMenuEntry<int>>[
              const PopupMenuItem<int>(
                value: 2,
                child: Text('2 kolumner'),
              ),
              const PopupMenuItem<int>(
                value: 4,
                child: Text('4 kolumner'),
              ),
              const PopupMenuItem<int>(
                value: 6,
                child: Text('6 kolumner'),
              ),
              const PopupMenuItem<int>(
                value: 8,
                child: Text('8 kolumner'),
              ),
            ],
          ),
        ],
      ),
      body: 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.count(
            crossAxisCount: _selectedColumns,
            children: List.generate(
              recipes.length,
              (index) {
                final recipe = recipes[index];
                return GestureDetector(
                  onTap: () => context.push('/recipes/${recipe.id}'),
                  child: Container(
                    margin: const EdgeInsets.all(4.0),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8.0),
                      image: recipe.imageUrl != null
                          ? DecorationImage(
                              image: NetworkImage(recipe.imageUrl!),
                              fit: BoxFit.cover,
                            )
                          : null,
                    ),
                    child: recipe.imageUrl == null
                        ? const Center(child: Icon(Icons.restaurant))
                        : null,
                  ),
                );
              },
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Nytt recept',
        onPressed: () => context.push('/recipes/create'),
        child: const Icon(Icons.add),
      ),
    );
  }
}