import 'package:flutter/material.dart';
import 'package:kmobile/data/models/user.dart';
import 'package:kmobile/features/cheque/screens/cheque_enquiry_screen.dart';
import 'package:kmobile/features/cheque/screens/stop_cheque_screen.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
import '../../../l10n/app_localizations.dart';

class ChequeManagementScreen extends StatefulWidget {
  final List<User> users;
  final int selectedIndex;
  const ChequeManagementScreen({
    super.key,
    required this.users,
    required this.selectedIndex,
  });

  @override
  State<ChequeManagementScreen> createState() => _ChequeManagementScreen();
}

class _ChequeManagementScreen extends State<ChequeManagementScreen> {
  List<User> get users => widget.users;
  int get selectedAccountIndex => widget.selectedIndex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          AppLocalizations.of(context).chequeManagement,
        ),
        centerTitle: false,
      ),
      body: Stack(
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Expanded(
                  child: ChequeManagementCardTile(
                    icon: Symbols.payments,
                    label: "Cheque Enquiry",
                    subtitle:
                        "You can view the status of your issued cheque book, presented cheques and details of stopped cheques including relevant dates, cheque numbers and other essential information",
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => ChequeEnquiryScreen(
                            users: users,
                            selectedIndex: selectedAccountIndex,
                          ),
                        ),
                      );
                    },
                  ),
                ),
                Expanded(
                  child: ChequeManagementCardTile(
                    icon: Symbols.block_sharp,
                    label: AppLocalizations.of(context).stopCheque,
                    subtitle:
                        "Initiate a stop payment request for a cheque that has already been presented for payment. This action helps prevent unauthorized transactions or rectifies errors on cheques that are in the process of being cleared",
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => StopChequeScreen(
                            users: users,
                            selectedIndex: selectedAccountIndex,
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
          IgnorePointer(
            child: Center(
              child: Opacity(
                opacity: 0.07, // Reduced opacity
                child: ClipOval(
                  child: Image.asset(
                    'assets/images/logo.png',
                    width: 200, // Adjust size as needed
                    height: 200, // Adjust size as needed
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class ChequeManagementCardTile extends StatelessWidget {
  final IconData icon;
  final String label;
  final String? subtitle;
  final VoidCallback onTap;
  final bool disable;

  const ChequeManagementCardTile({
    super.key,
    required this.icon,
    required this.label,
    this.subtitle,
    required this.onTap,
    this.disable = false,
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Card(
      margin: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12.0),
      ),
      elevation: 4, // Add some elevation for better visual separation
      child: InkWell(
        onTap:
            disable ? null : onTap, // Disable InkWell if the tile is disabled
        borderRadius: BorderRadius.circular(12.0),
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 24.0, horizontal: 16.0),
          child: Center(
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    icon,
                    size: 48, // Make icon larger
                    color:
                        disable ? theme.disabledColor : theme.colorScheme.primary,
                  ),
                  const SizedBox(height: 12),
                  Text(
                    label,
                    textAlign: TextAlign.center,
                    style: theme.textTheme.titleLarge?.copyWith(
                      fontWeight: FontWeight.bold,
                      color: disable
                          ? theme.disabledColor
                          : theme.colorScheme.onSurface,
                    ),
                  ),
                  if (subtitle != null)
                    Padding(
                      padding: const EdgeInsets.only(top: 8.0),
                      child: Text(
                        subtitle!,
                        textAlign: TextAlign.center,
                        style: theme.textTheme.bodyMedium?.copyWith(
                          color: disable
                              ? theme.disabledColor
                              : theme.colorScheme.onSurfaceVariant,
                        ),
                      ),
                    ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}