import 'package:auth/src/features/onboarding/domain/onboarding_page.dart';
import 'package:auth/src/features/onboarding/presentation/onboarding_view_model.dart';
import 'package:auth/src/features/onboarding/presentation/widgets/onboarding_content.dart';
import 'package:design_system/design_system.dart';

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fonts/fonts.dart';
import 'package:navigation/navigation.dart';
import 'package:sf_localizations/sf_localizations.dart';

final onboardingPageControllerProvider = Provider.autoDispose<PageController>((
  ref,
) {
  final controller = PageController();
  ref.onDispose(controller.dispose);
  return controller;
});

class OnboardingScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(onBoardingViewModelProvider);
    final viewModel = ref.read(onBoardingViewModelProvider.notifier);
    final pageController = ref.watch(onboardingPageControllerProvider);

    final isLast = state.cardIndex >= onboardingPages.length - 1;

    void goToNext() {
      if (isLast) {
        navigationContract.goTo(AppRoutes.linkPhone);
      } else {
        pageController.nextPage(
          duration: const Duration(milliseconds: 400),
          curve: Curves.easeOut,
        );
      }
    }

    return Scaffold(
      backgroundColor: Color.fromRGBO(247, 247, 247, 1),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24),
        child: Column(
          children: [
            Expanded(
              child: PageView.builder(
                controller: pageController,
                itemCount: onboardingPages.length,
                onPageChanged: viewModel.onPageChanged,
                itemBuilder: (context, index) {
                  final page = onboardingPages[index];
                  return OnboardingContent(
                    image: page.image,
                    title: page.title,
                    subtitle: page.subtitle,
                  );
                },
              ),
            ),
            StepIndicator(
              current: state.cardIndex + 1,
              total: onboardingPages.length,
              color: Color.fromRGBO(88, 142, 165, 1),
            ),
            const SizedBox(height: 38),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 24),
              width: double.infinity,
              child: TextButton(
                onPressed: goToNext,
                style: TextButton.styleFrom(
                  backgroundColor: isLast
                      ? const Color.fromRGBO(88, 142, 165, 1)
                      : const Color.fromRGBO(255, 255, 255, 1),
                  foregroundColor: isLast
                      ? const Color.fromRGBO(255, 255, 255, 1)
                      : const Color.fromRGBO(88, 142, 165, 1),
                  padding: const EdgeInsets.symmetric(
                    vertical: 16,
                    horizontal: 24,
                  ),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(18),
                    side: const BorderSide(
                      color: Color.fromRGBO(88, 142, 165, 1),
                      width: 3,
                    ),
                  ),
                ),
                child: Text(
                  isLast
                      ? context.translate(I18n.start)
                      : context.translate(I18n.next),
                  style: AppFonts.stolzlStyle(
                    size: 18,
                    weight: FontWeight.w600,
                  ),
                ),
              ),
            ),
            const SizedBox(height: 8),
            SizedBox(
              height: 48,
              child: Center(
                child: isLast
                    ? const SizedBox.shrink()
                    : TextButton(
                        onPressed: () =>
                            navigationContract.goTo(AppRoutes.linkPhone),
                        child: Text(
                          context.translate(I18n.skip),
                          style: AppFonts.stolzlStyle(
                            color: Color.fromRGBO(88, 142, 165, 1),
                            decoration: TextDecoration.underline,
                            weight: FontWeight.w600,
                            size: 18,
                          ),
                        ),
                      ),
              ),
            ),
            const SizedBox(height: 48),
          ],
        ),
      ),
    );
  }
}
