apskel-owner-flutter/lib/presentation/pages/finance/widgets/profit_loss_header.dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

import '../../../../application/analytic/profit_loss_loader/profit_loss_loader_bloc.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/painter/wave_painter.dart';
import '../../../../common/theme/theme.dart';
import '../../../components/spacer/spacer.dart';

class ProfitLossHeader extends StatelessWidget {
  final ProfitLossLoaderState state;
  final int selectedTabIndex;
  final ValueChanged<int> onTabChanged;

  const ProfitLossHeader({
    super.key,
    required this.state,
    required this.selectedTabIndex,
    required this.onTabChanged,
  });

  @override
  Widget build(BuildContext context) {
    final outletLabel = state.profitLoss.outletName.isNotEmpty
        ? state.profitLoss.outletName
        : 'Semua Outlet';

    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: AppColor.primaryGradient,
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(24),
          bottomRight: Radius.circular(24),
        ),
      ),
      child: Stack(
        children: [
          // Decorative circles
          Positioned(
            top: -20,
            right: -30,
            child: Container(
              width: 120,
              height: 120,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: AppColor.textWhite.withOpacity(0.08),
              ),
            ),
          ),
          Positioned(
            top: 30,
            right: 20,
            child: Container(
              width: 60,
              height: 60,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: AppColor.textWhite.withOpacity(0.05),
              ),
            ),
          ),
          Positioned(
            top: 10,
            left: -20,
            child: Container(
              width: 80,
              height: 80,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: AppColor.textWhite.withOpacity(0.04),
              ),
            ),
          ),

          // Wave pattern
          Positioned.fill(
            child: CustomPaint(
              painter: WavePainter(
                animation: 0.0,
                color: AppColor.textWhite.withOpacity(0.1),
              ),
            ),
          ),

          // Content
          SafeArea(
            bottom: false,
            child: Padding(
              padding: const EdgeInsets.fromLTRB(16, 12, 16, 24),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // Back button + Title row
                  Row(
                    children: [
                      GestureDetector(
                        onTap: () => context.router.maybePop(),
                        child: Container(
                          width: 40,
                          height: 40,
                          decoration: BoxDecoration(
                            color: AppColor.textWhite.withOpacity(0.15),
                            borderRadius: BorderRadius.circular(12),
                          ),
                          child: const Icon(
                            Icons.chevron_left_rounded,
                            color: AppColor.textWhite,
                            size: 24,
                          ),
                        ),
                      ),
                      const SpaceWidth(12),
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              context.lang.profit_loss,
                              style: AppStyle.xl.copyWith(
                                color: AppColor.textWhite,
                                fontWeight: FontWeight.w700,
                                fontSize: 20,
                              ),
                            ),
                            const SizedBox(height: 2),
                            Text(
                              outletLabel,
                              style: AppStyle.sm.copyWith(
                                color: AppColor.textWhite.withOpacity(0.75),
                                fontWeight: FontWeight.w400,
                                fontSize: 12,
                              ),
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),

                  const SpaceHeight(20),

                  // Tab selector (Today / MTD)
                  _buildTabSelector(context),

                  const SpaceHeight(24),

                  // Profit / Loss label with date
                  Text(
                    context.lang.profit_loss_date(
                      _formatDateLabel(state.dateFrom, state.dateTo),
                    ),
                    style: AppStyle.sm.copyWith(
                      color: AppColor.textWhite.withOpacity(0.75),
                      fontWeight: FontWeight.w400,
                      fontSize: 13,
                    ),
                  ),

                  const SpaceHeight(4),

                  // Big profit/loss value
                  state.isFetching
                      ? _buildHeaderValueShimmer()
                      : Text(
                          state.profitLoss.summary.netProfit.currencyFormatRp,
                          style: AppStyle.h1.copyWith(
                            color: state.profitLoss.summary.netProfit >= 0
                                ? AppColor.textWhite
                                : AppColor.textWhite.withOpacity(0.7),
                            fontWeight: FontWeight.w900,
                            fontSize: 32,
                          ),
                        ),

                  const SpaceHeight(16),

                  // Chips row (Omset + Total Biaya)
                  state.isFetching
                      ? _buildHeaderChipsShimmer()
                      : _buildHeaderChips(context),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTabSelector(BuildContext context) {
    final todayLabel = _formatTodayTabLabel(DateTime.now());
    final mtdLabel = context.lang.mtd_month(
      _getMonthName(DateTime.now().month),
    );

    return Container(
      padding: const EdgeInsets.all(4),
      decoration: BoxDecoration(
        color: AppColor.textWhite.withOpacity(0.15),
        borderRadius: BorderRadius.circular(30),
        border: Border.all(color: AppColor.textWhite.withOpacity(0.2)),
      ),
      child: Row(
        children: [
          Expanded(
            child: _buildTab(
              label: todayLabel,
              isSelected: selectedTabIndex == 0,
              onTap: () => onTabChanged(0),
            ),
          ),
          Expanded(
            child: _buildTab(
              label: mtdLabel,
              isSelected: selectedTabIndex == 1,
              onTap: () => onTabChanged(1),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTab({
    required String label,
    required bool isSelected,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 10),
        decoration: BoxDecoration(
          color: isSelected ? AppColor.white : Colors.transparent,
          borderRadius: BorderRadius.circular(26),
        ),
        child: Center(
          child: Text(
            label,
            style: AppStyle.md.copyWith(
              color: isSelected ? AppColor.textPrimary : AppColor.textWhite,
              fontWeight: FontWeight.w600,
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildHeaderValueShimmer() {
    return Shimmer.fromColors(
      baseColor: AppColor.textWhite.withOpacity(0.3),
      highlightColor: AppColor.textWhite.withOpacity(0.6),
      child: Container(
        width: 200,
        height: 36,
        decoration: BoxDecoration(
          color: AppColor.textWhite.withOpacity(0.3),
          borderRadius: BorderRadius.circular(8),
        ),
      ),
    );
  }

  Widget _buildHeaderChipsShimmer() {
    return Row(
      children: List.generate(
        2,
        (index) => Padding(
          padding: const EdgeInsets.only(right: 8),
          child: Shimmer.fromColors(
            baseColor: AppColor.textWhite.withOpacity(0.15),
            highlightColor: AppColor.textWhite.withOpacity(0.3),
            child: Container(
              width: 130,
              height: 32,
              decoration: BoxDecoration(
                color: AppColor.textWhite.withOpacity(0.15),
                borderRadius: BorderRadius.circular(20),
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildHeaderChips(BuildContext context) {
    final summary = state.profitLoss.summary;

    return Wrap(
      spacing: 8,
      runSpacing: 8,
      children: [
        _buildChip(
          '${context.lang.sales} ${summary.totalRevenue.currencyFormatRp}',
        ),
        _buildChip(
          '${context.lang.total_cost} ${summary.totalCost.currencyFormatRp}',
        ),
      ],
    );
  }

  Widget _buildChip(String label) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
      decoration: BoxDecoration(
        color: AppColor.textWhite.withOpacity(0.15),
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: AppColor.textWhite.withOpacity(0.25)),
      ),
      child: Text(
        label,
        style: AppStyle.sm.copyWith(
          color: AppColor.textWhite,
          fontWeight: FontWeight.w600,
          fontSize: 12,
        ),
      ),
    );
  }

  String _formatTodayTabLabel(DateTime date) {
    const months = [
      'Januari',
      'Februari',
      'Maret',
      'April',
      'Mei',
      'Juni',
      'Juli',
      'Agustus',
      'September',
      'Oktober',
      'November',
      'Desember',
    ];
    return '${date.day} ${months[date.month - 1]}';
  }

  String _formatDateLabel(DateTime from, DateTime to) {
    const months = [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'Mei',
      'Jun',
      'Jul',
      'Agu',
      'Sep',
      'Okt',
      'Nov',
      'Des',
    ];

    if (from.year == to.year && from.month == to.month && from.day == to.day) {
      return '${from.day} ${months[from.month - 1]} ${from.year}';
    }
    return '${from.day} ${months[from.month - 1]} - ${to.day} ${months[to.month - 1]} ${to.year}';
  }

  String _getMonthName(int month) {
    const months = [
      'Januari',
      'Februari',
      'Maret',
      'April',
      'Mei',
      'Juni',
      'Juli',
      'Agustus',
      'September',
      'Oktober',
      'November',
      'Desember',
    ];
    return months[month - 1];
  }
}