import 'package:flutter/material.dart';

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

class InventoryProductTile extends StatelessWidget {
  final ProductItem item;
  const InventoryProductTile({super.key, required this.item});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: AppColor.surface,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: AppColor.primary.withOpacity(0.08), width: 1),
        boxShadow: [
          BoxShadow(
            color: AppColor.primary.withOpacity(0.06),
            blurRadius: 12,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Image Container
          Container(
            height: 85,
            width: double.infinity,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: AppColor.backgroundGradient,
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(16),
                topRight: Radius.circular(16),
              ),
            ),
            child: Center(
              child: Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: AppColor.textWhite.withOpacity(0.9),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Text(item.image, style: const TextStyle(fontSize: 32)),
              ),
            ),
          ),

          // Content Container
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(12),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // Product Name
                  Text(
                    item.name,
                    style: AppStyle.sm.copyWith(
                      fontWeight: FontWeight.w600,
                      color: AppColor.textPrimary,
                      height: 1.2,
                    ),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),

                  SpaceHeight(4),

                  // Category
                  Container(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 6,
                      vertical: 2,
                    ),
                    decoration: BoxDecoration(
                      color: AppColor.primary.withOpacity(0.1),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: Text(
                      item.category,
                      style: AppStyle.xs.copyWith(
                        fontSize: 9,
                        fontWeight: FontWeight.w500,
                        color: AppColor.primary,
                      ),
                    ),
                  ),

                  const Spacer(),

                  // Price
                  Text(
                    'Rp ${item.price}',
                    style: AppStyle.sm.copyWith(
                      fontSize: 13,
                      fontWeight: FontWeight.w700,
                      color: AppColor.primary,
                    ),
                  ),

                  SpaceHeight(6),

                  // Quantity & Status
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '${item.quantity} pcs',
                        style: AppStyle.xs.copyWith(
                          fontSize: 11,
                          fontWeight: FontWeight.w500,
                          color: AppColor.textSecondary,
                        ),
                      ),
                      Container(
                        width: 8,
                        height: 8,
                        decoration: BoxDecoration(
                          color: getStatusColor(item.status),
                          shape: BoxShape.circle,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Color getStatusColor(String status) {
    switch (status) {
      case 'available':
        return AppColor.success;
      case 'low_stock':
        return AppColor.warning;
      case 'out_of_stock':
        return AppColor.error;
      default:
        return AppColor.textSecondary;
    }
  }
}
