import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'controller.dart';

class MallOrdersPage extends GetView<MallOrdersController> {
  const MallOrdersPage({super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MallOrdersController>(
      init: MallOrdersController(),
      id: 'mall_orders',
      builder: (_) {
        return Scaffold(
          backgroundColor: const Color(0xFFF7F8FA),
          appBar: AppBar(
            title: const Text('历史订单'),
            backgroundColor: Colors.white,
            foregroundColor: Colors.black,
            elevation: 0,
            leading: IconButton(
              icon: const Icon(Icons.arrow_back_ios, size: 20),
              onPressed: () => Get.back(),
            ),
          ),
          body: RefreshIndicator(
            onRefresh: () => controller.getOrders(isRefresh: true),
            child: controller.isLoading.value && controller.orderList.isEmpty
                ? const Center(child: CircularProgressIndicator())
                : _buildOrderList(),
          ),
        );
      },
    );
  }

  Widget _buildOrderList() {
    if (controller.orderList.isEmpty) {
      return const Center(
        child: Text('暂无订单记录', style: TextStyle(color: Color(0xFF999999))),
      );
    }

    return ListView.builder(
      padding: const EdgeInsets.all(16),
      itemCount: controller.orderList.length,
      itemBuilder: (context, index) {
        final order = controller.orderList[index];
        return _buildOrderItem(order);
      },
    );
  }

  Widget _buildOrderItem(OrderModel order) {
    return Container(
      margin: const EdgeInsets.only(bottom: 12),
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '兑换时间：${order.createTime}',
            style: TextStyle(
              fontSize: 12.sp,
              fontWeight: FontWeight.w500,
              color: Color.fromRGBO(107, 114, 128, 1),
            ),
          ),
          const SizedBox(height: 12),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(12),
                child: order.goodsImage != null
                    ? Image.network(
                        order.goodsImage!,
                        width: 80.w,
                        height: 80.h,
                        fit: BoxFit.cover,
                      )
                    : Container(
                        width: 80.w,
                        height: 80.h,
                        color: Colors.grey[200],
                        child: const Icon(Icons.image, color: Colors.grey),
                      ),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      order.goodsName,
                      style: const TextStyle(
                        fontSize: 15,
                        fontWeight: FontWeight.bold,
                        color: Color(0xFF333333),
                      ),
                    ),
                    const SizedBox(height: 8),
                    Row(
                      children: [
                        Text(
                          order.score,
                          style: TextStyle(
                            fontSize: 16.sp,
                            color: Color(0xFF4CAF50),
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        SizedBox(width: 4),
                        Text(
                          '积分',
                          style: TextStyle(fontSize: 11.sp, color: Color(0xFF4CAF50)),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              Text(
                'x1',
                style: TextStyle(color: Color(0xFFCCCCCC), fontSize: 16.sp),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
