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

import '../../../common/data/service_data.dart';
import '../../../common/extension/extension.dart';
import '../../../common/theme/theme.dart';
import '../../../sample/product_sample_data.dart';
import '../../components/border/dashed_border.dart';
import '../../components/button/button.dart';
import '../../components/card/service_card.dart';
import 'widgets/checkout_item.dart';
import 'widgets/merchant.dart';

@RoutePage()
class CheckoutPage extends StatelessWidget {
  const CheckoutPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Checkout')),
      bottomNavigationBar: Container(
        padding: EdgeInsets.all(AppValue.padding).copyWith(bottom: 24),
        decoration: BoxDecoration(
          color: AppColor.white,
          boxShadow: [
            BoxShadow(
              color: AppColor.black.withOpacity(0.1),
              offset: Offset(2, 0),
              blurRadius: 10,
            ),
          ],
        ),
        child: AppElevatedButton(onPressed: () {}, title: 'Pesan Sekarang'),
      ),
      body: ListView(
        children: [
          Container(
            padding: EdgeInsets.all(AppValue.padding),
            child: Column(
              children: [
                ServiceCard(service: services.first),
                SizedBox(height: 16),
                CheckoutMerchant(),
              ],
            ),
          ),
          Divider(thickness: 4, color: AppColor.borderLight),
          Container(
            padding: EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _sectionTitle('Pesananmu'),
                SizedBox(height: 16),
                CheckoutItem(product: products.first),
                CheckoutItem(product: products.first),
                Row(
                  children: [
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'Ada Tambah lagi?',
                            style: AppStyle.md.copyWith(
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                          SizedBox(height: 4),
                          Text(
                            'Kakmu bisa menambah menu lainnya, ya.',
                            style: AppStyle.md,
                          ),
                        ],
                      ),
                    ),
                    SizedBox(width: 12),
                    AppOutlineButton(
                      width: 100,
                      onPressed: () {},
                      title: '+ Tambah',
                    ),
                  ],
                ),
              ],
            ),
          ),
          Divider(thickness: 4, color: AppColor.borderLight),
          Container(
            padding: EdgeInsets.all(AppValue.padding),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _sectionTitle('Voucher'),
                SizedBox(height: 16),
                Row(
                  children: [
                    Container(
                      padding: EdgeInsets.all(4),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(4),
                        color: AppColor.primary.withOpacity(0.1),
                      ),
                      child: Icon(
                        Icons.confirmation_number,
                        color: AppColor.primary,
                      ),
                    ),
                    SizedBox(width: 12),
                    Expanded(
                      child: Text(
                        'Kamu bisa menggunakan voucher mu disini.',
                        style: AppStyle.md,
                      ),
                    ),
                    Icon(Icons.chevron_right, color: AppColor.textSecondary),
                  ],
                ),
              ],
            ),
          ),
          Divider(thickness: 4, color: AppColor.borderLight),
          Container(
            padding: EdgeInsets.all(AppValue.padding),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _sectionTitle('Metode Pembayaran'),
                SizedBox(height: 16),
                Row(
                  children: [
                    Container(
                      padding: EdgeInsets.all(4),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(4),
                        color: AppColor.primary.withOpacity(0.1),
                      ),
                      child: Icon(Icons.wallet, color: AppColor.primary),
                    ),
                    SizedBox(width: 12),
                    Expanded(
                      child: Text(
                        'Pilih metode pembayaran disini.',
                        style: AppStyle.md,
                      ),
                    ),
                    Icon(Icons.chevron_right, color: AppColor.textSecondary),
                  ],
                ),
              ],
            ),
          ),
          Divider(thickness: 4, color: AppColor.borderLight),
          Container(
            padding: EdgeInsets.all(AppValue.padding),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _sectionTitle('Rincian Pembayaran'),
                SizedBox(height: 16),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      'Harga',
                      style: AppStyle.md.copyWith(fontWeight: FontWeight.w500),
                    ),
                    Text(
                      "40000".currencyFormatRp,
                      style: AppStyle.md.copyWith(fontWeight: FontWeight.w500),
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 12),
                  child: DashedDivider(),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      'Total Pembayaran',
                      style: AppStyle.lg.copyWith(fontWeight: FontWeight.bold),
                    ),
                    Text(
                      "40000".currencyFormatRp,
                      style: AppStyle.lg.copyWith(fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Divider(thickness: 4, color: AppColor.borderLight),
          Container(
            padding: EdgeInsets.all(AppValue.padding),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "Kebijakan Pembatalan",
                  style: AppStyle.md.copyWith(fontWeight: FontWeight.bold),
                ),
                SizedBox(height: 4),
                Text(
                  'Kamu tidak dapat melakukan pembatalan atau perubahan apapun pada pesanan setelah melakukan pembayaran.',
                  style: AppStyle.sm,
                ),
              ],
            ),
          ),
          SizedBox(height: 40),
        ],
      ),
    );
  }

  Text _sectionTitle(String title) {
    return Text(
      title,
      style: AppStyle.xl.copyWith(fontWeight: FontWeight.bold),
    );
  }
}