import 'package:flutter/material.dart';

import '../../../../common/theme/theme.dart';
import '../../../components/spacer/spacer.dart';
import '../product_page.dart';

class ProductTile extends StatelessWidget {
  final Product product;
  final VoidCallback onTap;

  const ProductTile({super.key, required this.product, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              color: AppColor.surface,
              borderRadius: BorderRadius.circular(12.0),
              border: Border.all(
                color: product.isActive
                    ? AppColor.border
                    : AppColor.borderLight,
              ),
              boxShadow: [
                BoxShadow(
                  color: AppColor.black.withOpacity(0.05),
                  blurRadius: 10,
                  offset: const Offset(0, 2),
                ),
              ],
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [_buildProductImage(), _buildProductInfo()],
            ),
          ),
          // Overlay gray untuk produk yang tidak aktif
          if (!product.isActive)
            Container(
              decoration: BoxDecoration(
                color: AppColor.black.withOpacity(0.4),
                borderRadius: BorderRadius.circular(12.0),
              ),
              child: Center(
                child: Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 16,
                    vertical: 8,
                  ),
                  decoration: BoxDecoration(
                    color: AppColor.warning,
                    borderRadius: BorderRadius.circular(8),
                    boxShadow: [
                      BoxShadow(
                        color: AppColor.black.withOpacity(0.2),
                        blurRadius: 4,
                        offset: const Offset(0, 2),
                      ),
                    ],
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Icon(
                        Icons.visibility_off,
                        color: AppColor.textWhite,
                        size: 16,
                      ),
                      SpaceWidth(6),
                      Text(
                        'NONAKTIF',
                        style: AppStyle.sm.copyWith(
                          color: AppColor.textWhite,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
        ],
      ),
    );
  }

  Widget _buildProductImage() {
    return Expanded(
      flex: 2,
      child: Container(
        width: double.infinity,
        decoration: const BoxDecoration(
          color: AppColor.borderLight,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(12.0),
            topRight: Radius.circular(12.0),
          ),
        ),
        child: Stack(
          children: [
            Center(
              child: Icon(Icons.image, size: 32, color: AppColor.textLight),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildProductInfo() {
    return Expanded(
      flex: 2,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              product.name,
              style: AppStyle.sm.copyWith(
                fontWeight: FontWeight.bold,
                color: product.isActive
                    ? AppColor.textPrimary
                    : AppColor.textSecondary,
              ),
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
            const SizedBox(height: 2),
            Text(
              _formatPrice(product.price),
              style: AppStyle.xs.copyWith(
                color: product.isActive
                    ? AppColor.primary
                    : AppColor.textSecondary,
                fontWeight: FontWeight.bold,
              ),
            ),
            const Spacer(),
            _buildBottomInfo(),
          ],
        ),
      ),
    );
  }

  Widget _buildBottomInfo() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Flexible(
          child: Text(
            'Stok: ${product.stock}',
            style: AppStyle.xs.copyWith(
              color: AppColor.textSecondary,
              fontSize: 9,
            ),
            overflow: TextOverflow.ellipsis,
          ),
        ),
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 1),
          decoration: BoxDecoration(
            color: AppColor.primaryLight.withOpacity(0.1),
            borderRadius: BorderRadius.circular(3.0),
          ),
          child: Text(
            product.category,
            style: AppStyle.xs.copyWith(
              color: product.isActive
                  ? AppColor.primary
                  : AppColor.textSecondary,
              fontSize: 8,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ],
    );
  }

  String _formatPrice(int price) {
    return 'Rp ${price.toString().replaceAllMapped(RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))'), (Match m) => '${m[1]}.')}';
  }
}