import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import '../widgets/ui_helpers.dart';

class CardsPage extends StatelessWidget {
  final FirebaseFirestore firestore;
  final Future<void> Function(String uid) onDeleteCard;
  final bool canEditCards;

  const CardsPage({
    super.key,
    required this.firestore,
    required this.onDeleteCard,
    this.canEditCards = false,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          'REGISTERED CARDS',
          style: TextStyle(
            color: Colors.white,
            fontSize: 28,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 5),
        
        // STREAM UNTUK KETERANGAN LIMIT DI HEADER
        StreamBuilder<QuerySnapshot>(
          stream: firestore.collection('cards').snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) return const SizedBox.shrink();
            int cardCount = snapshot.data!.docs.length;
            bool isFull = cardCount >= 10;

            return Text(
              isFull 
                  ? 'Limit reached ($cardCount/10). Delete a card to add a new one.'
                  : 'Total registered: $cardCount/10 cards',
              style: TextStyle(
                color: isFull ? Colors.redAccent : Colors.white54,
                fontSize: 14,
                fontWeight: isFull ? FontWeight.bold : FontWeight.normal,
              ),
            );
          },
        ),
        const SizedBox(height: 20),
        
        Expanded(
          child: StreamBuilder<QuerySnapshot>(
            stream: firestore.collection('cards').snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) {
                return const Center(
                  child: CircularProgressIndicator(),
                );
              }

              final docs = snapshot.data!.docs;

              if (docs.isEmpty) {
                return const Center(
                  child: Text(
                    'No cards registered',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                );
              }

              return ListView.builder(
                itemCount: docs.length,
                itemBuilder: (context, index) {
                  final doc = docs[index];
                  final data = doc.data() as Map<String, dynamic>?;
                  final name = data?['name'] ?? 'No Name';

                  return Container(
                    margin: const EdgeInsets.only(bottom: 15),
                    child: ModernCard(
                      padding: const EdgeInsets.all(18),
                      child: Row(
                        children: [
                          Container(
                            padding: const EdgeInsets.all(15),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(18),
                              gradient: const LinearGradient(
                                colors: [
                                  Colors.blue,
                                  Colors.cyan,
                                ],
                              ),
                            ),
                            child: const Icon(
                              Icons.credit_card,
                              color: Colors.white,
                            ),
                          ),
                          const SizedBox(width: 15),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  name,
                                  style: const TextStyle(
                                    color: Colors.white,
                                    fontSize: 18,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                                const SizedBox(height: 4),
                                Text(
                                  doc.id,
                                  style: const TextStyle(
                                    color: Colors.white54,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          if (canEditCards)
                            IconButton(
                              onPressed: () {
                                onDeleteCard(doc.id);
                              },
                              icon: const Icon(
                                Icons.delete_rounded,
                                color: Colors.redAccent,
                              ),
                            )
                        ],
                      ),
                    ),
                  );
                },
              );
            },
          ),
        ),
      ],
    );
  }
}