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

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

// Models
enum TransactionType {
  all('Semua'),
  redeemed('Poin Ditukar'),
  earned('Poin Didapat'),
  refunded('Poin Dikembalikan'),
  bonus('Bonus Poin');

  const TransactionType(this.label);
  final String label;
}

class PointTransaction {
  final String id;
  final String title;
  final String category;
  final String source;
  final int points;
  final TransactionType type;
  final DateTime date;
  final String? productImage;

  PointTransaction({
    required this.id,
    required this.title,
    required this.category,
    required this.source,
    required this.points,
    required this.type,
    required this.date,
    this.productImage,
  });

  bool get isPositive =>
      type == TransactionType.earned ||
      type == TransactionType.refunded ||
      type == TransactionType.bonus;
}

@RoutePage()
class PoinHistoryPage extends StatefulWidget {
  const PoinHistoryPage({super.key});

  @override
  State<PoinHistoryPage> createState() => _PoinHistoryPageState();
}

class _PoinHistoryPageState extends State<PoinHistoryPage> {
  TransactionType selectedFilter = TransactionType.all;

  // Sample transaction data
  final List<PointTransaction> allTransactions = [
    PointTransaction(
      id: "t1",
      title: "Es Teh Manis",
      category: "Minuman",
      source: "Penukaran Voucher",
      points: -1500,
      type: TransactionType.redeemed,
      date: DateTime.now().subtract(Duration(hours: 2)),
      productImage: "🧊",
    ),
    PointTransaction(
      id: "t2",
      title: "Nasi Gudeg",
      category: "Makanan",
      source: "Transaksi Pembelian",
      points: 400,
      type: TransactionType.earned,
      date: DateTime.now().subtract(Duration(days: 1)),
      productImage: "🍛",
    ),
    PointTransaction(
      id: "t3",
      title: "Member Emas",
      category: "Membership",
      source: "Bonus Bulanan",
      points: 2000,
      type: TransactionType.bonus,
      date: DateTime.now().subtract(Duration(days: 2)),
      productImage: "🎁",
    ),
    PointTransaction(
      id: "t4",
      title: "Kopi Susu",
      category: "Minuman",
      source: "Pembatalan Pesanan",
      points: 2000,
      type: TransactionType.refunded,
      date: DateTime.now().subtract(Duration(days: 3)),
      productImage: "☕",
    ),
    PointTransaction(
      id: "t5",
      title: "Diskon 50%",
      category: "Voucher",
      source: "Penukaran Voucher",
      points: -5000,
      type: TransactionType.redeemed,
      date: DateTime.now().subtract(Duration(days: 5)),
      productImage: "🏷️",
    ),
    PointTransaction(
      id: "t6",
      title: "Gado-gado",
      category: "Makanan",
      source: "Transaksi Pembelian",
      points: 350,
      type: TransactionType.earned,
      date: DateTime.now().subtract(Duration(days: 7)),
      productImage: "🥗",
    ),
    PointTransaction(
      id: "t7",
      title: "Hari Kemerdekaan",
      category: "Event",
      source: "Bonus Special",
      points: 1700,
      type: TransactionType.bonus,
      date: DateTime.now().subtract(Duration(days: 12)),
      productImage: "🇮🇩",
    ),
    PointTransaction(
      id: "t8",
      title: "Keripik Singkong",
      category: "Cemilan",
      source: "Penukaran Voucher",
      points: -1000,
      type: TransactionType.redeemed,
      date: DateTime.now().subtract(Duration(days: 14)),
      productImage: "🥔",
    ),
    PointTransaction(
      id: "t9",
      title: "Review Produk",
      category: "Aktivitas",
      source: "Bonus Review",
      points: 500,
      type: TransactionType.bonus,
      date: DateTime.now().subtract(Duration(days: 20)),
      productImage: "⭐",
    ),
    PointTransaction(
      id: "t10",
      title: "Bakso",
      category: "Makanan",
      source: "Pembatalan Pesanan",
      points: 3000,
      type: TransactionType.refunded,
      date: DateTime.now().subtract(Duration(days: 25)),
      productImage: "🍲",
    ),
  ];

  List<PointTransaction> get filteredTransactions {
    if (selectedFilter == TransactionType.all) {
      return allTransactions;
    }
    return allTransactions.where((t) => t.type == selectedFilter).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.white,
      appBar: AppBar(
        title: Text("Riwayat Poin"),
        centerTitle: true,
        elevation: 0,
      ),
      body: Column(
        children: [
          _buildFilterChips(),
          Expanded(child: _buildTransactionList()),
        ],
      ),
    );
  }

  Widget _buildFilterChips() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: TransactionType.values.map((type) {
            final isSelected = selectedFilter == type;
            return Container(
              margin: EdgeInsets.only(right: 8),
              child: FilterChip(
                selected: isSelected,
                label: Text(type.label),
                onSelected: (selected) {
                  setState(() {
                    selectedFilter = type;
                  });
                },
                backgroundColor: AppColor.white,
                selectedColor: AppColor.primary,
                checkmarkColor: AppColor.white,
                labelStyle: AppStyle.sm.copyWith(
                  color: isSelected ? AppColor.white : AppColor.textSecondary,
                  fontWeight: FontWeight.w500,
                ),
                side: BorderSide(
                  color: isSelected ? AppColor.primary : AppColor.border,
                  width: 1,
                ),
                elevation: 0,
                pressElevation: 1,
              ),
            );
          }).toList(),
        ),
      ),
    );
  }

  Widget _buildTransactionList() {
    final transactions = filteredTransactions;

    if (transactions.isEmpty) {
      return _buildEmptyState();
    }

    return ListView.builder(
      padding: EdgeInsets.all(16),
      itemCount: transactions.length,
      itemBuilder: (context, index) {
        final transaction = transactions[index];
        return _buildTransactionCard(transaction);
      },
    );
  }

  Widget _buildEmptyState() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            padding: EdgeInsets.all(24),
            decoration: BoxDecoration(
              color: AppColor.backgroundLight,
              shape: BoxShape.circle,
            ),
            child: Icon(
              Icons.history_outlined,
              size: 48,
              color: AppColor.textLight,
            ),
          ),
          SizedBox(height: 16),
          Text(
            "Belum Ada Transaksi",
            style: AppStyle.lg.copyWith(
              fontWeight: FontWeight.w600,
              color: AppColor.textSecondary,
            ),
          ),
          SizedBox(height: 8),
          Text(
            "Transaksi ${selectedFilter.label.toLowerCase()}\nbelum tersedia",
            style: AppStyle.sm.copyWith(color: AppColor.textLight),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }

  Widget _buildTransactionCard(PointTransaction transaction) {
    final isPositive = transaction.isPositive;
    final formattedDate = _formatDate(transaction.date);

    return Container(
      margin: EdgeInsets.only(bottom: 16),
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: AppColor.white,
        border: Border(bottom: BorderSide(color: AppColor.border, width: 1)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Category label
          Text(
            "Poin Didapat",
            style: AppStyle.xs.copyWith(
              color: AppColor.textSecondary,
              fontWeight: FontWeight.w500,
            ),
          ),

          SizedBox(height: 8),

          // Title and Points Row
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: Text(
                  transaction.title,
                  style: AppStyle.lg.copyWith(
                    fontWeight: FontWeight.w700,
                    color: AppColor.textPrimary,
                  ),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
              SizedBox(width: 12),
              Row(
                children: [
                  // Green circle icon
                  Container(
                    width: 20,
                    height: 20,
                    decoration: BoxDecoration(
                      color: isPositive ? Color(0xFF10B981) : AppColor.error,
                      shape: BoxShape.circle,
                    ),
                    child: Icon(Icons.add, color: Colors.white, size: 14),
                  ),
                  SizedBox(width: 6),
                  Text(
                    "${isPositive ? '+' : ''}${transaction.points} Poin",
                    style: AppStyle.md.copyWith(
                      fontWeight: FontWeight.w700,
                      color: isPositive ? Color(0xFF10B981) : AppColor.error,
                    ),
                  ),
                ],
              ),
            ],
          ),

          SizedBox(height: 12),

          // Date
          Text(
            formattedDate,
            style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
          ),
        ],
      ),
    );
  }

  String _formatDate(DateTime date) {
    final now = DateTime.now();
    final difference = now.difference(date);

    if (difference.inDays == 0) {
      if (difference.inHours == 0) {
        return "${difference.inMinutes} menit lalu";
      }
      return "${difference.inHours} jam lalu";
    } else if (difference.inDays == 1) {
      return "Kemarin";
    } else if (difference.inDays < 7) {
      return "${difference.inDays} hari lalu";
    } else {
      final months = [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'Mei',
        'Jun',
        'Jul',
        'Ags',
        'Sep',
        'Okt',
        'Nov',
        'Des',
      ];

      return "${date.day} ${months[date.month - 1]} ${date.year}";
    }
  }
}
