apskel-owner-flutter/lib/presentation/pages/transaction/widgets/transaction_tile.dart

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

import '../../../../common/theme/theme.dart';

// Model untuk Transaction
class Transaction {
  final String id;
  final String customerName;
  final DateTime date;
  final double totalAmount;
  final int itemCount;
  final String paymentMethod;
  final TransactionStatus status;
  final String? receiptNumber;

  Transaction({
    required this.id,
    required this.customerName,
    required this.date,
    required this.totalAmount,
    required this.itemCount,
    required this.paymentMethod,
    required this.status,
    this.receiptNumber,
  });
}

enum TransactionStatus { completed, pending, cancelled, refunded }

class TransactionTile extends StatelessWidget {
  final Transaction transaction;
  final VoidCallback? onTap;
  final VoidCallback? onPrint;
  final VoidCallback? onRefund;

  const TransactionTile({
    super.key,
    required this.transaction,
    this.onTap,
    this.onPrint,
    this.onRefund,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(bottom: 16),
      child: Card(
        elevation: 4,
        shadowColor: AppColor.primaryWithOpacity(0.1),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16),
          side: BorderSide(color: AppColor.border, width: 0.5),
        ),
        child: InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(16),
          child: Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(16),
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [AppColor.backgroundLight, AppColor.background],
              ),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Header Row
                _buildHeaderRow(),
                const SizedBox(height: 12),

                // Transaction Info
                _buildTransactionInfo(),
                const SizedBox(height: 16),

                // Amount Section
                _buildAmountSection(),
                const SizedBox(height: 16),

                // Footer with Actions
                _buildFooterActions(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildHeaderRow() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              transaction.receiptNumber ?? 'TXN-${transaction.id}',
              style: const TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
                color: AppColor.textPrimary,
              ),
            ),
            const SizedBox(height: 2),
            Text(
              DateFormat('dd MMM yyyy, HH:mm').format(transaction.date),
              style: const TextStyle(
                fontSize: 12,
                color: AppColor.textSecondary,
              ),
            ),
          ],
        ),
        _buildStatusChip(),
      ],
    );
  }

  Widget _buildStatusChip() {
    Color statusColor;
    String statusText;
    IconData statusIcon;

    switch (transaction.status) {
      case TransactionStatus.completed:
        statusColor = AppColor.success;
        statusText = 'Completed';
        statusIcon = Icons.check_circle;
        break;
      case TransactionStatus.pending:
        statusColor = AppColor.warning;
        statusText = 'Pending';
        statusIcon = Icons.schedule;
        break;
      case TransactionStatus.cancelled:
        statusColor = AppColor.error;
        statusText = 'Cancelled';
        statusIcon = Icons.cancel;
        break;
      case TransactionStatus.refunded:
        statusColor = AppColor.info;
        statusText = 'Refunded';
        statusIcon = Icons.undo;
        break;
    }

    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
      decoration: BoxDecoration(
        color: statusColor.withOpacity(0.1),
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: statusColor.withOpacity(0.3), width: 1),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(statusIcon, size: 14, color: statusColor),
          const SizedBox(width: 4),
          Text(
            statusText,
            style: TextStyle(
              fontSize: 12,
              fontWeight: FontWeight.w600,
              color: statusColor,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTransactionInfo() {
    return Row(
      children: [
        Expanded(
          flex: 2,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Icon(Icons.person_outline, size: 16, color: AppColor.primary),
                  const SizedBox(width: 6),
                  Expanded(
                    child: Text(
                      transaction.customerName,
                      style: const TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w600,
                        color: AppColor.textPrimary,
                      ),
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 8),
              Row(
                children: [
                  Icon(
                    Icons.shopping_bag_outlined,
                    size: 16,
                    color: AppColor.primary,
                  ),
                  const SizedBox(width: 6),
                  Text(
                    '${transaction.itemCount} items',
                    style: const TextStyle(
                      fontSize: 13,
                      color: AppColor.textSecondary,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
          decoration: BoxDecoration(
            color: AppColor.primaryWithOpacity(0.1),
            borderRadius: BorderRadius.circular(12),
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(
                _getPaymentIcon(transaction.paymentMethod),
                size: 16,
                color: AppColor.primary,
              ),
              const SizedBox(width: 6),
              Text(
                transaction.paymentMethod,
                style: const TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w500,
                  color: AppColor.primary,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildAmountSection() {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: AppColor.primaryGradient,
        ),
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: AppColor.primary.withOpacity(0.2),
            blurRadius: 8,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                'Total Amount',
                style: TextStyle(
                  fontSize: 14,
                  color: AppColor.textWhite,
                  fontWeight: FontWeight.w500,
                ),
              ),
              const SizedBox(height: 4),
              Text(
                'Rp ${NumberFormat('#,###').format(transaction.totalAmount)}',
                style: const TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  color: AppColor.textWhite,
                ),
              ),
            ],
          ),
          Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: AppColor.backgroundLight.withOpacity(0.2),
              shape: BoxShape.circle,
            ),
            child: const Icon(
              Icons.attach_money,
              color: AppColor.textWhite,
              size: 24,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildFooterActions() {
    return Row(
      children: [
        Expanded(
          child: Text(
            'ID: ${transaction.id}',
            style: const TextStyle(
              fontSize: 11,
              color: AppColor.textLight,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
        if (transaction.status == TransactionStatus.completed) ...[
          _buildActionButton(
            icon: Icons.print,
            label: 'Print',
            onPressed: onPrint,
            color: AppColor.info,
          ),
          const SizedBox(width: 8),
          _buildActionButton(
            icon: Icons.undo,
            label: 'Refund',
            onPressed: onRefund,
            color: AppColor.warning,
          ),
        ],
      ],
    );
  }

  Widget _buildActionButton({
    required IconData icon,
    required String label,
    required VoidCallback? onPressed,
    required Color color,
  }) {
    return Material(
      color: color.withOpacity(0.1),
      borderRadius: BorderRadius.circular(8),
      child: InkWell(
        onTap: onPressed,
        borderRadius: BorderRadius.circular(8),
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(icon, size: 16, color: color),
              const SizedBox(width: 4),
              Text(
                label,
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w600,
                  color: color,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  IconData _getPaymentIcon(String paymentMethod) {
    switch (paymentMethod.toLowerCase()) {
      case 'cash':
        return Icons.payments;
      case 'card':
      case 'credit card':
      case 'debit card':
        return Icons.credit_card;
      case 'qris':
      case 'qr code':
        return Icons.qr_code;
      case 'transfer':
      case 'bank transfer':
        return Icons.account_balance;
      case 'e-wallet':
      case 'digital wallet':
        return Icons.account_balance_wallet;
      default:
        return Icons.payment;
    }
  }
}