import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import '../../../core/utils/app_snackbar.dart';
import '../controllers/payment_receipt_controller.dart';

class PaymentReceiptView extends StatelessWidget {
  const PaymentReceiptView({super.key});

  @override
  Widget build(BuildContext context) {
    final controller = Get.put(PaymentReceiptController());
    final isDark = Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      backgroundColor:
          isDark ? const Color(0xFF121212) : const Color(0xFFF5F7FA),
      appBar: AppBar(
        title: const Text('إتمام الدفع',
            style: TextStyle(fontWeight: FontWeight.bold)),
        backgroundColor:
            isDark ? const Color(0xFF1E1E2E) : const Color(0xFF0F4C81),
        foregroundColor: Colors.white,
        elevation: 0,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // Payment Info Card
            Obx(() => Container(
                  padding: const EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    color: isDark ? const Color(0xFF1E1E2E) : Colors.white,
                    borderRadius: BorderRadius.circular(16),
                    border: Border.all(
                        color: isDark ? Colors.white10 : Colors.grey.shade200),
                  ),
                  child: Column(
                    children: [
                      const Text('تفاصيل التحويل المطلوب',
                          style: TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 16)),
                      const SizedBox(height: 16),
                      _buildInfoRow('الاسم المستعار (CliQ)',
                          controller.payment['cliq_alias'] ?? '', isDark,
                          isHighlight: true),
                      const Divider(height: 24),
                      _buildInfoRow(
                          'المبلغ المطلوب',
                          '${controller.payment['amount_jod'] ?? 0} JOD',
                          isDark),
                    ],
                  ),
                )),

            const SizedBox(height: 24),
            Text('الخطوات التالية:',
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                    color: isDark ? Colors.white : Colors.black87)),
            const SizedBox(height: 12),
            _buildStepRow('1',
                'افتح تطبيق البنك أو المحفظة الإلكترونية الخاصة بك.', isDark),
            const SizedBox(height: 8),
            _buildStepRow(
                '2', 'اختر خدمة "كليك" (CliQ) للتحويل الفوري.', isDark),
            const SizedBox(height: 8),
            _buildStepRow(
                '3', 'قم بالتحويل للاسم المستعار الموضح أعلاه.', isDark),
            const SizedBox(height: 8),
            _buildStepRow(
                '4',
                'بعد إتمام العملية، انسخ "رقم المرجع" من رسالة البنك أو الإشعار والصقه هنا.',
                isDark),
            const SizedBox(height: 24),

            // Reference Number Input Area
            Container(
              padding: const EdgeInsets.all(20),
              decoration: BoxDecoration(
                color: isDark ? const Color(0xFF1E1E2E) : Colors.white,
                borderRadius: BorderRadius.circular(16),
                border: Border.all(
                    color: isDark ? Colors.white10 : Colors.grey.shade200),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text('رقم المرجع أو نص الرسالة كاملة',
                      style: TextStyle(fontWeight: FontWeight.bold)),
                  const SizedBox(height: 12),
                  TextField(
                    controller: controller.referenceController,
                    maxLines: 3,
                    minLines: 1,
                    decoration: InputDecoration(
                      hintText:
                          'ألصق رقم المرجع أو نص الرسالة الواردة من البنك هنا...',
                      hintStyle: TextStyle(
                          color: isDark ? Colors.white38 : Colors.grey,
                          fontSize: 13),
                      filled: true,
                      fillColor: isDark
                          ? const Color(0xFF1A1A2E)
                          : const Color(0xFFF1F5F9),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(12),
                        borderSide: BorderSide.none,
                      ),
                      contentPadding: const EdgeInsets.symmetric(
                          horizontal: 16, vertical: 16),
                    ),
                    keyboardType: TextInputType.multiline,
                    style: TextStyle(
                      fontFamily: 'monospace',
                      fontSize: 14,
                      color: isDark ? Colors.white : Colors.black87,
                    ),
                  ),
                ],
              ),
            ),

            const SizedBox(height: 32),

            // Submit Button
            SizedBox(
              height: 52,
              child: Obx(() => ElevatedButton.icon(
                    onPressed: controller.isUploading.value
                        ? null
                        : () => controller.submitReference(),
                    style: ElevatedButton.styleFrom(
                      backgroundColor: const Color(0xFF0F4C81),
                      foregroundColor: Colors.white,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12)),
                      disabledBackgroundColor:
                          isDark ? Colors.white10 : Colors.grey.shade300,
                    ),
                    icon: controller.isUploading.value
                        ? const SizedBox(
                            width: 20,
                            height: 20,
                            child: CircularProgressIndicator(
                                strokeWidth: 2, color: Colors.white))
                        : const Icon(Icons.check_circle_outline),
                    label: Text(
                      controller.isUploading.value
                          ? 'جاري التحقق...'
                          : 'تأكيد الدفع',
                      style: const TextStyle(
                          fontWeight: FontWeight.bold, fontSize: 16),
                    ),
                  )),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildStepRow(String number, String text, bool isDark) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: 24,
          height: 24,
          decoration: BoxDecoration(
            color: const Color(0xFF0F4C81).withOpacity(0.1),
            shape: BoxShape.circle,
          ),
          child: Center(
            child: Text(
              number,
              style: const TextStyle(
                  color: Color(0xFF0F4C81),
                  fontWeight: FontWeight.bold,
                  fontSize: 12),
            ),
          ),
        ),
        const SizedBox(width: 12),
        Expanded(
          child: Text(
            text,
            style: TextStyle(
                fontSize: 13,
                color: isDark ? Colors.white70 : Colors.grey.shade700,
                height: 1.4),
          ),
        ),
      ],
    );
  }

  Widget _buildInfoRow(String label, String value, bool isDark,
      {bool isHighlight = false}) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(label,
            style: TextStyle(
                fontSize: 13,
                color: isDark ? Colors.white70 : Colors.grey.shade600)),
        GestureDetector(
          onTap: () {
            Clipboard.setData(ClipboardData(text: value));
            AppSnackbar.showSuccess('تم النسخ', 'تم نسخ $label إلى الحافظة');
          },
          child: Container(
            padding: EdgeInsets.symmetric(
                horizontal: isHighlight ? 12 : 0,
                vertical: isHighlight ? 6 : 0),
            decoration: isHighlight
                ? BoxDecoration(
                    color: const Color(0xFF0F4C81).withOpacity(0.1),
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(
                        color: const Color(0xFF0F4C81).withOpacity(0.3)),
                  )
                : null,
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  value,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 15,
                    color: isHighlight
                        ? const Color(0xFF0F4C81)
                        : (isDark ? Colors.white : Colors.black87),
                    fontFamily: 'monospace',
                  ),
                ),
                if (isHighlight) ...[
                  const SizedBox(width: 8),
                  const Icon(Icons.copy_rounded,
                      size: 14, color: Color(0xFF0F4C81)),
                ],
              ],
            ),
          ),
        ),
      ],
    );
  }
}