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

import '../blocs/scan_history_detail_bloc.dart';
import '../viewmodels/scan_history_detail_viewmodel.dart';


class ScanHistoryDetailPage extends StatelessWidget {
  final String passId;
  const ScanHistoryDetailPage({super.key, required this.passId});

  TextStyle _headerStyle() => const TextStyle(
    fontFamily: 'Poppins',
    fontWeight: FontWeight.w600,
    fontSize: 24,
    height: 1.0,
  );

  TextStyle _labelStyle() => const TextStyle(
    fontFamily: 'Poppins',
    fontWeight: FontWeight.w500,
    fontSize: 14,
    color: Color(0xFF9E9E9E),
  );

  TextStyle _valueStyle() => const TextStyle(
    fontFamily: 'Poppins',
    fontWeight: FontWeight.w400,
    fontSize: 12,
    color: Colors.black,
  );

  Widget _twoColumnRow(String leftLabel, String leftValue, String rightLabel, String rightValue) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Row(
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(leftLabel, style: _labelStyle()),
                const SizedBox(height: 6),
                Text(leftValue, style: _valueStyle()),
              ],
            ),
          ),
          SizedBox(width: 20,),
          Expanded(
            flex: 2,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(rightLabel, style: _labelStyle()),
                const SizedBox(height: 6),
                Text(rightValue, style: _valueStyle()),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _divider() => const Divider(color: Color(0xFFDDDDDD), height: 20, thickness: 1);

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => ScanHistoryDetailBloc()..add(LoadScanHistoryDetail(passId)),
      child: Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
          child: BlocBuilder<ScanHistoryDetailBloc, ScanHistoryDetailState>(
            builder: (context, state) {
              if (state is ScanHistoryDetailLoading) {
                return const Center(child: CircularProgressIndicator());
              }
              if (state is ScanHistoryDetailLoaded) {
                final vm = PassDetailViewModel.fromMap(state.data);
                return Column(
                  children: [
                    // ======= HEADER =======
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 14.0),
                      child: Row(
                        children: [
                          GestureDetector(
                            // onTap: () => Navigator.pop(context),
                            child: Container(
                              width: 44,
                              height: 44,
                              decoration: const BoxDecoration(
                                color: Color(0xFFF06969),
                                shape: BoxShape.circle,
                              ),
                              child: const Icon(Icons.arrow_back, color: Colors.white),
                            ),
                          ),
                          const SizedBox(width: 12),
                          Expanded(
                            child: Center(
                              child: Text(
                                '#${vm.displayPassId}',
                                style: const TextStyle(
                                  fontFamily: 'Poppins',
                                  fontWeight: FontWeight.w700,
                                  fontSize: 28,
                                ),
                              ),
                            ),
                          ),
                          const SizedBox(width: 12),
                          Container(
                            width: 24,
                            height: 24,
                            decoration: BoxDecoration(
                              border: Border.all(color: const Color(0xFFF06969), width: 2),
                              shape: BoxShape.circle,
                            ),
                            child: const Icon(Icons.person_outline, size: 16, color: Color(0xFFF06969)),
                          ),
                        ],
                      ),
                    ),

                    // ======= BODY =======
                    Expanded(
                      child: SingleChildScrollView(
                        padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 8.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            // Pass Summary
                            Text('Pass Summary', style: _headerStyle()),
                            _doubleDivider(),
                            _twoColumnRow('Card Type', vm.cardType, 'Validity', vm.validity),

                            const SizedBox(height: 16),
                            Text('Customer Details', style: _headerStyle()),
                            _doubleDivider(),
                            _twoColumnRow('Customer Name', vm.customerName, 'Phone', vm.phone),
                            _divider(),
                            Text('Email', style: _labelStyle()),
                            const SizedBox(height: 6),
                            Text(vm.email, style: _valueStyle()),

                            const SizedBox(height: 16),
                            Text('Attraction Details', style: _headerStyle()),
                            _doubleDivider(),
                            _twoColumnRow('City', vm.city, 'Attraction Name', vm.attractionName),

                            const SizedBox(height: 60),
                          ],
                        ),
                      ),
                    ),
                  ],
                );
              }

              if (state is ScanHistoryDetailError) {
                return Center(child: Text(state.message));
              }

              return const SizedBox.shrink();
            },
          ),
        ),
      ),
    );
  }
  Widget _doubleDivider() {
    return Row(
      children: [
        Expanded(flex:1 ,child: _divider()),
        const SizedBox(width: 20),
        Expanded(flex:2 ,child: _divider()),
      ],
    );
  }



}



