import 'dart:convert';

import 'package:animations/animations.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:email_validator/email_validator.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:gap/gap.dart';
import 'package:island/pods/config.dart';
import 'package:island/pods/network.dart';
import 'package:island/pods/userinfo.dart';
import 'package:island/pods/websocket.dart';
import 'package:island/services/event_bus.dart';
import 'package:island/services/notify.dart';
import 'package:island/services/udid.dart';
import 'package:island/widgets/alert.dart';
import 'package:material_symbols_icons/symbols.dart';
import 'package:styled_widget/styled_widget.dart';
import 'package:url_launcher/url_launcher_string.dart';
import 'package:flutter_svg/flutter_svg.dart';

import 'captcha.dart';

const kServerSupportedLanguages = {'en-US': 'en-us', 'zh-CN': 'zh-hans'};

Widget getProviderIcon(String provider, {double size = 24, Color? color}) {
  final providerLower = provider.toLowerCase();

  // Check if we have an SVG for this provider
  switch (providerLower) {
    case 'apple':
    case 'microsoft':
    case 'google':
    case 'github':
    case 'discord':
    case 'afdian':
    case 'steam':
      return SvgPicture.asset(
        'assets/images/oidc/$providerLower.svg',
        width: size,
        height: size,
        colorFilter:
            color != null ? ColorFilter.mode(color, BlendMode.srcIn) : null,
      );
    case 'spotify':
      return Image.asset(
        'assets/images/oidc/spotify.png',
        width: size,
        height: size,
        color: color,
      );
    default:
      return Icon(Symbols.link, size: size);
  }
}

// Helper widget for bullet list items
class _BulletPoint extends StatelessWidget {
  final List<Widget> children;

  const _BulletPoint({required this.children});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 4),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.only(top: 6),
            child: Container(
              width: 6.0,
              height: 6.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Theme.of(
                  context,
                ).colorScheme.onSurface.withAlpha((255 * 0.6).round()),
              ),
            ),
          ),
          SizedBox(width: 8.0),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: children,
            ),
          ),
        ],
      ),
    );
  }
}

// Stage 1: Email Entry
class _CreateAccountEmailScreen extends HookConsumerWidget {
  final TextEditingController emailController;
  final VoidCallback onNext;
  final Function(bool) onBusy;
  final Function(String) onOidc;

  const _CreateAccountEmailScreen({
    super.key,
    required this.emailController,
    required this.onNext,
    required this.onBusy,
    required this.onOidc,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isBusy = useState(false);

    useEffect(() {
      onBusy.call(isBusy.value);
      return null;
    }, [isBusy]);

    void performNext() {
      final email = emailController.text.trim();
      if (email.isEmpty) {
        showErrorAlert('fieldCannotBeEmpty'.tr());
        return;
      }
      if (!EmailValidator.validate(email)) {
        showErrorAlert('fieldEmailAddressMustBeValid'.tr());
        return;
      }
      onNext();
    }

    return Column(
      key: const ValueKey<int>(0),
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Align(
          alignment: Alignment.centerLeft,
          child: CircleAvatar(
            radius: 26,
            child: const Icon(Symbols.mail, size: 28),
          ).padding(bottom: 8),
        ),
        Text(
          'createAccount',
          style: const TextStyle(fontSize: 28, fontWeight: FontWeight.w900),
        ).tr().padding(left: 4, bottom: 16),
        TextField(
          controller: emailController,
          autocorrect: false,
          enableSuggestions: false,
          autofillHints: const [AutofillHints.email],
          decoration: InputDecoration(
            isDense: true,
            border: const UnderlineInputBorder(),
            labelText: 'email'.tr(),
          ),
          onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
          onSubmitted: isBusy.value ? null : (_) => performNext(),
        ).padding(horizontal: 7),
        if (!kIsWeb)
          Row(
            spacing: 6,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text("orCreateWith").tr().fontSize(11).opacity(0.85),
              const Gap(8),
              Spacer(),
              IconButton.filledTonal(
                onPressed: () => onOidc('github'),
                padding: EdgeInsets.zero,
                icon: getProviderIcon(
                  "github",
                  size: 16,
                  color: Theme.of(context).colorScheme.onPrimaryContainer,
                ),
                tooltip: 'GitHub',
              ),
              IconButton.filledTonal(
                onPressed: () => onOidc('google'),
                padding: EdgeInsets.zero,
                icon: getProviderIcon(
                  "google",
                  size: 16,
                  color: Theme.of(context).colorScheme.onPrimaryContainer,
                ),
                tooltip: 'Google',
              ),
              IconButton.filledTonal(
                onPressed: () => onOidc('apple'),
                padding: EdgeInsets.zero,
                icon: getProviderIcon(
                  "apple",
                  size: 16,
                  color: Theme.of(context).colorScheme.onPrimaryContainer,
                ),
                tooltip: 'Apple Account',
              ),
            ],
          ).padding(horizontal: 8, top: 12)
        else
          const Gap(12),
        const Gap(12),
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            TextButton(
              onPressed: isBusy.value ? null : () => performNext(),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text('next').tr(),
                  const Icon(Symbols.chevron_right),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }
}

// Stage 2: Password Entry
class _CreateAccountPasswordScreen extends HookConsumerWidget {
  final TextEditingController passwordController;
  final VoidCallback onNext;
  final VoidCallback onBack;
  final Function(bool) onBusy;

  const _CreateAccountPasswordScreen({
    super.key,
    required this.passwordController,
    required this.onNext,
    required this.onBack,
    required this.onBusy,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isBusy = useState(false);

    useEffect(() {
      onBusy.call(isBusy.value);
      return null;
    }, [isBusy]);

    void performNext() {
      final password = passwordController.text;
      if (password.isEmpty) {
        showErrorAlert('fieldCannotBeEmpty'.tr());
        return;
      }
      onNext();
    }

    return Column(
      key: const ValueKey<int>(1),
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Align(
          alignment: Alignment.centerLeft,
          child: CircleAvatar(
            radius: 26,
            child: const Icon(Symbols.password, size: 28),
          ).padding(bottom: 8),
        ),
        Text(
          'password',
          style: const TextStyle(fontSize: 28, fontWeight: FontWeight.w900),
        ).tr().padding(left: 4, bottom: 16),
        TextField(
          controller: passwordController,
          obscureText: true,
          autocorrect: false,
          enableSuggestions: false,
          autofillHints: const [AutofillHints.password],
          decoration: InputDecoration(
            isDense: true,
            border: const UnderlineInputBorder(),
            labelText: 'password'.tr(),
          ),
          onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
          onSubmitted: isBusy.value ? null : (_) => performNext(),
        ).padding(horizontal: 7),
        const Gap(12),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            TextButton(
              onPressed: isBusy.value ? null : () => onBack(),
              style: TextButton.styleFrom(foregroundColor: Colors.grey),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [const Icon(Symbols.chevron_left), Text('back').tr()],
              ),
            ),
            TextButton(
              onPressed: isBusy.value ? null : () => performNext(),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text('next').tr(),
                  const Icon(Symbols.chevron_right),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }
}

// Stage 3: Username and Nickname Entry
class _CreateAccountProfileScreen extends HookConsumerWidget {
  final TextEditingController usernameController;
  final TextEditingController nicknameController;
  final bool isOidcFlow;
  final VoidCallback onNext;
  final VoidCallback onBack;
  final Function(bool) onBusy;

  const _CreateAccountProfileScreen({
    super.key,
    required this.usernameController,
    required this.nicknameController,
    required this.isOidcFlow,
    required this.onNext,
    required this.onBack,
    required this.onBusy,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isBusy = useState(false);

    useEffect(() {
      onBusy.call(isBusy.value);
      return null;
    }, [isBusy]);

    void performNext() {
      final username = usernameController.text.trim();
      final nickname = nicknameController.text.trim();
      if (username.isEmpty || nickname.isEmpty) {
        showErrorAlert('fieldCannotBeEmpty'.tr());
        return;
      }
      onNext();
    }

    return Column(
      key: const ValueKey<int>(2),
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Align(
          alignment: Alignment.centerLeft,
          child: CircleAvatar(
            radius: 26,
            child: const Icon(Symbols.person, size: 28),
          ).padding(bottom: 8),
        ),
        Text(
          'Profile',
          style: const TextStyle(fontSize: 28, fontWeight: FontWeight.w900),
        ).padding(left: 4, bottom: 16),
        TextField(
          controller: usernameController,
          autocorrect: false,
          enableSuggestions: false,
          autofillHints: const [AutofillHints.username],
          decoration: InputDecoration(
            isDense: true,
            border: const UnderlineInputBorder(),
            labelText: 'username'.tr(),
            helperText: 'usernameCannotChangeHint'.tr(),
          ),
          onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
          onSubmitted: isBusy.value ? null : (_) => performNext(),
        ).padding(horizontal: 7),
        const Gap(12),
        TextField(
          controller: nicknameController,
          autocorrect: false,
          autofillHints: const [AutofillHints.nickname],
          decoration: InputDecoration(
            isDense: true,
            border: const UnderlineInputBorder(),
            labelText: 'nickname'.tr(),
          ),
          onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
          onSubmitted: isBusy.value ? null : (_) => performNext(),
        ).padding(horizontal: 7),
        const Gap(12),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            TextButton(
              onPressed: isBusy.value ? null : () => onBack(),
              style: TextButton.styleFrom(foregroundColor: Colors.grey),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [const Icon(Symbols.chevron_left), Text('back').tr()],
              ),
            ),
            TextButton(
              onPressed: isBusy.value ? null : () => performNext(),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text('next').tr(),
                  const Icon(Symbols.chevron_right),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }
}

// Stage 4: Terms Review
class _CreateAccountTermsScreen extends HookConsumerWidget {
  final VoidCallback onNext;
  final VoidCallback onBack;
  final Function(bool) onBusy;

  const _CreateAccountTermsScreen({
    super.key,
    required this.onNext,
    required this.onBack,
    required this.onBusy,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isBusy = useState(false);
    final termsAccepted = useState(false);

    useEffect(() {
      onBusy.call(isBusy.value);
      return null;
    }, [isBusy]);

    void performNext() {
      if (!termsAccepted.value) {
        showErrorAlert('Please accept the terms of service to continue');
        return;
      }
      onNext();
    }

    final unfocusColor = Theme.of(
      context,
    ).colorScheme.onSurface.withAlpha((255 * 0.75).round());

    return Column(
      key: const ValueKey<int>(3),
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Align(
          alignment: Alignment.centerLeft,
          child: CircleAvatar(
            radius: 26,
            child: const Icon(Symbols.description, size: 28),
          ).padding(bottom: 8),
        ),
        Text(
          'Terms of Service',
          style: const TextStyle(fontSize: 28, fontWeight: FontWeight.w900),
        ).padding(left: 4, bottom: 16),
        Card(
          margin: EdgeInsets.zero,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'createAccountNotice',
                style: TextStyle(
                  color: unfocusColor,
                  fontWeight: FontWeight.bold,
                ),
              ).tr(),
              _BulletPoint(
                children: [
                  Text(
                    'termAcceptNextWithAgree'.tr(),
                    style: TextStyle(color: unfocusColor),
                  ),
                  Material(
                    color: Colors.transparent,
                    child: InkWell(
                      onTap: () {
                        launchUrlString('https://solsynth.dev/terms');
                      },
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text('termAcceptLink').tr(),
                          const Gap(4),
                          const Icon(Symbols.launch, size: 14),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
              _BulletPoint(children: [Text('createAccountConfirmEmail'.tr())]),
              _BulletPoint(children: [Text('createAccountNoAltAccounts'.tr())]),
            ],
          ).width(double.infinity).padding(horizontal: 16, vertical: 12),
        ),
        const Gap(12),
        CheckboxListTile(
          value: termsAccepted.value,
          onChanged: (value) {
            termsAccepted.value = value ?? false;
          },
          title: Text('createAccountAgreeTerms').tr(),
        ),
        const Gap(12),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            TextButton(
              onPressed: isBusy.value ? null : () => onBack(),
              style: TextButton.styleFrom(foregroundColor: Colors.grey),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [const Icon(Symbols.chevron_left), Text('back').tr()],
              ),
            ),
            TextButton(
              onPressed: isBusy.value ? null : () => performNext(),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text('next').tr(),
                  const Icon(Symbols.chevron_right),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }
}

// Stage 5: Captcha and Complete
class _CreateAccountCompleteScreen extends HookConsumerWidget {
  final TextEditingController emailController;
  final TextEditingController passwordController;
  final TextEditingController usernameController;
  final TextEditingController nicknameController;
  final String? onboardingToken;
  final VoidCallback onBack;
  final Function(bool) onBusy;

  const _CreateAccountCompleteScreen({
    super.key,
    required this.emailController,
    required this.passwordController,
    required this.usernameController,
    required this.nicknameController,
    required this.onboardingToken,
    required this.onBack,
    required this.onBusy,
  });

  Map<String, dynamic> decodeJwt(String token) {
    final parts = token.split('.');
    if (parts.length != 3) throw FormatException('Invalid JWT');
    final payload = parts[1];
    final normalized = base64Url.normalize(payload);
    final decoded = utf8.decode(base64Url.decode(normalized));
    return json.decode(decoded);
  }

  void showPostCreateModal(BuildContext context) {
    showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      builder: (context) => _PostCreateModal(),
    );
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isBusy = useState(false);

    useEffect(() {
      onBusy.call(isBusy.value);
      return null;
    }, [isBusy]);

    Future<void> performAction() async {
      String endpoint = '/pass/accounts';
      Map<String, dynamic> data = {};

      if (onboardingToken != null) {
        // OIDC onboarding
        endpoint = '/pass/account/onboard';
        data['onboarding_token'] = onboardingToken;
        data['name'] = usernameController.text;
        data['nick'] = nicknameController.text;
      } else {
        // Manual account creation
        final captchaTk = await CaptchaScreen.show(context);
        if (captchaTk == null) return;
        if (!context.mounted) return;
        data['captcha_token'] = captchaTk;
        data['name'] = usernameController.text;
        data['nick'] = nicknameController.text;
        data['email'] = emailController.text;
        data['password'] = passwordController.text;
        data['language'] =
            kServerSupportedLanguages[EasyLocalization.of(
              context,
            )!.currentLocale.toString()] ??
            'en-us';
      }

      if (!context.mounted) return;

      try {
        isBusy.value = true;
        showLoadingModal(context);
        final client = ref.watch(apiClientProvider);
        final resp = await client.post(endpoint, data: data);
        if (endpoint == '/pass/account/onboard') {
          // Onboard response has tokens, set them
          final token = resp.data['token'];
          setToken(ref.watch(sharedPreferencesProvider), token);
          ref.invalidate(tokenProvider);
          final userNotifier = ref.read(userInfoProvider.notifier);
          await userNotifier.fetchUser();
          final apiClient = ref.read(apiClientProvider);
          subscribePushNotification(apiClient);
          final wsNotifier = ref.read(websocketStateProvider.notifier);
          wsNotifier.connect();
          if (context.mounted) Navigator.pop(context, true);
        } else {
          if (!context.mounted) return;
          hideLoadingModal(context);
          showPostCreateModal(context);
        }
      } catch (err) {
        if (context.mounted) hideLoadingModal(context);
        showErrorAlert(err);
      } finally {
        isBusy.value = false;
      }
    }

    return Column(
      key: const ValueKey<int>(4),
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Align(
          alignment: Alignment.centerLeft,
          child: CircleAvatar(
            radius: 26,
            child: const Icon(Symbols.check_circle, size: 28),
          ).padding(bottom: 8),
        ),
        Text(
          'createAccountAlmostThere'.tr(),
          style: const TextStyle(fontSize: 28, fontWeight: FontWeight.w900),
        ).padding(left: 4, bottom: 16),
        Text(
          'createAccountAlmostThereHint'.tr(),
          style: TextStyle(
            color: Theme.of(
              context,
            ).colorScheme.onSurface.withAlpha((255 * 0.75).round()),
          ),
        ).padding(horizontal: 4),
        const Gap(24),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            TextButton(
              onPressed: isBusy.value ? null : () => onBack(),
              style: TextButton.styleFrom(foregroundColor: Colors.grey),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [const Icon(Symbols.chevron_left), Text('back').tr()],
              ),
            ),
            TextButton(
              onPressed: isBusy.value ? null : () => performAction(),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text('createAccount').tr(),
                  const Icon(Symbols.chevron_right),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }
}

class CreateAccountContent extends HookConsumerWidget {
  const CreateAccountContent({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isBusy = useState(false);
    final period = useState(0);
    final onboardingToken = useState<String?>(null);
    final waitingForOidc = useState(false);

    final emailController = useTextEditingController();
    final passwordController = useTextEditingController();
    final usernameController = useTextEditingController();
    final nicknameController = useTextEditingController();

    Map<String, dynamic> decodeJwt(String token) {
      final parts = token.split('.');
      if (parts.length != 3) throw FormatException('Invalid JWT');
      final payload = parts[1];
      final normalized = base64Url.normalize(payload);
      final decoded = utf8.decode(base64Url.decode(normalized));
      return json.decode(decoded);
    }

    useEffect(() {
      final subscription = eventBus.on<OidcAuthCallbackEvent>().listen((
        event,
      ) async {
        if (!waitingForOidc.value || !context.mounted) return;
        waitingForOidc.value = false;
        final client = ref.watch(apiClientProvider);
        try {
          // Exchange code for tokens
          final resp = await client.post(
            '/pass/auth/token',
            data: {
              'grant_type': 'authorization_code',
              'code': event.challengeId,
            },
          );
          final data = resp.data;
          if (data.containsKey('onboarding_token')) {
            // New user onboarding
            final token = data['onboarding_token'] as String;
            final decoded = decodeJwt(token);
            final name = decoded['name'] as String?;
            final email = decoded['email'] as String?;
            final provider = decoded['provider'] as String?;
            // Pre-fill form and jump to stage 2 (username/nickname)
            usernameController.text = '';
            nicknameController.text = name ?? '';
            emailController.text = email ?? '';
            passwordController.clear();
            onboardingToken.value = token;
            period.value = 2; // Jump to profile screen
            showSnackBar('Pre-filled from ${provider ?? 'provider'}');
          } else {
            // Existing user, switch to login
            showSnackBar('Account already exists. Redirecting to login.');
            if (context.mounted) context.goNamed('login');
          }
        } catch (err) {
          showErrorAlert(err);
        }
      });
      return subscription.cancel;
    }, [waitingForOidc.value, context.mounted]);

    Future<void> withOidc(String provider) async {
      waitingForOidc.value = true;
      final serverUrl = ref.watch(serverUrlProvider);
      final deviceId = await getUdid();
      final url =
          Uri.parse('$serverUrl/pass/auth/login/${provider.toLowerCase()}')
              .replace(
                queryParameters: {
                  'returnUrl': 'solian://auth/callback',
                  'deviceId': deviceId,
                  'flow': 'login',
                },
              )
              .toString();
      final isLaunched = await launchUrlString(
        url,
        mode:
            kIsWeb
                ? LaunchMode.platformDefault
                : LaunchMode.externalApplication,
      );
      if (!isLaunched) {
        waitingForOidc.value = false;
        showErrorAlert('failedToLaunchBrowser'.tr());
      }
    }

    return Theme(
      data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
      child: Column(
        children: [
          if (isBusy.value)
            LinearProgressIndicator(
              minHeight: 4,
              borderRadius: BorderRadius.zero,
              trackGap: 0,
              stopIndicatorRadius: 0,
            )
          else
            LinearProgressIndicator(
              minHeight: 4,
              borderRadius: BorderRadius.zero,
              trackGap: 0,
              stopIndicatorRadius: 0,
              value: period.value / 5,
            ),
          Expanded(
            child:
                SingleChildScrollView(
                  child: PageTransitionSwitcher(
                    transitionBuilder: (
                      Widget child,
                      Animation<double> primaryAnimation,
                      Animation<double> secondaryAnimation,
                    ) {
                      return SharedAxisTransition(
                        animation: primaryAnimation,
                        secondaryAnimation: secondaryAnimation,
                        transitionType: SharedAxisTransitionType.horizontal,
                        child: Container(
                          constraints: BoxConstraints(maxWidth: 380),
                          child: child,
                        ),
                      );
                    },
                    child: switch (period.value % 5) {
                      1 => _CreateAccountPasswordScreen(
                        key: const ValueKey(1),
                        passwordController: passwordController,
                        onNext: () => period.value++,
                        onBack: () => period.value--,
                        onBusy: (value) => isBusy.value = value,
                      ),
                      2 => _CreateAccountProfileScreen(
                        key: const ValueKey(2),
                        usernameController: usernameController,
                        nicknameController: nicknameController,
                        isOidcFlow: onboardingToken.value != null,
                        onNext: () => period.value++,
                        onBack: () => period.value--,
                        onBusy: (value) => isBusy.value = value,
                      ),
                      3 => _CreateAccountTermsScreen(
                        key: const ValueKey(3),
                        onNext: () => period.value++,
                        onBack: () => period.value--,
                        onBusy: (value) => isBusy.value = value,
                      ),
                      4 => _CreateAccountCompleteScreen(
                        key: const ValueKey(4),
                        emailController: emailController,
                        passwordController: passwordController,
                        usernameController: usernameController,
                        nicknameController: nicknameController,
                        onboardingToken: onboardingToken.value,
                        onBack: () => period.value--,
                        onBusy: (value) => isBusy.value = value,
                      ),
                      _ => _CreateAccountEmailScreen(
                        key: const ValueKey(0),
                        emailController: emailController,
                        onNext: () => period.value++,
                        onBusy: (value) => isBusy.value = value,
                        onOidc: withOidc,
                      ),
                    },
                  ).padding(all: 24),
                ).center(),
          ),
          const Gap(4),
        ],
      ),
    );
  }
}

class _PostCreateModal extends HookConsumerWidget {
  const _PostCreateModal();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Center(
      child: ConstrainedBox(
        constraints: const BoxConstraints(maxWidth: 280),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('🎉').fontSize(32),
            Text(
              'postCreateAccountTitle'.tr(),
              textAlign: TextAlign.center,
            ).fontSize(17),
            const Gap(18),
            Text('postCreateAccountNext').tr().fontSize(19).bold(),
            const Gap(4),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              spacing: 6,
              children: [
                Text('\u2022'),
                Expanded(child: Text('postCreateAccountNext1').tr()),
              ],
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              spacing: 6,
              children: [
                Text('\u2022'),
                Expanded(child: Text('postCreateAccountNext2').tr()),
              ],
            ),
            const Gap(6),
            TextButton(
              onPressed: () {
                Navigator.pop(context);
                context.pushReplacementNamed('login');
              },
              child: Text('login'.tr()),
            ),
          ],
        ),
      ),
    );
  }
}