import 'package:flutter/material.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/analytic/analytic.dart';
import '../../../components/widgets/empty_widget.dart';

class ReportPaymentMethod extends StatelessWidget {
  final List<DashboardPaymentMethod> paymentMethods;

  const ReportPaymentMethod({super.key, required this.paymentMethods});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: AppColor.white,
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.06),
            blurRadius: 20,
            offset: const Offset(0, 4),
            spreadRadius: -4,
          ),
        ],
      ),
      child: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Header
            Row(
              children: [
                Container(
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: AppColor.primaryGradient,
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                    ),
                    borderRadius: BorderRadius.circular(16),
                    boxShadow: [
                      BoxShadow(
                        color: AppColor.primary.withOpacity(0.3),
                        blurRadius: 12,
                        offset: const Offset(0, 4),
                      ),
                    ],
                  ),
                  child: Icon(Icons.payment, color: AppColor.white, size: 24),
                ),
                const SizedBox(width: 16),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Payment Methods',
                        style: AppStyle.xl.copyWith(
                          fontWeight: FontWeight.bold,
                          color: AppColor.textPrimary,
                        ),
                      ),
                      const SizedBox(height: 4),
                      Text(
                        'Revenue breakdown by payment method',
                        style: AppStyle.sm.copyWith(
                          color: AppColor.textSecondary,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),

            const SizedBox(height: 24),

            // Payment Method List
            if (paymentMethods.isEmpty)
              _buildEmptyState()
            else
              ListView.separated(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                itemCount: paymentMethods.length,
                padding: EdgeInsets.zero,
                separatorBuilder: (context, index) =>
                    const SizedBox(height: 12),
                itemBuilder: (context, index) {
                  final method = paymentMethods[index];
                  return TweenAnimationBuilder<double>(
                    tween: Tween<double>(begin: 0, end: 1),
                    duration: Duration(milliseconds: 600 + (index * 150)),
                    curve: Curves.easeOutCubic,
                    builder: (context, value, child) {
                      return Transform.translate(
                        offset: Offset(30 * (1 - value), 0),
                        child: Opacity(
                          opacity: value,
                          child: _buildPaymentMethodTile(
                            context,
                            method,
                            index,
                          ),
                        ),
                      );
                    },
                  );
                },
              ),
          ],
        ),
      ),
    );
  }

  Widget _buildPaymentMethodTile(
    BuildContext context,
    DashboardPaymentMethod method,
    int index,
  ) {
    final screenWidth = MediaQuery.of(context).size.width;
    final isCompact = screenWidth < 400; // For smaller screens

    return Container(
      decoration: BoxDecoration(
        color: AppColor.white,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(
          color: _getPaymentMethodColor(
            method.paymentMethodType,
          ).withOpacity(0.1),
          width: 1.5,
        ),
        boxShadow: [
          BoxShadow(
            color: _getPaymentMethodColor(
              method.paymentMethodType,
            ).withOpacity(0.08),
            blurRadius: 12,
            offset: const Offset(0, 4),
            spreadRadius: -2,
          ),
          BoxShadow(
            color: Colors.black.withOpacity(0.03),
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(16),
        child: Stack(
          children: [
            // Subtle background gradient
            Positioned.fill(
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      _getPaymentMethodColor(
                        method.paymentMethodType,
                      ).withOpacity(0.03),
                      _getPaymentMethodColor(
                        method.paymentMethodType,
                      ).withOpacity(0.01),
                    ],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                ),
              ),
            ),

            // Main content
            Padding(
              padding: const EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // Header section with improved responsive layout
                  if (isCompact)
                    _buildCompactHeader(method)
                  else
                    _buildStandardHeader(context, method),

                  const SizedBox(height: 16),

                  // Stats row with better spacing
                  _buildStatsSection(method),

                  const SizedBox(height: 16),

                  // Enhanced progress bar section
                  _buildProgressSection(method, index),
                ],
              ),
            ),

            // Accent line on the left
            Positioned(
              left: 0,
              top: 0,
              bottom: 0,
              child: Container(
                width: 4,
                decoration: BoxDecoration(
                  color: _getPaymentMethodColor(method.paymentMethodType),
                  borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(16),
                    bottomLeft: Radius.circular(16),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildStandardHeader(
    BuildContext context,
    DashboardPaymentMethod method,
  ) {
    return Row(
      children: [
        // Enhanced icon container
        Container(
          width: 56,
          height: 56,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                _getPaymentMethodColor(method.paymentMethodType),
                _getPaymentMethodColor(
                  method.paymentMethodType,
                ).withOpacity(0.8),
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            borderRadius: BorderRadius.circular(16),
            boxShadow: [
              BoxShadow(
                color: _getPaymentMethodColor(
                  method.paymentMethodType,
                ).withOpacity(0.3),
                blurRadius: 8,
                offset: const Offset(0, 4),
              ),
            ],
          ),
          child: Icon(
            _getPaymentMethodIcon(method.paymentMethodType),
            color: AppColor.white,
            size: 28,
          ),
        ),

        const SizedBox(width: 16),

        // Payment method info - improved text handling
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                method.paymentMethodName,
                style: AppStyle.lg.copyWith(
                  fontWeight: FontWeight.bold,
                  color: AppColor.textPrimary,
                ),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
              const SizedBox(height: 6),
              Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 10,
                  vertical: 5,
                ),
                decoration: BoxDecoration(
                  color: _getPaymentMethodColor(
                    method.paymentMethodType,
                  ).withOpacity(0.1),
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(
                    color: _getPaymentMethodColor(
                      method.paymentMethodType,
                    ).withOpacity(0.2),
                    width: 1,
                  ),
                ),
                child: Text(
                  method.paymentMethodType.toUpperCase(),
                  style: AppStyle.xs.copyWith(
                    color: _getPaymentMethodColor(method.paymentMethodType),
                    fontWeight: FontWeight.bold,
                    letterSpacing: 0.8,
                  ),
                ),
              ),
            ],
          ),
        ),

        const SizedBox(width: 12),

        // Percentage badge
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
          decoration: BoxDecoration(
            color: _getPaymentMethodColor(method.paymentMethodType),
            borderRadius: BorderRadius.circular(20),
            boxShadow: [
              BoxShadow(
                color: _getPaymentMethodColor(
                  method.paymentMethodType,
                ).withOpacity(0.3),
                blurRadius: 6,
                offset: const Offset(0, 3),
              ),
            ],
          ),
          child: Text(
            '${method.percentage.toStringAsFixed(1)}%',
            style: AppStyle.sm.copyWith(
              color: AppColor.white,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildCompactHeader(DashboardPaymentMethod method) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Container(
              width: 48,
              height: 48,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    _getPaymentMethodColor(method.paymentMethodType),
                    _getPaymentMethodColor(
                      method.paymentMethodType,
                    ).withOpacity(0.8),
                  ],
                ),
                borderRadius: BorderRadius.circular(14),
              ),
              child: Icon(
                _getPaymentMethodIcon(method.paymentMethodType),
                color: AppColor.white,
                size: 24,
              ),
            ),
            const SizedBox(width: 12),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    method.paymentMethodName,
                    style: AppStyle.md.copyWith(
                      fontWeight: FontWeight.bold,
                      color: AppColor.textPrimary,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                  const SizedBox(height: 4),
                  Text(
                    method.paymentMethodType.toUpperCase(),
                    style: AppStyle.xs.copyWith(
                      color: _getPaymentMethodColor(method.paymentMethodType),
                      fontWeight: FontWeight.bold,
                      letterSpacing: 0.5,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
              decoration: BoxDecoration(
                color: _getPaymentMethodColor(method.paymentMethodType),
                borderRadius: BorderRadius.circular(16),
              ),
              child: Text(
                '${method.percentage.toStringAsFixed(1)}%',
                style: AppStyle.xs.copyWith(
                  color: AppColor.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildStatsSection(DashboardPaymentMethod method) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: AppColor.background.withOpacity(0.5),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: AppColor.border.withOpacity(0.2), width: 1),
      ),
      child: IntrinsicHeight(
        child: Row(
          children: [
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Total Revenue',
                    style: AppStyle.xs.copyWith(
                      color: AppColor.textSecondary,
                      fontWeight: FontWeight.w500,
                      letterSpacing: 0.5,
                    ),
                  ),
                  const SizedBox(height: 6),
                  Text(
                    method.totalAmount.currencyFormatRp,
                    style: AppStyle.lg.copyWith(
                      fontWeight: FontWeight.bold,
                      color: AppColor.textPrimary,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
            ),
            Container(
              width: 1,
              margin: const EdgeInsets.symmetric(horizontal: 16),
              decoration: BoxDecoration(
                color: AppColor.border.withOpacity(0.3),
              ),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Text(
                  'Orders',
                  style: AppStyle.xs.copyWith(
                    color: AppColor.textSecondary,
                    fontWeight: FontWeight.w500,
                    letterSpacing: 0.5,
                  ),
                ),
                const SizedBox(height: 6),
                Text(
                  '${method.orderCount}',
                  style: AppStyle.lg.copyWith(
                    fontWeight: FontWeight.bold,
                    color: _getPaymentMethodColor(method.paymentMethodType),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildProgressSection(DashboardPaymentMethod method, int index) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              'Revenue Share',
              style: AppStyle.sm.copyWith(
                color: AppColor.textSecondary,
                fontWeight: FontWeight.w600,
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
              decoration: BoxDecoration(
                color: _getPaymentMethodColor(
                  method.paymentMethodType,
                ).withOpacity(0.1),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Text(
                '${method.percentage.toStringAsFixed(1)}%',
                style: AppStyle.sm.copyWith(
                  color: _getPaymentMethodColor(method.paymentMethodType),
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
        const SizedBox(height: 12),
        TweenAnimationBuilder<double>(
          tween: Tween<double>(begin: 0, end: method.percentage / 100),
          duration: Duration(milliseconds: 1200 + (index * 200)),
          curve: Curves.easeOutCubic,
          builder: (context, value, child) {
            return Container(
              height: 8,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(4),
                color: AppColor.border.withOpacity(0.3),
              ),
              child: Stack(
                children: [
                  FractionallySizedBox(
                    widthFactor: value,
                    child: Container(
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          colors: [
                            _getPaymentMethodColor(method.paymentMethodType),
                            _getPaymentMethodColor(
                              method.paymentMethodType,
                            ).withOpacity(0.8),
                          ],
                        ),
                        borderRadius: BorderRadius.circular(4),
                        boxShadow: [
                          BoxShadow(
                            color: _getPaymentMethodColor(
                              method.paymentMethodType,
                            ).withOpacity(0.3),
                            blurRadius: 4,
                            offset: const Offset(0, 1),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ],
    );
  }

  Widget _buildEmptyState() {
    return EmptyWidget(
      title: 'No Payment Methods',
      message:
          'Payment method data will appear here once transactions are made',
    );
  }

  Color _getPaymentMethodColor(String type) {
    switch (type.toLowerCase()) {
      case 'cash':
        return AppColor.success;
      case 'card':
      case 'credit_card':
      case 'debit_card':
        return AppColor.info;
      case 'bank_transfer':
      case 'transfer':
        return AppColor.primary;
      case 'ewallet':
      case 'e_wallet':
      case 'digital_wallet':
        return AppColor.warning;
      case 'qr_code':
      case 'qris':
        return const Color(0xFF9C27B0); // Purple
      default:
        return AppColor.textSecondary;
    }
  }

  IconData _getPaymentMethodIcon(String type) {
    switch (type.toLowerCase()) {
      case 'cash':
        return Icons.payments;
      case 'card':
      case 'credit_card':
      case 'debit_card':
        return Icons.credit_card;
      case 'bank_transfer':
      case 'transfer':
        return Icons.account_balance;
      case 'ewallet':
      case 'e_wallet':
      case 'digital_wallet':
        return Icons.account_balance_wallet;
      case 'qr_code':
      case 'qris':
        return Icons.qr_code;
      default:
        return Icons.payment;
    }
  }
}