import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'dart:math' as math;
import '../../widgets/choice_card_widget.dart';
import '../../widgets/hover_relief_widget.dart';
import '../../widgets/custom_navigation_button.dart';
import '../../models/card_assets.dart';
import 'package:go_router/go_router.dart';

class RegisterChoiceScreen extends StatelessWidget {
  const RegisterChoiceScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          final width = constraints.maxWidth;
          final height = constraints.maxHeight;
          final screenSize = Size(width, height);
          final isMobile = width < 900;

          return Stack(
            children: [
              // Fond papier
              Positioned.fill(
                child: Image.asset(
                  'assets/images/paper2.png',
                  fit: BoxFit.cover,
                  repeat: ImageRepeat.repeat,
                ),
              ),

              // Bouton Retour (chevron gauche) - Desktop uniquement
              if (!isMobile)
                Positioned(
                  top: 40,
                  left: 40,
                  child: IconButton(
                    icon: Transform.flip(
                      flipX: true,
                      child: Image.asset('assets/images/chevron_right.png', height: 40),
                    ),
                    onPressed: () {
                      if (context.canPop()) {
                        context.pop();
                      } else {
                        context.go('/login');
                      }
                    },
                    tooltip: 'Retour',
                  ),
                ),

              // Contenu principal
              isMobile
                  ? _buildMobileLayout(context, screenSize)
                  : _buildDesktopLayout(context, screenSize),
            ],
          );
        },
      ),
    );
  }

  Widget _buildDesktopLayout(BuildContext context, Size screenSize) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: screenSize.width * 0.05),
      child: Row(
        children: [
          // Partie Gauche: Texte d'instruction centré
          Expanded(
            flex: 1,
            child: Center(
              child: Text(
                'Veuillez choisir votre\ntype de compte :',
                style: GoogleFonts.merienda(
                  fontSize: 36,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                  height: 1.5,
                ),
                textAlign: TextAlign.center,
              ),
            ),
          ),
          // Espace entre les deux parties
          SizedBox(width: screenSize.width * 0.05),

          // Partie Droite: Carte rose avec les boutons
          Expanded(
            flex: 1,
            child: Center(
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  maxHeight: screenSize.height * 0.78,
                ),
                child: AspectRatio(
                  aspectRatio: 2 / 3,
                  child: ChoiceCardWidget(
                    isMobile: false,
                    onParentSelected: () => context.go('/parent-register-step1'),
                    onAmSelected: () => context.go('/am-register-step1'),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildMobileLayout(BuildContext context, Size screenSize) {
    return Center(
      child: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Veuillez choisir votre\ntype de compte :',
              style: GoogleFonts.merienda(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: Colors.black87,
                height: 1.3,
              ),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 30),
            // Carte rose verticale
            SizedBox(
              width: double.infinity,
              child: AspectRatio(
                aspectRatio: 2 / 3,
                child: ChoiceCardWidget(
                  isMobile: true,
                  onParentSelected: () => context.go('/parent-register-step1'),
                  onAmSelected: () => context.go('/am-register-step1'),
                ),
              ),
            ),
            const SizedBox(height: 30),
            // Bouton Précédent
            HoverReliefWidget(
              child: CustomNavigationButton(
                text: 'Précédent',
                style: NavigationButtonStyle.purple,
                width: double.infinity,
                height: 50,
                fontSize: 16,
                onPressed: () {
                  if (context.canPop()) {
                    context.pop();
                  } else {
                    context.go('/login');
                  }
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}