import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:go_router/go_router.dart';

import '../../utils/definitions/style_guide.dart';
import '../../utils/logic/preferences_service.dart';
import '../../utils/widgets/custom_bottom_navigation_bar.dart';
import 'widgets/custom_divider_widget.dart';
import 'widgets/set_pin_popup_widget.dart';
import 'widgets/text_switch_container_widget.dart';

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

  @override
  State<SettingsPage> createState() => _SettingsPage();
}

class _SettingsPage extends State<SettingsPage> {
  bool isPinEnabled = false; // Default to false

  @override
  void initState() {
    super.initState();
    _loadPinEnabledState();
  }

  void _loadPinEnabledState() async {
    isPinEnabled = await PreferencesService().isPinEnabled();
    setState(() {});
  }

Future<void> _launchUrl(Uri _url) async {
  if (!await launchUrl(_url)) {
    throw Exception('Could not launch $_url');
  }
}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppStyle.backgroundColor,
      body: Container(
        padding: const EdgeInsets.only(bottom: 0),
        margin: const EdgeInsets.fromLTRB(30, 30, 30, 0),
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              const SizedBox(
                height: 100,
              ),

              // Settings section
              Container(
                margin: const EdgeInsets.only(bottom: 10),
                alignment: Alignment.topLeft,
                child: const Text('settings', style: TextStyle(fontWeight: FontWeight.w500, fontSize: 24)),
              ),
              TextSwitchContainer(
                leftText: "change color",
                onTap: () => context.go("/color"),
              ),
              const CustomDivider(),
              FutureBuilder<bool>(
                future: PreferencesService().isPinEnabled(),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const CircularProgressIndicator(); // or some other placeholder
                  }
                  bool pinEnabled = snapshot.data ?? false; // Default to false if null
                  return TextSwitchContainer(
                    leftText: "pin",
                    hasSwitch: true,
                    onTap: () => {showSetPinPopup(context)},
                    onSwitchToggle: (value) {
                      if (value) {
                        PreferencesService().enablePin();
                      } else {
                        PreferencesService().disablePin();
                      }
                      // Consider updating the state here or using other state management
                    },
                    switchDefaultValue: pinEnabled,
                  );
                },
              ),
              const CustomDivider(),
              TextSwitchContainer(
                leftText: "your data",
                onTap: () => {},
              ),
              // Community section
              Padding(
                padding: const EdgeInsets.fromLTRB(0, 50, 0, 10),
                child: Container(
                  alignment: Alignment.topLeft,
                  margin: const EdgeInsets.only(bottom: 10),
                  child: const Text('community', style: TextStyle(fontWeight: FontWeight.w500, fontSize: 24)),
                ),
              ),
              TextSwitchContainer(
                leftText: "join our discord",
                rightText: "fullfilled",
                onTap: () async => {
                  await _launchUrl(Uri.parse("https://www.google.com"))

                }, // Implement your logic
              ),
              const CustomDivider(),
              TextSwitchContainer(
                leftText: "our instagram",
                rightText: "@get.fulfilled",
                onTap: () => {},
              ),
              const CustomDivider(),
              TextSwitchContainer(
                leftText: "share fulfilled with your loved ones",
                onTap: () => {},
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(0, 50, 0, 10),
                child: Container(
                  alignment: Alignment.topLeft,
                  child: const Text('humans behind fulfilled', style: TextStyle(fontWeight: FontWeight.w500, fontSize: 24)),
                ),
              ),
              TextSwitchContainer(
                leftText: "about us",
                onTap: () => {},
              ),
              const CustomDivider(),
              TextSwitchContainer(
                leftText: "support us",
                onTap: () => {},
              ),
              const CustomDivider(),
              TextSwitchContainer(
                leftText: "give feedback",
                onTap: () => {},
              ),
              //
              ListTile(
                title: const Text('imprint & privacy policy', style: TextStyle(color: Colors.grey, fontSize: 15)),
                onTap: () => {}, // Implement your logic
              ),
              const SizedBox(
                height: 150,
              )
            ],
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: const CustomBottomNavigationBar(initialSelectedIndex: 2),
    );
  }

  void showSetPinPopup(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return const SetPinPopup();
      },
    );
  }
}