marco.pms.mobileapp/lib/view/auth/login_option_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_lucide/flutter_lucide.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/images.dart';
import 'package:marco/view/auth/email_login_form.dart';
import 'package:marco/view/auth/otp_login_form.dart';
import 'package:marco/helpers/services/api_endpoints.dart';
import 'package:marco/view/auth/request_demo_bottom_sheet.dart';
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';

enum LoginOption { email, otp }

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

  @override
  Widget build(BuildContext context) => const WelcomeScreen();
}

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

  @override
  State<WelcomeScreen> createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen>
    with SingleTickerProviderStateMixin, UIMixin {
  late final AnimationController _controller;
  late final Animation<double> _logoAnimation;
  bool get _isBetaEnvironment => ApiEndpoints.baseUrl.contains("stage");

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 800),
    );
    _logoAnimation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeOutBack,
    );
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _showLoginDialog(BuildContext context, LoginOption option) {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (_) => Dialog(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
        insetPadding: const EdgeInsets.all(24),
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(24),
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 420),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Row(
                  children: [
                    Expanded(
                      child: MyText(
                        option == LoginOption.email
                            ? "Login with Email"
                            : "Login with OTP",
                        fontSize: 20,
                        fontWeight: 700,
                      ),
                    ),
                    IconButton(
                      icon: const Icon(Icons.close),
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                  ],
                ),
                const SizedBox(height: 20),
                option == LoginOption.email
                    ?  EmailLoginForm()
                    : const OTPLoginScreen(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final isNarrow = screenWidth < 500;

    return Scaffold(
      body: Stack(
        children: [
          _RedWaveBackground(brandRed: contentTheme.brandRed),
          SafeArea(
            child: Center(
              child: SingleChildScrollView(
                padding: const EdgeInsets.all(24),
                child: ConstrainedBox(
                  constraints: BoxConstraints(maxWidth: isNarrow ? double.infinity : 420),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      _buildLogo(),
                      const SizedBox(height: 24),
                      _buildWelcomeText(),
                      if (_isBetaEnvironment) ...[
                        const SizedBox(height: 12),
                        _buildBetaBadge(),
                      ],
                      const SizedBox(height: 36),
                      _buildActionButton(
                        context,
                        label: "Login with Username",
                        icon: LucideIcons.mail,
                        option: LoginOption.email,
                      ),
                      const SizedBox(height: 16),
                      _buildActionButton(
                        context,
                        label: "Login with OTP",
                        icon: LucideIcons.message_square,
                        option: LoginOption.otp,
                      ),
                      const SizedBox(height: 16),
                      _buildActionButton(
                        context,
                        label: "Request a Demo",
                        icon: LucideIcons.phone_call,
                        option: null,
                      ),
                      const SizedBox(height: 36),
                      MyText(
                        'App version 1.0.0',
                        color: Colors.grey,
                        fontSize: 12,
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildLogo() {
    return ScaleTransition(
      scale: _logoAnimation,
      child: Container(
        width: 100,
        height: 100,
        padding: const EdgeInsets.all(20),
        decoration: const BoxDecoration(
          color: Colors.white,
          shape: BoxShape.circle,
          boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 10, offset: Offset(0, 4))],
        ),
        child: Image.asset(Images.logoDark),
      ),
    );
  }

  Widget _buildWelcomeText() {
    return Column(
      children: [
        MyText(
          "Welcome to Marco",
          fontSize: 26,
          fontWeight: 800,
          color: Colors.black87,
          textAlign: TextAlign.center,
        ),
        const SizedBox(height: 10),
        MyText(
          "Streamline Project Management\nBoost Productivity with Automation.",
          fontSize: 14,
          color: Colors.black54,
          textAlign: TextAlign.center,
        ),
      ],
    );
  }

  Widget _buildBetaBadge() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
      decoration: BoxDecoration(
        color: Colors.orangeAccent,
        borderRadius: BorderRadius.circular(5),
      ),
      child: MyText(
        'BETA',
        color: Colors.white,
        fontWeight: 600,
        fontSize: 12,
      ),
    );
  }

  Widget _buildActionButton(
    BuildContext context, {
    required String label,
    required IconData icon,
    LoginOption? option,
  }) {
    return SizedBox(
      width: double.infinity,
      child: ElevatedButton.icon(
        icon: Icon(icon, size: 20, color: Colors.white),
        label: Padding(
          padding: const EdgeInsets.symmetric(vertical: 14),
          child: MyText(
            label,
            fontSize: 16,
            fontWeight: 600,
            color: Colors.white,
          ),
        ),
        style: ElevatedButton.styleFrom(
          backgroundColor: contentTheme.brandRed,
          foregroundColor: Colors.white,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
          elevation: 4,
          shadowColor: Colors.black26,
        ),
        onPressed: () {
          if (option == null) {
            OrganizationFormBottomSheet.show(context);
          } else {
            _showLoginDialog(context, option);
          }
        },
      ),
    );
  }
}

// Red wave background painter
class _RedWaveBackground extends StatelessWidget {
  final Color brandRed;
  const _RedWaveBackground({required this.brandRed});

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: _WavePainter(brandRed),
      size: Size.infinite,
    );
  }
}

class _WavePainter extends CustomPainter {
  final Color brandRed;
  _WavePainter(this.brandRed);

  @override
  void paint(Canvas canvas, Size size) {
    final paint1 = Paint()
      ..shader = LinearGradient(
        colors: [brandRed, const Color.fromARGB(255, 97, 22, 22)],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ).createShader(Rect.fromLTWH(0, 0, size.width, size.height));

    final path1 = Path()
      ..moveTo(0, size.height * 0.2)
      ..quadraticBezierTo(size.width * 0.25, size.height * 0.05, size.width * 0.5, size.height * 0.15)
      ..quadraticBezierTo(size.width * 0.75, size.height * 0.25, size.width, size.height * 0.1)
      ..lineTo(size.width, 0)
      ..lineTo(0, 0)
      ..close();

    canvas.drawPath(path1, paint1);

    final paint2 = Paint()..color = Colors.redAccent.withOpacity(0.15);
    final path2 = Path()
      ..moveTo(0, size.height * 0.25)
      ..quadraticBezierTo(size.width * 0.4, size.height * 0.1, size.width, size.height * 0.2)
      ..lineTo(size.width, 0)
      ..lineTo(0, 0)
      ..close();

    canvas.drawPath(path2, paint2);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}