import 'package:flutter/material.dart';

import '../../../../../common/extension/extension.dart';
import '../../../../../common/theme/theme.dart';
import '../../../../../domain/product/product.dart';
import '../../../../components/image/image.dart';
import '../../../../components/spacer/spacer.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: 3,
      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: ClipRRect(
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(12.0),
            topRight: Radius.circular(12.0),
          ),
          child: AppNetworkImage(url: product.imageUrl, fit: BoxFit.cover),
        ),
      ),
    );
  }

  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(
              product.price.currencyFormatRp,
              style: AppStyle.xs.copyWith(
                color: product.isActive
                    ? AppColor.primary
                    : AppColor.textSecondary,
                fontWeight: FontWeight.bold,
              ),
            ),
            const Spacer(),
            _buildBottomInfo(),
          ],
        ),
      ),
    );
  }

  Widget _buildBottomInfo() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 1),
          decoration: BoxDecoration(
            color: _getPrinterTypeColor().withOpacity(0.1),
            borderRadius: BorderRadius.circular(3.0),
          ),
          child: Text(
            product.printerType.toUpperCase(),
            style: AppStyle.xs.copyWith(
              color: product.isActive
                  ? _getPrinterTypeColor()
                  : AppColor.textSecondary,
              fontSize: 8,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ],
    );
  }

  Color _getPrinterTypeColor() {
    switch (product.printerType.toLowerCase()) {
      case 'kitchen':
        return Colors.orange;
      case 'bar':
        return Colors.blue;
      case 'receipt':
        return AppColor.primary;
      default:
        return AppColor.primary;
    }
  }
}
