tripz-llc/apps/rider_new/lib/features/trip/view/ride_page.dart

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

import '../../../core/design/tokens.dart';
import '../../../core/design/tripz_colors.dart';
import '../../../core/di.dart';
import '../../../core/l10n/l10n.dart';
import '../../../core/ui/app_drawer.dart';
import '../../../core/ui/status_banner.dart';
import '../../../core/ui/tripz_button.dart';
import '../cubit/ride_cubit.dart';
import '../cubit/ride_state.dart';
import '../data/models/geo_point.dart';
import 'widgets/active_trip_sheet.dart';
import 'widgets/center_pin.dart';
import 'widgets/confirm_sheet.dart';
import 'widgets/planner_sheet.dart';
import 'widgets/ride_map.dart';
import 'widgets/searching_sheet.dart';

/// شاشة الراكب: خريطة ثابتة + ورقة سفلية تتبدّل بالمرحلة (docs/39 §3).
///
/// الخريطة **لا تُعاد بناؤها** عند تبدّل الورقة: هي خارج الـ`BlocBuilder`
/// الذي يبني الورقة، ولها `BlocSelector` خاص بما تحتاجه وحدها. هذا هو الفرق
/// بين خريطة سلسة وأخرى تهتزّ عند كل تحديث حالة.
class RidePage extends StatefulWidget {
  const RidePage({super.key});

  @override
  State<RidePage> createState() => _RidePageState();
}

class _RidePageState extends State<RidePage> with WidgetsBindingObserver {
  late final RideCubit _cubit = sl<RideCubit>()..init();
  GeoPoint? _mapCenter;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    _cubit.close();
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState lifecycle) {
    // الإذن قد يُمنح من إعدادات النظام والتطبيق في الخلفية — نلتقطه عند
    // العودة بدل أن تبقى الخريطة على الموقع الاحتياطي.
    if (lifecycle == AppLifecycleState.resumed && _cubit.state.origin == null) {
      _cubit.locateMe();
    }
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider.value(
      value: _cubit,
      child: Scaffold(
        drawer: const AppDrawer(),
        body: Stack(
          children: [
            // ── الخريطة ────────────────────────────────────────────────
            BlocSelector<RideCubit, RideState, _MapData>(
              selector: (s) => _MapData(
                origin: s.origin,
                destination: s.destination,
                driver: s.driverLocation,
                route: s.route,
                camera: s.cameraTarget,
              ),
              builder: (context, data) => RideMap(
                origin: data.origin,
                destination: data.destination,
                driver: data.driver,
                route: data.route,
                cameraTarget: data.camera,
                onCameraIdle: (p) => _mapCenter = p,
                // الورقة تغطّي نحو ثلث الشاشة — يُحسب منه إطار المسار كي لا
                // يختفي نصفه تحتها.
                bottomInset: MediaQuery.sizeOf(context).height * 0.34,
              ),
            ),

            // ── دبّوس الاختيار ─────────────────────────────────────────
            BlocSelector<RideCubit, RideState, bool>(
              selector: (s) => s.phase == RidePhase.pickingOnMap,
              builder: (context, picking) =>
                  picking ? const CenterPin() : const SizedBox.shrink(),
            ),

            // زر القائمة — يطفو فوق الخريطة، ويحترم المنطقة الآمنة.
            SafeArea(
              child: Padding(
                padding: Space.page,
                child: Builder(
                  builder: (context) => _MapFab(
                    icon: Icons.menu_rounded,
                    onTap: Scaffold.of(context).openDrawer,
                  ),
                ),
              ),
            ),

            // ── الورقة السفلية ─────────────────────────────────────────
            Align(
              alignment: Alignment.bottomCenter,
              child: BlocBuilder<RideCubit, RideState>(
                builder: (context, state) => _Sheet(
                  state: state,
                  onConfirmPick: () {
                    final center = _mapCenter;
                    if (center != null) _cubit.confirmMapPick(center);
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

/// ما تحتاجه الخريطة وحدها — تغيّرُ أي شيء آخر في الحالة لا يعيد بناءها.
class _MapData {
  const _MapData({
    this.origin,
    this.destination,
    this.driver,
    this.route,
    this.camera,
  });

  final GeoPoint? origin;
  final GeoPoint? destination;
  final GeoPoint? driver;
  final dynamic route;
  final GeoPoint? camera;

  @override
  bool operator ==(Object other) =>
      other is _MapData &&
      other.origin == origin &&
      other.destination == destination &&
      other.driver == driver &&
      other.route == route &&
      other.camera == camera;

  @override
  int get hashCode => Object.hash(origin, destination, driver, route, camera);
}

class _Sheet extends StatelessWidget {
  const _Sheet({required this.state, required this.onConfirmPick});

  final RideState state;
  final VoidCallback onConfirmPick;

  @override
  Widget build(BuildContext context) {
    final child = switch (state.phase) {
      RidePhase.idle =>
        _Collapsed(noLocation: state.error == RideError.noLocation),
      RidePhase.planning => PlannerSheet(state: state),
      RidePhase.pickingOnMap => _PickConfirm(onConfirm: onConfirmPick),
      RidePhase.confirming => ConfirmSheet(state: state),
      RidePhase.searching => const SearchingSheet(),
      RidePhase.active => ActiveTripSheet(trip: state.trip!),
    };

    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
        color: context.colors.surface,
        borderRadius: Radii.sheetTop,
      ),
      child: SafeArea(
        top: false,
        child: Padding(
          padding: Space.page,
          child: AnimatedSize(
            duration: Motion.inScreen,
            curve: Motion.curve,
            alignment: Alignment.bottomCenter,
            child: child,
          ),
        ),
      ),
    );
  }
}

/// زر دائري فوق الخريطة — سطح مرتفع كي يُقرأ فوق أي لون بلاطة.
class _MapFab extends StatelessWidget {
  const _MapFab({required this.icon, required this.onTap});

  final IconData icon;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: AlignmentDirectional.topStart,
      child: Material(
        color: context.tripzColors.surfaceRaised,
        shape: const CircleBorder(),
        clipBehavior: Clip.antiAlias,
        child: InkWell(
          onTap: onTap,
          child: Padding(
            padding: EdgeInsets.all(Space.sm),
            child: Icon(icon, size: Sizes.icon),
          ),
        ),
      ),
    );
  }
}

class _Collapsed extends StatelessWidget {
  const _Collapsed({required this.noLocation});

  final bool noLocation;

  @override
  Widget build(BuildContext context) {
    final cubit = context.read<RideCubit>();
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // بلا موقع لا خريطة مفيدة — السبب يُعرض مع مخرجه بدل خريطة صامتة
        // على موقع خاطئ.
        if (noLocation) ...[
          StatusBanner(
            message: context.l10n.rideNoLocation,
            tone: BannerTone.warning,
            icon: Icons.location_off_outlined,
            trailing: TripzButton.text(
              label: context.l10n.actionRetry,
              onPressed: cubit.locateMe,
            ),
          ),
          const SizedBox(height: Space.sm),
        ],
        TripzButton.secondary(
          label: context.l10n.rideWhereTo,
          icon: Icons.search_rounded,
          expanded: true,
          onPressed: cubit.openPlanner,
        ),
      ],
    );
  }
}

class _PickConfirm extends StatelessWidget {
  const _PickConfirm({required this.onConfirm});

  final VoidCallback onConfirm;

  @override
  Widget build(BuildContext context) {
    return TripzButton.primary(
      label: context.l10n.rideConfirmPoint,
      onPressed: onConfirm,
    );
  }
}