import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:legacy_shared/legacy_shared.dart';
import 'package:navigation/navigation.dart';
import 'package:sf_localizations/sf_localizations.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:utils/utils.dart';
import 'package:flutter/services.dart';
import 'package:qr_flutter/qr_flutter.dart';

class AccountSettingsScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

  const AccountSettingsScreen({super.key, required this.navigationContract});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = ref.watch(themePortProvider);

    final selectedDevice = ref.watch(selectedDeviceProvider);

    return PageLayout(
      title: context.translate(I18n.accountSettings),
      body: SingleChildScrollView(child: Container(
        padding: SizeUtils.getByScreen(
          small: EdgeInsets.symmetric(horizontal: 22, vertical: 10),
          big: EdgeInsets.symmetric(horizontal: 21, vertical: 8)
        ),
        child: Column(
          children: [
            AppSectionButton(
              onPressed: (){navigationContract.pushTo(AppRoutes.personalData);},
              icon: SFIcons.account,
              text: I18n.legacyPersonalData
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
            AppSectionButton(
              onPressed: (){navigationContract.pushTo(AppRoutes.changePassword);},
              icon: Icons.lock,
              text: I18n.legacyChangePassword
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
            AppSectionButton(
              onPressed: (){},
              icon: Icons.add_circle_outline,
              text: I18n.legacyAddNewSF
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
            AppSectionButton(
              onPressed: (){navigationContract.pushTo(AppRoutes.linkedDevices);},
              icon: Icons.account_circle_outlined,
              text: I18n.legacyLinkedDevices
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
            AppSectionButton(
              onPressed: (){navigationContract.pushTo(AppRoutes.appUsers);},
              icon: Icons.groups_outlined,
              text: I18n.legacyAppUsers
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
            AppSectionButton(
              onPressed: () async {
                final Uri url = Uri.parse('https://savefamilygps.com/pages/politica-de-privacidad-reloj-gps-infantil-localizador-savefamily');
                if (!await launchUrl(url)) {
                  throw Exception('Could not launch $url');
                }
              },
              icon: SFIcons.privacy,
              text: I18n.legacyPrivacyPolicy
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
            AppSectionButton(
              onPressed: (){
                showDialog(context: context, builder: (context)=>Dialog(
                  backgroundColor: Colors.transparent,
                  child: RegCodeDialog(
                    regCode: selectedDevice?.id ?? '',
                    deviceId: selectedDevice?.identificator ?? '',
                    name: selectedDevice?.carrierName ?? ''
                  ),
                ));
              },
              icon: Icons.qr_code,
              text: I18n.legacyRegCode
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
            AppSectionButton(
              onPressed: (){navigationContract.pushTo(AppRoutes.deleteAccount);},
              icon: Icons.no_accounts,
              text: I18n.legacyDeleteAccount
            ),
          ],
        ),
      )),
      footer: Container(
        padding: SizeUtils.getByScreen(
          small: EdgeInsets.symmetric(vertical: 12, horizontal: 30),
          big: EdgeInsets.symmetric(vertical: 10, horizontal: 28)
        ),
        child: PrimaryButton(text: context.translate(I18n.legacyLogOut), color: Color(0xFF588EA5)),
      )
    );
  }
}

class AppSectionButton extends ConsumerWidget {

  final GestureTapCallback onPressed;
  final IconData icon;
  final String text;

  const AppSectionButton({
    required this.onPressed,
    required this.icon,
    required this.text,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = ref.read(themePortProvider);

    return GestureDetector(
      onTap: onPressed,
      child: Container(
        padding: SizeUtils.getByScreen(
          small: EdgeInsets.symmetric(horizontal: 22, vertical: 20),
          big: EdgeInsets.symmetric(horizontal: 21, vertical: 18)
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(SizeUtils.getByScreen(small: 12, big: 18))),
          color: theme.getColorFor(ThemeCode.backgroundSecondary),
        ),
        child: Row(
          children: [
            Container(
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: theme.getColorFor(ThemeCode.backgroundPrimary),
              ),
              padding: EdgeInsets.all(SizeUtils.getByScreen(small: 4, big: 12)),
              child: Icon(icon,
                size: SizeUtils.getByScreen(small: 40, big: 44),
                color: Color(0xFF588EA5),
                weight: 30,
              ),
            ),
            SizedBox(width: SizeUtils.getByScreen(small: 16, big: 15)),
            Expanded(
              child: Text(context.translate(text),
                style: TextStyle(
                  fontSize: SizeUtils.getByScreen(small: 18, big: 19),
                  fontWeight: FontWeight.w500
                )
              )
            )
          ],
        ),
      )
    );
  }
}

class RegCodeDialog extends StatelessWidget {

  final String regCode;
  final String deviceId;
  final String name;

  const RegCodeDialog({
    super.key,
    required this.regCode,
    required this.deviceId,
    required this.name,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: SizeUtils.getByScreen(small: 330, big: 328),
      color: Colors.transparent,
      child: Stack(
        children: [
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              height: SizeUtils.getByScreen(small: 300, big: 298),
              width: SizeUtils.getByScreen(small: 350, big: 348),
              padding: SizeUtils.getByScreen(
                small: EdgeInsets.symmetric(vertical: 14, horizontal: 18),
                big: EdgeInsets.symmetric(vertical: 12, horizontal: 16)
              ),
              color: Colors.white,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Align(
                    alignment: Alignment.topRight,
                    child: IconButton(
                      onPressed: (){Navigator.pop(context);},
                      icon: Icon(Icons.close),
                      padding: EdgeInsets.zero,
                    ),
                  ),
                  Text(name, style: TextStyle()),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(context.translate(I18n.legacyDeviceIdLabel,
                        args: {'deviceId': deviceId})),
                      TextButton(
                        onPressed: (){Clipboard.setData(ClipboardData(text: deviceId));},
                        child: Text(context.translate(I18n.legacyCopy)),
                      )
                    ],
                  ),
                  QrImageView(
                    data: regCode,
                    version: QrVersions.auto,
                    size: SizeUtils.getByScreen(small: 100, big: 98),
                    padding: EdgeInsets.zero,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(context.translate(I18n.legacyRegCodeLabel,
                        args: {'regCode': regCode})),
                      TextButton(
                        onPressed: (){Clipboard.setData(ClipboardData(text: regCode));},
                        child: Text(context.translate(I18n.legacyCopy))
                      )
                    ],
                  )
                ],
              ),
            ),
          ),
          Align(
            alignment: Alignment.topCenter,
            child: Container(
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Color(0xFF00A1C6),
              ),
              padding: SizeUtils.getByScreen(
                small: EdgeInsets.all(12),
                big: EdgeInsets.all(12)
              ),
              child: Icon(
                SFIcons.watch,
                size: SizeUtils.getByScreen(small: 68, big: 66),
                color: Colors.white,
              ),
            )
          ),
        ],
      ),
    );
  }

}