import 'package:aesthetica_wallpaper/providers/recipe_provider.dart';
import 'package:aesthetica_wallpaper/providers/editor_provider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class RecipeScreen extends StatelessWidget {
  const RecipeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Recipes')),
      // 监听 RecipeProvider
      body: Consumer<RecipeProvider>(
        builder: (context, provider, child) {
          if (provider.recipes.isEmpty) {
            return const Center(
              child: Text(
                'You have no saved recipes.\nGo create one!',
                textAlign: TextAlign.center,
                style: TextStyle(color: Colors.grey),
              ),
            );
          }

          // 显示配方列表
          return ListView.builder(
            itemCount: provider.recipes.length,
            itemBuilder: (context, index) {
              final recipe = provider.recipes[index];
              return ListTile(
                // 缩略图
                leading: ClipRRect(
                  borderRadius: BorderRadius.circular(8),
                  child: Image.asset(
                    recipe.baseImagePath,
                    width: 50,
                    height: 50,
                    fit: BoxFit.cover,
                  ),
                ),
                // 配方名称 (基于图片路径)
                title: Text(recipe.baseImagePath.split('/').last),
                subtitle: Text(
                  'Edited on ${DateTime.fromMillisecondsSinceEpoch(int.parse(recipe.id)).toLocal().toString().substring(0, 10)}',
                ),
                // 删除按钮
                trailing: IconButton(
                  icon: const Icon(Icons.delete, color: Colors.redAccent),
                  onPressed: () {
                    // 弹出确认对话框
                    showDialog(
                      context: context,
                      builder: (ctx) => AlertDialog(
                        title: const Text('Delete Recipe'),
                        content: const Text(
                          'Are you sure you want to delete this recipe?',
                        ),
                        actions: [
                          TextButton(
                            child: const Text('Cancel'),
                            onPressed: () => Navigator.of(ctx).pop(),
                          ),
                          TextButton(
                            child: const Text(
                              'Delete',
                              style: TextStyle(color: Colors.redAccent),
                            ),
                            onPressed: () {
                              provider.deleteRecipe(recipe.id);
                              Navigator.of(ctx).pop();
                            },
                          ),
                        ],
                      ),
                    );
                  },
                ),
                onTap: () {
                  // 当用户点击一个配方
                  // 1. 加载配方到编辑器
                  Provider.of<EditorProvider>(
                    context,
                    listen: false,
                  ).loadFromRecipe(recipe);
                  // 2. 导航到编辑器
                  Navigator.pushNamed(context, '/editor');
                },
              );
            },
          );
        },
      ),
    );
  }
}