import 'package:flutter/material.dart';
import 'package:mensaappbackend/modules/ratingCard.dart';
import 'package:mensaappbackend/providers/pageProvider.dart';
import 'package:mensaappbackend/providers/viewProvider.dart';
import 'package:mensaappbackend/providers/timeProvider.dart';
import 'package:provider/provider.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import 'dart:html' as html;

class PageDashboard extends StatelessWidget {
  const PageDashboard({super.key});

  bool isMobileBrowser() {
    String userAgent = html.window.navigator.userAgent;
    return userAgent.contains('Mobile') ||
        userAgent.contains('Android') ||
        userAgent.contains('iPhone') ||
        userAgent.contains('iPad');
  }

  Future<List<dynamic>> requestSupabaseTimeSpan(int timeId) async {
    var supabase = Supabase.instance.client;
    var now = DateTime.now();
    var nowMorning = DateTime(now.year, now.month, now.day, 0, 1);
    var morningDict = {
      1: nowMorning,
      2: nowMorning.subtract(const Duration(days: 7)),
      3: nowMorning.subtract(const Duration(days: 30)),
      4: nowMorning.subtract(const Duration(days: 365)),
    };
    var result = await supabase.from("ratings_database").select("ratings, created_at").gte("created_at", morningDict[timeId]!);
    return result;
  }

  final ratingNames = const {
    "page1": {"title": "", "q1": "Geschmack", "q2": "Qualität"},
    "page2": {"title": "Service", "q1": "Undefined", "q2": "Undefined"},
    "page3": {"title": "Wünsche", "q1": "Undefined", "q2": "Undefined"}
  };

  @override
  Widget build(BuildContext context) {

    bool browser_mobile = isMobileBrowser();

    String dashboard_text = browser_mobile ? "" : "Dashboard";


    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.primary,
        title: Consumer<TimeProvider>(
          builder: (context, timeProvider, child) {
            return Row(
              children: [
                Text(
                  dashboard_text,
                  style: TextStyle(color: Theme.of(context).colorScheme.onPrimary),
                ),
                SizedBox(width: browser_mobile ? 0 : 32),
                Icon(Icons.watch_later, ),
                SizedBox(width: 8),
                SizedBox(
                  width: 125,
                  child: Center( // Add Center widget here
                    child: DropdownButton(
                      value: Provider.of<TimeProvider>(context, listen: false).selectedTime,
                      dropdownColor: Theme.of(context).colorScheme.secondary,
                      //style: TextStyle(color: Theme.of(context).colorScheme.onPrimary),
                      iconEnabledColor: Theme.of(context).colorScheme.onPrimary,
                      focusColor: Colors.transparent,
                      isDense: true,
                      isExpanded: true,
                      items: [
                       for (var key in Provider.of<TimeProvider>(context, listen: false).timeList.entries)
                         DropdownMenuItem(
                           value: key.key,
                           child: Center(
                             child: Text(key.value, style: TextStyle(color: Theme.of(context).colorScheme.onSecondary)),
                           ),
                         ),

                      ],
                      selectedItemBuilder: (BuildContext context) {
                        return [
                          for (var key in Provider.of<TimeProvider>(context, listen: false).timeList.entries)
                          Center(
                              child: Text(
                              key.value,
                              style: TextStyle(color: Theme.of(context).colorScheme.onPrimary), // Benutzerdefinierte Farbe für angezeigten Text
                            ),
                          ),
                        ];
                      },
                      onChanged: (value) {
                        Provider.of<TimeProvider>(context, listen: false).setSelectedTime(value);
                      },
                    ),
                  ),
                ),
              ],
            );
          },
        ),
        actions: [
          TextButton.icon(
            onPressed: () {
              var supabase = Supabase.instance.client;
              supabase.auth.signOut();
              Provider.of<PageProvider>(context, listen: false).setSelectedPage(0);
            },
            label: Text(
              "Logout",
              style: TextStyle(color: Theme.of(context).colorScheme.onPrimary),
            ),
            icon: Icon(
              Icons.logout,
              color: Theme.of(context).colorScheme.onPrimary,
            ),
          ),
        ],
      ),

      body: FutureBuilder(
        future: requestSupabaseTimeSpan(
          Provider.of<TimeProvider>(context).selectedTime
        ),
        builder: (context, snapshot) {
          return Consumer<ViewProvider> (
            builder: (context, viewProvider, child) {
              return viewProvider.views[viewProvider.selectedView]!(context, snapshot, ratingNames);
            },
          );
        },
      ),
      drawer: Drawer(
        child: Padding(
          padding: const EdgeInsets.only(left: 20, right: 20, top: 60),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              const Text("Ansichten", textAlign: TextAlign.center, style: TextStyle(fontSize: 20,),),
              const SizedBox(height: 20),
              FilledButton.icon(
                style: const ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.symmetric(vertical: 20))),
                icon: const Icon(Icons.today),
                label: const Text("Alle"),
                onPressed: () {
                  Provider.of<ViewProvider>(context, listen: false).setSelectedView(0);
                  Navigator.pop(context);
                },
              ),
              SizedBox(height: 10),
              FilledButton.icon(
                style: const ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.symmetric(vertical: 20))),
                icon: const Icon(Icons.today),
                label: const Text("Durchschnitt"),
                onPressed: () {
                  Provider.of<ViewProvider>(context, listen: false).setSelectedView(1);
                  Navigator.pop(context);
                },
              ),

            ],
          ),
        ),
      ),
    );
  }
}