import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import 'package:flutter_animate/flutter_animate.dart';

import '../../data/models.dart';
import '../../state/app_scope.dart';
import '../tokens.dart';
import 'shell_screen.dart';
import '../format.dart';
import '../widgets/cards.dart';
import '../widgets/book_orb.dart';
import '../widgets/misc.dart';
import 'booking/booking_routes.dart';
import 'booking/send_screen.dart';
import 'sheets/destination_sheet.dart';
import 'sheets/drop_address_sheet.dart';
import 'sheets/place_search_sheet.dart';
import 'sheets/window_sheet.dart';
import 'tracking_screen.dart';

/// Home — two questions, and nothing else on the screen.
///
/// *Can I book?* The sphere.
/// *Is anything happening?* One row, when there is.
///
/// ── What was removed ──
///
/// A two-line caption under the sphere that a returning customer had read a
/// hundred times; a four-cell card for the live booking carrying a status pill,
/// a reference, a route rail, a courier sentence, a window and a Track button —
/// six facts where the customer wanted two; and a three-row explainer with a
/// subtitle under every row.
///
/// The caption is first-run only now and one line. The live booking is one row.
/// The explainer lost its subtitles. Home went from roughly sixty words to
/// under twenty for a new customer, and to five for a returning one.
class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  /// True while the destination sheet is up.
  ///
  /// Home does not just sit behind the scrim — it scales back a little and
  /// fades, so the sheet reads as having been pushed up by the sphere rather
  /// than as a new screen that arrived over the top of an unrelated one.
  bool _handingOver = false;

  /// BOOK. The one action on this screen, and the whole flow's front door.
  ///
  /// ── Where, then when, then the review ──
  ///
  /// Two sheets in sequence: states → districts, then the pickup window. The
  /// second rises while the first is still falling, so the handover reads as
  /// one surface changing its question rather than as a sheet failing and
  /// another arriving.
  ///
  /// Dismissing the window sheet is allowed. The review screen carries the
  /// window as its own row — brand-coloured while it is unanswered — and the
  /// button stays disabled until there is one, so backing out of the second
  /// sheet costs a tap rather than the booking.
  Future<void> _book({bool detailed = false}) async {
    final app = AppScope.read(context);
    final navigator = Navigator.of(context);

    setState(() => _handingOver = true);
    try {
      final places = await showDestinationSheet(context);
      if (places == null || places.isEmpty || !mounted) return;

      app.startBooking(detailed: detailed);
      app.setDestinations(places);

      // The full form asks for the door before it asks for the window, and it
      // asks once per destination: a visit that fans out to three places is
      // three addresses, and "for all parcels" is the whole point of choosing
      // this path over One Touch.
      if (detailed) {
        for (final group in app.draftDestinations) {
          if (!mounted) return;
          final saved = await showDropAddressSheet(
            context,
            details: group.details,
            district: group.destination.shortLabel,
          );
          if (saved != true) break;
        }
      }
      if (!mounted) return;

      await showWindowSheet(context);
      if (!mounted) return;

      await navigator.push(
        bookingRoute<void>(BookingRoutes.send, (_) => const SendScreen()),
      );
    } finally {
      if (mounted) setState(() => _handingOver = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    final app = AppScope.of(context);
    final active = app.activeBookings.isEmpty ? null : app.activeBookings.first;

    // The sphere's own field, floored so a very short window leaves it a
    // sphere rather than a slot. It is a *minimum*: the scroll view hands it
    // whatever is left once the card below has taken what it needs.
    // Lower than it was. The sphere gained a second control under it and the
    // live card was sitting a third of a screen below both; the field only has
    // to be big enough for the sphere to float in, not to push everything else
    // off the fold.
    final orbHeight = math.max(260.0, MediaQuery.sizeOf(context).height * 0.30);

    return SafeArea(
      bottom: false,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          // No wordmark bar here.
          //
          // Orders and Account open on a title and want a bar over it. Home
          // opens on the customer's own name with one object under it, and a
          // second header above that made the screen start twice.
          // ── Greeting, then where from ──
          //
          // "Hello, Joe ●" with the brand dot, the avatar opposite it, and the
          // address as a bordered pill under both. With the wordmark bar gone
          // this is the top of the screen, so it takes the inset the bar used
          // to hold.
          Padding(
            padding: const EdgeInsets.fromLTRB(DmSpace.pad, 26, DmSpace.pad, 0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Expanded(
                      child: Row(
                        children: [
                          Flexible(
                            child: Text(
                              'Hello, ${_firstName(app.customer?.name)}',
                              style: DmText.headerTitle.copyWith(fontSize: 26),
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                          const SizedBox(width: 8),
                          Container(
                            width: 6,
                            height: 6,
                            decoration: const BoxDecoration(
                              color: DmColors.brand,
                              shape: BoxShape.circle,
                            ),
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(width: 12),
                    InkResponse(
                      onTap: () => ShellScreen.of(context)?.goToTab(2),
                      radius: 26,
                      child: DmAvatar(
                        initials: initialsOf(app.customer?.name),
                        size: 40,
                        badge: active != null,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),

          // ── What is running comes first ──
          //
          // The live card sat under the sphere, at the foot of the screen. A
          // customer with a parcel in the network opens this app to check on
          // it, not to send another one — so it is the first thing under their
          // own name, and the sphere is what they scroll past it to.
          if (active != null)
            Padding(
                  padding: const EdgeInsets.fromLTRB(
                    DmSpace.pad,
                    14,
                    DmSpace.pad,
                    0,
                  ),
                  child: _LiveCard(booking: active),
                )
                .animate()
                .fadeIn(duration: 380.ms, delay: 160.ms)
                .slideY(begin: -0.08, curve: DmMotion.ease),
          Expanded(
            child: AnimatedScale(
              scale: _handingOver ? 0.96 : 1,
              duration: DmMotion.base,
              curve: DmMotion.ease,
              child: AnimatedOpacity(
                opacity: _handingOver ? 0.45 : 1,
                duration: DmMotion.base,
                curve: DmMotion.ease,
                child: RefreshIndicator(
                  color: DmColors.brand,
                  backgroundColor: DmColors.surface,
                  onRefresh: () async {
                    await Future.wait([
                      app.detectPickupLocation(),
                      app.refreshOrders(),
                    ]);
                  },
                  child: LayoutBuilder(
                    builder: (context, box) => ListView(
                      physics: const AlwaysScrollableScrollPhysics(),
                      padding: const EdgeInsets.fromLTRB(
                        DmSpace.pad,
                        0,
                        DmSpace.pad,
                        0,
                      ),
                      children: [
                        ConstrainedBox(
                          constraints: BoxConstraints(
                            minHeight: math.max(orbHeight, box.maxHeight),
                          ),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              // ── What each way asks for ──
                              //
                              // Two ways to book the same parcel is not
                              // something a customer can infer from a sphere
                              // and a form. One line each, in place: this one
                              // under the sphere, the other on the DROP row.
                              // Said side by side in a paragraph they would be
                              // a comparison nobody reads; said where the
                              // choice is made they are two captions.
                              DmBookOrb(
                                    onTap: _book,
                                    held: _handingOver,
                                    // Short enough to sit on one line, and
                                    // written to be read against the DROP
                                    // row's note rather than on its own:
                                    //
                                    //   Just a city and a time
                                    //   Enter the full address yourself
                                    //
                                    // Two captions, same length, opposite
                                    // answers. A paragraph comparing them
                                    // would say more and be read by nobody.
                                    caption: 'Just a city and a time',
                                  )
                                  .animate()
                                  .fadeIn(duration: 420.ms)
                                  .scale(
                                    begin: const Offset(0.82, 0.82),
                                    end: const Offset(1, 1),
                                    duration: 620.ms,
                                    curve: Curves.easeOutBack,
                                  ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
          // ── Everything under the sphere is pinned ──
          //
          // The scroll view centres the sphere in whatever height is left, and
          // it cannot know about anything laid out after it — so anything laid
          // out inside that column pushed the thing before it under the fold.
          // The form sits outside it, and the sphere floats in what remains.
          //
          // A "3 min pickup" chip used to sit here. It was riding the sphere's
          // lower arc — the field is centred on the disc, not on the glow
          // round it, so a chip pinned directly under the column overlapped
          // the shadow the sphere throws.
          Padding(
            padding: const EdgeInsets.fromLTRB(DmSpace.pad, 0, DmSpace.pad, 0),
            child: _PickDropForm(
              pickup: app.pickup?.title,
              onPickup: () async {
                final place = await showPlaceSearchSheet(context);
                if (place != null && context.mounted) app.setPickup(place);
              },
              onDrop: () => _book(detailed: true),
            ).animate().fadeIn(duration: 380.ms, delay: 300.ms),
          ),

          // Clears the floating tab bar, which the shell stacks over the body.
          //
          // Measured, not guessed. A fixed 74 was right on the 844pt golden
          // and eight points short on a device with a home indicator, where
          // the bar is its own 58 plus 10 of padding plus a 34pt inset — so
          // the pill sat on top of the live card.
          SizedBox(height: MediaQuery.paddingOf(context).bottom + 74),
        ],
      ),
    );
  }

  static String _firstName(String? name) {
    final first = (name ?? '').trim().split(RegExp(r'\s+')).first;
    return first.isEmpty ? 'there' : first;
  }
}

/// The live booking, at the head of Home.
///
/// ── Smaller, and without the courier ──
///
/// It carried a rule and a second row naming the Miler and their plate. Both
/// are real and neither belongs here: this card sits above the sphere now, so
/// every point it takes is a point the one action on the screen gives up — and
/// the Miler's name is on the screen this card opens, beside the button that
/// rings them, which is where it is any use.
///
/// What is left is what a glance asks: what is happening, where, and when.
/// Three lines and an arrow.
class _LiveCard extends StatelessWidget {
  const _LiveCard({required this.booking});

  final Booking booking;

  @override
  Widget build(BuildContext context) {
    final app = AppScope.read(context);
    final slot = app.slotById(booking.slotId);

    // The district alone. "Chennai, Tamil Nadu" shares its row with the state
    // and the reference, and on a 402pt device it rendered "Chenna…" — the
    // half of the name that identifies nothing.
    final place = booking.isMultiDestination
        ? '${booking.destinations.length} destinations'
        : booking.destination.shortLabel;

    // The promise, in the order a customer can act on it: how long, then
    // where they are, then what was agreed.
    final promise = switch (booking.stage) {
      JourneyStage.arrived => 'At your door now',
      _ when booking.milerEtaMinutes != null && booking.milerEtaMinutes! > 0 =>
        'Arriving in about ${booking.milerEtaMinutes} min',
      JourneyStage.booked || JourneyStage.assigned || JourneyStage.onTheWay
          when slot != null =>
        '${slot.day} · ${slot.window}',
      _ when booking.expectedDelivery != null =>
        'Expected ${booking.expectedDelivery}',
      _ => booking.stage.milestoneLabel,
    };

    return DmCard(
      raised: true,
      onTap: () {
        app.openTracking(booking.reference);
        Navigator.of(context).push(
          bookingRoute<void>(
            BookingRoutes.tracking,
            (_) => const TrackingScreen(),
          ),
        );
      },
      children: [
        DmCardCell(
          padding: const EdgeInsets.fromLTRB(16, 13, 14, 14),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Row(
                children: [
                  const DmLiveDot(size: 6),
                  const SizedBox(width: 8),
                  Flexible(
                    child: Text(
                      booking.stage.chipLabel.toUpperCase(),
                      style: DmText.eyebrow.copyWith(
                        fontSize: 9.5,
                        letterSpacing: 0.9,
                        color: DmColors.brand,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                  const SizedBox(width: 10),
                  Flexible(
                    child: Text(
                      booking.displayId,
                      style: DmText.monoSm.copyWith(
                        fontSize: 11,
                        color: DmColors.ink3,
                      ),
                      textAlign: TextAlign.right,
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 9),
              Row(
                children: [
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          place,
                          style: DmText.headerTitle.copyWith(fontSize: 21),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                        Text(
                          promise,
                          style: DmText.small.copyWith(
                            fontSize: 13,
                            color: DmColors.ink3,
                          ),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(width: 12),
                  Container(
                    width: 36,
                    height: 36,
                    alignment: Alignment.center,
                    decoration: const BoxDecoration(
                      color: DmColors.brandSoft,
                      shape: BoxShape.circle,
                    ),
                    child: const Icon(
                      LucideIcons.arrowRight,
                      size: 17,
                      color: DmColors.brand,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }
}

/// Pickup over drop, on one card — the shape every ride app asks a journey in.
///
/// ── Why the app has two ways to start and only one of them is a sphere ──
///
/// One Touch is the product: a state, a district, a window, and the Miler
/// writes down the door when they get there. It is a sphere because it is one
/// gesture, and a gesture cannot be a form.
///
/// This is the same booking for a customer who already knows the door. Both
/// ends are here because a journey has two, and seeing them together is what
/// makes it obvious that one is already answered — the pickup carries the
/// address the app detected, so the only row with a question on it is the
/// drop.
///
/// It replaced a line of text reading "Enter the full address instead", which
/// said what would happen and showed none of it. A form that is already half
/// filled in is a better argument for itself than a sentence about forms.
class _PickDropForm extends StatelessWidget {
  const _PickDropForm({
    required this.pickup,
    required this.onPickup,
    required this.onDrop,
  });

  final String? pickup;
  final VoidCallback onPickup;
  final VoidCallback onDrop;

  @override
  Widget build(BuildContext context) {
    return DmCard(
      children: [
        DmCardCell(
          padding: const EdgeInsets.fromLTRB(16, 6, 14, 6),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              _End(
                label: 'PICKUP',
                value: pickup ?? 'Set a pickup address',
                unset: pickup == null,
                origin: true,
                last: false,
                onTap: onPickup,
              ),
              _End(
                label: 'DROP',
                value: 'Where is it going?',
                note: 'Enter the full address yourself',
                unset: true,
                origin: false,
                last: true,
                onTap: onDrop,
              ),
            ],
          ),
        ),
      ],
    );
  }
}

/// One end of the journey: a node on a thread, a micro-label, and the answer
/// or the question.
class _End extends StatelessWidget {
  const _End({
    required this.label,
    required this.value,
    required this.unset,
    required this.origin,
    required this.last,
    required this.onTap,
    this.note,
  });

  final String label;
  final String value;

  /// What choosing this row means. Only the drop carries one — the pickup is
  /// already answered, and a caption under an answer is noise.
  final String? note;
  final bool unset;
  final bool origin;
  final bool last;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return Semantics(
      button: true,
      label: '$label $value',
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: onTap,
        child: IntrinsicHeight(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // The node and the thread it hangs from. The thread belongs to
              // the stop above the join, so the last one ends clean.
              SizedBox(
                width: 20,
                child: Column(
                  children: [
                    const SizedBox(height: 17),
                    Container(
                      width: 9,
                      height: 9,
                      decoration: BoxDecoration(
                        color: unset && !origin
                            ? Colors.transparent
                            : (origin ? DmColors.ink : DmColors.brand),
                        shape: BoxShape.circle,
                        border: unset && !origin
                            ? Border.all(color: DmColors.brand, width: 2)
                            : null,
                      ),
                    ),
                    if (!last)
                      const Expanded(
                        child: VerticalDivider(
                          width: 1,
                          thickness: 1,
                          color: DmColors.border,
                        ),
                      ),
                  ],
                ),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: Padding(
                  padding: EdgeInsets.fromLTRB(0, 10, 0, last ? 12 : 14),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(label, style: DmText.eyebrow),
                      const SizedBox(height: 2),
                      Text(
                        value,
                        style: DmText.cardTitle.copyWith(
                          fontSize: 15.5,
                          color: unset ? DmColors.brand : null,
                        ),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                      if (note != null)
                        Text(
                          note!,
                          style: DmText.small.copyWith(
                            fontSize: 12.5,
                            color: DmColors.ink3,
                          ),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                    ],
                  ),
                ),
              ),
              const SizedBox(width: 8),
              const Icon(
                LucideIcons.chevronRight,
                size: 17,
                color: DmColors.ink4,
              ),
            ],
          ),
        ),
      ),
    );
  }
}