style: change

lib/features/shop/shop_screen.dart

@@ -1,12 +1,14 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:go_router/go_router.dart';
 
 import '../../core/theme/app_theme.dart';
+import '../../core/widgets/game_ui.dart';
 import '../lobby/wallet_cubit.dart';
 import 'shop_cubit.dart';
 import 'shop_models.dart';
 
-/// صفحه‌ی فروشگاه با تب‌های سکه/بلیط/کارت/تجهیزات.
+/// فروشگاه با تب‌های سکه/بلیط/کارت/تجهیزات و ظاهرِ بازی‌گونه.
 class ShopScreen extends StatelessWidget {
   const ShopScreen({super.key});
 
@@ -15,71 +17,135 @@ class ShopScreen extends StatelessWidget {
     return DefaultTabController(
       length: 4,
       child: Scaffold(
-        appBar: AppBar(
-          title: const Text('فروشگاه'),
-          actions: [
-            BlocBuilder<WalletCubit, WalletState>(
-              builder: (context, s) => Center(
-                child: Padding(
-                  padding: const EdgeInsets.only(left: 12),
-                  child: Row(children: [
-                    const Icon(Icons.monetization_on,
-                        color: AppColors.gold, size: 18),
-                    const SizedBox(width: 4),
-                    Text('${s.wallet?.coins ?? 0}',
-                        style: const TextStyle(color: AppColors.text)),
-                  ]),
+        backgroundColor: Colors.transparent,
+        body: GameBackground(
+          child: Column(
+            children: [
+              _header(context),
+              Expanded(
+                child: Container(
+                  margin: const EdgeInsets.fromLTRB(8, 0, 8, 8),
+                  decoration: BoxDecoration(
+                    gradient: const LinearGradient(
+                      begin: Alignment.topCenter,
+                      end: Alignment.bottomCenter,
+                      colors: [Color(0xFF4A0C16), Color(0xFF2A0710)],
+                    ),
+                    borderRadius: BorderRadius.circular(16),
+                    border: Border.all(color: AppColors.goldDark, width: 1.5),
+                  ),
+                  child: Column(
+                    children: [
+                      const _ShopTabs(),
+                      Expanded(
+                        child: BlocBuilder<ShopCubit, ShopState>(
+                          builder: (context, state) {
+                            if (state.status == ShopStatus.loading ||
+                                state.status == ShopStatus.initial) {
+                              return const Center(
+                                  child: CircularProgressIndicator(
+                                      color: AppColors.gold));
+                            }
+                            if (state.status == ShopStatus.error ||
+                                state.data == null) {
+                              return Center(
+                                child: Column(
+                                    mainAxisSize: MainAxisSize.min,
+                                    children: [
+                                      const Text('خطا در بارگذاری فروشگاه'),
+                                      TextButton(
+                                        onPressed: () =>
+                                            context.read<ShopCubit>().load(),
+                                        child: const Text('تلاش مجدد'),
+                                      ),
+                                    ]),
+                              );
+                            }
+                            final d = state.data!;
+                            return TabBarView(
+                              children: [
+                                _CoinsTab(packages: d.coinPackages),
+                                _TicketsTab(packages: d.ticketPackages),
+                                _CardsTab(data: d),
+                                _BoostersTab(boosters: d.boosters),
+                              ],
+                            );
+                          },
+                        ),
+                      ),
+                    ],
+                  ),
                 ),
               ),
-            ),
-          ],
-          bottom: const TabBar(
-            isScrollable: true,
-            labelColor: AppColors.gold,
-            indicatorColor: AppColors.gold,
-            tabs: [
-              Tab(text: 'سکه'),
-              Tab(text: 'بلیط'),
-              Tab(text: 'کارت'),
-              Tab(text: 'تجهیزات'),
             ],
           ),
         ),
-        body: BlocConsumer<ShopCubit, ShopState>(
-          listener: (context, state) {},
-          builder: (context, state) {
-            if (state.status == ShopStatus.loading ||
-                state.status == ShopStatus.initial) {
-              return const Center(child: CircularProgressIndicator());
-            }
-            if (state.status == ShopStatus.error || state.data == null) {
-              return Center(
-                child: Column(mainAxisSize: MainAxisSize.min, children: [
-                  const Text('خطا در بارگذاری فروشگاه'),
-                  TextButton(
-                    onPressed: () => context.read<ShopCubit>().load(),
-                    child: const Text('تلاش مجدد'),
-                  ),
-                ]),
-              );
-            }
-            final d = state.data!;
-            return TabBarView(
-              children: [
-                _CoinsTab(packages: d.coinPackages),
-                _TicketsTab(packages: d.ticketPackages),
-                _CardsTab(data: d),
-                _BoostersTab(boosters: d.boosters),
-              ],
-            );
-          },
-        ),
       ),
     );
   }
+
+  Widget _header(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(8),
+      child: Row(children: [
+        GestureDetector(
+          onTap: () => context.pop(),
+          child: Container(
+            width: 46,
+            height: 46,
+            decoration: BoxDecoration(
+              color: AppColors.panel,
+              borderRadius: BorderRadius.circular(12),
+              border: Border.all(color: AppColors.gold, width: 1.5),
+            ),
+            child: const Icon(Icons.arrow_back, color: AppColors.gold),
+          ),
+        ),
+        const Spacer(),
+        BlocBuilder<WalletCubit, WalletState>(
+          builder: (context, s) => Row(children: [
+            StatChip(
+                icon: Icons.confirmation_number,
+                value: '${s.wallet?.tickets ?? 0}'),
+            const SizedBox(width: 8),
+            StatChip(
+                icon: Icons.monetization_on, value: '${s.wallet?.coins ?? 0}'),
+          ]),
+        ),
+      ]),
+    );
+  }
 }
 
-/// اجرای یک عملیات فروشگاه و نمایش نتیجه + بازخوانی کیف‌پول.
+class _ShopTabs extends StatelessWidget {
+  const _ShopTabs();
+  @override
+  Widget build(BuildContext context) {
+    return const TabBar(
+      indicator: BoxDecoration(
+        gradient: LinearGradient(
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+          colors: [Color(0xFFC62828), Color(0xFF7B0E14)],
+        ),
+        borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
+      ),
+      indicatorSize: TabBarIndicatorSize.tab,
+      labelColor: AppColors.gold,
+      unselectedLabelColor: Colors.white60,
+      labelStyle: TextStyle(fontWeight: FontWeight.bold),
+      dividerColor: Colors.transparent,
+      tabs: [
+        Tab(text: 'سکه'),
+        Tab(text: 'بلیط'),
+        Tab(text: 'کارت'),
+        Tab(text: 'تجهیزات'),
+      ],
+    );
+  }
+}
+
+/// اجرای یک عملیات فروشگاه، نمایش نتیجه و بازخوانی کیف‌پول.
 Future<void> _do(BuildContext context, Future<String> Function() action) async {
   final msg = await action();
   if (!context.mounted || msg.isEmpty) return;
@@ -88,34 +154,39 @@ Future<void> _do(BuildContext context, Future<String> Function() action) async {
   ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(msg)));
 }
 
+// ===== تب‌ها =====
+
 class _CoinsTab extends StatelessWidget {
   final List<CoinPackage> packages;
   const _CoinsTab({required this.packages});
-
   @override
   Widget build(BuildContext context) {
-    return GridView.count(
-      crossAxisCount: 2,
-      padding: const EdgeInsets.all(12),
-      childAspectRatio: 0.82,
-      mainAxisSpacing: 12,
-      crossAxisSpacing: 12,
+    return _grid(
+      note: 'با داشتن اشتراک VIP در هر خرید ۱۰٪ سکه اضافه هدیه می‌گیرید.',
       children: [
-        _FreeCoinCard(
-          onTap: () => _do(context, () => context.read<ShopCubit>().claimAd()),
+        _ItemCard(
+          title: 'سکه رایگان',
+          glowColor: const Color(0xFF1B5E20),
+          icon: Icons.card_giftcard,
+          subtitle: 'با دیدن تبلیغ',
+          action: _PriceButton(
+            label: 'رایگان',
+            green: true,
+            onTap: () => _do(context, () => context.read<ShopCubit>().claimAd()),
+          ),
         ),
         for (final p in packages)
-          _StoreCard(
+          _ItemCard(
             title: p.title,
-            badge: p.bonusPct > 0 ? '+${p.bonusPct}%' : null,
-            lines: [
-              '${p.coins} سکه',
-              if (p.vipDays > 0) '${p.vipDays} روز VIP',
-            ],
-            priceLabel: '${p.priceToman} تومان',
+            glowColor: const Color(0xFF1B5E20),
             icon: Icons.savings,
-            onTap: () =>
-                _do(context, () => context.read<ShopCubit>().purchase('coin', p.id)),
+            ribbon: p.bonusPct > 0 ? '+${p.bonusPct}٪' : null,
+            subtitle: '${p.coins} سکه${p.vipDays > 0 ? ' + ${p.vipDays} روز VIP' : ''}',
+            action: _PriceButton(
+              label: '${p.priceToman} تومان',
+              onTap: () => _do(
+                  context, () => context.read<ShopCubit>().purchase('coin', p.id)),
+            ),
           ),
       ],
     );
@@ -125,24 +196,22 @@ class _CoinsTab extends StatelessWidget {
 class _TicketsTab extends StatelessWidget {
   final List<TicketPackage> packages;
   const _TicketsTab({required this.packages});
-
   @override
   Widget build(BuildContext context) {
-    return GridView.count(
-      crossAxisCount: 2,
-      padding: const EdgeInsets.all(12),
-      childAspectRatio: 0.82,
-      mainAxisSpacing: 12,
-      crossAxisSpacing: 12,
+    return _grid(
+      note: 'با خرید بلیط می‌توانید درخواست بر زدن مجدد در بازی‌ها انجام دهید.',
       children: [
         for (final p in packages)
-          _StoreCard(
+          _ItemCard(
             title: p.title,
-            lines: ['${p.tickets} بلیط'],
-            priceLabel: '${p.priceToman} تومان',
+            glowColor: const Color(0xFF8E1B7A),
             icon: Icons.confirmation_number,
-            onTap: () =>
-                _do(context, () => context.read<ShopCubit>().purchase('ticket', p.id)),
+            subtitle: '${p.tickets} بلیط',
+            action: _PriceButton(
+              label: '${p.priceToman} تومان',
+              onTap: () => _do(context,
+                  () => context.read<ShopCubit>().purchase('ticket', p.id)),
+            ),
           ),
       ],
     );
@@ -152,24 +221,22 @@ class _TicketsTab extends StatelessWidget {
 class _BoostersTab extends StatelessWidget {
   final List<Booster> boosters;
   const _BoostersTab({required this.boosters});
-
   @override
   Widget build(BuildContext context) {
-    return GridView.count(
-      crossAxisCount: 2,
-      padding: const EdgeInsets.all(12),
-      childAspectRatio: 0.82,
-      mainAxisSpacing: 12,
-      crossAxisSpacing: 12,
+    return _grid(
+      note: 'با بسته‌های تجربه، چند برابر XP بگیرید و سریع‌تر بالا بروید.',
       children: [
         for (final b in boosters)
-          _StoreCard(
+          _ItemCard(
             title: b.title,
-            lines: ['تجربه ×${b.multiplier}', '${b.hours} ساعت'],
-            priceLabel: '${b.priceToman} تومان',
+            glowColor: const Color(0xFF1E3A8A),
             icon: Icons.bolt,
-            onTap: () =>
-                _do(context, () => context.read<ShopCubit>().purchase('booster', b.id)),
+            subtitle: 'تجربه ×${b.multiplier} — ${b.hours} ساعت',
+            action: _PriceButton(
+              label: '${b.priceToman} تومان',
+              onTap: () => _do(context,
+                  () => context.read<ShopCubit>().purchase('booster', b.id)),
+            ),
           ),
       ],
     );
@@ -179,206 +246,224 @@ class _BoostersTab extends StatelessWidget {
 class _CardsTab extends StatelessWidget {
   final ShopData data;
   const _CardsTab({required this.data});
-
   @override
   Widget build(BuildContext context) {
-    return GridView.count(
-      crossAxisCount: 2,
-      padding: const EdgeInsets.all(12),
-      childAspectRatio: 0.82,
-      mainAxisSpacing: 12,
-      crossAxisSpacing: 12,
+    return _grid(
+      note: 'با اسکین کارت‌های متنوع حال‌وهوای بازی را عوض کن.',
       children: [
         for (final c in data.cardSkins)
-          _CardSkinCard(
-            skin: c,
-            owned: data.owns(c.id),
-            selected: data.selectedCard == c.id,
+          _ItemCard(
+            title: c.title,
+            glowColor: const Color(0xFF0E3C73),
+            icon: Icons.style,
+            subtitle: c.priceCoins > 0 ? '${c.priceCoins} سکه' : 'پیش‌فرض',
+            action: _cardAction(context, c, data),
           ),
       ],
     );
   }
-}
 
-class _CardSkinCard extends StatelessWidget {
-  final CardSkin skin;
-  final bool owned;
-  final bool selected;
-  const _CardSkinCard(
-      {required this.skin, required this.owned, required this.selected});
-
-  @override
-  Widget build(BuildContext context) {
-    final Widget action;
-    if (selected) {
-      action = const _Pill(text: 'انتخاب شده', color: AppColors.goldDark);
-    } else if (owned) {
-      action = _ActionButton(
+  Widget _cardAction(BuildContext context, CardSkin c, ShopData d) {
+    if (d.selectedCard == c.id) {
+      return const _PriceButton(label: 'انتخاب شده', disabled: true);
+    }
+    if (d.owns(c.id)) {
+      return _PriceButton(
         label: 'انتخاب',
-        color: AppColors.green,
+        green: true,
         onTap: () =>
-            _do(context, () => context.read<ShopCubit>().selectCard(skin.id)),
-      );
-    } else {
-      action = _ActionButton(
-        label: '${skin.priceCoins} سکه',
-        color: AppColors.accent,
-        onTap: () => _do(context, () => context.read<ShopCubit>().buyCard(skin.id)),
+            _do(context, () => context.read<ShopCubit>().selectCard(c.id)),
       );
     }
-    return _Panel(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        children: [
-          Text(skin.title,
-              textAlign: TextAlign.center,
-              style: const TextStyle(color: AppColors.gold)),
-          const Icon(Icons.style, size: 48, color: AppColors.text),
-          SizedBox(width: double.infinity, child: action),
-        ],
-      ),
+    return _PriceButton(
+      label: '${c.priceCoins} سکه',
+      green: true,
+      coin: true,
+      onTap: () => _do(context, () => context.read<ShopCubit>().buyCard(c.id)),
     );
   }
 }
 
-class _FreeCoinCard extends StatelessWidget {
-  final VoidCallback onTap;
-  const _FreeCoinCard({required this.onTap});
-
-  @override
-  Widget build(BuildContext context) {
-    return _Panel(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        children: [
-          const Text('سکه رایگان',
-              textAlign: TextAlign.center,
-              style: TextStyle(color: AppColors.gold)),
-          const Icon(Icons.ondemand_video, size: 44, color: AppColors.green),
-          const Text('با دیدن تبلیغ',
-              style: TextStyle(color: Colors.white60, fontSize: 12)),
-          SizedBox(
-            width: double.infinity,
-            child: _ActionButton(
-                label: 'رایگان', color: AppColors.green, onTap: onTap),
-          ),
-        ],
+Widget _grid({required String note, required List<Widget> children}) {
+  return Column(
+    children: [
+      Padding(
+        padding: const EdgeInsets.fromLTRB(16, 12, 16, 6),
+        child: Text(note,
+            textAlign: TextAlign.center,
+            style: const TextStyle(color: AppColors.gold, fontSize: 13)),
       ),
-    );
-  }
+      Expanded(
+        child: GridView.count(
+          crossAxisCount: 2,
+          padding: const EdgeInsets.all(12),
+          childAspectRatio: 0.74,
+          mainAxisSpacing: 12,
+          crossAxisSpacing: 12,
+          children: children,
+        ),
+      ),
+    ],
+  );
 }
 
-class _StoreCard extends StatelessWidget {
+// ===== ویجت‌های کارت آیتم =====
+
+class _ItemCard extends StatelessWidget {
   final String title;
-  final List<String> lines;
-  final String priceLabel;
   final IconData icon;
-  final String? badge;
-  final VoidCallback onTap;
-  const _StoreCard({
+  final Color glowColor;
+  final String subtitle;
+  final String? ribbon;
+  final Widget action;
+  const _ItemCard({
     required this.title,
-    required this.lines,
-    required this.priceLabel,
     required this.icon,
-    required this.onTap,
-    this.badge,
+    required this.glowColor,
+    required this.subtitle,
+    required this.action,
+    this.ribbon,
   });
 
   @override
   Widget build(BuildContext context) {
-    return Stack(
-      children: [
-        _Panel(
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              Text(title,
-                  textAlign: TextAlign.center,
-                  style: const TextStyle(color: AppColors.gold)),
-              Icon(icon, size: 40, color: AppColors.gold),
-              Column(
-                children: [
-                  for (final l in lines)
-                    Text(l, style: const TextStyle(color: AppColors.text)),
-                ],
-              ),
-              SizedBox(
-                width: double.infinity,
-                child: _ActionButton(
-                    label: priceLabel, color: AppColors.accent, onTap: onTap),
-              ),
-            ],
+    final card = Container(
+      padding: const EdgeInsets.all(8),
+      decoration: BoxDecoration(
+        gradient: const LinearGradient(
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+          colors: [Color(0xFF6E1322), Color(0xFF3A0A12)],
+        ),
+        borderRadius: BorderRadius.circular(14),
+        border: Border.all(color: AppColors.gold, width: 1.6),
+        boxShadow: const [
+          BoxShadow(color: Colors.black54, blurRadius: 8, offset: Offset(0, 4)),
+        ],
+      ),
+      child: Column(
+        children: [
+          Text(title,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: const TextStyle(
+                  color: AppColors.gold, fontWeight: FontWeight.bold)),
+          const SizedBox(height: 6),
+          Expanded(child: _GlowArt(color: glowColor, icon: icon)),
+          const SizedBox(height: 4),
+          Text(subtitle,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: const TextStyle(color: Colors.white70, fontSize: 11)),
+          const SizedBox(height: 6),
+          SizedBox(width: double.infinity, child: action),
+        ],
+      ),
+    );
+    if (ribbon == null) return card;
+    return Stack(clipBehavior: Clip.none, children: [
+      card,
+      Positioned(
+        top: 8,
+        left: -22,
+        child: Transform.rotate(
+          angle: -0.7,
+          child: Container(
+            padding: const EdgeInsets.symmetric(horizontal: 26, vertical: 3),
+            color: const Color(0xFF2E7D32),
+            child: Text(ribbon!,
+                style: const TextStyle(
+                    color: Colors.white,
+                    fontSize: 11,
+                    fontWeight: FontWeight.bold)),
           ),
         ),
-        if (badge != null)
-          Positioned(
-            top: 4,
-            left: 4,
-            child: _Pill(text: badge!, color: AppColors.green),
-          ),
-      ],
-    );
+      ),
+    ]);
   }
 }
 
-class _Panel extends StatelessWidget {
-  final Widget child;
-  const _Panel({required this.child});
-
+/// قابِ هنریِ آیتم با درخششِ شعاعی و آیکن.
+class _GlowArt extends StatelessWidget {
+  final Color color;
+  final IconData icon;
+  const _GlowArt({required this.color, required this.icon});
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.all(10),
+      width: double.infinity,
       decoration: BoxDecoration(
-        color: AppColors.panel,
-        borderRadius: BorderRadius.circular(14),
-        border: Border.all(color: AppColors.goldDark),
+        borderRadius: BorderRadius.circular(10),
+        gradient: RadialGradient(
+          colors: [color, Colors.black.withValues(alpha: 0.85)],
+          radius: 0.9,
+        ),
+        border: Border.all(color: Colors.black26),
+      ),
+      child: Center(
+        child: Icon(icon, size: 44, color: AppColors.gold),
       ),
-      child: child,
     );
   }
 }
 
-class _ActionButton extends StatelessWidget {
+class _PriceButton extends StatelessWidget {
   final String label;
-  final Color color;
-  final VoidCallback onTap;
-  const _ActionButton(
-      {required this.label, required this.color, required this.onTap});
+  final VoidCallback? onTap;
+  final bool green;
+  final bool coin;
+  final bool disabled;
+  const _PriceButton({
+    required this.label,
+    this.onTap,
+    this.green = false,
+    this.coin = false,
+    this.disabled = false,
+  });
 
   @override
   Widget build(BuildContext context) {
     final busy = context.select((ShopCubit c) => c.state.busy);
-    return ElevatedButton(
-      style: ElevatedButton.styleFrom(
-        backgroundColor: color,
-        minimumSize: const Size.fromHeight(38),
-        padding: const EdgeInsets.symmetric(horizontal: 6),
+    final colors = disabled
+        ? const [Color(0xFF555555), Color(0xFF333333)]
+        : green
+            ? const [Color(0xFF3FA34D), Color(0xFF1B5E20)]
+            : const [Color(0xFFD83A4A), Color(0xFF8E0E1B)];
+    return Opacity(
+      opacity: disabled ? 0.85 : 1,
+      child: GestureDetector(
+        onTap: (disabled || busy) ? null : onTap,
+        child: Container(
+          height: 36,
+          alignment: Alignment.center,
+          padding: const EdgeInsets.symmetric(horizontal: 6),
+          decoration: BoxDecoration(
+            gradient: LinearGradient(
+              begin: Alignment.topCenter,
+              end: Alignment.bottomCenter,
+              colors: colors,
+            ),
+            borderRadius: BorderRadius.circular(10),
+            border: Border.all(color: AppColors.gold, width: 1.2),
+          ),
+          child: Row(mainAxisSize: MainAxisSize.min, children: [
+            if (coin) ...[
+              const Icon(Icons.monetization_on,
+                  color: AppColors.gold, size: 16),
+              const SizedBox(width: 4),
+            ],
+            Flexible(
+              child: Text(label,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: const TextStyle(
+                      color: Colors.white,
+                      fontSize: 13,
+                      fontWeight: FontWeight.bold)),
+            ),
+          ]),
+        ),
       ),
-      onPressed: busy ? null : onTap,
-      child: Text(label,
-          maxLines: 1,
-          overflow: TextOverflow.ellipsis,
-          style: const TextStyle(fontSize: 13)),
-    );
-  }
-}
-
-class _Pill extends StatelessWidget {
-  final String text;
-  final Color color;
-  const _Pill({required this.text, required this.color});
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
-      decoration: BoxDecoration(
-        color: color,
-        borderRadius: BorderRadius.circular(8),
-      ),
-      child: Text(text,
-          style: const TextStyle(color: Colors.white, fontSize: 12)),
     );
   }
 }