الرسوم المتحركة والتفاعلات الدقيقة المصقولة

// router/app_router.dart
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import '../screens/home_screen.dart';
import '../screens/detail_screen.dart';

final GoRouter appRouter = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      pageBuilder: (context, state) => CustomTransitionPage(
        key: state.pageKey,
        child: const HomeScreen(),
        transitionsBuilder: (context, animation, secondaryAnimation, child) {
          // تلاشٍ + انزلاق طفيف للأعلى
          final tween = Tween(begin: const Offset(0, 0.05), end: Offset.zero)
              .chain(CurveTween(curve: Curves.easeOutCubic));
          return FadeTransition(
            opacity: animation,
            child: SlideTransition(
              position: animation.drive(tween),
              child: child,
            ),
          );
        },
        transitionDuration: const Duration(milliseconds: 300),
      ),
    ),
    GoRoute(
      path: '/detail/:id',
      pageBuilder: (context, state) {
        final id = state.pathParameters['id']!;
        return CustomTransitionPage(
          key: state.pageKey,
          child: DetailScreen(id: id),
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            // انزلاق أفقي على المحور المشترك
            final enterTween = Tween(
              begin: const Offset(1.0, 0),
              end: Offset.zero,
            ).chain(CurveTween(curve: Curves.easeInOutCubic));
            final exitTween = Tween(
              begin: Offset.zero,
              end: const Offset(-0.3, 0),
            ).chain(CurveTween(curve: Curves.easeInOutCubic));
            return Stack(
              children: [
                SlideTransition(
                  position: secondaryAnimation.drive(exitTween),
                  child: Container(),
                ),
                SlideTransition(
                  position: animation.drive(enterTween),
                  child: child,
                ),
              ],
            );
          },
          transitionDuration: const Duration(milliseconds: 350),
        );
      },
    ),
  ],
);

// في عنصر القائمة (المصدر)
Hero(
  tag: 'product-image-${product.id}',
  child: ClipRRect(
    borderRadius: BorderRadius.circular(12),
    child: Image.network(
      product.imageUrl,
      width: 80,
      height: 80,
      fit: BoxFit.cover,
    ),
  ),
)

// في شاشة التفاصيل (الوجهة) — نفس الـ tag، حجم أكبر
Hero(
  tag: 'product-image-${product.id}',
  child: ClipRRect(
    borderRadius: BorderRadius.circular(16),
    child: Image.network(
      product.imageUrl,
      width: double.infinity,
      height: 260,
      fit: BoxFit.cover,
    ),
  ),
)

AnimatedSwitcher(
  duration: const Duration(milliseconds: 400),
  switchInCurve: Curves.easeOut,
  switchOutCurve: Curves.easeIn,
  transitionsBuilder: (child, animation) {
    return FadeTransition(
      opacity: animation,
      child: ScaleTransition(scale: animation, child: child),
    );
  },
  child: items.isEmpty
      ? const EmptyStateWidget(key: ValueKey('empty'))
      : ProductListView(key: ValueKey('list'), items: items),
)

// تفاعل دقيق: زر المفضلة مع تكبير + وميض اللون
class FavouriteButton extends StatefulWidget {
  final bool isFavourite;
  final VoidCallback onToggle;

  const FavouriteButton({
    super.key,
    required this.isFavourite,
    required this.onToggle,
  });

  @override
  State<FavouriteButton> createState() => _FavouriteButtonState();
}

class _FavouriteButtonState extends State<FavouriteButton> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.onToggle,
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 250),
        curve: Curves.elasticOut,
        padding: EdgeInsets.all(widget.isFavourite ? 12 : 8),
        decoration: BoxDecoration(
          color: widget.isFavourite
              ? Colors.red.shade50
              : Colors.grey.shade100,
          shape: BoxShape.circle,
        ),
        child: AnimatedScale(
          scale: widget.isFavourite ? 1.25 : 1.0,
          duration: const Duration(milliseconds: 200),
          curve: Curves.easeOutBack,
          child: Icon(
            widget.isFavourite ? Icons.favorite : Icons.favorite_border,
            color: widget.isFavourite ? Colors.red : Colors.grey,
            size: 24,
          ),
        ),
      ),
    );
  }
}