class CustomButton extends StatelessWidget {
  final String label;
  final VoidCallback onPressed;
  final Color bgColor;

  const CustomButton({
    required this.label,
    required this.onPressed,
    this.bgColor = Colors.blue,
  });

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: bgColor,
        padding: EdgeInsets.symmetric(horizontal: 24, vertical: 14),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      ),
      onPressed: onPressed,
      child: Text(label, style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(brightness: Brightness.light, primaryColor: Colors.blue),
      darkTheme: ThemeData(brightness: Brightness.dark, primaryColor: Colors.blueAccent),
      themeMode: ThemeMode.system,
      home: HomeScreen(),
    );
  }
}

class ImplicitAnimDemo extends StatefulWidget {
  @override
  State<ImplicitAnimDemo> createState() => _ImplicitAnimDemoState();
}

class _ImplicitAnimDemoState extends State<ImplicitAnimDemo> {
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => isExpanded = !isExpanded),
      child: AnimatedContainer(
        duration: Duration(milliseconds: 500),
        curve: Curves.easeInOut,
        width: isExpanded ? 200 : 100,
        height: isExpanded ? 200 : 100,
        decoration: BoxDecoration(
          color: isExpanded ? Colors.blue : Colors.red,
          borderRadius: BorderRadius.circular(isExpanded ? 20 : 10),
        ),
        child: Center(child: Text('TAP')),
      ),
    );
  }
}

// Screen 1: Image dengan Hero wrapper
Hero(
  tag: 'product-image',
  child: Image.asset('assets/product.png', width: 100, height: 100),
)

// Screen 2: Sama tag, ukuran beda → otomatis terbang & morph!
Hero(
  tag: 'product-image',
  child: Image.asset('assets/product.png', width: 300, height: 300),
)

class SplashScreen extends StatefulWidget {
  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(duration: Duration(seconds: 2), vsync: this)..forward();
    Future.delayed(Duration(seconds: 3), () {
      Navigator.pushReplacementNamed(context, '/home');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Center(
        child: FadeTransition(
          opacity: _controller,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset('assets/logo.png', width: 120),
              SizedBox(height: 20),
              Text('MyApp', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white)),
            ],
          ),
        ),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('E-Commerce', style: TextStyle(fontWeight: FontWeight.bold)),
        actions: [IconButton(icon: Icon(Icons.shopping_cart), onPressed: () {})],
      ),
      body: SingleChildScrollView(
        child: Column(children: [
          Container(height: 180, color: Colors.blueAccent,
            child: Center(child: Text('Special Promo 50%', style: TextStyle(color: Colors.white, fontSize: 24)))),
          GridView.builder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
            itemCount: 10,
            itemBuilder: (context, index) => ProductCard(id: index),
          ),
        ]),
      ),
    );
  }
}

class ProductCard extends StatelessWidget {
  final int id;
  const ProductCard({required this.id});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(children: [
        Expanded(child: Container(color: Colors.grey[300], child: Icon(Icons.image, size: 50))),
        Padding(padding: EdgeInsets.all(8),
          child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            Text('Product $id', style: TextStyle(fontWeight: FontWeight.bold)),
            SizedBox(height: 4),
            Text('Rp 150.000', style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold)),
            SizedBox(height: 4),
            Row(children: [
              Icon(Icons.star, size: 14, color: Colors.amber),
              SizedBox(width: 4),
              Text('4.5', style: TextStyle(fontSize: 12)),
            ]),
          ]),
        ),
      ]),
    );
  }
}

class ProductDetailScreen extends StatefulWidget {
  @override
  State<ProductDetailScreen> createState() => _ProductDetailScreenState();
}

class _ProductDetailScreenState extends State<ProductDetailScreen> {
  int quantity = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Product Detail')),
      body: SingleChildScrollView(
        child: Column(children: [
          Container(height: 300, color: Colors.grey[300], child: Icon(Icons.image, size: 100)),
          Padding(padding: EdgeInsets.all(16),
            child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Text('Premium T-Shirt', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
              SizedBox(height: 8),
              Text('Rp 150.000', style: TextStyle(fontSize: 18, color: Colors.blue, fontWeight: FontWeight.bold)),
              SizedBox(height: 20),
              Row(children: [
                IconButton(icon: Icon(Icons.remove), onPressed: () => setState(() => quantity--)),
                Text('$quantity'),
                IconButton(icon: Icon(Icons.add), onPressed: () => setState(() => quantity++)),
              ]),
              SizedBox(height: 20),
              ElevatedButton(onPressed: () => print('Added'), child: Text('Add to Cart'),
                style: ElevatedButton.styleFrom(minimumSize: Size(double.infinity, 50)),
              ),
            ]),
          ),
        ]),
      ),
    );
  }
}

class ThemeProvider extends ChangeNotifier {
  bool isDarkMode = false;

  void toggleTheme() {
    isDarkMode = !isDarkMode;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => ThemeProvider(),
      child: Consumer<ThemeProvider>(
        builder: (context, themeProvider, _) {
          return MaterialApp(
            theme: ThemeData.light(),
            darkTheme: ThemeData.dark(),
            themeMode: themeProvider.isDarkMode ? ThemeMode.dark : ThemeMode.light,
            home: HomeScreen(),
          );
        },
      ),
    );
  }
}

// Toggle Button
Consumer<ThemeProvider>(
  builder: (context, themeProvider, _) {
    return IconButton(
      icon: Icon(themeProvider.isDarkMode ? Icons.light_mode : Icons.dark_mode),
      onPressed: () => themeProvider.toggleTheme(),
    );
  },
)