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 '../../../../../../application/void/void_form/void_form_bloc.dart';
import '../../../../../../common/extension/extension.dart';
import '../../../../../../common/theme/theme.dart';
import '../../../../../../common/types/void_type.dart';
import '../../../../../components/button/button.dart';
import '../../../../../components/spaces/space.dart';
import '../../../../../router/app_router.gr.dart';

class VoidSuccessLeftPanel extends StatelessWidget {
  final VoidFormState state;
  const VoidSuccessLeftPanel({super.key, required this.state});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(24),
      ),
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          Container(
            width: 120,
            height: 120,
            decoration: BoxDecoration(
              gradient: const LinearGradient(
                colors: [AppColor.secondaryLight, AppColor.secondaryDark],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
              shape: BoxShape.circle,
              boxShadow: [
                BoxShadow(
                  color: AppColor.secondaryDark.withOpacity(0.2),
                  blurRadius: 20,
                  offset: const Offset(0, 10),
                ),
              ],
            ),
            child: const Icon(
              Icons.check_rounded,
              color: Colors.white,
              size: 60,
            ),
          ),

          const SpaceHeight(16),
          Text(
            'Void Berhasil!',
            style: AppStyle.h1.copyWith(
              fontWeight: FontWeight.bold,
              color: AppColor.success,
            ),
            textAlign: TextAlign.center,
          ),
          const SpaceHeight(8),
          Text(
            state.voidType.isAll
                ? 'Seluruh pesanan telah dibatalkan dengan sukses'
                : 'Item terpilih telah dibatalkan dengan sukses',
            style: AppStyle.lg.copyWith(
              fontSize: 16,
              color: AppColor.textSecondary,
            ),
            textAlign: TextAlign.center,
          ),
          const SpaceHeight(16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Informasi Pesanan',
                  style: AppStyle.lg.copyWith(fontWeight: FontWeight.bold),
                ),
                const SpaceHeight(24),
                _buildInfoRow(
                  icon: Icons.receipt_long,
                  label: 'Order ID',
                  value: state.order.orderNumber,
                ),
                const SpaceHeight(12),
                _buildInfoRow(
                  icon: Icons.person,
                  label: 'Pemesan',
                  value: state.order.metadata['customer_name'] ?? "-",
                ),
                if (state.order.tableNumber != "") ...[
                  const SpaceHeight(12),
                  _buildInfoRow(
                    icon: Icons.table_restaurant_outlined,
                    label: 'No. Meja',
                    value: state.order.tableNumber,
                  ),
                ],
                const SpaceHeight(12),
                _buildInfoRow(
                  icon: Icons.category_outlined,
                  label: 'Tipe Void',
                  value: state.voidType.isAll
                      ? 'Seluruh Pesanan'
                      : 'Item Tertentu',
                ),
                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(16.0).copyWith(bottom: 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.read<VoidFormBloc>().add(
                      const VoidFormEvent.clearState(),
                    );
                    context.router.replaceAll([const MainRoute()]);
                  },
                  label: "Kembali",
                ),
              ),
              const SpaceWidth(16),
              Expanded(
                child: AppElevatedButton.filled(
                  onPressed: () {
                    context.read<PrintStruckBloc>().add(
                      PrintStruckEvent.voided(
                        state.order.copyWith(
                          orderItems: state.voidType.isAll
                              ? state.order.orderItems
                              : state.voidItems,
                          subtotal: state.voidType.isAll
                              ? state.order.totalAmount
                              : state.totalPriceVoid,
                          totalAmount: state.voidType.isAll
                              ? state.order.totalAmount
                              : state.totalPriceVoid,
                        ),
                      ),
                    );
                  },
                  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),
        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
          Expanded(
            child: Text(
              value,
              style: AppStyle.md.copyWith(
                fontWeight: FontWeight.bold,
                color: valueColor ?? AppColor.primary,
              ),
              textAlign: TextAlign.right,
            ),
          ),
      ],
    );
  }
}
