import 'package:flutter/material.dart';
import '../customAppBar/base_layout.dart';
import '../customAppBar/toastHelper.dart';
import '../service/api_service.dart';
import '../service/secure_pop_scope.dart';
import '../service/token_storage_service.dart';
import 'branch_card_widget.dart';
import 'dart:html' as html;

class BranchSelectionPage extends StatefulWidget {
  const BranchSelectionPage({Key? key}) : super(key: key);

  @override
  State<BranchSelectionPage> createState() => _BranchSelectionPageState();
}

class _BranchSelectionPageState extends State<BranchSelectionPage> {
  List<Map<String, dynamic>> branches = [];
  int? selectedIndex;

  final tokenStorage = TokenStorageService();
  late ApiService apiService;

  @override
  void initState() {
    super.initState();
    apiService = ApiService(context);
    html.window.onPopState.listen((event) async {
      final shouldLogout = await _showLogoutDialog();
      if (shouldLogout) {
        await apiService.logout();
        if (!mounted) return;
        Navigator.pushNamedAndRemoveUntil(
          context,
          'hrLogin',
          (route) => false,
        );
      } else {
        // Push state back to prevent browser navigation
        html.window.history.pushState(null, '', html.window.location.href);
      }
    });
    _loadBranches();
  }

  void _loadBranches() {
    setState(() {
      branches = tokenStorage.getCombinedBranches();
    });
  }

  void _selectBranch(int index) {
    setState(() => selectedIndex = index);
  }

  Future<void> _handleNext() async {
    if (selectedIndex == null) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Please select a branch')),
      );
      return;
    }

    final selectedBranch = branches[selectedIndex!];
    await tokenStorage.saveSelectedBranch(selectedBranch);

    final decodedToken = tokenStorage.getDecodedToken();
    final token = tokenStorage.getCurrentToken();

    if (decodedToken == null || token == null) {
      ToastHelper.showErrorToast(context, 'Invalid token data');
      return;
    }

    // 🔐 Save decoded values securely
    await tokenStorage.saveDecodedSessionData(decodedToken, token);

    // ToastHelper.showSuccessToast(context, 'Successfully Login');

    if (!mounted) return;
    Navigator.pushReplacementNamed(context, 'policies');
  }

  Future<bool> _showLogoutDialog() async {
    return await showDialog<bool>(
          context: context,
          barrierDismissible: false,
          builder: (context) => AlertDialog(
            title: Text("Confirm Logout"),
            content: Text("Do you want to logout?"),
            actions: [
              TextButton(
                onPressed: () => Navigator.of(context).pop(false),
                child: Text("Cancel"),
              ),
              TextButton(
                onPressed: () => Navigator.of(context).pop(true),
                child: Text("Logout"),
              ),
            ],
          ),
        ) ??
        false;
  }

  @override
  Widget build(BuildContext context) {
    return BaseLayout(
      child: SecurePopScope(
        child: _buildContent(context),
      ),
    );
  }

  Widget _buildContent(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F7F7),
      body: LayoutBuilder(
        builder: (context, constraints) {
          final width = constraints.maxWidth;

          /// 🔹 RESPONSIVE BREAKPOINTS
          int crossAxisCount;
          if (width < 600) {
            crossAxisCount = 1;
          } else if (width < 900) {
            crossAxisCount = 2;
          } else {
            crossAxisCount = 3;
          }

          return SingleChildScrollView(
            padding: EdgeInsets.symmetric(
              horizontal: width * 0.08,
              vertical: 30,
            ),
            child: Container(
              padding: const EdgeInsets.all(24),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.05),
                    blurRadius: 12,
                    offset: const Offset(0, 4),
                  ),
                ],
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    'Select Client',
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 24),

                  /// 🔹 GRID
                  GridView.builder(
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    itemCount: branches.length,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: crossAxisCount,
                      mainAxisExtent: 90, // 🔥 FIXED HEIGHT
                      mainAxisSpacing: 15,
                      crossAxisSpacing: 15,
                    ),
                    itemBuilder: (context, index) {
                      final branch = branches[index];
                      return BranchCard(
                        clientName: branch['client_name'] ??
                            'Unknown Client kjbgjsk jsdhbjbf sdjfjbds fdjsgjdbs gdsjbgjds',
                        branchName: branch['branch_name'] ?? 'Unknown Branch',
                        isSelected: selectedIndex == index,
                        onTap: () => _selectBranch(index),
                      );
                    },
                  ),

                  const SizedBox(height: 30),

                  /// 🔹 NEXT BUTTON
                  Center(
                    child: SizedBox(
                      width: 140,
                      height: 46,
                      child: ElevatedButton(
                        onPressed: _handleNext,
                        style: ElevatedButton.styleFrom(
                          backgroundColor: const Color(0xFFFF6B35),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8),
                          ),
                          elevation: 0,
                        ),
                        child: const Text(
                          'Next',
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w600,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}