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

  // Colors for product icon backgrounds
  static const _iconBgColors = [
    Color(0xFFB9F6CA), // green light
    Color(0xFFB3E5FC), // blue light
    Color(0xFFFFF9C4), // yellow light
    Color(0xFFFFCDD2), // red light
    Color(0xFFE1BEE7), // purple light
  ];

  @override
  Widget build(BuildContext context) {
    if (products.isEmpty) return const SizedBox.shrink();

    return Padding(
      padding: const EdgeInsets.symmetric(
        horizontal: AppValue.padding,
        vertical: 24,
      ).copyWith(bottom: 0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            context.lang.best_selling_products,
            style: AppStyle.xl.copyWith(
              fontWeight: FontWeight.w800,
              color: AppColor.textPrimary,
            ),
          ),
          const SpaceHeight(16),

          // Product list card
          Container(
            decoration: BoxDecoration(
              color: AppColor.white,
              borderRadius: BorderRadius.circular(16),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.04),
                  blurRadius: 10,
                  offset: const Offset(0, 4),
                ),
              ],
            ),
            child: ListView.separated(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              padding: const EdgeInsets.symmetric(vertical: 8),
              itemCount: products.length > 5 ? 5 : products.length,
              separatorBuilder: (_, __) => Divider(
                height: 1,
                color: AppColor.border.withOpacity(0.4),
                indent: 76,
                endIndent: 16,
              ),
              itemBuilder: (context, index) {
                return _ProductTile(
                  product: products[index],
                  bgColor: _iconBgColors[index % _iconBgColors.length],
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

class _ProductTile extends StatelessWidget {
  final DashboardTopProduct product;
  final Color bgColor;

  const _ProductTile({required this.product, required this.bgColor});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
      child: Row(
        children: [
          // Product icon placeholder
          Container(
            width: 48,
            height: 48,
            decoration: BoxDecoration(
              color: bgColor,
              borderRadius: BorderRadius.circular(14),
            ),
            child: Center(
              child: Text(
                product.productName.isNotEmpty
                    ? product.productName[0].toUpperCase()
                    : '?',
                style: AppStyle.lg.copyWith(
                  fontWeight: FontWeight.w700,
                  color: AppColor.textPrimary,
                ),
              ),
            ),
          ),
          const SpaceWidth(12),

          // Name + qty
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  product.productName,
                  style: AppStyle.md.copyWith(
                    fontWeight: FontWeight.w700,
                    color: AppColor.textPrimary,
                  ),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
                const SizedBox(height: 2),
                Text(
                  context.lang.portion_sold(product.quantitySold),
                  style: AppStyle.xs.copyWith(color: AppColor.textSecondary),
                ),
              ],
            ),
          ),
          const SpaceWidth(8),

          // Revenue
          Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Text(
                product.revenue.currencyFormatRp,
                style: AppStyle.md.copyWith(
                  fontWeight: FontWeight.w700,
                  color: AppColor.textPrimary,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
