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 (single-item preview selection).
///
/// When [isMultiSelected] is non-null, a leading checkbox is shown to
/// support multi-select mode. Tapping the checkbox fires [onMultiSelectToggle];
/// tapping the rest of the card still fires [onTap] for single-item preview.
///
/// When [isCompact] is true, the card uses a denser layout with a smaller
/// height and condensed metadata. A [descriptionSnippet] may be shown in
/// standard mode for lightweight secondary metadata visibility.
///
/// When [isStale] is true, a warning icon is displayed to flag products
/// that have not been modified recently.
class ProductDraftCard extends StatelessWidget {
  final ProductDraft draft;
  final bool isSelected;
  final VoidCallback? onTap;

  /// Whether this card is part of the multi-selection.
  /// When `null`, the checkbox is hidden (multi-select not active).
  final bool? isMultiSelected;

  /// Called when the multi-select checkbox is toggled.
  final VoidCallback? onMultiSelectToggle;

  /// Whether to use the compact (denser) layout.
  final bool isCompact;

  /// Whether this product is stale (not modified recently).
  final bool isStale;

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

  @override
  Widget build(BuildContext context) {
    final showCheckbox = isMultiSelected != null;

    return GestureDetector(
      onTap: onTap,
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        padding: EdgeInsets.all(isCompact ? KcSpacing.sm : KcSpacing.md),
        decoration: BoxDecoration(
          color: KcColors.surface,
          border: Border.all(
            color: isSelected ? KcColors.denimBlue : KcColors.border,
            width: isSelected ? 2 : 1,
          ),
          borderRadius: BorderRadius.circular(isCompact ? 10 : 16),
          boxShadow: const [
            BoxShadow(blurRadius: 8, offset: Offset(0, 2), color: Color(0x11000000)),
          ],
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if (showCheckbox) ...[
              Checkbox(
                value: isMultiSelected ?? false,
                onChanged: (_) => onMultiSelectToggle?.call(),
              ),
              const SizedBox(width: KcSpacing.xs),
            ],
            Expanded(
              child: isCompact ? _buildCompactContent(context) : _buildStandardContent(context),
            ),
          ],
        ),
      ),
    );
  }

  /// Standard layout — full metadata with description snippet and spacer.
  Widget _buildStandardContent(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Expanded(
              child: Text(
                draft.name,
                style: Theme.of(context).textTheme.titleLarge,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ),
            if (isStale) ...[
              const SizedBox(width: KcSpacing.xs),
              Tooltip(
                message: 'Not modified in 30+ days',
                child: Icon(Icons.schedule, size: 16, color: KcColors.warning),
              ),
            ],
          ],
        ),
        const SizedBox(height: KcSpacing.xs),
        Text('SKU: ${draft.sku}', style: Theme.of(context).textTheme.bodyMedium),
        const SizedBox(height: KcSpacing.xs),
        // Description snippet for lightweight secondary metadata visibility.
        Text(
          draft.description,
          style: Theme.of(context).textTheme.bodySmall?.copyWith(color: KcColors.neutral),
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
        ),
        const Spacer(),
        Row(
          children: [
            Text(
              '\$${draft.price.toStringAsFixed(2)}',
              style: Theme.of(context).textTheme.bodyLarge?.copyWith(fontWeight: FontWeight.w600),
            ),
            const SizedBox(width: KcSpacing.sm),
            Flexible(
              child: Text(
                draft.category,
                style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: KcColors.neutral),
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        ),
        const SizedBox(height: KcSpacing.xs),
        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),
            ),
          ],
        ),
      ],
    );
  }

  /// Compact layout — single-row-dense metadata for faster scanning.
  Widget _buildCompactContent(BuildContext context) {
    final theme = Theme.of(context);

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Row(
          children: [
            if (isStale) ...[
              Tooltip(
                message: 'Not modified in 30+ days',
                child: Icon(Icons.schedule, size: 14, color: KcColors.warning),
              ),
              const SizedBox(width: KcSpacing.xs),
            ],
            Expanded(
              child: Text(
                draft.name,
                style: theme.textTheme.bodyLarge?.copyWith(fontWeight: FontWeight.w600),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ),
            const SizedBox(width: KcSpacing.sm),
            PublishStatusChip(status: draft.status),
          ],
        ),
        const SizedBox(height: KcSpacing.xs),
        Row(
          children: [
            Text(draft.sku, style: theme.textTheme.bodySmall?.copyWith(color: KcColors.neutral)),
            const SizedBox(width: KcSpacing.sm),
            Text(
              '\$${draft.price.toStringAsFixed(2)}',
              style: theme.textTheme.bodySmall?.copyWith(fontWeight: FontWeight.w600),
            ),
            const SizedBox(width: KcSpacing.sm),
            Flexible(
              child: Text(
                draft.category,
                style: theme.textTheme.bodySmall?.copyWith(color: KcColors.neutral),
                overflow: TextOverflow.ellipsis,
              ),
            ),
            const SizedBox(width: KcSpacing.sm),
            Text(
              '${draft.lastModified.year}-${draft.lastModified.month.toString().padLeft(2, '0')}-${draft.lastModified.day.toString().padLeft(2, '0')}',
              style: theme.textTheme.bodySmall?.copyWith(color: KcColors.neutral),
            ),
          ],
        ),
      ],
    );
  }
}
