import 'package:flutter/material.dart';
import 'package:pad_scanner/services/api_service.dart';

class BoxingDetailPage extends StatelessWidget {
  final String paichanNo;
  final List<BoxDetailData> existingBoxes;

  const BoxingDetailPage({
    super.key,
    required this.paichanNo,
    required this.existingBoxes,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          children: [
            const Text('装箱详情'),
            const SizedBox(width: 12),
            Expanded(
              child: Text(
                paichanNo,
                textAlign: TextAlign.end,
                style: const TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        ),
      ),
      body: Column(
        children: [
          Expanded(
            child: existingBoxes.isEmpty
                ? const Center(child: Text('暂无装箱记录'))
                : ListView.builder(
                    padding: const EdgeInsets.all(12),
                    itemCount: existingBoxes.length,
                    itemBuilder: (context, index) {
                      return _buildBoxGroup(context, existingBoxes[index]);
                    },
                  ),
          ),
          Container(
            width: double.infinity,
            padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
            color: Theme.of(context).colorScheme.surfaceContainerHighest,
            child: Text(
              '共 ${existingBoxes.length} 箱',
              style: const TextStyle(fontSize: 14),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildBoxGroup(BuildContext context, BoxDetailData box) {
    final boxTotalQuantity = box.items.fold<int>(
      0,
      (sum, item) => sum + item.quantity,
    );

    return Padding(
      padding: const EdgeInsets.only(bottom: 12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Expanded(
                child: Text(
                  '箱号 ${box.boxNo}',
                  style: const TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Text(
                '共 $boxTotalQuantity 件',
                textAlign: TextAlign.right,
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w600,
                  color: Theme.of(context).colorScheme.primary,
                ),
              ),
            ],
          ),
          const SizedBox(height: 4),
          Container(
            width: double.infinity,
            padding: const EdgeInsets.all(8),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey.shade300),
              borderRadius: BorderRadius.circular(6),
            ),
            child: Column(
              children: box.items.map((item) {
                final isAccessory = item.itemType == 'accessory';
                return Container(
                  padding: const EdgeInsets.symmetric(
                    vertical: 4,
                    horizontal: 4,
                  ),
                  margin: const EdgeInsets.symmetric(vertical: 1),
                  decoration: isAccessory
                      ? BoxDecoration(
                          color: Colors.orange.shade50,
                          borderRadius: BorderRadius.circular(4),
                        )
                      : null,
                  child: Row(
                    children: [
                      if (isAccessory)
                        Padding(
                          padding: const EdgeInsets.only(right: 6),
                          child: Icon(
                            Icons.build,
                            size: 14,
                            color: Colors.orange.shade700,
                          ),
                        ),
                      Expanded(
                        flex: 3,
                        child: Text(
                          item.zongpaiNo,
                          style: TextStyle(
                            fontSize: 14,
                            fontWeight: isAccessory
                                ? FontWeight.w600
                                : FontWeight.normal,
                          ),
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      const SizedBox(width: 8),
                      Expanded(
                        flex: 2,
                        child: Text(
                          item.workOrderNo ?? '--',
                          style: const TextStyle(fontSize: 14),
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      const SizedBox(width: 8),
                      Text(
                        '${item.quantity}/${item.totalQuantity ?? '--'}',
                        style: const TextStyle(fontSize: 14),
                      ),
                    ],
                  ),
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }
}