import 'package:flutter/material.dart';
import 'package:sigap/src/features/auth/presentasion/pages/signup/main/signup_with_role_screen.dart';
import 'package:sigap/src/features/onboarding/presentasion/pages/role-selection/role_selection_screen.dart';
import 'package:sigap/src/utils/constants/colors.dart';

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

  @override
  State<RoleSignupPageView> createState() => _RoleSignupPageViewState();
}

class _RoleSignupPageViewState extends State<RoleSignupPageView> {
  final PageController _pageController = PageController();
  int _currentPage = 0;
  String? _selectedRoleId;

  void _onRoleSelected(String roleId) {
    setState(() {
      _selectedRoleId = roleId;
      _currentPage = 1;
    });
    _pageController.animateToPage(
      1,
      duration: const Duration(milliseconds: 300),
      curve: Curves.ease,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          PageView(
            controller: _pageController,
            physics: const ClampingScrollPhysics(),
            onPageChanged: (index) {
              setState(() {
                _currentPage = index;
              });
            },
            children: [
              RoleSelectionScreen(onRoleSelected: _onRoleSelected),
              SignupWithRoleScreen(),
            ],
          ),
          Positioned(
            top: MediaQuery.of(context).padding.top + 16,
            left: 0,
            right: 0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(
                2,
                (index) => AnimatedContainer(
                  duration: const Duration(milliseconds: 200),
                  margin: const EdgeInsets.symmetric(horizontal: 4),
                  width: _currentPage == index ? 12 : 8,
                  height: _currentPage == index ? 12 : 8,
                  decoration: BoxDecoration(
                    color:
                        _currentPage == index
                            ? TColors.primary
                            : Colors.grey[400],
                    shape: BoxShape.circle,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
