import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../../constant/finance_design_system.dart';

class FinancialSummaryCard extends StatelessWidget {
  final String title;
  final String? subtitle;
  final List<SummaryItem> items;

  const FinancialSummaryCard({
    super.key,
    required this.title,
    this.subtitle,
    required this.items,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(title, style: FinanceDesignSystem.headingStyle),
                if (subtitle != null)
                  Text(subtitle!, style: FinanceDesignSystem.subHeadingStyle),
              ],
            ),
          ],
        ),
        const SizedBox(height: 16),
        Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(FinanceDesignSystem.cardRadius),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.03),
                blurRadius: 10,
                offset: const Offset(0, 4),
              ),
            ],
          ),
          child: ListView.separated(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemCount: items.length,
            separatorBuilder: (context, index) =>
                Divider(color: Colors.grey.withOpacity(0.1), height: 24),
            itemBuilder: (context, index) {
              final item = items[index];
              return Row(
                children: [
                  Container(
                    padding: const EdgeInsets.all(10),
                    decoration: BoxDecoration(
                      color: item.color.withOpacity(0.1),
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: Icon(item.icon, color: item.color, size: 20),
                  ),
                  const SizedBox(width: 16),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          item.label,
                          style: const TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w500,
                            color: FinanceDesignSystem.primaryDark,
                          ),
                        ),
                        if (item.subLabel != null)
                          Text(
                            item.subLabel!,
                            style: TextStyle(
                              fontSize: 12,
                              color: Colors.grey.shade500,
                            ),
                          ),
                      ],
                    ),
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        "${item.amount} ${'SYP'.tr}",
                        style: const TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                          color: FinanceDesignSystem.primaryDark,
                        ),
                      ),
                      if (item.trend != null)
                        Text(
                          item.trend!,
                          style: TextStyle(
                            fontSize: 11,
                            color: item.trendColor ??
                                FinanceDesignSystem.successGreen,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                    ],
                  ),
                ],
              );
            },
          ),
        ),
      ],
    );
  }
}

class SummaryItem {
  final IconData icon;
  final String label;
  final String? subLabel;
  final String amount;
  final Color color;
  final String? trend;
  final Color? trendColor;

  SummaryItem({
    required this.icon,
    required this.label,
    this.subLabel,
    required this.amount,
    required this.color,
    this.trend,
    this.trendColor,
  });
}
