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';

enum LoginOption { email, otp }

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

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

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

  bool get _isBetaEnvironment => ApiEndpoints.baseUrl.contains("stage");

  void _showLoginDialog(BuildContext context, LoginOption option) {
    showDialog(
      context: context,
      builder: (_) => Dialog(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
        insetPadding: const EdgeInsets.all(24),
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(24),
            child: ConstrainedBox(
              constraints: const BoxConstraints(maxWidth: 420),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  MyText(
                    option == LoginOption.email ? "Login with Email" : "Login with OTP",
                    fontSize: 20,
                    fontWeight: 700,
                  ),
                  const SizedBox(height: 20),
                  option == LoginOption.email
                      ? EmailLoginForm()
                      : const OTPLoginScreen(),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

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

    return Scaffold(
      backgroundColor: const Color(0xFFB71C1C),
      body: SafeArea(
        child: Center(
          child: SingleChildScrollView(
            padding: const EdgeInsets.all(24),
            child: ConstrainedBox(
              constraints: BoxConstraints(
                maxWidth: screenWidth < 500 ? double.infinity : 420,
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // Logo
                  Container(
                    padding: const EdgeInsets.all(16),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(20),
                      boxShadow: const [
                        BoxShadow(color: Colors.black26, blurRadius: 8),
                      ],
                    ),
                    child: Image.asset(Images.logoDark, height: 60),
                  ),

                  const SizedBox(height: 24),

                  // Welcome Text
                  MyText(
                    "Welcome to Marco",
                    fontSize: 24,
                    fontWeight: 800,
                    color: Colors.white,
                    textAlign: TextAlign.center,
                  ),
                  const SizedBox(height: 10),
                  MyText(
                    "Streamline Project Management\nBoost Productivity with Automation.",
                    fontSize: 14,
                    color: Colors.white70,
                    textAlign: TextAlign.center,
                  ),

                  if (_isBetaEnvironment) ...[
                    const SizedBox(height: 12),
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
                      decoration: BoxDecoration(
                        color: Colors.orangeAccent,
                        borderRadius: BorderRadius.circular(6),
                      ),
                      child: MyText(
                        'BETA',
                        color: Colors.white,
                        fontWeight: 600,
                        fontSize: 12,
                      ),
                    ),
                  ],

                  const SizedBox(height: 36),

                  // Login Buttons
                  _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),
                  // Version Info
                  MyText(
                    'App version 1.0.0',
                    color: Colors.white60,
                    fontSize: 12,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildActionButton(
    BuildContext context, {
    required String label,
    required IconData icon,
    LoginOption? option, // nullable for "Request a Demo"
  }) {
    return SizedBox(
      width: double.infinity,
      child: ElevatedButton.icon(
        icon: Icon(icon, size: 20, color: Colors.white),
        label: Padding(
          padding: const EdgeInsets.symmetric(vertical: 12),
          child: MyText(
            label,
            fontSize: 16,
            fontWeight: 600,
            color: Colors.white,
          ),
        ),
        style: ElevatedButton.styleFrom(
          backgroundColor: const Color(0xFFB71C1C),
          side: const BorderSide(color: Colors.white70),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12),
          ),
          elevation: 4,
        ),
        onPressed: () {
          if (option == null) {
            OrganizationFormBottomSheet.show(context);
          } else {
            _showLoginDialog(context, option);
          }
        },
      ),
    );
  }
}