// SupportWidget.jsx — لوحةُ الدعم الجانبية: محادثةٌ مع مساعدِ الدعم + تذكرةٌ للفريق
//
// ⚠️ **مساعدُ الدعم يجيبُ عمّا يعرفُه فقط.** إجاباتُه مكتوبةٌ هنا في `KB` — ليست
//    مولَّدةً ولا متّصلةً بنموذجٍ لغويّ. فإن لم يجدْ جواباً قال ذلك صراحةً وفتح
//    التذكرة، ولم يخترعْ جواباً. (لوصلِه بمساعدٍ حقيقيٍّ لاحقاً: بدِّلْ `askSupport`
//    وحدَها بنداءِ الخادم — بقيةُ اللوحةِ لا تتغيّر.)

/* ── قاعدةُ معرفةِ الدعم: كلماتٌ مفتاحيةٌ ← جواب ──
   ⚠️ **لغةُ الموقع فصحى.** كلُّ ما يقرؤه المستخدمُ هنا مكتوبٌ بالعربية الفصيحة،
   ولا تُستعمَلُ العاميّةُ في نصوصِ الواجهةِ ألبتّة. */
const SUPPORT_KB = [
  {
    k: ['اشتراك', 'الباقة', 'باقة', 'ترقية', 'خطة', 'الأسعار', 'سعر', 'دفع', 'تجديد'],
    a: 'تجد الباقات وأسعارها في صفحة **الاشتراكات** من القائمة الجانبية، ويمكنك تغيير باقتك أو إلغاؤها من الصفحة نفسها في أي وقت.',
  },
  {
    k: ['كريدت', 'رصيد', 'نقاط', 'استهلاك', 'انتهى'],
    a: 'يُخصم من رصيدك كريدت واحد عن كل سؤال تُرسله إلى المساعد القانوني، ويتجدد الرصيد مع باقتك. يظهر رصيدك الحالي في أعلى الصفحة، ويمكنك زيادته من صفحة **الاشتراكات**.',
  },
  {
    k: ['بحث', 'أبحث', 'محرك', 'نظام', 'مادة', 'لائحة', 'أجد'],
    a: 'استخدم **محرك البحث القانوني** من القائمة، واكتب رقم المادة أو جزءاً من نصها أو اسم النظام. تظهر النتائج مقرونةً بمصدرها الرسمي وتاريخ آخر تعديل عليها.',
  },
  {
    k: ['ملف', 'ملفاتي', 'رفع', 'أرفع', 'عقد', 'مستند', 'pdf'],
    a: 'من **ملفاتي** يمكنك رفع عقودك ومستنداتك وتنظيمها في مجلدات، ثم سؤال المساعد عن أي ملف منها.',
  },
  {
    k: ['حساب', 'بياناتي', 'الاسم', 'الجوال', 'صورة', 'الملف الشخصي', 'تعديل بياناتي'],
    a: 'تُعدَّل بياناتك من **الملف الشخصي**: اضغط صورتك في أعلى الصفحة، ثم اختر «الملف الشخصي».',
  },
  {
    k: ['كلمة المرور', 'كلمة السر', 'نسيت', 'استعادة'],
    a: 'من شاشة تسجيل الدخول اضغط **«نسيت كلمة المرور؟»**، وسيصلك رابط الاستعادة على بريدك الإلكتروني.',
  },
  {
    k: ['خروج', 'تسجيل الخروج'],
    a: 'لتسجيل الخروج: اضغط صورتك في أعلى الصفحة، ثم اختر **تسجيل الخروج**.',
  },
  {
    k: ['محامي', 'محامين', 'استشارة', 'جلسة', 'حجز'],
    a: 'خدمة التواصل مع المحامين مؤجَّلة ولا تتوفر في هذه النسخة. المتاح الآن: المساعد القانوني، ومحرك البحث، وملفاتي.',
  },
  {
    k: ['خطأ', 'مشكلة', 'لا يعمل', 'عطل', 'بطيء', 'توقف'],
    a: 'أعِد تحديث الصفحة أولاً. فإن استمرت المشكلة، افتح تبويب **«تذكرة دعم»** أعلاه واكتب تفاصيلها، ليطّلع عليها الفريق.',
  },
];

const SUPPORT_GREETING =
  'أهلاً بك 👋 أنا مساعد الدعم، وأجيب عن أسئلة استخدام المنصة: الاشتراكات، والكريدت، والبحث، والملفات، والحساب.\n\nتفضّل بسؤالك. وإن كان خارج هذا النطاق، فتحتُ لك تذكرةً لدى الفريق.';

const SUPPORT_UNKNOWN =
  'ليست لديّ إجابة مؤكدة عن هذا السؤال، ولن أخمّن.\n\nافتح تبويب **«تذكرة دعم»** أعلاه واكتب سؤالك ليجيبك الفريق. أو اسألني عن: الاشتراكات · الكريدت · البحث · الملفات · الحساب.';

/** جوابُ مساعدِ الدعم — مطابقةُ كلماتٍ مفتاحية، بلا توليد. */
function askSupport(text) {
  const q = (text || '').toLowerCase();
  let best = null, bestScore = 0;
  for (const item of SUPPORT_KB) {
    const score = item.k.reduce((n, w) => (q.includes(w) ? n + 1 : n), 0);
    if (score > bestScore) { best = item; bestScore = score; }
  }
  return bestScore > 0 ? best.a : SUPPORT_UNKNOWN;
}

/** عرضٌ بسيطٌ لـ**التغليظ** داخل نصّ الرسالة. */
function SupportText({ text }) {
  const parts = String(text).split(/(\*\*[^*]+\*\*)/g);
  return (
    <span style={{ whiteSpace: 'pre-wrap' }}>
      {parts.map((p, i) =>
        p.startsWith('**') && p.endsWith('**')
          ? <strong key={i}>{p.slice(2, -2)}</strong>
          : <React.Fragment key={i}>{p}</React.Fragment>
      )}
    </span>
  );
}

function SupportWidget() {
  const [open, setOpen] = React.useState(false);
  const [tab, setTab] = React.useState('chat');       // chat | ticket
  const [form, setForm] = React.useState({ title: '', msg: '' });
  const [sent, setSent] = React.useState(false);
  const [hov, setHov] = React.useState(false);
  const [msgs, setMsgs] = React.useState([{ role: 'bot', text: SUPPORT_GREETING }]);
  const [draft, setDraft] = React.useState('');
  const [typing, setTyping] = React.useState(false);
  const endRef = React.useRef(null);

  // يفتحُها بندُ «الدعم الفني» في القائمة الجانبية
  React.useEffect(() => {
    const openChat = () => { setTab('chat'); setOpen(true); };
    window.addEventListener('lexa:open-support', openChat);
    return () => window.removeEventListener('lexa:open-support', openChat);
  }, []);

  React.useEffect(() => {
    if (open && tab === 'chat') endRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [msgs, open, tab, typing]);

  const sendChat = () => {
    const text = draft.trim();
    if (!text || typing) return;
    setMsgs(m => [...m, { role: 'me', text }]);
    setDraft('');
    setTyping(true);
    // تأخيرٌ قصيرٌ ليقرأ المستخدمُ سؤالَه قبل ظهورِ الجواب
    setTimeout(() => {
      setMsgs(m => [...m, { role: 'bot', text: askSupport(text) }]);
      setTyping(false);
    }, 450);
  };

  const sendTicket = () => {
    if (!form.title || !form.msg) return;
    setSent(true);
    setTimeout(() => { setSent(false); setForm({ title: '', msg: '' }); }, 2500);
  };

  const PANEL_W = 380;

  return (
    <>
      {/* ── اللوحةُ الجانبية ── */}
      {open && (
        <div style={{
          position: 'fixed', top: 0, bottom: 0, left: 0, zIndex: 8500,
          width: PANEL_W, maxWidth: '92vw',
          background: sanadColors.bgElevated,
          boxShadow: '0 0 0 1px rgba(239,231,214,0.10), 8px 0 40px rgba(0,0,0,0.16)',
          direction: 'rtl', fontFamily: sanadFonts.arabic,
          display: 'flex', flexDirection: 'column',
          animation: 'supportSlideIn 240ms cubic-bezier(0.16,1,0.3,1) both',
        }}>
          {/* الرأس */}
          <div style={{ background: sanadColors.bgDark, padding: '16px 18px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, color: sanadColors.textInverted }}>الدعم الفني</div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.55)', marginTop: 2 }}>مساعد الدعم — أسئلة استخدام المنصة</div>
            </div>
            <button onClick={() => setOpen(false)} aria-label="إغلاق" style={{ width: 26, height: 26, borderRadius: '50%', border: 'none', background: 'rgba(255,255,255,0.10)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,0.7)', flexShrink: 0 }}>
              <svg width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
            </button>
          </div>

          {/* التبويبات */}
          <div style={{ display: 'flex', borderBottom: `1px solid ${sanadColors.border}`, flexShrink: 0 }}>
            {[['chat', 'محادثة'], ['ticket', 'تذكرة دعم']].map(([id, label]) => (
              <button key={id} onClick={() => { setTab(id); setSent(false); }} style={{
                flex: 1, padding: '11px 0', border: 'none', background: 'transparent', cursor: 'pointer',
                fontFamily: sanadFonts.arabic, fontSize: 13, fontWeight: tab === id ? 600 : 400,
                color: tab === id ? sanadColors.brand : sanadColors.textMuted,
                borderBottom: tab === id ? `2px solid ${sanadColors.brand}` : '2px solid transparent',
                transition: 'all 150ms',
              }}>{label}</button>
            ))}
          </div>

          {tab === 'chat' ? (
            <>
              {/* الرسائل */}
              <div style={{ flex: 1, overflowY: 'auto', padding: '16px 14px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {msgs.map((m, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: m.role === 'me' ? 'flex-start' : 'flex-end' }}>
                    <div style={{
                      maxWidth: '86%', padding: '10px 13px', borderRadius: 14,
                      background: m.role === 'me' ? sanadColors.brand : sanadColors.bgSubtle,
                      color: m.role === 'me' ? '#fff' : sanadColors.textPrimary,
                      fontSize: 13, lineHeight: 1.85,
                      borderBottomRightRadius: m.role === 'me' ? 14 : 4,
                      borderBottomLeftRadius: m.role === 'me' ? 4 : 14,
                    }}>
                      <SupportText text={m.text} />
                    </div>
                  </div>
                ))}
                {typing && (
                  <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                    <div style={{ padding: '10px 14px', borderRadius: 14, background: sanadColors.bgSubtle, color: sanadColors.textMuted, fontSize: 13 }}>…</div>
                  </div>
                )}
                <div ref={endRef} />
              </div>

              {/* الكتابة */}
              <div style={{ borderTop: `1px solid ${sanadColors.border}`, padding: 12, display: 'flex', gap: 8, flexShrink: 0 }}>
                <input
                  value={draft}
                  onChange={e => setDraft(e.target.value)}
                  onKeyDown={e => { if (e.key === 'Enter') sendChat(); }}
                  placeholder="اكتب سؤالك…"
                  style={{ flex: 1, padding: '10px 12px', borderRadius: 10, border: `1px solid ${sanadColors.border}`, background: sanadColors.bg, fontFamily: sanadFonts.arabic, fontSize: 13, color: sanadColors.textPrimary, outline: 'none', direction: 'rtl' }}
                  onFocus={e => e.target.style.border = `1px solid ${sanadColors.brand}`}
                  onBlur={e => e.target.style.border = `1px solid ${sanadColors.border}`}
                />
                <button onClick={sendChat} disabled={!draft.trim() || typing} aria-label="إرسال" style={{
                  width: 40, height: 40, borderRadius: 10, border: 'none', flexShrink: 0,
                  cursor: draft.trim() && !typing ? 'pointer' : 'not-allowed',
                  background: draft.trim() && !typing ? sanadColors.brand : sanadColors.bgSubtle,
                  color: draft.trim() && !typing ? '#fff' : sanadColors.textMuted,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 150ms',
                }}>
                  <svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><line x1="19" y1="12" x2="5" y2="12" /><polyline points="12 5 5 12 12 19" /></svg>
                </button>
              </div>
            </>
          ) : (
            /* تذكرةُ الدعم */
            <div style={{ flex: 1, overflowY: 'auto', padding: 18 }}>
              {sent ? (
                <div style={{ textAlign: 'center', padding: '20px 0' }}>
                  <div style={{ fontSize: 32, marginBottom: 10 }}>✓</div>
                  <p style={{ fontSize: 14, fontWeight: 600, color: sanadColors.textPrimary, marginBottom: 4 }}>تم الإرسال!</p>
                  <p style={{ fontSize: 12, color: sanadColors.textMuted }}>سنرد عليك في أقرب وقت</p>
                </div>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <div>
                    <div style={{ fontSize: 11, color: sanadColors.textMuted, marginBottom: 5 }}>وصف المشكلة</div>
                    <input value={form.title} onChange={e => setForm(f => ({ ...f, title: e.target.value }))}
                      placeholder="ما هي المشكلة التي تواجهها؟"
                      style={{ width: '100%', padding: '9px 11px', borderRadius: 8, border: `1px solid ${sanadColors.border}`, background: sanadColors.bg, fontFamily: sanadFonts.arabic, fontSize: 13, color: sanadColors.textPrimary, outline: 'none', direction: 'rtl' }}
                      onFocus={e => e.target.style.border = `1px solid ${sanadColors.brand}`}
                      onBlur={e => e.target.style.border = `1px solid ${sanadColors.border}`}
                    />
                  </div>
                  <div>
                    <div style={{ fontSize: 11, color: sanadColors.textMuted, marginBottom: 5 }}>التفاصيل</div>
                    <textarea value={form.msg} onChange={e => setForm(f => ({ ...f, msg: e.target.value }))}
                      placeholder="اشرح المشكلة بالتفصيل…" rows={5}
                      style={{ width: '100%', padding: '9px 11px', borderRadius: 8, border: `1px solid ${sanadColors.border}`, background: sanadColors.bg, fontFamily: sanadFonts.arabic, fontSize: 13, color: sanadColors.textPrimary, outline: 'none', direction: 'rtl', resize: 'none', lineHeight: 1.6 }}
                      onFocus={e => e.target.style.border = `1px solid ${sanadColors.brand}`}
                      onBlur={e => e.target.style.border = `1px solid ${sanadColors.border}`}
                    />
                  </div>
                  <button onClick={sendTicket} disabled={!form.title || !form.msg} style={{
                    padding: '10px', borderRadius: 9, border: 'none', cursor: form.title && form.msg ? 'pointer' : 'not-allowed',
                    background: form.title && form.msg ? sanadColors.brand : sanadColors.bgSubtle,
                    color: form.title && form.msg ? '#fff' : sanadColors.textMuted,
                    fontFamily: sanadFonts.arabic, fontSize: 13, fontWeight: 500, transition: 'all 150ms',
                  }}>
                    إرسال طلب الدعم
                  </button>
                </div>
              )}
            </div>
          )}
        </div>
      )}

      {/* الزرُّ العائم */}
      <button
        onClick={() => setOpen(!open)}
        onMouseEnter={() => setHov(true)}
        onMouseLeave={() => setHov(false)}
        aria-label="الدعم الفني"
        style={{
          position: 'fixed', bottom: 56, left: open ? PANEL_W + 20 : 24, zIndex: 8600,
          width: 52, height: 52, borderRadius: '50%',
          background: open ? sanadColors.textPrimary : sanadColors.brand,
          border: 'none', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: hov ? '0 6px 20px rgba(201,100,66,0.45)' : '0 4px 14px rgba(201,100,66,0.30)',
          transform: hov ? 'scale(1.07)' : 'scale(1)',
          transition: 'all 200ms ease',
        }}
      >
        {open
          ? <svg width="18" height="18" fill="none" stroke="#fff" strokeWidth="2" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
          : <svg width="18" height="18" fill="none" stroke="#fff" strokeWidth="1.8" viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" /><circle cx="12" cy="10" r="1" fill="#fff" /><circle cx="8" cy="10" r="1" fill="#fff" /><circle cx="16" cy="10" r="1" fill="#fff" /></svg>
        }
      </button>

      <style>{`@keyframes supportSlideIn { from { opacity:0; transform:translateX(-24px) } to { opacity:1; transform:none } }`}</style>
    </>
  );
}

Object.assign(window, { SupportWidget });