import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

import 'login_register/login_sheet.dart';
import 'login_register/register_sheet.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool _paused = false;

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.sizeOf(context);

    return IgnorePointer(
      ignoring: _paused,
      child: Scaffold(
        body: SafeArea(
          child: Stack(
            clipBehavior: Clip.none,
            children: [
              Positioned.fill(
                child: Container(
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [Color(0xFFFFE6F1), Color(0xFFFFC9DF)],
                    ),
                  ),
                ),
              ),
              Positioned(
                left: -size.width * 0.38,
                bottom: -size.width * 0.38,
                child: IgnorePointer(
                  child: SizedBox(
                    width: size.width * 1.05,
                    height: size.width * 1.05,
                    child: Transform.rotate(
                      angle: 35 * math.pi / 180,
                      child: Opacity(
                        opacity: 0.95,
                        child: Lottie.asset(
                          'lottie/Liquid waves.json',
                          fit: BoxFit.cover,
                          repeat: true,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              Center(
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 28),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        width: 80,
                        height: 80,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          shape: BoxShape.circle,
                          boxShadow: [
                            BoxShadow(
                              color: const Color(
                                0xFF2F9E94,
                              ).withValues(alpha: 0.18),
                              blurRadius: 24,
                              offset: const Offset(0, 8),
                            ),
                          ],
                        ),
                        child: const Icon(
                          Icons.medical_services_rounded,
                          size: 38,
                          color: Color(0xFF2F9E94),
                        ),
                      ),
                      const SizedBox(height: 18),
                      const Text(
                        'Check-Teeth Kids',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontSize: 28,
                          fontWeight: FontWeight.w900,
                          color: Color(0xFFFF55A7),
                          height: 1.0,
                          letterSpacing: -0.5,
                        ),
                      ),
                      const SizedBox(height: 10),
                      Text(
                        'Cuidar do sorriso começa aqui.',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontSize: 15,
                          fontWeight: FontWeight.w700,
                          color: const Color(0xFF2F9E94).withValues(alpha: 0.9),
                        ),
                      ),
                      const SizedBox(height: 6),
                      Text(
                        'Acompanhe a saúde oral do seu filho com\ninformação segura e prevenção inteligente.',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontSize: 13,
                          height: 1.35,
                          color: Colors.black.withValues(alpha: 0.52),
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      const SizedBox(height: 32),
                      SizedBox(
                        width: size.width * 0.78,
                        child: _PrimaryButton(
                          label: 'Cadastrar',
                          onPressed: _openRegister,
                        ),
                      ),
                      const SizedBox(height: 12),
                      SizedBox(
                        width: size.width * 0.78,
                        child: _SecondaryButton(
                          label: 'Entrar',
                          onPressed: _openLogin,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Future<void> _openLogin() async {
    setState(() => _paused = true);
    try {
      await showLoginSheet(context);
    } finally {
      if (mounted) setState(() => _paused = false);
    }
  }

  Future<void> _openRegister() async {
    setState(() => _paused = true);
    try {
      await showRegisterSheet(context);
    } finally {
      if (mounted) setState(() => _paused = false);
    }
  }
}

class _SecondaryButton extends StatelessWidget {
  const _SecondaryButton({required this.label, required this.onPressed});

  final String label;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    const Color teal = Color(0xFF2F9E94);
    return SizedBox(
      height: 44,
      child: OutlinedButton(
        style: OutlinedButton.styleFrom(
          foregroundColor: teal,
          side: const BorderSide(color: teal, width: 1.6),
          shape: const StadiumBorder(),
          backgroundColor: Colors.white.withValues(alpha: 0.5),
          textStyle: const TextStyle(fontWeight: FontWeight.w800, fontSize: 15),
        ),
        onPressed: onPressed,
        child: Text(label),
      ),
    );
  }
}

class _PrimaryButton extends StatelessWidget {
  const _PrimaryButton({required this.label, required this.onPressed});

  final String label;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    final Color teal = const Color(0xFF2F9E94);
    return SizedBox(
      height: 44,
      child: FilledButton(
        style:
            FilledButton.styleFrom(
              backgroundColor: teal,
              foregroundColor: Colors.white,
              shape: const StadiumBorder(),
              textStyle: const TextStyle(
                fontWeight: FontWeight.w800,
                fontSize: 15,
              ),
            ).copyWith(
              animationDuration: const Duration(milliseconds: 180),
              splashFactory: InkSparkle.splashFactory,
              overlayColor: WidgetStateProperty.resolveWith<Color?>((states) {
                if (states.contains(WidgetState.pressed)) {
                  return Colors.white.withValues(alpha: 0.14);
                }
                if (states.contains(WidgetState.hovered) ||
                    states.contains(WidgetState.focused)) {
                  return Colors.white.withValues(alpha: 0.08);
                }
                return null;
              }),
            ),
        onPressed: onPressed,
        child: Text(label),
      ),
    );
  }
}