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

import '../../../../../../application/printer/print_struck/print_struck_bloc.dart';
import '../../../../../../common/extension/extension.dart';
import '../../../../../../common/theme/theme.dart';
import '../../../../../../domain/order/order.dart';
import '../../../../../components/button/button.dart';
import '../../../../../components/spaces/space.dart';
import '../../../../../router/app_router.gr.dart';

class PaymentSuccessLeftPanel extends StatelessWidget {
  final Order order;
  const PaymentSuccessLeftPanel({super.key, required this.order});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(24),
      ),
      child: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                    width: double.infinity,
                    padding: const EdgeInsets.all(32.0),
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                        colors: [
                          AppColor.primary.withOpacity(0.1),
                          AppColor.primary.withOpacity(0.05),
                        ],
                      ),
                      borderRadius: const BorderRadius.vertical(
                        top: Radius.circular(24),
                      ),
                    ),
                    child: Column(
                      children: [
                        Container(
                          padding: const EdgeInsets.all(20.0),
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              begin: Alignment.topLeft,
                              end: Alignment.bottomRight,
                              colors: [
                                AppColor.primary,
                                AppColor.primary.withOpacity(0.8),
                              ],
                            ),
                            shape: BoxShape.circle,
                            boxShadow: [
                              BoxShadow(
                                color: AppColor.primary.withOpacity(0.3),
                                blurRadius: 20,
                                offset: const Offset(0, 10),
                              ),
                            ],
                          ),
                          child: const Icon(
                            Icons.check_rounded,
                            size: 48,
                            color: Colors.white,
                          ),
                        ),
                        const SpaceHeight(16),
                        Text(
                          'Pembayaran Berhasil!',
                          style: AppStyle.h4.copyWith(
                            fontWeight: FontWeight.bold,
                            color: AppColor.primary,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(24.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Informasi Pesanan',
                          style: AppStyle.lg.copyWith(
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        const SpaceHeight(24),
                        _buildInfoRow(
                          icon: Icons.person,
                          label: 'Pemesan',
                          value: order.metadata['customer_name'] ?? "-",
                        ),
                        if (order.payments.isNotEmpty) ...[
                          const SpaceHeight(12),
                          _buildInfoRow(
                            icon: Icons.wallet_outlined,
                            label: 'Metode Pembayaran',
                            value: order.payments.first.paymentMethodName,
                          ),
                        ],
                        if (order.tableNumber != "") ...[
                          const SpaceHeight(12),
                          _buildInfoRow(
                            icon: Icons.table_restaurant_outlined,
                            label: 'No. Meja',
                            value: order.tableNumber,
                          ),
                        ],
                        const SpaceHeight(12),
                        _buildInfoRow(
                          icon: Icons.access_time_rounded,
                          label: 'Waktu',
                          value: (DateTime.now()).toFormattedDateTime(),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          _buildBottomSection(context),
        ],
      ),
    );
  }

  Widget _buildBottomSection(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(24.0),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Colors.grey.shade50, Colors.white],
        ),
        borderRadius: const BorderRadius.vertical(bottom: Radius.circular(24)),
      ),
      child: Column(
        children: [
          // Action Buttons with Modern Design
          Row(
            children: [
              Expanded(
                child: AppElevatedButton.outlined(
                  onPressed: () =>
                      context.router.replaceAll([const MainRoute()]),
                  label: "Kembali",
                ),
              ),
              const SpaceWidth(16),
              Expanded(
                child: AppElevatedButton.filled(
                  onPressed: () {
                    context.read<PrintStruckBloc>().add(
                      PrintStruckEvent.payment(order),
                    );
                  },
                  label: 'Cetak Struk',
                  icon: const Icon(Icons.print_rounded, color: AppColor.white),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildInfoRow({
    required IconData icon,
    required String label,
    required String value,
    Color? valueColor,
    bool showBadge = false,
  }) {
    return Row(
      children: [
        Icon(icon, size: 18, color: AppColor.primary),
        const SizedBox(width: 12),
        Expanded(
          child: Text(
            label,
            style: AppStyle.md.copyWith(color: AppColor.textSecondary),
          ),
        ),
        if (showBadge && valueColor != null)
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
            decoration: BoxDecoration(
              color: valueColor.withOpacity(0.1),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.check_circle, size: 14, color: valueColor),
                const SizedBox(width: 4),
                Text(
                  value,
                  style: AppStyle.sm.copyWith(
                    fontWeight: FontWeight.bold,
                    color: valueColor,
                  ),
                ),
              ],
            ),
          )
        else
          Text(
            value,
            style: AppStyle.md.copyWith(
              fontWeight: FontWeight.bold,
              color: valueColor ?? AppColor.primary,
            ),
          ),
      ],
    );
  }
}
