import 'package:comwell_key_app/common/components/comwell_app_bar.dart';
import 'package:comwell_key_app/up_sales/components/addon_item_counter.dart';
import 'package:comwell_key_app/up_sales/components/upsale_header_media.dart';
import 'package:comwell_key_app/up_sales/models/addon_upgrade.dart';
import 'package:comwell_key_app/utils/l10n_utils.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import '../../themes/light_theme.dart';
import '../components/up_sales_bottom_button.dart';

class AddonUpgradePage extends StatefulWidget {
  final AddOnUpgrade addonUpgrade;
  //prop drilled
  final int extrasTotalPrice;
  final String selectedRoomUpgrade;
  final void Function(TimeOfDay) onServingTimeSelected;
  const AddonUpgradePage({
    super.key,
    required this.addonUpgrade,
    required this.extrasTotalPrice,
    required this.selectedRoomUpgrade,
    required this.onServingTimeSelected,
  });

  @override
  State<AddonUpgradePage> createState() => _AddonUpgradePageState();
}

class _AddonUpgradePageState extends State<AddonUpgradePage> {
  late int quantity = widget.addonUpgrade.quantity > 0 ? widget.addonUpgrade.quantity : 1;
  TimeOfDay? arrivalTime;

  void increment() {
    setState(() {
      quantity++;
    });
  }

  void decrement() {
    setState(() {
      if (quantity > 0) {
        quantity--;
      }
    });
  }

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

    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.surface,
      appBar: ComwellAppBar(
        onBackPressed: () {
          context.pop(true);
        },
      ),
      extendBodyBehindAppBar: true,
      body: Column(
        children: [
          // Image
          Stack(
            children: [
              ClipRRect(
                borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(10),
                  topRight: Radius.circular(10),
                ),
                child: UpsaleHeaderMedia(
                  height: height,
                  images: widget.addonUpgrade.images.toList(),
                  animationJson: widget.addonUpgrade.animationJson,
                  backgroundImageUrl: widget.addonUpgrade.backgroundImageUrl,
                ),
              ),
              Container(
                decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(12)),
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Colors.black26,
                      Colors.black54,
                    ],
                  ),
                ),
              ),
            ],
          ),
          Container(
            width: double.infinity,
            color: Theme.of(context).colorScheme.surface,
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(widget.addonUpgrade.name, style: theme.textTheme.headlineLarge),
                    Text(
                      context.strings.total_charge_value(widget.addonUpgrade.price.toString()),
                      style: theme.textTheme.headlineLarge,
                    ),
                  ],
                ),
                const SizedBox(height: 12),
                SizedBox(
                  width: width * 0.8,
                  child: Text(
                    widget.addonUpgrade.description,
                    style: theme.textTheme.bodySmall?.copyWith(color: colorHeadlineText),
                  ),
                ),
                const SizedBox(height: 24),
                GestureDetector(
                  onTap: () async {
                    final initialTimeOfDay = arrivalTime ?? TimeOfDay.now();
                    final initialDateTime = DateTime(
                      0,
                      1,
                      1,
                      initialTimeOfDay.hour,
                      initialTimeOfDay.minute,
                    );

                    final selectedTime = await showModalBottomSheet<TimeOfDay>(
                      context: context,
                      builder: (context) {
                        DateTime tempPicked = initialDateTime;

                        return SizedBox(
                          height: 260,
                          child: Column(
                            children: [
                              Align(
                                alignment: Alignment.centerRight,
                                child: TextButton(
                                  onPressed: () {
                                    Navigator.of(context).pop(
                                      TimeOfDay(
                                        hour: tempPicked.hour,
                                        minute: tempPicked.minute,
                                      ),
                                    );
                                  },
                                  child: Text(
                                    context.strings.generic_ok,
                                    style: theme.textTheme.labelLarge?.copyWith(
                                      color: sandColor,
                                    ),
                                  ),
                                ),
                              ),
                              Expanded(
                                child: CupertinoDatePicker(
                                  mode: CupertinoDatePickerMode.time,
                                  use24hFormat: true,
                                  initialDateTime: initialDateTime,
                                  onDateTimeChanged: (DateTime newDate) {
                                    tempPicked = newDate;
                                  },
                                ),
                              ),
                            ],
                          ),
                        );
                      },
                    );

                    if (selectedTime != null) {
                      setState(() {
                        arrivalTime = selectedTime;
                        widget.onServingTimeSelected(selectedTime);
                      });
                    }
                  },
                  child: Container(
                    padding: const EdgeInsets.all(12),
                    decoration: BoxDecoration(
                      border: Border.all(color: colorDivider),
                      borderRadius: const BorderRadius.all(Radius.circular(4)),
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          context.strings.preregistration_serving_time_label,
                          style: theme.textTheme.titleMedium?.copyWith(
                            fontWeight: FontWeight.w500,
                            color: colorHeadlineText,
                          ),
                        ),
                        Text(
                          arrivalTime != null ? arrivalTime!.format(context) : '--:--',
                          style: theme.textTheme.bodyMedium,
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
      bottomNavigationBar: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          const Divider(color: colorDivider),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              AddonItemCounter(
                key: ValueKey(quantity),
                addonUpgrade: widget.addonUpgrade,
                quantity: quantity,
                onIncrement: increment,
                onDecrement: decrement,
              ),
              Expanded(
                flex: 1,
                child: UpSalesBottomButton(
                  onContinue: () {
                    context.pop(quantity);
                  },
                  extrasTotalPrice: widget.extrasTotalPrice,
                  selectedRoomUpgrade: widget.selectedRoomUpgrade,
                  children: [
                    Text(quantity > 0 ? context.strings.add_to_booking : context.strings.remove),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}