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

import '../../../../application/analytic/profit_sharing_detail_loader/profit_sharing_detail_loader_bloc.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../components/spacer/spacer.dart';
import 'period_label.dart';
import 'profit_sharing_status.dart';

class ProfitSharingDetailHeader extends StatelessWidget {
  final ProfitSharingDetailLoaderState state;
  final String fallbackTitle;

  const ProfitSharingDetailHeader({
    super.key,
    required this.state,
    required this.fallbackTitle,
  });

  @override
  Widget build(BuildContext context) {
    final detail = state.detail;
    final summary = detail.summary;
    final title = detail.parentCategoryName.isNotEmpty
        ? detail.parentCategoryName
        : fallbackTitle;

    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: SafeArea(
        bottom: false,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(16, 12, 16, 24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              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(
                          title,
                          style: AppStyle.xl.copyWith(
                            color: AppColor.textWhite,
                            fontWeight: FontWeight.w700,
                            fontSize: 20,
                          ),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                        const SizedBox(height: 2),
                        Text(
                          formatPeriodLabel(state.dateFrom, state.dateTo),
                          style: AppStyle.sm.copyWith(
                            color: AppColor.textWhite.withOpacity(0.75),
                            fontSize: 12,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),

              const SpaceHeight(24),

              if (state.isFetching)
                _shimmerBox(width: 220, height: 36)
              else
                Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Expanded(
                      child: Text(
                        summary.totalRevenue.currencyFormatRp,
                        style: AppStyle.h1.copyWith(
                          color: AppColor.textWhite,
                          fontWeight: FontWeight.w900,
                          fontSize: 30,
                        ),
                      ),
                    ),
                    ProfitSharingStatusBadge(
                      realHppPercentage: summary.realHppPercentage,
                      onDarkBackground: true,
                    ),
                  ],
                ),

              const SpaceHeight(4),
              Text(
                context.lang.total_revenue,
                style: AppStyle.sm.copyWith(
                  color: AppColor.textWhite.withOpacity(0.75),
                  fontSize: 13,
                ),
              ),

              const SpaceHeight(16),

              if (state.isFetching)
                Row(
                  children: [
                    _shimmerBox(width: 120, height: 32, radius: 20),
                    const SpaceWidth(8),
                    _shimmerBox(width: 120, height: 32, radius: 20),
                  ],
                )
              else
                Wrap(
                  spacing: 8,
                  runSpacing: 8,
                  children: [
                    _chip(
                      '${context.lang.qty} ${summary.totalQuantity.thousandFormat}',
                    ),
                    _chip(context.lang.order_count_label(summary.orderCount)),
                  ],
                ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _chip(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,
        ),
      ),
    );
  }

  Widget _shimmerBox({
    required double width,
    required double height,
    double radius = 8,
  }) {
    return Shimmer.fromColors(
      baseColor: AppColor.textWhite.withOpacity(0.3),
      highlightColor: AppColor.textWhite.withOpacity(0.6),
      child: Container(
        width: width,
        height: height,
        decoration: BoxDecoration(
          color: AppColor.textWhite.withOpacity(0.3),
          borderRadius: BorderRadius.circular(radius),
        ),
      ),
    );
  }
}
