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

import '../../../../application/analytic/sales_loader/sales_loader_bloc.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../components/spacer/spacer.dart';

class SalesRincianCard extends StatelessWidget {
  final SalesLoaderState state;

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

  @override
  Widget build(BuildContext context) {
    if (state.isFetching) return _buildShimmer();

    final summary = state.sales.summary;

    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: AppColor.surface,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.04),
            blurRadius: 10,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            context.lang.daily_breakdown,
            style: AppStyle.xl.copyWith(
              fontWeight: FontWeight.bold,
              color: AppColor.textPrimary,
              fontSize: 18,
            ),
          ),
          const SpaceHeight(16),
          _buildRow(
            context.lang.gross_sales,
            summary.totalSales.currencyFormatRp,
          ),
          _buildDivider(),
          _buildRow(
            context.lang.discount,
            summary.totalDiscount.currencyFormatRp,
          ),
          _buildDivider(),
          _buildRow(context.lang.tax, summary.totalTax.currencyFormatRp),
          _buildDivider(),
          _buildRow('Biaya layanan', 0.currencyFormatRp),
          _buildDivider(),
          _buildRow(
            context.lang.net_sales,
            summary.netSales.currencyFormatRp,
            isBold: true,
          ),
        ],
      ),
    );
  }

  Widget _buildRow(String label, String value, {bool isBold = false}) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 14),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            label,
            style: AppStyle.md.copyWith(
              color: isBold ? AppColor.textPrimary : AppColor.textSecondary,
              fontWeight: isBold ? FontWeight.w700 : FontWeight.w500,
              fontSize: 14,
            ),
          ),
          Text(
            value,
            style: AppStyle.md.copyWith(
              color: AppColor.textPrimary,
              fontWeight: isBold ? FontWeight.w700 : FontWeight.w600,
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildDivider() {
    return Divider(
      height: 1,
      thickness: 1,
      color: AppColor.border.withOpacity(0.5),
    );
  }

  Widget _buildShimmer() {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: AppColor.surface,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.04),
            blurRadius: 10,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Shimmer.fromColors(
        baseColor: Colors.grey[300]!,
        highlightColor: Colors.grey[100]!,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 140,
              height: 20,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(4),
              ),
            ),
            const SpaceHeight(20),
            ...List.generate(
              5,
              (index) => Padding(
                padding: const EdgeInsets.only(bottom: 16),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      width: 100,
                      height: 14,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(4),
                      ),
                    ),
                    Container(
                      width: 80,
                      height: 14,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(4),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}