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

import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/analytic/analytic.dart';

class PurchaseIngredientCard extends StatelessWidget {
  final PurchasingIngredientData data;
  final int index;
  final Animation<double> animation;

  const PurchaseIngredientCard({
    super.key,
    required this.data,
    required this.index,
    required this.animation,
  });

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: animation,
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: AppColor.surface,
          borderRadius: BorderRadius.circular(14),
          border: Border.all(color: AppColor.border.withOpacity(0.25)),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.04),
              blurRadius: 10,
              offset: const Offset(0, 3),
            ),
          ],
        ),
        child: Row(
          children: [
            // Rank badge
            Container(
              width: 36,
              height: 36,
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  colors: AppColor.primaryGradient,
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
                borderRadius: BorderRadius.circular(10),
              ),
              child: Center(
                child: Text(
                  '${index + 1}',
                  style: AppStyle.sm.copyWith(
                    color: AppColor.textWhite,
                    fontWeight: FontWeight.w800,
                  ),
                ),
              ),
            ),
            const SizedBox(width: 12),

            // Ingredient icon
            Container(
              padding: const EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: AppColor.secondary.withOpacity(0.1),
                borderRadius: BorderRadius.circular(10),
              ),
              child: Icon(
                LineIcons.leaf,
                color: AppColor.secondary,
                size: 20,
              ),
            ),
            const SizedBox(width: 12),

            // Name & details
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    data.ingredientName,
                    style: AppStyle.md.copyWith(
                      fontWeight: FontWeight.w700,
                      color: AppColor.textPrimary,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Row(
                    children: [
                      _Chip(
                        label: '${data.quantity} pcs',
                        color: AppColor.warning,
                      ),
                      const SizedBox(width: 6),
                      _Chip(
                        label: '${data.purchaseOrderCount} PO',
                        color: AppColor.info,
                      ),
                    ],
                  ),
                ],
              ),
            ),

            // Cost column
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Text(
                  data.totalCost.currencyFormatRp,
                  style: AppStyle.md.copyWith(
                    fontWeight: FontWeight.w800,
                    color: AppColor.primary,
                  ),
                ),
                const SizedBox(height: 2),
                Text(
                  '@ ${data.averageUnitCost.round().currencyFormatRp}',
                  style: AppStyle.xs.copyWith(
                    color: AppColor.textSecondary,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class _Chip extends StatelessWidget {
  final String label;
  final Color color;

  const _Chip({required this.label, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
      decoration: BoxDecoration(
        color: color.withOpacity(0.1),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text(
        label,
        style: AppStyle.xs.copyWith(
          color: color,
          fontWeight: FontWeight.w600,
        ),
      ),
    );
  }
}
