import 'package:flutter/material.dart';

import '../../../../common/theme/theme.dart';
import '../../../../sample/sample_data.dart';
import '../../../components/image/image.dart';

class MerchantCard extends StatelessWidget {
  final MerchantModel merchant;
  final VoidCallback? onTap;

  const MerchantCard({super.key, required this.merchant, this.onTap});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: AppColor.surface,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: AppColor.borderLight, width: 0.5),
        boxShadow: [
          BoxShadow(
            color: AppColor.textSecondary.withOpacity(0.08),
            blurRadius: 6,
            offset: const Offset(0, 1),
          ),
        ],
      ),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(12),
          child: Column(
            children: [
              // Merchant Image/Icon - Made more compact
              Container(
                width: double.infinity,
                height: 100,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(8),
                    topRight: Radius.circular(8),
                  ),
                  child: merchant.imageUrl.startsWith('assets')
                      ? Image.asset(
                          merchant.imageUrl,
                          fit: BoxFit.fill,
                          errorBuilder: (context, error, stackTrace) {
                            return ImagePlaceholder(width: 60, height: 60);
                          },
                        )
                      : Image.network(
                          merchant.imageUrl,
                          width: double.infinity,
                          fit: BoxFit.cover,
                          loadingBuilder: (context, child, loadingProgress) {
                            if (loadingProgress == null) return child;
                            return Center(
                              child: SizedBox(
                                width: 20,
                                height: 20,
                                child: CircularProgressIndicator(
                                  strokeWidth: 2,
                                  color: AppColor.primary,
                                  value:
                                      loadingProgress.expectedTotalBytes != null
                                      ? loadingProgress.cumulativeBytesLoaded /
                                            loadingProgress.expectedTotalBytes!
                                      : null,
                                ),
                              ),
                            );
                          },
                          errorBuilder: (context, error, stackTrace) {
                            return ImagePlaceholder(
                              width: double.infinity,
                              height: 100,
                              showBorderRadius: false,
                            );
                          },
                        ),
                ),
              ),
              const SizedBox(height: 10),

              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    // Merchant Name - Flexible to prevent overflow
                    Flexible(
                      child: Text(
                        merchant.name,
                        style: AppStyle.md.copyWith(
                          fontWeight: FontWeight.w600,
                          color: AppColor.textPrimary,
                          height: 1.2,
                        ),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    const SizedBox(height: 3),

                    // Category - More compact
                    Text(
                      merchant.category,
                      style: AppStyle.xs.copyWith(
                        color: AppColor.textSecondary,
                        height: 1.2,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                    const SizedBox(height: 8),

                    // Rating and Status - Compact layout
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        // Rating
                        Flexible(
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Icon(
                                Icons.star_rounded,
                                size: 14,
                                color: AppColor.warning,
                              ),
                              const SizedBox(width: 3),
                              Text(
                                merchant.rating.toStringAsFixed(1),
                                style: AppStyle.xs.copyWith(
                                  fontWeight: FontWeight.w500,
                                  color: AppColor.textPrimary,
                                ),
                              ),
                            ],
                          ),
                        ),

                        // Status Badge - More compact
                        Container(
                          padding: const EdgeInsets.symmetric(
                            horizontal: 6,
                            vertical: 2,
                          ),
                          decoration: BoxDecoration(
                            color: merchant.isOpen
                                ? AppColor.successWithOpacity(0.12)
                                : AppColor.errorWithOpacity(0.12),
                            borderRadius: BorderRadius.circular(6),
                          ),
                          child: Text(
                            merchant.isOpen ? 'Open' : 'Closed',
                            style: TextStyle(
                              fontSize: 10,
                              color: merchant.isOpen
                                  ? AppColor.success
                                  : AppColor.error,
                              fontWeight: FontWeight.w600,
                              height: 1,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}