apskel-owner-flutter/lib/presentation/pages/home/widgets/header_summary_card.dart

import 'package:flutter/material.dart';

import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/analytic/analytic.dart';
import '../../../components/spacer/spacer.dart';

class HeaderSummaryCard extends StatelessWidget {
  final IconData icon;
  final Color iconColor;
  final String title;
  final int value;
  final String subtitle;
  final List<ExclusiveSummaryDaily> dailyData;
  final double? percentage;
  final bool isValueVisible;
  final VoidCallback? onTap;

  const HeaderSummaryCard({
    super.key,
    required this.icon,
    required this.iconColor,
    required this.title,
    required this.value,
    required this.subtitle,
    required this.dailyData,
    this.percentage,
    this.isValueVisible = true,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: AppColor.white.withOpacity(0.15),
          borderRadius: BorderRadius.circular(16),
          border: Border.all(color: AppColor.white.withOpacity(0.2)),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Top: Icon + Title + Percentage + Chevron
            Row(
              children: [
                Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    color: iconColor,
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Icon(icon, color: Colors.white, size: 20),
                ),
                const SpaceWidth(10),
                Text(
                  title,
                  style: AppStyle.md.copyWith(
                    color: AppColor.white,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                const Spacer(),
                if (percentage != null) _buildPercentageBadge(),
                const SpaceWidth(6),
                Icon(
                  Icons.chevron_right_rounded,
                  color: AppColor.white.withOpacity(0.7),
                  size: 20,
                ),
              ],
            ),

            const SpaceHeight(12),

            // Value (hidden or visible)
            isValueVisible
                ? Text(
                    value.currencyFormatRp,
                    style: AppStyle.h1.copyWith(
                      color: AppColor.white,
                      fontWeight: FontWeight.w900,
                      fontSize: 26,
                    ),
                  )
                : Text(
                    'Rp ••••••',
                    style: AppStyle.h1.copyWith(
                      color: AppColor.white,
                      fontWeight: FontWeight.w900,
                      fontSize: 26,
                      letterSpacing: 2,
                    ),
                  ),

            const SpaceHeight(4),

            // Subtitle
            Text(
              subtitle,
              style: AppStyle.xs.copyWith(
                color: AppColor.white.withOpacity(0.7),
                fontWeight: FontWeight.w400,
                fontStyle: FontStyle.italic,
              ),
            ),

            const Spacer(),

            // Mini bar chart
            _buildMiniBarChart(),
          ],
        ),
      ),
    );
  }

  Widget _buildPercentageBadge() {
    final isPositive = (percentage ?? 0) >= 0;
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
      decoration: BoxDecoration(
        color: isPositive
            ? const Color(0xFF4CAF50).withOpacity(0.25)
            : const Color(0xFFE53E3E).withOpacity(0.25),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(
            isPositive
                ? Icons.trending_up_rounded
                : Icons.trending_down_rounded,
            color: isPositive
                ? const Color(0xFF4CAF50)
                : const Color(0xFFE53E3E),
            size: 12,
          ),
          const SizedBox(width: 3),
          Text(
            '${percentage!.toStringAsFixed(1)}%',
            style: AppStyle.xs.copyWith(
              color: isPositive
                  ? const Color(0xFF4CAF50)
                  : const Color(0xFFE53E3E),
              fontWeight: FontWeight.w700,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildMiniBarChart() {
    if (dailyData.isEmpty) return const SizedBox.shrink();

    final maxVal = dailyData
        .map((d) => d.totalCost)
        .fold<int>(0, (a, b) => a > b ? a : b);

    return SizedBox(
      height: 24,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: dailyData.map((d) {
          final ratio = maxVal > 0 ? d.totalCost / maxVal : 0.0;
          return Expanded(
            child: Container(
              margin: const EdgeInsets.symmetric(horizontal: 1.5),
              height: 6 + (18 * ratio),
              decoration: BoxDecoration(
                color: AppColor.white.withOpacity(0.4),
                borderRadius: BorderRadius.circular(3),
              ),
            ),
          );
        }).toList(),
      ),
    );
  }
}