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

import '../../domain/product_draft.dart';
import 'publish_status_chip.dart';

/// A card displaying a summary of a [ProductDraft].
///
/// Shows the product name, SKU, price, category, and publish status.
/// Highlights when [isSelected] is true.
class ProductDraftCard extends StatelessWidget {
  final ProductDraft draft;
  final bool isSelected;
  final VoidCallback? onTap;

  const ProductDraftCard({super.key, required this.draft, this.isSelected = false, this.onTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        padding: const EdgeInsets.all(KcSpacing.md),
        decoration: BoxDecoration(
          color: KcColors.surface,
          border: Border.all(
            color: isSelected ? KcColors.denimBlue : KcColors.border,
            width: isSelected ? 2 : 1,
          ),
          borderRadius: BorderRadius.circular(16),
          boxShadow: const [
            BoxShadow(blurRadius: 8, offset: Offset(0, 2), color: Color(0x11000000)),
          ],
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              draft.name,
              style: Theme.of(context).textTheme.titleLarge,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
            const SizedBox(height: KcSpacing.xs),
            Text('SKU: ${draft.sku}', style: Theme.of(context).textTheme.bodyMedium),
            const SizedBox(height: KcSpacing.sm),
            Row(
              children: [
                Text(
                  '\$${draft.price.toStringAsFixed(2)}',
                  style: Theme.of(
                    context,
                  ).textTheme.bodyLarge?.copyWith(fontWeight: FontWeight.w600),
                ),
                const SizedBox(width: KcSpacing.sm),
                Text(
                  draft.category,
                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: KcColors.neutral),
                ),
              ],
            ),
            const Spacer(),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                PublishStatusChip(status: draft.status),
                Text(
                  '${draft.lastModified.year}-${draft.lastModified.month.toString().padLeft(2, '0')}-${draft.lastModified.day.toString().padLeft(2, '0')}',
                  style: Theme.of(context).textTheme.bodySmall?.copyWith(color: KcColors.neutral),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
