import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:kmobile/features/card/screens/block_card_screen.dart';
import 'package:kmobile/features/card/screens/card_details_screen.dart';
import 'package:kmobile/features/card/screens/card_pin_change_details_screen.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
import '../../../l10n/app_localizations.dart';

class CardManagementScreen extends StatefulWidget {
  const CardManagementScreen({super.key});

  @override
  State<CardManagementScreen> createState() => _CardManagementScreen();
}

class _CardManagementScreen extends State<CardManagementScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text(
          AppLocalizations.of(context).cardManagement,
          style:
              const TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
        ),
        centerTitle: false,
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 10.0),
            child: CircleAvatar(
              backgroundColor: Colors.grey[200],
              radius: 20,
              child: SvgPicture.asset(
                'assets/images/avatar_male.svg',
                width: 40,
                height: 40,
                fit: BoxFit.cover,
              ),
            ),
          ),
        ],
      ),
      body: ListView(
        children: [
          CardManagementTile(
            icon: Symbols.add,
            label: AppLocalizations.of(context).applyDebitCard,
            onTap: () {},
          ),
          const Divider(height: 1),
          CardManagementTile(
            icon: Symbols.remove_moderator,
            label: AppLocalizations.of(context).blockUnblockCard,
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => const BlockCardScreen(),
                ),
              );
            },
          ),
          const Divider(height: 1),
          CardManagementTile(
            icon: Symbols.password_2,
            label: AppLocalizations.of(context).changeCardPin,
            onTap: () {
              // Navigator.push(
              //   context,
              //   MaterialPageRoute(
              //     builder: (context) => const CardPinChangeDetailsScreen(),
              //   ),
              // );
            },
          ),
          const Divider(height: 1),
           CardManagementTile(
            icon: Symbols.payment_card,
            label: AppLocalizations.of(context).viewCardDeatils,
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => const CardDetailsScreen(),
                ),
              );
            },
          ),
          const Divider(height: 1),
        ],
      ),
    );
  }
}


class CardManagementTile extends StatelessWidget {
  final IconData icon;
  final String label;
  final VoidCallback onTap;

  const CardManagementTile({
    super.key,
    required this.icon,
    required this.label,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Icon(icon),
      title: Text(label),
      trailing: const Icon(Symbols.arrow_right, size: 20),
      onTap: onTap,
    );
  }
}