import 'package:flutter/material.dart';

import 'package:doormile/core/theme/app_colors.dart';
import 'package:doormile/core/theme/app_theme.dart';
import 'package:doormile/core/widgets/common.dart';

/// Shared layout for the multi-step booking flow: app bar, step progress,
/// scrollable body, and a sticky bottom action button.
class BookingScaffold extends StatelessWidget {
  final String title;
  final int step; // 1..4
  final String stepLabel;
  final String buttonLabel;
  final VoidCallback onContinue;
  final List<Widget> children;
  final Widget? bottomExtra;
  final bool enabled;
  final bool loading;

  const BookingScaffold({
    super.key,
    required this.title,
    required this.step,
    required this.stepLabel,
    required this.buttonLabel,
    required this.onContinue,
    required this.children,
    this.bottomExtra,
    this.enabled = true,
    this.loading = false,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.surface,
      body: AppBackground(
        child: Column(
          children: [
            Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: [AppColors.primaryContainer, AppColors.primary],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
                borderRadius: BorderRadius.vertical(bottom: Radius.circular(24)),
              ),
              child: ClipRRect(
                borderRadius: const BorderRadius.vertical(bottom: Radius.circular(24)),
                child: Stack(
                  children: [
                    Positioned(
                      right: -20,
                      top: 10,
                      child: Transform.rotate(
                        angle: 0.1,
                        child: Icon(Icons.add_location_alt_rounded, size: 140, color: Colors.white.withValues(alpha: 0.04)),
                      ),
                    ),
                    SafeArea(
                bottom: false,
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(8, 10, 16, 18),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          IconButton(
                            onPressed: () => Navigator.pop(context),
                            icon: const Icon(Icons.arrow_back, color: Colors.white),
                          ),
                          Expanded(
                            child: Text(title,
                                overflow: TextOverflow.ellipsis,
                                style: AppTheme.headlineMd.copyWith(color: Colors.white)),
                          ),
                          const Icon(Icons.location_on_outlined, color: Colors.white),
                        ],
                      ),
                      const SizedBox(height: 12),
                      AppCard(
                        padding: const EdgeInsets.all(14),
                        color: Colors.white.withValues(alpha: 0.94),
                        child: Column(
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Flexible(
                                  child: Text(stepLabel,
                                      style: AppTheme.labelMd.copyWith(color: AppColors.primary),
                                      overflow: TextOverflow.ellipsis),
                                ),
                                const SizedBox(width: 8),
                                Text('Step $step',
                                    style: AppTheme.caption.copyWith(fontWeight: FontWeight.w700)),
                              ],
                            ),
                            const SizedBox(height: 10),
                            JourneyProgressBar(value: 1, gradient: true),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
                    ],
                  ),
                ),
              ),
            Expanded(
              child: ListView(
                padding: const EdgeInsets.fromLTRB(16, 18, 16, 24),
                children: children,
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          color: AppColors.surfaceContainerLowest.withValues(alpha: 0.95),
          border: const Border(top: BorderSide(color: AppColors.surfaceContainer)),
        ),
        child: SafeArea(
          top: false,
          minimum: const EdgeInsets.fromLTRB(16, 12, 16, 12),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              if (bottomExtra != null) ...[bottomExtra!, const SizedBox(height: 10)],
              PrimaryButton(
                label: buttonLabel,
                loading: loading,
                trailingIcon: Icons.arrow_forward,
                height: 54,
                onPressed: enabled ? onContinue : null,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
