import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'package:core_localization/core_localization.dart';
import 'package:design_system/design_system.dart';
import 'package:krow_core/core.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          // Background Illustration/Visuals from prototype
          Positioned(
            top: -100,
            right: -100,
            child: Container(
              width: 400,
              height: 400,
              decoration: BoxDecoration(
                color: UiColors.secondary.withValues(alpha: 0.2),
                shape: BoxShape.circle,
              ),
            ),
          ),

          SafeArea(
            child: LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) {
                return SingleChildScrollView(
                  child: ConstrainedBox(
                    constraints: BoxConstraints(
                      minHeight: constraints.maxHeight,
                    ),
                    child: IntrinsicHeight(
                      child: Column(
                        children: <Widget>[
                          const SizedBox(height: UiConstants.space10),
                          // Logo
                          Center(
                            child: Image.asset(
                              UiImageAssets.logoBlue,
                              height: 40,
                              fit: BoxFit.contain,
                            ),
                          ),

                          const Spacer(),

                          // Content Cards Area (Keeping prototype layout)
                          Container(
                            height: 300,
                            padding: const EdgeInsets.symmetric(
                              horizontal: UiConstants.space6,
                            ),
                            child: Stack(
                              children: <Widget>[
                                // Representative cards from prototype
                                Positioned(
                                  top: 20,
                                  left: 0,
                                  right: 20,
                                  child: _ShiftOrderCard(),
                                ),
                                Positioned(
                                  bottom: 40,
                                  right: 0,
                                  left: 40,
                                  child: _WorkerProfileCard(),
                                ),
                                Positioned(
                                  top: 60,
                                  right: 10,
                                  child: _CalendarCard(),
                                ),
                              ],
                            ),
                          ),

                          const Spacer(),

                          // Bottom Content
                          Padding(
                            padding: const EdgeInsets.symmetric(
                              horizontal: UiConstants.space6,
                              vertical: UiConstants.space10,
                            ),
                            child: Column(
                              children: <Widget>[
                                Text(
                                  t.client_authentication.get_started_page.title,
                                  textAlign: TextAlign.center,
                                  style: UiTypography.displayM,
                                ),
                                const SizedBox(height: UiConstants.space3),
                                Text(
                                  t.client_authentication.get_started_page
                                      .subtitle,
                                  textAlign: TextAlign.center,
                                  style: UiTypography.body2r.textSecondary,
                                ),
                                const SizedBox(height: UiConstants.space8),

                                // Sign In Button
                                UiButton.primary(
                                  text: t.client_authentication.get_started_page
                                      .sign_in_button,
                                  onPressed: () => Modular.to.toClientSignIn(),
                                  fullWidth: true,
                                ),

                                const SizedBox(height: UiConstants.space3),

                                // Create Account Button
                                UiButton.secondary(
                                  text: t.client_authentication.get_started_page
                                      .create_account_button,
                                  onPressed: () => Modular.to.toClientSignUp(),
                                  fullWidth: true,
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

// Internal Prototype Widgets Updated with Design System Primitives
class _ShiftOrderCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(UiConstants.space3),
      decoration: BoxDecoration(
        color: UiColors.white,
        borderRadius: UiConstants.radiusLg,
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: UiColors.black.withValues(alpha: 0.1),
            blurRadius: 10,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Row(
            children: <Widget>[
              Container(
                padding: const EdgeInsets.all(UiConstants.space1),
                decoration: BoxDecoration(
                  color: UiColors.primary.withValues(alpha: 0.1),
                  shape: BoxShape.circle,
                ),
                child: const Icon(
                  UiIcons.briefcase,
                  size: 14,
                  color: UiColors.primary,
                ),
              ),
              const SizedBox(width: UiConstants.space2),
              Text('Shift Order #824', style: UiTypography.footnote1b),
              const Spacer(),
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                decoration: BoxDecoration(
                  color: UiColors.tagPending,
                  borderRadius: UiConstants.radiusFull,
                ),
                child: Text(
                  'Pending',
                  style: UiTypography.footnote2m.copyWith(
                    color: UiColors.textWarning,
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: UiConstants.space2),
          Text(
            'Event Staffing - Hilton Hotel',
            style: UiTypography.footnote2r.textSecondary,
          ),
        ],
      ),
    );
  }
}

class _WorkerProfileCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(UiConstants.space3),
      decoration: BoxDecoration(
        color: UiColors.white,
        borderRadius: UiConstants.radiusLg,
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: UiColors.black.withValues(alpha: 0.1),
            blurRadius: 10,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Row(
        children: <Widget>[
          CircleAvatar(
            radius: 16,
            backgroundColor: UiColors.primary.withValues(alpha: 0.1),
            child: const Icon(UiIcons.user, size: 16, color: UiColors.primary),
          ),
          const SizedBox(width: UiConstants.space2),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text('Alex Thompson', style: UiTypography.footnote1b),
              Text(
                'Professional Waiter • 4.9★',
                style: UiTypography.footnote2r.textSecondary,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class _CalendarCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(UiConstants.space2),
      decoration: BoxDecoration(
        color: UiColors.accent,
        borderRadius: UiConstants.radiusMd,
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: UiColors.black.withValues(alpha: 0.1),
            blurRadius: 10,
            offset: const Offset(4, 4),
          ),
        ],
      ),
      child: const Icon(
        UiIcons.calendar,
        size: 20,
        color: UiColors.accentForeground,
      ),
    );
  }
}
