kmobile/lib/features/service/screens/atm_locator_screen.dart

import 'package:flutter/material.dart';
import 'package:kmobile/api/services/branch_service.dart'; // Added: Import BranchService for Atm model and API calls
import 'package:kmobile/di/injection.dart'; // Added: Import for dependency injection (getIt)
import 'package:shimmer/shimmer.dart';

import '../../../l10n/app_localizations.dart'; // Added: Import for shimmer loading effect

// Removed: The local 'Location' class is no longer needed as we use the 'Atm' model from branch_service.dart

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

  @override
  State<ATMLocatorScreen> createState() => _ATMLocatorScreenState();
}

class _ATMLocatorScreenState extends State<ATMLocatorScreen> {
  final TextEditingController _searchController = TextEditingController();
  var service =
      getIt<BranchService>(); // Added: Instance of BranchService for API calls
  bool _isLoading = true; // State variable to manage loading status
  List<Atm> _allAtms = []; // Changed: List to hold all fetched Atm objects
  List<Atm> _filteredAtms =
      []; // Changed: List to hold filtered Atm objects for display

  @override
  void initState() {
    super.initState();
    _loadAtms(); // Changed: Call _loadAtms to fetch data on initialization
  }

  /// Fetches the list of ATMs from the API using BranchService.
  Future<void> _loadAtms() async {
    final data =
        await service.fetchAtmList(); // Call the new fetchAtmList method
    setState(() {
      _allAtms = data; // Update the list of all ATMs
      _filteredAtms = data; // Initialize filtered list with all ATMs
      _isLoading = false; // Set loading to false once data is fetched
    });
  }

  /// Filters the list of ATMs based on the search query.
  void _filterAtms(String query) {
    // Changed: Renamed from _filterLocations
    setState(() {
      if (query.isEmpty) {
        _filteredAtms = _allAtms; // If query is empty, show all ATMs
      } else {
        _filteredAtms = _allAtms.where((atm) {
          // Changed: Filter based on Atm object
          final lowerQuery = query.toLowerCase();
          return atm.name
              .toLowerCase()
              .contains(lowerQuery); // Filter by atm.name
        }).toList();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
            AppLocalizations.of(context).atmlocator), // Title for the app bar
      ),
      body: Stack(
        children: [
          Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(12.0),
                child: TextField(
                  controller: _searchController,
                  onChanged:
                      _filterAtms, // Updated: Call _filterAtms on text change
                  decoration: InputDecoration(
                    hintText: "Name/Address", // Hint text for the search bar
                    prefixIcon: const Icon(Icons.search), // Search icon
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                  ),
                ),
              ),

              // Content area: Displays loading shimmer, "no ATMs found", or the list of ATMs
              Expanded(
                child: _isLoading
                    ? _buildShimmerList() // Display shimmer while loading
                    : _filteredAtms.isEmpty
                        ? const Center(
                            child: Text(
                                "No matching ATMs found")) // Message if no ATMs found
                        : ListView.builder(
                            itemCount: _filteredAtms
                                .length, // Number of items in the filtered list
                            itemBuilder: (context, index) {
                              final atm = _filteredAtms[
                                  index]; // Get the current Atm object
                              return _buildAtmItem(
                                  atm); // Build the ATM list item
                            },
                          ),
              ),
            ],
          ),
          IgnorePointer(
            child: Center(
              child: Opacity(
                opacity: 0.07, // Reduced opacity
                child: ClipOval(
                  child: Image.asset(
                    'assets/images/logo.png', // Background logo image
                    width: 200, // Adjust size as needed
                    height: 200, // Adjust size as needed
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// Helper widget to build a single ATM list item.
  Widget _buildAtmItem(Atm atm) {
    // Changed: Takes an Atm object
    return Card(
      margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
      child: ListTile(
        leading: const Icon(Icons.credit_card), // Icon for ATM
        title: Text(atm.name, // Display the ATM's name
            style: const TextStyle(fontWeight: FontWeight.bold)),
        onTap: () {
          // No action on tap as per user request
        },
      ),
    );
  }

  /// Helper widget to display a shimmer loading effect.
  Widget _buildShimmerList() {
    return ListView.builder(
      itemCount: 10, // Number of shimmer items to display
      itemBuilder: (context, index) => Shimmer.fromColors(
        baseColor: Colors.grey.shade300,
        highlightColor: Colors.grey.shade100,
        child: ListTile(
          leading: const CircleAvatar(
            radius: 24,
            backgroundColor: Colors.white,
          ),
          title: Container(
            height: 16,
            color: Colors.white,
            margin: const EdgeInsets.symmetric(vertical: 4),
          ),
        ),
      ),
    );
  }
}