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/LanguageSelection.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/Screens/Visit/visit.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;

  late Future<List<ConfigurationDTO>?> _futureConfigurations;

  @override
  void initState() {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    super.initState();
    final appContext = Provider.of<AppContext>(context, listen: false);
    _futureConfigurations = getConfigurationsCall(appContext);
  }

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

    return Scaffold(
      extendBody: true,
      body: FutureBuilder(
        future: _futureConfigurations,//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: [
                Container(
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      colors: [Colors.grey, Colors.lightGreen],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                    ),
                  ),
                ),
                /*SizedBox(
                    height: size.height * 0.35,
                    width: size.width,
                    child: Image.network(
                      configurations[2].imageSource!,
                      fit: BoxFit.cover,
                    )
                ),*/
                SafeArea(
                  top: false,
                  bottom: false,
                  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: false,
                        expandedHeight: 235.0,
                        flexibleSpace: FlexibleSpaceBar(
                          collapseMode: CollapseMode.pin, // 👈 Optionnel pour éviter le fade
                          centerTitle: true,
                          background: Container(
                            padding: const EdgeInsets.only(bottom: 25.0),
                            decoration: const BoxDecoration(
                              borderRadius: BorderRadius.only(
                                bottomLeft: Radius.circular(25),
                                bottomRight: Radius.circular(25),
                              ),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.black26,
                                  spreadRadius: 0.35,
                                  blurRadius: 2,
                                  offset: Offset(0, -22),
                                ),
                              ],
                            ),
                            child: ClipRRect(
                              borderRadius: const BorderRadius.only(
                                bottomLeft: Radius.circular(25),
                                bottomRight: Radius.circular(25),
                              ),
                              child: Stack(
                                fit: StackFit.expand,
                                children: [
                                  Opacity(
                                    opacity: 0.85,
                                    child: Image.network(
                                      configurations[0].imageSource!,
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                  Positioned(
                                    top: 35,
                                    right: 10,
                                    child: SizedBox(
                                      width: 75,
                                      height: 75,
                                      child: LanguageSelection()
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                          title: SizedBox(
                            width: /*widget.isHomeButton ?*/ size.width * 1.0 /*: null*/,
                            height: 120,
                            child: Center(
                              child: HtmlWidget(
                                configurations[0].title!.firstWhere((t) => t.language == "FR").value!,
                                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.only(left: 8.0, right: 8.0, top: 8.0, bottom: 20.0),
                        sliver: SliverMasonryGrid.count(
                          crossAxisCount: 2,
                          mainAxisSpacing: 12,
                          crossAxisSpacing: 12,
                          childCount: configurations.length,
                          itemBuilder: (context, index) {
                            //return buildTile(configurations[index]);
                            String cleanedTitle = configurations[index].title!.firstWhere((t) => t.language == "FR").value!.replaceAll('\n', ' ').replaceAll('<br>', ' ');

                            return InkWell(
                              onTap: () {
                                Navigator.of(context).push(MaterialPageRoute(
                                  builder: (context) =>
                                      VisitPage(configuration: configurations[index], isAlreadyAllowed: visitAppContext.isScanBeaconAlreadyAllowed),
                                ));
                              },
                              child: Hero(
                                tag: configurations[index].id!,
                                child: Material(
                                  type: MaterialType.transparency,
                                  child: Container(
                                    height: 200 + (index % 3) * 55,
                                    decoration: BoxDecoration(
                                      color: kSecondGrey,
                                      borderRadius: BorderRadius.circular(16),
                                      boxShadow: const [
                                        BoxShadow(
                                          color: kMainGrey,
                                          spreadRadius: 0.5,
                                          blurRadius: 5,
                                          offset: Offset(0, 1), // changes position of shadow
                                        ),
                                      ],
                                      image: configurations[index].imageSource != null ? DecorationImage(
                                        fit: BoxFit.cover,
                                        opacity: 0.5,
                                        image: NetworkImage(
                                          configurations[index].imageSource!,
                                        ),
                                      ): null,
                                    ),
                                    child: Stack(
                                      children: [
                                        Center(
                                          child: Padding(
                                            padding: const EdgeInsets.all(8.0),
                                            child: HtmlWidget(
                                              cleanedTitle,
                                              textStyle: const TextStyle(color: Colors.white, fontFamily: 'Roboto', fontSize: 20),
                                              customStylesBuilder: (element)
                                              {
                                                return {'text-align': 'center', 'font-family': "Roboto", '-webkit-line-clamp': "2"};
                                              },
                                            ),
                                          ),
                                        ),
                                        Positioned(
                                          bottom: 10,
                                          right: 10,
                                          child: Container(
                                              width: 20,
                                              height: 20,
                                              decoration: const BoxDecoration(
                                                //color: kMainColor,
                                                shape: BoxShape.circle,
                                              ),
                                              child: const Icon(Icons.chevron_right, size: 18, color: Colors.white)
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                            );
                          },
                        ),
                      ),

                      /*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: SizedBox(
                    height: size.height * 0.15,
                    child: const 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(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(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(visitAppContext.clientAPI, 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(visitAppContext.clientAPI, visitAppContext);
  }
}