import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../../providers/battle_provider.dart';
import '../../../providers/shop_provider.dart';
import '../../../game/model/item.dart';
import '../../../utils/item_utils.dart';
import '../../../game/enums.dart';
import '../../../game/config/theme_config.dart';
import '../../../game/config/game_config.dart';
import '../../../game/model/entity.dart';

class ShopUI extends StatelessWidget {
  final BattleProvider battleProvider;

  const ShopUI({super.key, required this.battleProvider});

  @override
  Widget build(BuildContext context) {
    return Consumer<ShopProvider>(
      builder: (context, shopProvider, child) {
        final player = battleProvider.player;
        final shopItems = shopProvider.availableItems;

        return Container(
          color: ThemeConfig.shopBg,
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Row(
                    children: [
                      Icon(
                        Icons.store,
                        size: 32,
                        color: ThemeConfig.mainIconColor,
                      ),
                      SizedBox(width: 8),
                      Text(
                        "Merchant",
                        style: TextStyle(
                          fontSize: 24,
                          fontWeight: FontWeight.bold,
                          color: ThemeConfig.textColorWhite,
                        ),
                      ),
                    ],
                  ),
                  Row(
                    children: [
                      const Icon(
                        Icons.monetization_on,
                        color: ThemeConfig.statGoldColor,
                      ),
                      const SizedBox(width: 4),
                      Text(
                        "${player.gold} G",
                        style: const TextStyle(
                          color: ThemeConfig.statGoldColor,
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              const Divider(color: ThemeConfig.textColorGrey),
              const SizedBox(height: 16),

              Expanded(
                child: shopItems.isEmpty
                    ? const Center(
                        child: Text(
                          "Sold Out",
                          style: TextStyle(
                            color: ThemeConfig.textColorGrey,
                            fontSize: 24,
                          ),
                        ),
                      )
                    : GridView.builder(
                        gridDelegate:
                            const SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisCount: 2,
                              crossAxisSpacing: 16.0,
                              mainAxisSpacing: 16.0,
                              childAspectRatio: 0.8,
                            ),
                        itemCount: shopItems.length,
                        itemBuilder: (context, index) {
                          final item = shopItems[index];
                          final canBuy = player.gold >= item.price;

                          return InkWell(
                            onTap: () => _showBuyConfirmation(
                              context,
                              item,
                              shopProvider,
                              player,
                            ),
                            child: Card(
                              color: ThemeConfig.shopItemCardBg,
                              shape: item.rarity != ItemRarity.magic
                                  ? RoundedRectangleBorder(
                                      side: BorderSide(
                                        color: ItemUtils.getRarityColor(
                                          item.rarity,
                                        ),
                                        width: 2.0,
                                      ),
                                      borderRadius: BorderRadius.circular(8.0),
                                    )
                                  : null,
                              child: Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Column(
                                  crossAxisAlignment:
                                      CrossAxisAlignment.stretch,
                                  children: [
                                    Expanded(
                                      flex: 2,
                                      child: Center(
                                        child: Image.asset(
                                          ItemUtils.getIconPath(item.slot),
                                          width: 48,
                                          height: 48,
                                          fit: BoxFit.contain,
                                          filterQuality: FilterQuality.high,
                                        ),
                                      ),
                                    ),
                                    Expanded(
                                      flex: 1,
                                      child: Center(
                                        child: Text(
                                          item.name,
                                          textAlign: TextAlign.center,
                                          style: TextStyle(
                                            fontWeight:
                                                ThemeConfig.fontWeightBold,
                                            color: ItemUtils.getRarityColor(
                                              item.rarity,
                                            ),
                                            fontSize:
                                                ThemeConfig.fontSizeMedium,
                                          ),
                                          maxLines: 2,
                                          overflow: TextOverflow.ellipsis,
                                        ),
                                      ),
                                    ),
                                    Expanded(
                                      flex: 1,
                                      child: _buildItemStatText(item),
                                    ),
                                    SizedBox(
                                      height: 32,
                                      child: ElevatedButton(
                                        style: ElevatedButton.styleFrom(
                                          backgroundColor: canBuy
                                              ? ThemeConfig.statGoldColor
                                              : ThemeConfig.btnDisabled,
                                          foregroundColor: Colors.black,
                                          padding: EdgeInsets.zero,
                                        ),
                                        onPressed: canBuy
                                            ? () => _showBuyConfirmation(
                                                context,
                                                item,
                                                shopProvider,
                                                player,
                                              )
                                            : null,
                                        child: Text(
                                          "${item.price} G",
                                          style: const TextStyle(
                                            fontWeight:
                                                ThemeConfig.fontWeightBold,
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          );
                        },
                      ),
              ),

              const SizedBox(height: 16),

              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton.icon(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: ThemeConfig.btnRerollBg,
                      padding: const EdgeInsets.symmetric(
                        horizontal: 24,
                        vertical: 12,
                      ),
                    ),
                    onPressed: player.gold >= GameConfig.shopRerollCost
                        ? () {
                            bool success = shopProvider.rerollShopItems(
                              player,
                              battleProvider.stage,
                            );
                            if (!success) {
                              ScaffoldMessenger.of(context).showSnackBar(
                                const SnackBar(
                                  content: Text("Not enough gold to reroll!"),
                                  backgroundColor: Colors.red,
                                ),
                              );
                            }
                          }
                        : null,
                    icon: const Icon(
                      Icons.refresh,
                      color: ThemeConfig.textColorWhite,
                    ),
                    label: Text(
                      "Reroll (${GameConfig.shopRerollCost} G)",
                      style: const TextStyle(color: ThemeConfig.textColorWhite),
                    ),
                  ),
                  ElevatedButton.icon(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: ThemeConfig.btnLeaveBg,
                      padding: const EdgeInsets.symmetric(
                        horizontal: 24,
                        vertical: 12,
                      ),
                    ),
                    onPressed: () => battleProvider.proceedToNextStage(),
                    icon: const Icon(
                      Icons.exit_to_app,
                      color: ThemeConfig.textColorWhite,
                    ),
                    label: const Text(
                      "Leave Shop",
                      style: TextStyle(color: ThemeConfig.textColorWhite),
                    ),
                  ),
                ],
              ),
            ],
          ),
        );
      },
    );
  }

  void _showBuyConfirmation(
    BuildContext context,
    Item item,
    ShopProvider shopProvider,
    Character player,
  ) {
    if (player.gold < item.price) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text("Not enough gold!"),
          backgroundColor: Colors.red,
        ),
      );
      return;
    }

    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: const Text("Buy Item"),
        content: Text("Buy ${item.name} for ${item.price} G?"),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(ctx),
            child: const Text("Cancel"),
          ),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              backgroundColor: ThemeConfig.statGoldColor,
            ),
            onPressed: () {
              bool success = shopProvider.buyItem(item, player);
              Navigator.pop(ctx); // Close dialog first

              if (success) {
                // Refresh BattleProvider to update UI (Gold, Inventory) since player object is owned by BattleProvider
                // and ShopProvider modifies it directly without BattleProvider knowing.
                // Ideally, ShopProvider should notify, but since we don't have a direct link back or a shared PlayerProvider,
                // we trigger it from the UI.
                // Alternatively, we could add refreshUI to BattleProvider.
                // Assuming BattleProvider has refreshUI or we can just use notifyListeners if we had access, but we don't.
                // Wait, we have battleProvider instance passed to ShopUI.
                battleProvider.refreshUI();

                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text("Bought ${item.name}"),
                    backgroundColor: Colors.green,
                  ),
                );
              } else {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text(shopProvider.lastShopMessage),
                    backgroundColor: Colors.red,
                  ),
                );
              }
            },
            child: const Text("Buy", style: TextStyle(color: Colors.black)),
          ),
        ],
      ),
    );
  }

  Widget _buildItemStatText(Item item) {
    List<String> stats = [];
    if (item.atkBonus > 0) stats.add("ATK +${item.atkBonus}");
    if (item.hpBonus > 0) stats.add("HP +${item.hpBonus}");
    if (item.armorBonus > 0) stats.add("DEF +${item.armorBonus}");
    if (item.luck > 0) stats.add("LUCK +${item.luck}");

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        if (stats.isNotEmpty)
          Text(
            stats.join(", "),
            style: const TextStyle(
              fontSize: ThemeConfig.fontSizeSmall,
              color: Colors.white70,
            ),
            textAlign: TextAlign.center,
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
        if (item.effects.isNotEmpty)
          Text(
            item.effects.first.type.name.toUpperCase(),
            style: const TextStyle(
              fontSize: ThemeConfig.fontSizeTiny,
              color: ThemeConfig.rarityLegendary,
            ),
            textAlign: TextAlign.center,
          ),
      ],
    );
  }
}
