import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/services.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:manager_api_new/api.dart';
import 'package:mymuseum_visitapp/Components/CustomAppBar.dart';
import 'package:mymuseum_visitapp/Components/ScannerBouton.dart';
import 'package:mymuseum_visitapp/Components/loading_common.dart';
import 'package:mymuseum_visitapp/Helpers/DatabaseHelper.dart';
import 'package:mymuseum_visitapp/Helpers/modelsHelper.dart';
import 'package:mymuseum_visitapp/Helpers/networkCheck.dart';
import 'package:mymuseum_visitapp/Helpers/requirement_state_controller.dart';
import 'package:mymuseum_visitapp/Helpers/translationHelper.dart';
import 'package:mymuseum_visitapp/Models/beaconSection.dart';
import 'package:mymuseum_visitapp/Models/visitContext.dart';
import 'package:mymuseum_visitapp/Services/apiService.dart';
import 'package:mymuseum_visitapp/Services/downloadConfiguration.dart';
import 'package:mymuseum_visitapp/app_context.dart';
import 'package:mymuseum_visitapp/client.dart';
import 'package:mymuseum_visitapp/constants.dart';
import 'package:provider/provider.dart';

import '../Tests/TestAR.dart';
import 'configurations_list.dart';

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

  @override
  State<HomePage3> createState() => _HomePage3State();
}

class _HomePage3State extends State<HomePage3> with WidgetsBindingObserver {
  int currentIndex = 0;

  late List<ConfigurationDTO> configurations = [];
  List<String?> alreadyDownloaded = [];
  late VisitAppContext visitAppContext;

  final List<Color> colors = [
    Colors.blue,
    Colors.green,
    Colors.orange,
    Colors.purple,
    Colors.teal,
    Colors.red,
  ];

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    final appContext = Provider.of<AppContext>(context);
    visitAppContext = appContext.getContext();

    return Scaffold(
      body: FutureBuilder(
        future: getConfigurationsCall(visitAppContext.clientAPI, appContext),
        builder: (context, AsyncSnapshot<dynamic> snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            configurations = List<ConfigurationDTO>.from(snapshot.data).where((configuration) => configuration.isMobile!).toList();

            //String cleanedTitle = configurations[0].title.replaceAll('\n', ' ').replaceAll('<br>', ' '); // TODO

            return Stack(
              children: [
                SizedBox(
                    height: size.height * 0.35,
                    width: size.width,
                    child: Image.network(
                      configurations[2].imageSource!,
                      fit: BoxFit.cover,
                    )
                ),
                Padding(
                  padding: EdgeInsets.only(top: size.height * 0.15),
                  child: CustomScrollView(
                    slivers: [
                      /*SliverAppBar(
                                  backgroundColor: Colors.transparent,
                                  pinned: true,
                                  expandedHeight: 200.0,
                                  collapsedHeight: 100.0,
                                  flexibleSpace: FlexibleSpaceBar(
                                    collapseMode: CollapseMode.none, // 👈 Optionnel pour éviter le fade
                                    background: Image.network(
                                      configurations[2].imageSource!,
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                ),*/
                      SliverAppBar(
                        backgroundColor: Colors.transparent,
                        pinned: true,
                        expandedHeight: 225.0,
                        flexibleSpace: Container() /*FlexibleSpaceBar(
                          collapseMode: CollapseMode.none, // 👈 Optionnel pour éviter le fade
                          centerTitle: true,
                          background: Image.network(
                            configurations[2].imageSource!,
                            fit: BoxFit.cover,
                          ),
                          title: InkWell(
                            onLongPress: () {
                              showDialog(
                                  builder: (BuildContext context) => const AlertDialog(
                                    shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.all(Radius.circular(10.0))
                                    ),
                                    //content: AdminPopup(),
                                    contentPadding: EdgeInsets.zero,
                                  ), context: context
                              );
                            },
                            child: SizedBox(
                              width: /*widget.isHomeButton ?*/ size.width * 0.8 /*: null*/,
                              height: 60,
                              child: Center(
                                child: HtmlWidget(
                                  "Carnaval de Marche",
                                  textStyle: const TextStyle(color: Colors.white, fontFamily: 'Roboto', fontSize: 20),
                                  customStylesBuilder: (element)
                                  {
                                    return {'text-align': 'center', 'font-family': "Roboto", '-webkit-line-clamp': "2"};
                                  },
                                ),
                              ),
                            ),
                          ),
                        ),*/ // plus de FlexibleSpaceBar
                      ),
                      SliverPadding(
                        padding: const EdgeInsets.all(8),
                        sliver: SliverMasonryGrid.count(
                          crossAxisCount: 2,
                          mainAxisSpacing: 12,
                          crossAxisSpacing: 12,
                          childCount: configurations.length,
                          itemBuilder: (context, index) {
                            //return buildTile(configurations[index]);
                            return Container(
                              height: 200 + (index % 3) * 55,
                              decoration: BoxDecoration(
                                color: colors[index % colors.length],
                                borderRadius: BorderRadius.circular(16),
                              ),
                              child: Center(
                                child: Text(
                                  'Bloc ${index + 1}',
                                  style: const TextStyle(color: Colors.white, fontSize: 18),
                                ),
                              ),
                            );
                          },
                        ),
                      ),

                      /*SliverToBoxAdapter(
                                  child: Image.network(configurations[0].imageSource!), // ou NetworkImage
                                ),*/

                    ],
                  ),
                ),
                /*FutureBuilder(
                    future: getConfigurationsCall(visitAppContext.clientAPI, appContext),
                    builder: (context, AsyncSnapshot<dynamic> snapshot) {
                      if (snapshot.connectionState == ConnectionState.done) {


                        return /*RefreshIndicator (
                          onRefresh: () {
                            setState(() {});
                            return Future(() => null);
                          },
                          color: kSecondColor,
                          child:*/ ;/*ConfigurationsList(
                            alreadyDownloaded: alreadyDownloaded,
                            configurations: configurations,
                            requestRefresh: () {
                              setState(() {}); // For refresh
                            },
                          ),*/
                        //);
                      }
                    }
                ),*/
              ],
            );
          } else if (snapshot.connectionState == ConnectionState.none) {
            return Text(TranslationHelper.getFromLocale("noData", appContext.getContext()));
          } else {
            return Center(
                child: Container(
                    height: size.height * 0.15,
                    child: LoadingCommon()
                )
            );
          }
        }
      ),
    );

    return Scaffold(
      /*appBar: CustomAppBar(
        title: TranslationHelper.getFromLocale("visitTitle", appContext.getContext()),
        isHomeButton: false,
      ),*/
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              width: size.width,
              height: size.height,
              child: FutureBuilder(
                  future: getConfigurationsCall(visitAppContext.clientAPI, appContext),
                  builder: (context, AsyncSnapshot<dynamic> snapshot) {
                    if (snapshot.connectionState == ConnectionState.done) {
                      configurations = List<ConfigurationDTO>.from(snapshot.data).where((configuration) => configuration.isMobile!).toList();
                      return RefreshIndicator (
                        onRefresh: () {
                          setState(() {});
                          return Future(() => null);
                        },
                        color: kSecondColor,
                        child: ConfigurationsList(
                            alreadyDownloaded: alreadyDownloaded,
                            configurations: configurations,
                            requestRefresh: () {
                              setState(() {}); // For refresh
                            },
                        ),
                      );
                    } else if (snapshot.connectionState == ConnectionState.none) {
                      return Text(TranslationHelper.getFromLocale("noData", appContext.getContext()));
                    } else {
                      return Center(
                          child: Container(
                              height: size.height * 0.15,
                              child: LoadingCommon()
                          )
                      );
                    }
                  }
              ),
            ),
            /*InkWell(
              onTap: () {
                Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      return TestAR();
                      //return XRWithQRScannerPage();
                    },
                  ),
                );

              },
              child: const SizedBox(
                height: 50,
                width: 10,
                child: Text('TEST XR'),
              ),
            ),*/
          ],
        )
      ),
      // floatingActionButton: ScannerBouton(appContext: appContext),
      //floatingActionButtonLocation: FloatingActionButtonLocation.miniCenterFloat,
      /*bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        onTap: (index) {
          setState(() {
            currentIndex = index;
          });

          if (currentIndex == 0) {
            controller.startScanning();
          } else {
            controller.pauseScanning();
            controller.startBroadcasting();
          }
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: 'Scan',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.bluetooth_audio),
            label: 'Broadcast',
          ),
        ],
      ),*/
    );
  }

  Future<List<ConfigurationDTO>?> getConfigurationsCall(Client client, AppContext appContext) async {
    bool isOnline = await hasNetwork();
    VisitAppContext visitAppContext = appContext.getContext();

    List<ConfigurationDTO>? configurations;
    configurations = List<ConfigurationDTO>.from(await DatabaseHelper.instance.getData(DatabaseTableType.configurations));
    alreadyDownloaded = configurations.map((c) => c.id).toList();

    if(!isOnline) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(TranslationHelper.getFromLocale("noInternet", appContext.getContext())), backgroundColor: kMainColor2),
      );

      // GET ALL SECTIONIDS FOR ALL CONFIGURATION (OFFLINE)
      for(var configuration in configurations)
      {
        var sections = List<SectionDTO>.from(await DatabaseHelper.instance.queryWithConfigurationId(DatabaseTableType.sections, configuration.id!));
        configuration.sectionIds = sections.map((e) => e.id!).toList();
      }

      // GET BEACONS FROM LOCAL
      List<BeaconSection> beaconSections = List<BeaconSection>.from(await DatabaseHelper.instance.getData(DatabaseTableType.beaconSection));
      print("GOT beaconSection from LOCAL");
      print(beaconSections);

      visitAppContext.beaconSections = beaconSections;
      //appContext.setContext(visitAppContext);

      return configurations;
    }

    if(visitAppContext.beaconSections == null) {
      List<SectionDTO>? sections = await ApiService.getAllBeacons(client, visitAppContext.instanceId!);
      if(sections != null && sections.isNotEmpty) {
        List<BeaconSection> beaconSections = sections.map((e) => BeaconSection(minorBeaconId: e.beaconId, orderInConfig: e.order, configurationId: e.configurationId, sectionId: e.id, sectionType: e.type)).toList();
        visitAppContext.beaconSections = beaconSections;

        try {
          // Clear all before
          await DatabaseHelper.instance.clearTable(DatabaseTableType.beaconSection);
          // Store it locally for offline mode
          for(var beaconSection in beaconSections) {
            await DatabaseHelper.instance.insert(DatabaseTableType.beaconSection, ModelsHelper.beaconSectionToMap(beaconSection));
          }
          print("STORE beaconSection DONE");
        } catch(e) {
          print("Issue during beaconSection insertion");
          print(e);
        }

        print("Got some Beacons for you");
        print(beaconSections);
        appContext.setContext(visitAppContext);
      }
    }

    return await ApiService.getConfigurations(client, visitAppContext);
  }
}