import 'package:kmobile/features/service/screens/atm_locator_screen.dart';
import '../../../l10n/app_localizations.dart';
import 'package:flutter/material.dart';
import 'package:material_symbols_icons/material_symbols_icons.dart';
import 'package:kmobile/features/service/screens/quick_links_screen.dart';
import 'package:kmobile/features/service/screens/faqs_screen.dart';

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

  @override
  State<ServiceScreen> createState() => _ServiceScreen();
}

class _ServiceScreen extends State<ServiceScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text(
          AppLocalizations.of(context).services,
        ),
        centerTitle: false,
      ),
      body: Stack(
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Expanded(
                  child: ServiceManagementTile(
                    icon: Symbols.captive_portal,
                    label: AppLocalizations.of(context).quickLinks,
                    onTap: () {
                      Navigator.of(context).push(
                        MaterialPageRoute(
                            builder: (context) => const QuickLinksScreen()),
                      );
                    },
                    disabled: false,
                  ),
                ),
                const SizedBox(height: 16),
                Expanded(
                  child: ServiceManagementTile(
                    icon: Symbols.question_mark,
                    label: AppLocalizations.of(context).faq,
                    onTap: () {
                      Navigator.of(context).push(
                        MaterialPageRoute(
                            builder: (context) => const FaqsScreen()),
                      );
                    },
                    disabled: false,
                  ),
                ),
                const SizedBox(height: 16),
                Expanded(
                  child: ServiceManagementTile(
                    icon: Symbols.location_pin,
                    label: AppLocalizations.of(context).atmlocator,
                    onTap: () {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const ATMLocatorScreen()));
                    },
                    disabled: false,
                  ),
                ),
                // No Spacer() needed here as Expanded children will fill space
              ],
            ),
          ),
          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 ServiceManagementTile extends StatelessWidget {
  final IconData icon;
  final String label;
  final VoidCallback onTap;
  final bool disabled;

  const ServiceManagementTile({
    super.key,
    required this.icon,
    required this.label,
    required this.onTap,
    this.disabled = 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:
            disabled ? 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: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                icon,
                size: 48, // Make icon larger
                color:
                    disabled ? theme.disabledColor : theme.colorScheme.primary,
              ),
              const SizedBox(height: 12),
              Text(
                label,
                textAlign: TextAlign.center,
                style: theme.textTheme.titleLarge?.copyWith(
                  fontWeight: FontWeight.bold,
                  color: disabled
                      ? theme.disabledColor
                      : theme.colorScheme.onSurface,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}