import 'package:comwell_key_app/common/components/comwell_app_bar.dart';
import 'package:comwell_key_app/routing/app_routes.dart';
import 'package:comwell_key_app/up_sales/cubit/up_sales_cubit.dart';
import 'package:comwell_key_app/up_sales/cubit/up_sales_state.dart';
import 'package:comwell_key_app/up_sales/models/addon_upgrade.dart';
import 'package:comwell_key_app/up_sales/models/room_upgrade.dart';
import 'package:comwell_key_app/themes/light_theme.dart';
import 'package:comwell_key_app/utils/l10n_utils.dart';
import 'package:comwell_key_app/utils/urls.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';
import 'package:slider_button/slider_button.dart';
import 'package:url_launcher/url_launcher.dart';

class UpSaleConfirmationPage extends StatelessWidget {
  final List<AddOnUpgrade> selectedUpSales;
  final RoomUpgrade? selectedRoomUpgrade;
  final int extrasTotalPrice;
  const UpSaleConfirmationPage(
      {super.key,
      required this.selectedUpSales,
      required this.extrasTotalPrice,
      this.selectedRoomUpgrade});

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return BlocBuilder<UpSalesCubit, UpSalesState>(
      builder: (context, state) {
        final cubit = context.read<UpSalesCubit>();
        final width = MediaQuery.of(context).size.width;

        return Scaffold(
          appBar: const ComwellAppBar(),
          backgroundColor: Theme.of(context).colorScheme.surface,
          body: Padding(
            padding:
                const EdgeInsets.symmetric(horizontal: 20.0, vertical: 24.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(height: 8),
                Text(
                  context.strings.up_sales_confirmation_title,
                  style: theme.textTheme.headlineLarge,
                ),
                const SizedBox(height: 32),
                if (selectedUpSales.isEmpty && selectedRoomUpgrade == null)
                  Text(context.strings.up_sales_confirmation_no_up_sales,
                      style: theme.textTheme.bodyMedium),
                if (selectedUpSales.isNotEmpty || selectedRoomUpgrade != null) ...[
                  if (selectedRoomUpgrade != null) ...[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(selectedRoomUpgrade!.name,
                            style: theme.textTheme.bodyMedium),
                        Text(selectedRoomUpgrade!.price.toString(),
                            style: theme.textTheme.bodyMedium),
                      ],
                    ),
                  ],
                  ListView.separated(
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    separatorBuilder: (_, __) => const SizedBox(height: 8),
                    itemCount: selectedUpSales.length,
                    itemBuilder: (context, index) {
                      return Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Expanded(
                            child: Text(
                              selectedUpSales[index].name +
                                  (selectedUpSales[index].quantity > 1 ? ' x${selectedUpSales[index].quantity}' : ''),
                              style: theme.textTheme.bodyMedium,
                            ),
                          ),
                          Text(
                            (selectedUpSales[index].price * selectedUpSales[index].quantity).toString(),
                            style: theme.textTheme.bodyMedium,
                          ),
                        ],
                      );
                    },
                  ),
                  const Divider(color: colorDivider),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(context.strings.total_charge,
                          style: theme.textTheme.bodyMedium),
                      Text(context.strings.total_charge_value(extrasTotalPrice.toString())),
                    ],
                  ),
                  const SizedBox(height: 16),
                ],
                Row(
                  children: [
                    Checkbox(
                      value: state.termsAccepted,
                      onChanged: (_) => cubit.toggleTermsAccepted(),
                      side: const BorderSide(color: colorDivider),
                      visualDensity: VisualDensity.compact,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(4),
                      ),
                      activeColor: sandColor[80],
                    ),
                    Text(context.strings.approve_conditions_title,
                        style: theme.textTheme.bodySmall?.copyWith(
                          color: colorHeadlineText,
                        )),
                    GestureDetector(
                      onTap: () {
                        launchUrl(Uri.parse(ComwellUrls.termsAndConditions));
                      },
                      child: Text(
                        context.strings.approve_conditions_subtitle,
                        style: theme.textTheme.bodySmall?.copyWith(
                          color: sandColor,
                          decoration: TextDecoration.underline,
                          decorationColor: sandColor,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          bottomNavigationBar: Padding(
            padding:
                const EdgeInsets.symmetric(horizontal: 16.0, vertical: 24.0),
            child: SliderButton(
              backgroundColor: sandColor,
              disable: !state.termsAccepted,
              vibrationFlag: true,
              width: width - 40,
              buttonSize: 58,
              icon: state.termsAccepted
                  ? Icon(Icons.chevron_right,
                      size: 32,
                      color: Theme.of(context).colorScheme.onSurface)
                  : null,
              action: () async {
                context.push(AppRoutes.upSalesProcessing,
                    extra: [selectedUpSales, selectedRoomUpgrade]);

                return true;
              },
              label: Center(
                  child: Text(context.strings.add_to_booking,
                      style: theme.textTheme.headlineSmall
                          ?.copyWith(color: Colors.white))),
            ),
          ),
        );
      },
    );
  }
}