import 'package:flutter/material.dart';

import '../../resouce/base_color.dart';
import '../../widgets/custom_navigation_bar.dart';

class ShoppingTabScreen extends StatefulWidget {
  const ShoppingTabScreen({super.key});

  @override
  State<ShoppingTabScreen> createState() => _ShoppingTabScreenState();
}

class _ShoppingTabScreenState extends State<ShoppingTabScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade50,
      appBar: CustomNavigationBar(
      title: "Mua sắm",
      showBackButton: false,
      rightButtons: [
        IconButton(
          icon: const Icon(Icons.info, color: Colors.white),
          onPressed: () {
          },
        ),
      ],
    ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: Colors.amber.shade100,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Row(
                children: [
                  const Text("Điểm hoàn:", style: TextStyle(fontSize: 18, fontWeight: FontWeight.normal)),
                  const SizedBox(width: 8),
                  Image.asset('assets/images/ic_point.png', width: 20, height: 20),
                  const SizedBox(width: 4),
                  const Text("0", style: TextStyle(fontSize: 20, color: BaseColor.primary400, fontWeight: FontWeight.bold)),
                  const Spacer(),
                  Icon(Icons.arrow_forward_ios, color: BaseColor.primary400, size: 16),
                ],
              ),
            ),
            const SizedBox(height: 16),
            SizedBox(
              height: 130,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  _buildStepCard("assets/images/banner_tutorial_refund_point_step1.png"),
                  const SizedBox(width: 12),
                  _buildStepCard("assets/images/banner_tutorial_refund_point_step2.png"),
                  const SizedBox(width: 12),
                  _buildStepCard("assets/images/banner_tutorial_refund_point_step3.png"),
                  const SizedBox(width: 12),
                  _buildStepCard("assets/images/banner_tutorial_refund_point_step4.png"),
                ],
              ),
            ),
            const SizedBox(height: 24),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: const [
                Text("Thương Hiệu Hoàn Điểm", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
                Text("Xem tất cả", style: TextStyle(color: BaseColor.primary400, fontSize: 14, fontWeight: FontWeight.w600)),
              ],
            ),
            const SizedBox(height: 12),
            GridView.count(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              crossAxisCount: 3,
              childAspectRatio: 3 / 3.2,
              crossAxisSpacing: 8,
              mainAxisSpacing: 8,
              children: [
                _buildBrandItem("Lazada", "30%", "assets/images/ic_pipi_06.png"),
                _buildBrandItem("Newshop", "5,3%", "assets/images/ic_pipi_06.png"),
                _buildBrandItem("Tiki", "0,78%", "assets/images/ic_pipi_06.png"),
                _buildBrandItem("MyTour MyTour MyTour", "3,1%", "assets/images/ic_pipi_06.png"),
                _buildBrandItem("Pierre Cardin", "10,2%", "assets/images/ic_pipi_06.png"),
                _buildBrandItem("Adidas", "2,9%", "assets/images/ic_pipi_06.png"),
              ],
            ),
            Text("Lĩnh Vực Hoàn Điểm", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
            const SizedBox(height: 12),
            Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.05),
                    blurRadius: 5,
                    offset: const Offset(0, 2),
                  )
                ],
              ),
              child: GridView.count(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                crossAxisCount: 3,
                childAspectRatio: 3 / 3.2,
                // crossAxisSpacing: 8,
                children: [
                  _fieldCashBackItem("Lazada", "30%", "assets/images/ic_pipi_06.png"),
                  _fieldCashBackItem("Newshop", "5,3%", "assets/images/ic_pipi_06.png"),
                  _fieldCashBackItem("Tiki", "0,78%", "assets/images/ic_pipi_06.png"),
                  _fieldCashBackItem("MyTour MyTour MyTour", "3,1%", "assets/images/ic_pipi_06.png"),
                  _fieldCashBackItem("Pierre Cardin", "10,2%", "assets/images/ic_pipi_06.png"),
                  _fieldCashBackItem("Adidas", "2,9%", "assets/images/ic_pipi_06.png"),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildStepCard(String imagePath) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(16),
      child: Image.asset(imagePath, fit: BoxFit.cover, width: 250),
    );
  }

  Widget _fieldCashBackItem(String name, String cashback, String logoPath) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final double imageWidth = constraints.maxWidth / 2;
        return Container(
          padding: const EdgeInsets.all(12),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(
                width: imageWidth,
                height: imageWidth, // ✅ 1:1 ratio
                child: Image.asset(logoPath, fit: BoxFit.contain),
              ),
              const SizedBox(height: 4),
              Text(
                textAlign: TextAlign.center,
                name,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                style: const TextStyle(fontWeight: FontWeight.w600, fontSize: 16, color: BaseColor.second500),
              ),
            ],
          ),
        );
      },
    );
  }

    Widget _buildBrandItem(String name, String cashback, String logoPath) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final double imageWidth = constraints.maxWidth / 2;
        return Container(
          padding: const EdgeInsets.all(12),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(16),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.05),
                blurRadius: 5,
                offset: const Offset(0, 2),
              )
            ],
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(
                width: imageWidth,
                height: imageWidth, // ✅ 1:1 ratio
                child: Image.asset(logoPath, fit: BoxFit.contain),
              ),
              const SizedBox(height: 4),
              Text(
                name,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: const TextStyle(fontWeight: FontWeight.w600, fontSize: 16),
              ),
              const SizedBox(height: 4),
              RichText(
                textAlign: TextAlign.center,
                text: TextSpan(
                  style: const TextStyle(fontSize: 12),
                  children: [
                    const TextSpan(
                      text: "Hoàn đến: ",
                      style: TextStyle(color: Colors.grey),
                    ),
                    TextSpan(
                      text: cashback,
                      style: const TextStyle(
                        color: Colors.orange,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}
