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

import '../../../../common/theme/theme.dart';
// Import your theme files here
// import 'theme.dart';

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

  @override
  State<PaymentPage> createState() => _PaymentPageState();
}

class _PaymentPageState extends State<PaymentPage> {
  // Sample saved payment methods data
  final List<Map<String, dynamic>> savedPaymentMethods = [
    {
      'id': '1',
      'type': 'credit_card',
      'name': 'Kartu Kredit',
      'details': '**** **** **** 1234',
      'cardType': 'Visa',
      'expiryDate': '12/26',
      'isDefault': true,
      'icon': Icons.credit_card,
    },
    {
      'id': '2',
      'type': 'credit_card',
      'name': 'Kartu Debit',
      'details': '**** **** **** 5678',
      'cardType': 'Mastercard',
      'expiryDate': '08/27',
      'isDefault': false,
      'icon': Icons.credit_card,
    },
    {
      'id': '3',
      'type': 'ewallet',
      'name': 'DANA',
      'details': '081234567890',
      'cardType': 'E-Wallet',
      'expiryDate': null,
      'isDefault': false,
      'icon': Icons.account_balance_wallet,
    },
    {
      'id': '4',
      'type': 'ewallet',
      'name': 'GoPay',
      'details': '081234567890',
      'cardType': 'E-Wallet',
      'expiryDate': null,
      'isDefault': false,
      'icon': Icons.account_balance_wallet,
    },
    {
      'id': '5',
      'type': 'bank_account',
      'name': 'BCA',
      'details': '**** **** 9012',
      'cardType': 'Bank Account',
      'expiryDate': null,
      'isDefault': false,
      'icon': Icons.account_balance,
    },
  ];

  Widget _buildPaymentCard(Map<String, dynamic> payment) {
    return Container(
      decoration: const BoxDecoration(
        color: AppColor.white,
        border: Border(bottom: BorderSide(color: AppColor.border)),
      ),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Row(
          children: [
            Container(
              width: 48,
              height: 48,
              decoration: BoxDecoration(
                color: AppColor.background,
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: AppColor.border),
              ),
              child: Icon(payment['icon'], color: AppColor.primary, size: 24),
            ),
            const SizedBox(width: 16),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Text(
                        payment['name'],
                        style: AppStyle.md.copyWith(
                          fontWeight: FontWeight.w600,
                          color: AppColor.textPrimary,
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 4),
                  Row(
                    children: [
                      Text(
                        payment['cardType'],
                        style: AppStyle.sm.copyWith(
                          color: AppColor.textSecondary,
                        ),
                      ),
                      if (payment['expiryDate'] != null) ...[
                        Text(
                          ' • ',
                          style: AppStyle.sm.copyWith(
                            color: AppColor.textSecondary,
                          ),
                        ),
                        Text(
                          'Exp: ${payment['expiryDate']}',
                          style: AppStyle.sm.copyWith(
                            color: AppColor.textSecondary,
                          ),
                        ),
                      ],
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.background,
      appBar: AppBar(title: Text('Metode Pembayaran')),
      body: savedPaymentMethods.isEmpty
          ? _buildEmptyState()
          : Column(
              children: [
                Expanded(
                  child: ListView.builder(
                    itemCount: savedPaymentMethods.length,
                    itemBuilder: (context, index) {
                      return _buildPaymentCard(savedPaymentMethods[index]);
                    },
                  ),
                ),
              ],
            ),
    );
  }

  Widget _buildEmptyState() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.payment_outlined, size: 80, color: AppColor.textLight),
          const SizedBox(height: 16),
          Text(
            'Belum Ada Metode Pembayaran',
            style: AppStyle.lg.copyWith(
              fontWeight: FontWeight.w600,
              color: AppColor.textSecondary,
            ),
          ),
          const SizedBox(height: 8),
          Text(
            'Tambahkan kartu atau e-wallet untuk\nmemudahkan proses pembayaran',
            textAlign: TextAlign.center,
            style: AppStyle.md.copyWith(color: AppColor.textLight, height: 1.4),
          ),
          const SizedBox(height: 32),
          SizedBox(
            width: 220,
            height: 48,
            child: ElevatedButton(
              onPressed: () {
                // Navigate to add payment method form
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: AppColor.primary,
                elevation: 0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Icon(Icons.add, color: AppColor.white, size: 20),
                  const SizedBox(width: 8),
                  Text(
                    'Tambah Pembayaran',
                    style: AppStyle.md.copyWith(
                      color: AppColor.white,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}