import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../data/models/whatsapp_status_model.dart';
import '../cubit/dashboard_cubit.dart';

class WhatsAppView extends StatelessWidget {
  final WhatsAppStatusModel? status;
  final VoidCallback onRefresh;

  const WhatsAppView({
    super.key,
    required this.status,
    required this.onRefresh,
  });

  // English: Show a confirmation dialog before disconnecting.
  // Arabic: عرض مربع حوار تأكيدي قبل قطع الاتصال لتجنب الإجراء المفاجئ.
  void _showDisconnectDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (dialogContext) {
        return AlertDialog(
          backgroundColor: const Color(0xFF15102A),
          title: const Text('قطع اتصال الواتساب', style: TextStyle(color: Colors.white)),
          content: const Text(
            'هل أنت متأكد من رغبتك في قطع الاتصال؟ سيؤدي ذلك إلى تعطيل روبوت خدمة العملاء والردود التلقائية.',
            style: TextStyle(color: Colors.white70),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(dialogContext),
              child: const Text('إلغاء', style: TextStyle(color: Colors.white60)),
            ),
            TextButton(
              onPressed: () {
                Navigator.pop(dialogContext);
                // English: Dispatch disconnectWhatsApp command to DashboardCubit.
                // Arabic: استدعاء أمر قطع اتصال الواتساب في الكيوبيت.
                context.read<DashboardCubit>().disconnectWhatsApp();
              },
              child: const Text('نعم، اقطع الاتصال', style: TextStyle(color: Colors.redAccent)),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    final session = status;

    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '📱 إعدادات اتصال الواتساب',
            style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 8),
          const Text(
            'اربط حسابك مع بوابة واتساب التابعة لنظام نبيه لتفعيل الردود التلقائية والتحقق.',
            style: TextStyle(color: Colors.white60, fontSize: 13),
          ),
          const SizedBox(height: 24),

          // English: Display WhatsApp connection card containing session and status.
          // Arabic: عرض بطاقة اتصال الواتساب التي تحتوي على الجلسة والحالة.
          Container(
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: const Color(0xFF15102A),
              borderRadius: BorderRadius.circular(16),
              border: Border.all(color: Colors.white.withOpacity(0.05)),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text(
                      'حالة الجلسة الحالية',
                      style: TextStyle(color: Colors.white70, fontSize: 14),
                    ),
                    _buildStatusBadge(session?.status ?? 'disconnected'),
                  ],
                ),
                const Divider(color: Colors.white10, height: 24),
                _buildRow('اسم الجلسة', session?.name ?? 'WhatsApp Team'),
                _buildRow('مفتاح التعريف', session?.sessionKey ?? 'لا يوجد'),
                if (session?.phone != null) _buildRow('رقم الهاتف المرتبط', session!.phone!),
                const SizedBox(height: 24),

                // English: Render different elements depending on connection status.
                // Arabic: عرض عناصر مختلفة حسب حالة الاتصال.
                if (session == null || session.status == 'disconnected') ...[
                  const Text(
                    '⚠️ الحساب غير متصل. يرجى توليد رمز الاستجابة السريعة (QR Code) ومسحه ضوئياً لتفعيل الاتصال.',
                    style: TextStyle(color: Colors.orangeAccent, fontSize: 13),
                  ),
                  const SizedBox(height: 20),
                  ElevatedButton.icon(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.purpleAccent,
                      padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 24),
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                    ),
                    icon: const Icon(Icons.qr_code_scanner),
                    label: const Text('توليد رمز الاستجابة QR'),
                    onPressed: () {
                      // English: Dispatch requestWhatsAppQr command to DashboardCubit.
                      // Arabic: استدعاء أمر طلب رمز الاستجابة في الكيوبيت.
                      context.read<DashboardCubit>().requestWhatsAppQr();
                    },
                  ),
                ] else if (session.status == 'waiting_qr') ...[
                  const Text(
                    '🔍 رمز الاستجابة جاهز للمسح. يرجى فتح الواتساب في هاتفك واختيار "الأجهزة المرتبطة" ثم مسح الرمز أدناه:',
                    style: TextStyle(color: Colors.yellowAccent, fontSize: 13),
                  ),
                  const SizedBox(height: 20),
                  Center(
                    child: Container(
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(12),
                      ),
                      child: const Icon(Icons.qr_code_2, size: 200, color: Colors.black),
                    ),
                  ),
                  const SizedBox(height: 20),
                ] else if (session.status == 'connected') ...[
                  const Text(
                    '✅ الحساب متصل وجاهز للعمل. الردود التلقائية وروبوت خدمة العملاء نشطان الآن.',
                    style: TextStyle(color: Colors.greenAccent, fontSize: 13),
                  ),
                  const SizedBox(height: 20),
                  OutlinedButton.icon(
                    style: OutlinedButton.styleFrom(
                      foregroundColor: Colors.redAccent,
                      side: const BorderSide(color: Colors.redAccent),
                      padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 24),
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                    ),
                    icon: const Icon(Icons.link_off),
                    label: const Text('قطع الاتصال'),
                    onPressed: () => _showDisconnectDialog(context),
                  ),
                ],
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildRow(String label, String value) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 6.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(label, style: const TextStyle(color: Colors.white70, fontSize: 13)),
          Text(value, style: const TextStyle(color: Colors.white, fontSize: 13, fontWeight: FontWeight.bold)),
        ],
      ),
    );
  }

  Widget _buildStatusBadge(String status) {
    Color color;
    String text;
    switch (status) {
      case 'connected':
        color = Colors.green;
        text = 'متصل';
        break;
      case 'waiting_qr':
        color = Colors.orange;
        text = 'بانتظار المسح';
        break;
      case 'connecting':
        color = Colors.blue;
        text = 'جاري الاتصال';
        break;
      default:
        color = Colors.red;
        text = 'غير متصل';
        break;
    }
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
      decoration: BoxDecoration(
        color: color.withOpacity(0.2),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: color),
      ),
      child: Text(text, style: TextStyle(color: color, fontSize: 11, fontWeight: FontWeight.bold)),
    );
  }
}