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 ReportTopProduct extends StatelessWidget {
  final List<DashboardTopProduct> products;
  const ReportTopProduct({super.key, required this.products});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: AppColor.surface,
        borderRadius: BorderRadius.circular(24),
        boxShadow: [
          BoxShadow(
            color: AppColor.textSecondary.withOpacity(0.1),
            blurRadius: 20,
            offset: const Offset(0, 8),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    context.lang.best_selling_products,
                    style: AppStyle.xxl.copyWith(
                      color: AppColor.textPrimary,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SpaceHeight(4),
                  Text(
                    context.lang.highest_sales_ranking,
                    style: AppStyle.md.copyWith(color: AppColor.textSecondary),
                  ),
                ],
              ),
              Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: AppColor.warning.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: const Icon(
                  Icons.star,
                  color: AppColor.warning,
                  size: 24,
                ),
              ),
            ],
          ),
          const SpaceHeight(20),
          ListView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemBuilder: (context, index) {
              return _buildEnhancedProductItem(
                context,
                products[index],
                index + 1,
              );
            },
            itemCount: products.length,
          ),
        ],
      ),
    );
  }

  Widget _buildEnhancedProductItem(
    BuildContext context,
    DashboardTopProduct product,
    int rank,
  ) {
    final isFirst = rank == 1;
    final isTopThree = rank <= 3;

    return Container(
      margin: const EdgeInsets.only(bottom: 16),
      decoration: BoxDecoration(
        gradient: isFirst
            ? LinearGradient(
                colors: [
                  AppColor.warning.withOpacity(0.1),
                  AppColor.warning.withOpacity(0.05),
                ],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              )
            : isTopThree
            ? LinearGradient(
                colors: [
                  AppColor.primary.withOpacity(0.08),
                  AppColor.primary.withOpacity(0.03),
                ],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              )
            : null,
        color: isTopThree ? null : AppColor.white,
        borderRadius: BorderRadius.circular(20),
        border: Border.all(
          color: isFirst
              ? AppColor.warning.withOpacity(0.3)
              : isTopThree
              ? AppColor.primary.withOpacity(0.2)
              : AppColor.border.withOpacity(0.3),
          width: isFirst ? 2 : 1,
        ),
        boxShadow: [
          BoxShadow(
            color: isFirst
                ? AppColor.warning.withOpacity(0.15)
                : isTopThree
                ? AppColor.primary.withOpacity(0.1)
                : Colors.black.withOpacity(0.04),
            blurRadius: isFirst ? 16 : 12,
            offset: const Offset(0, 4),
            spreadRadius: isFirst ? -2 : -3,
          ),
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: Stack(
          children: [
            // Top accent line for rank 1-3
            if (isTopThree)
              Positioned(
                top: 0,
                left: 0,
                right: 0,
                child: Container(
                  height: 4,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: isFirst
                          ? [
                              AppColor.warning,
                              AppColor.warning.withOpacity(0.7),
                            ]
                          : [
                              AppColor.primary,
                              AppColor.primary.withOpacity(0.7),
                            ],
                    ),
                  ),
                ),
              ),

            // Main content
            Padding(
              padding: const EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // Header with rank and product info
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // Rank badge
                      Container(
                        width: 56,
                        height: 56,
                        decoration: BoxDecoration(
                          gradient: isFirst
                              ? const LinearGradient(
                                  colors: [AppColor.warning, Color(0xFFFFB74D)],
                                  begin: Alignment.topLeft,
                                  end: Alignment.bottomRight,
                                )
                              : isTopThree
                              ? LinearGradient(
                                  colors: [
                                    AppColor.primary,
                                    AppColor.primary.withOpacity(0.8),
                                  ],
                                  begin: Alignment.topLeft,
                                  end: Alignment.bottomRight,
                                )
                              : LinearGradient(
                                  colors: [
                                    AppColor.textSecondary.withOpacity(0.8),
                                    AppColor.textSecondary.withOpacity(0.6),
                                  ],
                                ),
                          borderRadius: BorderRadius.circular(16),
                          boxShadow: [
                            BoxShadow(
                              color: isFirst
                                  ? AppColor.warning.withOpacity(0.3)
                                  : isTopThree
                                  ? AppColor.primary.withOpacity(0.3)
                                  : AppColor.textSecondary.withOpacity(0.2),
                              blurRadius: 10,
                              offset: const Offset(0, 4),
                            ),
                          ],
                        ),
                        child: Center(
                          child: isFirst
                              ? const Icon(
                                  Icons.emoji_events,
                                  color: AppColor.white,
                                  size: 28,
                                )
                              : rank == 2
                              ? const Icon(
                                  Icons.workspace_premium,
                                  color: AppColor.white,
                                  size: 26,
                                )
                              : rank == 3
                              ? const Icon(
                                  Icons.military_tech,
                                  color: AppColor.white,
                                  size: 26,
                                )
                              : Text(
                                  rank.toString(),
                                  style: AppStyle.xl.copyWith(
                                    color: AppColor.white,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 18,
                                  ),
                                ),
                        ),
                      ),

                      const SpaceWidth(16),

                      // Product info
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              product.productName,
                              style: AppStyle.lg.copyWith(
                                color: AppColor.textPrimary,
                                fontWeight: FontWeight.bold,
                                fontSize: 16,
                              ),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                            const SpaceHeight(6),
                            // Category badge
                            Container(
                              padding: const EdgeInsets.symmetric(
                                horizontal: 10,
                                vertical: 4,
                              ),
                              decoration: BoxDecoration(
                                color: isFirst
                                    ? AppColor.warning.withOpacity(0.1)
                                    : AppColor.primary.withOpacity(0.1),
                                borderRadius: BorderRadius.circular(8),
                                border: Border.all(
                                  color: isFirst
                                      ? AppColor.warning.withOpacity(0.3)
                                      : AppColor.primary.withOpacity(0.3),
                                  width: 1,
                                ),
                              ),
                              child: Text(
                                product.categoryName,
                                style: AppStyle.xs.copyWith(
                                  color: isFirst
                                      ? AppColor.warning
                                      : AppColor.primary,
                                  fontWeight: FontWeight.w600,
                                  letterSpacing: 0.5,
                                ),
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),

                  const SpaceHeight(16),

                  // Statistics section
                  Container(
                    padding: const EdgeInsets.all(14),
                    decoration: BoxDecoration(
                      color: AppColor.background.withOpacity(0.5),
                      borderRadius: BorderRadius.circular(14),
                      border: Border.all(
                        color: AppColor.border.withOpacity(0.2),
                        width: 1,
                      ),
                    ),
                    child: Column(
                      children: [
                        // Revenue and Average Price
                        IntrinsicHeight(
                          child: Row(
                            children: [
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Row(
                                      mainAxisSize: MainAxisSize.min,
                                      children: [
                                        Icon(
                                          Icons.attach_money,
                                          size: 14,
                                          color: AppColor.success,
                                        ),
                                        const SpaceWidth(3),
                                        Flexible(
                                          child: Text(
                                            context.lang.revenue,
                                            style: AppStyle.xs.copyWith(
                                              color: AppColor.textSecondary,
                                              fontWeight: FontWeight.w500,
                                              fontSize: 11,
                                            ),
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                        ),
                                      ],
                                    ),
                                    const SpaceHeight(4),
                                    Text(
                                      product.revenue.currencyFormatRp,
                                      style: AppStyle.sm.copyWith(
                                        color: AppColor.success,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 13,
                                      ),
                                      maxLines: 1,
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                  ],
                                ),
                              ),

                              Container(
                                width: 1,
                                margin: const EdgeInsets.symmetric(
                                  horizontal: 10,
                                ),
                                color: AppColor.border.withOpacity(0.3),
                              ),

                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  children: [
                                    Row(
                                      mainAxisAlignment: MainAxisAlignment.end,
                                      mainAxisSize: MainAxisSize.min,
                                      children: [
                                        Flexible(
                                          child: Text(
                                            context.lang.average_price,
                                            style: AppStyle.xs.copyWith(
                                              color: AppColor.textSecondary,
                                              fontWeight: FontWeight.w500,
                                              fontSize: 11,
                                            ),
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                        ),
                                        const SpaceWidth(3),
                                        Icon(
                                          Icons.trending_up,
                                          size: 14,
                                          color: AppColor.primary,
                                        ),
                                      ],
                                    ),
                                    const SpaceHeight(4),
                                    Text(
                                      product.averagePrice
                                          .round()
                                          .currencyFormatRp,
                                      style: AppStyle.sm.copyWith(
                                        color: AppColor.primary,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 13,
                                      ),
                                      maxLines: 1,
                                      overflow: TextOverflow.ellipsis,
                                      textAlign: TextAlign.end,
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),

                        const SpaceHeight(10),

                        // Quantity Sold and Order Count
                        IntrinsicHeight(
                          child: Row(
                            children: [
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Row(
                                      mainAxisSize: MainAxisSize.min,
                                      children: [
                                        Icon(
                                          Icons.inventory,
                                          size: 14,
                                          color: AppColor.warning,
                                        ),
                                        const SpaceWidth(3),
                                        Flexible(
                                          child: Text(
                                            context.lang.sold,
                                            style: AppStyle.xs.copyWith(
                                              color: AppColor.textSecondary,
                                              fontWeight: FontWeight.w500,
                                              fontSize: 11,
                                            ),
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                        ),
                                      ],
                                    ),
                                    const SpaceHeight(4),
                                    Text(
                                      '${product.quantitySold}',
                                      style: AppStyle.sm.copyWith(
                                        color: AppColor.warning,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 13,
                                      ),
                                    ),
                                  ],
                                ),
                              ),

                              Container(
                                width: 1,
                                margin: const EdgeInsets.symmetric(
                                  horizontal: 10,
                                ),
                                color: AppColor.border.withOpacity(0.3),
                              ),

                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  children: [
                                    Row(
                                      mainAxisAlignment: MainAxisAlignment.end,
                                      mainAxisSize: MainAxisSize.min,
                                      children: [
                                        Flexible(
                                          child: Text(
                                            context.lang.orders,
                                            style: AppStyle.xs.copyWith(
                                              color: AppColor.textSecondary,
                                              fontWeight: FontWeight.w500,
                                              fontSize: 11,
                                            ),
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                        ),
                                        const SpaceWidth(3),
                                        Icon(
                                          Icons.shopping_cart,
                                          size: 14,
                                          color: AppColor.info,
                                        ),
                                      ],
                                    ),
                                    const SpaceHeight(4),
                                    Text(
                                      '${product.orderCount}',
                                      style: AppStyle.sm.copyWith(
                                        color: AppColor.info,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 13,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),

                  // Performance indicator for top 3
                  if (isTopThree) ...[
                    const SpaceHeight(10),
                    Container(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 10,
                        vertical: 6,
                      ),
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          colors: isFirst
                              ? [
                                  AppColor.warning.withOpacity(0.2),
                                  AppColor.warning.withOpacity(0.1),
                                ]
                              : [
                                  AppColor.primary.withOpacity(0.2),
                                  AppColor.primary.withOpacity(0.1),
                                ],
                        ),
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(
                          color: isFirst
                              ? AppColor.warning.withOpacity(0.3)
                              : AppColor.primary.withOpacity(0.3),
                          width: 1,
                        ),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Icon(
                            isFirst ? Icons.star : Icons.trending_up,
                            size: 14,
                            color: isFirst
                                ? AppColor.warning
                                : AppColor.primary,
                          ),
                          const SpaceWidth(5),
                          Flexible(
                            child: Text(
                              isFirst
                                  ? context.lang.best_seller
                                  : context.lang.top_performer,
                              style: AppStyle.xs.copyWith(
                                color: isFirst
                                    ? AppColor.warning
                                    : AppColor.primary,
                                fontWeight: FontWeight.bold,
                                fontSize: 11,
                              ),
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
