'use client';

import { useCallback, useEffect, useRef, useState } from 'react';
import { Send, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { AnimatePresence, motion } from 'framer-motion';
import { useLanguage } from '@/contexts/LanguageContext';
import { useAuth } from '@/contexts/AuthContext';

type Message = {
  id: string;
  role: 'user' | 'assistant' | 'system';
  text: string;
  suggestions?: string[];
};

type SmartChatConfig = {
  enabled?: boolean;
  chatNameAr?: string;
  chatNameEn?: string;
  provider?: string;
};

// ─── وجه الروبوت الحديث والأنيق ─────────────────────────
const RobotFace = ({ small = false }: { small?: boolean }) => {
  return (
    <svg 
      width={small ? "28" : "38"} 
      height={small ? "28" : "38"} 
      viewBox="0 0 100 100" 
      fill="none" 
      xmlns="http://www.w3.org/2000/svg"
      className={`${small ? '' : 'drop-shadow-xl'} transition-transform duration-300 group-hover:scale-110`}
    >
      <defs>
        <linearGradient id="robotBodyGrad" x1="15" y1="30" x2="85" y2="85" gradientUnits="userSpaceOnUse">
          <stop stopColor="white" />
          <stop offset="1" stopColor="#F1F5F9" />
        </linearGradient>
        <linearGradient id="screenGrad" x1="23" y1="40" x2="77" y2="74" gradientUnits="userSpaceOnUse">
          <stop stopColor="#0F172A" />
          <stop offset="1" stopColor="#1E293B" />
        </linearGradient>
      </defs>
      
      {/* الاذنين */}
      <rect x="8" y="48" width="12" height="22" rx="5" fill="white" opacity="0.9" />
      <rect x="80" y="48" width="12" height="22" rx="5" fill="white" opacity="0.9" />
      
      {/* الهوائي */}
      <path d="M50 30 V12" stroke="white" strokeWidth="5" strokeLinecap="round" />
      <circle cx="50" cy="10" r="7" fill="#FBBF24" />
      
      {/* الرأس الأساسي */}
      <rect x="16" y="30" width="68" height="56" rx="20" fill="url(#robotBodyGrad)" />
      
      {/* الشاشة الداخلية */}
      <rect x="24" y="41" width="52" height="34" rx="10" fill="url(#screenGrad)" />
      
      {/* العيون الخضراء المضيئة */}
      <circle cx="38" cy="56" r="4" fill="#34D399" />
      <circle cx="62" cy="56" r="4" fill="#34D399" />
      
      {/* الخدود الوردية الخفيفة */}
      <ellipse cx="32" cy="65" rx="4" ry="2.5" fill="#F43F5E" opacity="0.6" />
      <ellipse cx="68" cy="65" rx="4" ry="2.5" fill="#F43F5E" opacity="0.6" />
    </svg>
  );
};

// ─── إيموجي الدور ─────────────────────────────────────────
// const roleEmoji = (r: string) => {
//   if (r === 'student') return '🎓';
//   if (r === 'doctor') return '👨‍🏫';
//   if (r === 'editor') return '✏️';
//   if (r === 'admin') return '🛡️';
//   return '👤';
// };

export const SmartChat = () => {
  const { t, language } = useLanguage();
  const isRtl = language === 'ar';
  const [open, setOpen] = useState(false);
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const [greeted, setGreeted] = useState(false);
  const [role, setRole] = useState<'guest'>('guest');
  const [config, setConfig] = useState<SmartChatConfig>({
    enabled: true,
    chatNameAr: 'مساعدك الذكي ✨',
    chatNameEn: 'Smart Assistant ✨',
    provider: 'Gemini'
  });
  const { user } = useAuth();
  const listRef = useRef<HTMLDivElement | null>(null);
  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
  // ─── Rate Limiting ────────────────────────────────────────
  const lastSentTimeRef = useRef<number>(0);
  const lastSentTextRef = useRef<string>('');
  const COOLDOWN_MS = 2000; // 2 ثوانٍ بين الرسائل

  // ─── الدور ثابت كزائر ─────────────────────
  // useEffect(() => {
  //   if (user?.role === 'student') setRole('student');
  //   else if (user?.role === 'doctor') setRole('doctor');
  //   else if (user?.role === 'admin') setRole('admin');
  //   else setRole('guest');
  // }, [user]);

  // ─── التمرير لآخر رسالة ───────────────────────────────
  useEffect(() => {
    listRef.current?.scrollTo({ top: listRef.current.scrollHeight, behavior: 'smooth' });
  }, [messages]);

  // ─── جلب الإعدادات ────────────────────────────────────
  useEffect(() => {
    let active = true;
    fetch('/api/smartchat', { cache: 'no-store' })
      .then((res) => res.json())
      .then((data) => {
        if (!active || !data || typeof data !== 'object') return;
        setConfig({
          enabled: data.enabled !== false,
          chatNameAr: typeof data.chatNameAr === 'string' && data.chatNameAr.trim() ? data.chatNameAr.trim() : 'مساعدك الذكي ✨',
          chatNameEn: typeof data.chatNameEn === 'string' && data.chatNameEn.trim() ? data.chatNameEn.trim() : 'Smart Assistant ✨',
          provider: typeof data.provider === 'string' && data.provider.trim() ? data.provider.trim() : 'Gemini'
        });
      })
      .catch(() => undefined);

    return () => { active = false; };
  }, []);

  // ─── رسالة الترحيب التلقائية عند فتح الشات ─────────────
  useEffect(() => {
    if (open && !greeted && messages.length === 0) {
      setGreeted(true);
      const welcomeText = language === 'ar'
        ? `أهلاً وسهلاً! 👋😊\nأنا مساعدك الذكي لجامعة العربية المفتوحة.\nاسألني عن أي شيء يخص الجامعة وأنا هنا لمساعدتك! 💡`
        : `Hello and welcome! 👋😊\nI'm your Smart Assistant for AAU.\nAsk me anything about the university and I'll be happy to help! 💡`;
      const welcomeMsg: Message = {
        id: 'welcome-' + Date.now(),
        role: 'assistant',
        text: welcomeText,
        suggestions: language === 'ar'
          ? ['ما هي تخصصات الجامعة؟ 🎓', 'كيف أتواصل مع الجامعة؟ 📞', 'ما هي رسوم القبول؟ 💰']
          : ['What programs are offered? 🎓', 'How to contact the university? 📞', 'What are the tuition fees? 💰']
      };
      setTimeout(() => {
        setMessages([welcomeMsg]);
      }, 400);
    }
  }, [open, greeted, messages.length, language]);

  const chatTitle = language === 'ar'
    ? (config.chatNameAr || 'مساعدك الذكي ✨')
    : (config.chatNameEn || 'Smart Assistant ✨');

  // ─── قائمة الإيموجي ────────────────────────────────────
  const emojis = ['😊', '🙂', '😄', '😃', '😀', '😉', '😍', '🥰', '🤗', '😎', '🤓', '🧐', '🤔', '😮', '😯', '😲', '😳', '🤪', '😜', '😝', '🤤', '😋', '😛', '😌', '😔', '😪', '🤤', '😴', '😷', '🤒', '🤕', '🤢', '🤮', '🤧', '🥵', '🥶', '🥴', '😵', '🤯', '🤠', '🥳', '🥸', '😎', '🤓', '🧐', '🤔', '😮', '😯', '😲', '😳', '🤪', '😜', '😝', '🤤', '😋', '😛', '😌', '😔', '😪', '🤤', '😴', '😷', '🤒', '🤕', '🤢', '🤮', '🤧', '🥵', '🥶', '🥴', '😵', '🤯', '🤠', '🥳', '🥸'];

  // ─── اختيار إيموجي عشوائي ──────────────────────────────
  const getRandomEmoji = (): string => {
    return emojis[Math.floor(Math.random() * emojis.length)];
  };

  // ─── إرسال الرسالة ────────────────────────────────────
  const sendMessage = useCallback(async (overrideText?: string) => {
    const text = (overrideText ?? input).trim();
    if (!text) return;

    // إضافة إيموجي عشوائي إلى نهاية السؤال
    const textWithEmoji = text + ' ' + getRandomEmoji();

    // ── #5: Rate Limiting ── منع الإرسال المتكرر ──────────
    const now = Date.now();
    const timeSinceLast = now - lastSentTimeRef.current;

    if (timeSinceLast < COOLDOWN_MS) {
      const remaining = Math.ceil((COOLDOWN_MS - timeSinceLast) / 1000);
      const cooldownMsg: Message = {
        id: 'cooldown-' + now,
        role: 'system',
        text: language === 'ar'
          ? `⏳ انتظر ${remaining} ثانية قبل إرسال رسالة أخرى`
          : `⏳ Please wait ${remaining}s before sending another message`
      };
      setMessages((prev) => [...prev, cooldownMsg]);
      return;
    }

    if (textWithEmoji === lastSentTextRef.current && timeSinceLast < 8000) {
      const dupMsg: Message = {
        id: 'dup-' + now,
        role: 'system',
        text: language === 'ar'
          ? '🔁 أرسلت نفس الرسالة للتو! هل تريد سؤالاً مختلفاً؟'
          : '🔁 You just sent the same message! Did you mean something different?'
      };
      setMessages((prev) => [...prev, dupMsg]);
      return;
    }

    lastSentTimeRef.current = now;
    lastSentTextRef.current = textWithEmoji;

    // ── #6: كشف لغة الإدخال تلقائياً ──────────────────────
    const detectedLang = detectInputLanguage(textWithEmoji);

    // ── فحص إذا كانت تحية أو سؤال عام ─────────────────────
    if (isGreetingOrGeneral(textWithEmoji)) {
      const reply: Message = {
        id: String(Date.now() + 1),
        role: 'assistant',
        text: getGreetingResponse(textWithEmoji, detectedLang)
      };
      setMessages((prev) => [...prev, reply]);
      setLoading(false);
      return;
    }

    // const inferred = inferRoleFromText(text);
    // if (inferred && inferred !== role) {
    //   setRole(inferred);
    //   const sysMsg: Message = {
    //     id: String(Date.now() + 1),
    //     role: 'system',
    //     text: language === 'ar'
    //       ? `👋 أهلاً! تم التعرف عليك كـ ${roleLabel(inferred, language)}`
    //       : `👋 Welcome! Recognized as ${roleLabel(inferred, language)}`
    //   };
    //   setMessages((prev) => [...prev, sysMsg]);
    // }

    const userMsg: Message = { id: String(Date.now()), role: 'user', text: textWithEmoji };
    setMessages((prev) => [...prev, userMsg]);
    if (!overrideText) setInput('');
    // إعادة ضبط حجم الـ textarea
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
    }
    setLoading(true);

    try {
      const res = await fetch('/api/smartchat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        // إرسال اللغة المكتشفة مع السؤال
        body: JSON.stringify({ question: textWithEmoji, lang: detectedLang })
      });

      const data = await res.json().catch(() => ({}));
      if (!res.ok || data?.error) {
        const reply: Message = {
          id: String(Date.now() + 1),
          role: 'assistant',
          text: detectedLang === 'ar'
            ? 'عذراً 😅، صار عندي مشكلة تقنية بسيطة. جرّب مرة ثانية بعد شوية!'
            : 'Oops! 😅 Something went wrong on my end. Please try again shortly!'
        };
        setMessages((prev) => [...prev, reply]);
        return;
      }

      const reply: Message = {
        id: String(Date.now() + 1),
        role: 'assistant',
        text: typeof data?.answer === 'string' && data.answer.trim()
          ? data.answer.trim()
          : detectedLang === 'ar'
            ? 'ما عندي معلومة كافية عن هذا الموضوع الآن 🤔، بس يمكنك سؤالي عن أي شي ثاني!'
            : "I don't have enough info on that right now 🤔, but feel free to ask me anything else!",
        suggestions: Array.isArray(data?.suggestions)
          ? data.suggestions.filter((s: unknown) => typeof s === 'string' && s.trim()).slice(0, 3)
          : []
      };
      setMessages((prev) => [...prev, reply]);
    } catch {
      const reply: Message = {
        id: String(Date.now() + 1),
        role: 'assistant',
        text: detectedLang === 'ar'
          ? 'يبدو إن الاتصال انقطع لحظة 😕، جرّب تسألني مرة ثانية!'
          : "Looks like the connection dropped for a moment 😕, please try again!"
      };
      setMessages((prev) => [...prev, reply]);
    } finally {
      setLoading(false);
    }
  }, [input, role, language, COOLDOWN_MS]);

  // ─── استنتاج الدور من النص ────────────────────────────
  // const inferRoleFromText = (text: string): 'student' | 'doctor' | 'editor' | 'admin' | 'guest' => {
  //   const tLower = text.toLowerCase();
  //   if (/\b(طالب|طالبة|الدراسة|مقرر|مشروع|تسجيل)\b/.test(tLower) || tLower.includes('طالب')) return 'student';
  //   if (/\b(دكتور|دكتورة|أستاذ|أستاذة)\b/.test(tLower) || tLower.includes('دكتور') || tLower.includes('أستاذ')) return 'doctor';
  //   if (/\b(محرر|تحرير|نشر|محتوى)\b/.test(tLower) || tLower.includes('محرر')) return 'editor';
  //   if (/\b(ادمن|مسؤول|admin|administrator|مدير)\b/.test(tLower) || tLower.includes('ادمن') || tLower.includes('مسؤول')) return 'admin';
  //   if (tLower.match(/\b(student|homework|course|enroll|degree)\b/)) return 'student';
  //   if (tLower.match(/\b(professor|doctor|faculty|lecturer)\b/)) return 'doctor';
  //   if (tLower.match(/\b(editor|content|publish)\b/)) return 'editor';
  //   if (tLower.match(/\b(admin|administrator|manager)\b/)) return 'admin';
  //   return 'guest';
  // };

  // ─── #6: كشف لغة الإدخال تلقائياً ───────────────────────
  const detectInputLanguage = (text: string): 'ar' | 'en' => {
    // البحث عن أي كلمة إنجليزية في النص
    const englishWords = text.match(/\b[a-zA-Z]+\b/g);
    if (englishWords && englishWords.length > 0) {
      return 'en';
    }
    // إذا لم توجد كلمات إنجليزية، تحقق من الأحرف العربية
    const arabicChars = (text.match(/[\u0600-\u06FF]/g) || []).length;
    const totalLetters = (text.match(/[a-zA-Z\u0600-\u06FF]/g) || []).length;
    if (totalLetters === 0) return 'ar'; // افتراضي عربي
    return arabicChars / totalLetters >= 0.3 ? 'ar' : 'en'; // خفض النسبة للعربية
  };

  // ─── كشف التحيات والأسئلة العامة ───────────────────────
  const isGreetingOrGeneral = (text: string): boolean => {
    const tLower = text.toLowerCase().trim();
    // تحيات عربية مع الأخطاء الإملائية الشائعة
    const arabicGreetings = [
      'صباح الخير', 'صباح الخيير', 'صباح الخر', 'صباح الخيرر', 'صباح الخيير', 'صباح الخير',
      'مساء الخير', 'مساء الخيير', 'مساء الخر', 'مساء الخيرر', 'مساء الخيير', 'مساء الخير',
      'السلام عليكم', 'السلام عليكمم', 'السلام عليك', 'السلام عليكوم', 'السلام عليكم',
      'وعليكم السلام', 'وعليكم السلامم', 'وعليكم السلام',
      'مرحبا', 'مرحباا', 'مرحب', 'اهلا', 'اهلاء', 'اهلاا', 'هاي', 'هلو', 'هلوو',
      'كيف حالك', 'كيف حالكك', 'شلونك', 'شلونكك', 'إزيك', 'ازيك', 'ازيكك', 'كيفك', 'كيفكك',
      'شو اخبارك', 'شو أخبارك', 'شو اخباركك', 'كيف الأحوال', 'كيف الاحوال',
      'جمعة مباركة', 'جمعة مباركه', 'جمعة مبارك', 'جمعة مباركه',
      'عيد مبارك', 'عيد سعيد', 'عيد مباركك', 'كل عام وأنت بخير', 'سنة سعيدة',
      'رمضان كريم', 'رمضان كريمم', 'رمضان مبارك',
      'شكرا', 'شكراً', 'شكراا', 'شكراً', 'ممتاز', 'تمام', 'الحمد لله',
      'الله يسلمك', 'الله يحفظك', 'مع السلامة', 'تصبح على خير', 'تصبحون على خير',
      'الله معك', 'بالتوفيق', 'نعم', 'لا', 'أي', 'نعم شكراً',
      'ما اسمك', 'شو اسمك', 'من انت', 'ما هو اسمك', 'ما اسمكك', 'شو اسمكك',
      'ما هو الوقت', 'شو الوقت', 'كم الساعة', 'ما هو الوقتت', 'شو الوقتت',
      'ما هو اليوم', 'شو اليوم', 'اي يوم اليوم', 'ما هو اليومم', 'شو اليومم'
    ];
    // تحيات إنجليزية مع الأخطاء الإملائية الشائعة
    const englishGreetings = [
      'good morning', 'good mornin', 'good mornig', 'good moring', 'gud morning',
      'good evening', 'good evenin', 'good evenig', 'good evning', 'gud evening',
      'good night', 'good nite', 'gud night',
      'hello', 'hi', 'hey', 'helo', 'hai', 'hii', 'heyy',
      'how are you', 'how r you', 'how are u', 'how r u', 'how you doing',
      'how\'s it going', 'hows it going', 'how is it going',
      'nice to meet you', 'thank you', 'thanks', 'thank u', 'thx', 'thankyou',
      'great', 'fine', 'alright', 'ok', 'okay', 'k',
      'blessed friday', 'blessed frida', 'blessed fridayy',
      'happy eid', 'eid mubarak', 'happy eid mubarak',
      'happy new year', 'merry christmas', 'ramadan mubarak',
      'goodbye', 'bye', 'see you', 'take care', 'byee', 'goodby',
      'yes', 'no', 'sure', 'okay', 'ok',
      'what is your name', 'what\'s your name', 'who are you', 'whats your name', 'what is ur name',
      'what time is it', 'what\'s the time', 'what time is it now', 'whats the time',
      'what day is it', 'what\'s today', 'what day is today', 'whats today'
    ];
    return arabicGreetings.some(g => tLower.includes(g)) || englishGreetings.some(g => tLower.includes(g));
  };

  // ─── العثور على التحية الأقرب ──────────────────────────
  const findClosestGreeting = (text: string): string | null => {
    const tLower = text.toLowerCase().trim();
    const allGreetings = [
      // عربي
      'صباح الخير', 'مساء الخير', 'السلام عليكم', 'وعليكم السلام', 'مرحبا', 'أهلا', 'هاي', 'هلو',
      'كيف حالك', 'شلونك', 'إزيك', 'ازيك', 'كيفك', 'شو اخبارك', 'شو أخبارك', 'كيف الأحوال',
      'جمعة مباركة', 'عيد مبارك', 'عيد سعيد', 'رمضان كريم',
      'شكرا', 'شكراً', 'ممتاز', 'تمام', 'الحمد لله', 'الله يسلمك', 'الله يحفظك', 'مع السلامة',
      'تصبح على خير', 'تصبحون على خير', 'الله معك', 'بالتوفيق', 'نعم', 'لا', 'أي', 'نعم شكراً',
      'ما اسمك', 'شو اسمك', 'من انت', 'ما هو اسمك',
      'ما هو الوقت', 'شو الوقت', 'كم الساعة', 'ما هو اليوم', 'شو اليوم', 'اي يوم اليوم',
      // إنجليزي
      'good morning', 'good evening', 'good night', 'hello', 'hi', 'hey', 'how are you', 'how do you do',
      'what\'s up', 'how\'s it going', 'nice to meet you', 'thank you', 'thanks', 'great', 'fine', 'alright',
      'blessed friday', 'happy eid', 'happy new year', 'merry christmas', 'ramadan mubarak', 'eid mubarak',
      'goodbye', 'bye', 'see you', 'take care', 'yes', 'no', 'sure', 'okay', 'ok',
      'what is your name', 'what\'s your name', 'who are you',
      'what time is it', 'what\'s the time', 'what day is it', 'what\'s today'
    ];

    // البحث عن أقرب تطابق
    for (const greeting of allGreetings) {
      if (tLower.includes(greeting)) {
        return greeting;
      }
    }

    // إذا لم يجد تطابقاً دقيقاً، ابحث عن تشابه بسيط
    for (const greeting of allGreetings) {
      const similarity = calculateSimilarity(tLower, greeting);
      if (similarity > 0.6) { // تشابه أكثر من 60%
        return greeting;
      }
    }

    return null;
  };

  // ─── حساب التشابه البسيط ───────────────────────────────
  const calculateSimilarity = (str1: string, str2: string): number => {
    const longer = str1.length > str2.length ? str1 : str2;
    const shorter = str1.length > str2.length ? str2 : str1;
    if (longer.length === 0) return 1.0;
    return (longer.length - levenshteinDistance(longer, shorter)) / longer.length;
  };

  // ─── مسافة ليفنشتاين ───────────────────────────────────
  const levenshteinDistance = (str1: string, str2: string): number => {
    const matrix = [];
    for (let i = 0; i <= str2.length; i++) {
      matrix[i] = [i];
    }
    for (let j = 0; j <= str1.length; j++) {
      matrix[0][j] = j;
    }
    for (let i = 1; i <= str2.length; i++) {
      for (let j = 1; j <= str1.length; j++) {
        if (str2.charAt(i - 1) === str1.charAt(j - 1)) {
          matrix[i][j] = matrix[i - 1][j - 1];
        } else {
          matrix[i][j] = Math.min(
            matrix[i - 1][j - 1] + 1,
            matrix[i][j - 1] + 1,
            matrix[i - 1][j] + 1
          );
        }
      }
    }
    return matrix[str2.length][str1.length];
  };

  // ─── رد على التحيات ───────────────────────────────────
  const getGreetingResponse = (text: string, detectedLang: 'ar' | 'en'): string => {
    const tLower = text.toLowerCase().trim();
    const { hour, day } = getCurrentTimeAndDay();
    const currentPeriod = getTimePeriod(hour);
    const currentDayName = getDayName(day, detectedLang);

    const closestGreeting = findClosestGreeting(text);

    if (detectedLang === 'ar') {
      if (closestGreeting?.includes('صباح الخير')) {
        if (currentPeriod === 'morning') {
          return 'صباح النور! 🌅 كيف يمكنني مساعدتك اليوم؟';
        } else {
          return `أعتقد أنك تقصد صباح الخير، لكن الآن هو ${currentPeriod === 'afternoon' ? 'الظهر' : currentPeriod === 'evening' ? 'المساء' : 'الليل'}! ⏰ كيف يمكنني مساعدتك؟`;
        }
      }
      if (closestGreeting?.includes('مساء الخير')) {
        if (currentPeriod === 'evening') {
          return 'مساء الخير! 🌙 كيف يمكنني مساعدتك؟';
        } else {
          return `أعتقد أنك تقصد مساء الخير، لكن الآن هو ${currentPeriod === 'morning' ? 'الصباح' : currentPeriod === 'afternoon' ? 'الظهر' : 'الليل'}! ⏰ كيف يمكنني مساعدتك؟`;
        }
      }
      if (closestGreeting?.includes('السلام عليكم') || closestGreeting?.includes('مرحبا') || closestGreeting?.includes('أهلا')) return 'وعليكم السلام! 👋 كيف يمكنني مساعدتك؟';
      if (closestGreeting?.includes('كيف حالك') || closestGreeting?.includes('شلونك') || closestGreeting?.includes('إزيك')) return 'الحمد لله بخير! 😊 وأنت كيف حالك؟';
      if (closestGreeting?.includes('جمعة مباركة')) {
        if (day === 5) { // Friday
          return 'جمعة مباركة! 🕌 أتمنى لك أسبوعاً سعيداً.';
        } else {
          return `أعتقد أنك تقصد جمعة مباركة، لكن اليوم هو ${currentDayName}! 📅 كيف يمكنني مساعدتك؟`;
        }
      }
      if (closestGreeting?.includes('عيد مبارك') || closestGreeting?.includes('عيد سعيد')) return 'عيد مبارك! 🎉 كل عام وأنت بخير.';
      if (closestGreeting?.includes('رمضان كريم')) return 'رمضان كريم! 🌙 رمضان مبارك عليك.';
      if (closestGreeting?.includes('شكرا') || closestGreeting?.includes('شكراً')) return 'العفو! 🙏 يسعدني مساعدتك.';
      if (closestGreeting?.includes('مع السلامة') || closestGreeting?.includes('تصبح على خير')) return 'مع السلامة! 👋 أراك لاحقاً.';
      if (closestGreeting?.includes('ما اسمك') || closestGreeting?.includes('شو اسمك') || closestGreeting?.includes('من انت')) return 'اسمي مساعد AAU! 🤖 أنا هنا لمساعدتك في أي شيء يخص الجامعة.';
      if (closestGreeting?.includes('ما هو الوقت') || closestGreeting?.includes('شو الوقت') || closestGreeting?.includes('كم الساعة')) {
        const timeString = new Date().toLocaleTimeString('ar-SA', { hour: '2-digit', minute: '2-digit' });
        return `الوقت الآن هو ${timeString}! ⏰ كيف يمكنني مساعدتك؟`;
      }
      if (closestGreeting?.includes('ما هو اليوم') || closestGreeting?.includes('شو اليوم') || closestGreeting?.includes('اي يوم اليوم')) {
        return `اليوم هو ${currentDayName}! 📅 كيف يمكنني مساعدتك؟`;
      }
      return 'مرحباً! 😊 كيف يمكنني مساعدتك اليوم؟';
    } else {
      if (closestGreeting?.includes('good morning')) {
        if (currentPeriod === 'morning') {
          return 'Good morning! 🌅 How can I help you today?';
        } else {
          return `I think you meant good morning, but it's currently ${currentPeriod === 'afternoon' ? 'afternoon' : currentPeriod === 'evening' ? 'evening' : 'night'}! ⏰ How can I help you?`;
        }
      }
      if (closestGreeting?.includes('good evening')) {
        if (currentPeriod === 'evening') {
          return 'Good evening! 🌙 How can I help you?';
        } else {
          return `I think you meant good evening, but it's currently ${currentPeriod === 'morning' ? 'morning' : currentPeriod === 'afternoon' ? 'afternoon' : 'night'}! ⏰ How can I help you?`;
        }
      }
      if (closestGreeting?.includes('hello') || closestGreeting?.includes('hi') || closestGreeting?.includes('hey')) return 'Hello! 👋 How can I help you?';
      if (closestGreeting?.includes('how are you')) return 'I\'m doing great, thank you! 😊 How about you?';
      if (closestGreeting?.includes('blessed friday')) {
        if (day === 5) { // Friday
          return 'Blessed Friday! 🕌 Have a wonderful weekend.';
        } else {
          return `I think you meant blessed Friday, but today is ${currentDayName}! 📅 How can I help you?`;
        }
      }
      if (closestGreeting?.includes('happy eid') || closestGreeting?.includes('eid mubarak')) return 'Eid Mubarak! 🎉 May you have a blessed holiday.';
      if (closestGreeting?.includes('thank you') || closestGreeting?.includes('thanks')) return 'You\'re welcome! 🙏 Glad to help.';
      if (closestGreeting?.includes('goodbye') || closestGreeting?.includes('bye')) return 'Goodbye! 👋 See you later.';
      if (closestGreeting?.includes('what is your name') || closestGreeting?.includes('what\'s your name') || closestGreeting?.includes('who are you')) return 'My name is AAU Assistant! 🤖 I\'m here to help you with anything related to the university.';
      if (closestGreeting?.includes('what time is it') || closestGreeting?.includes('what\'s the time')) {
        const timeString = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
        return `The current time is ${timeString}! ⏰ How can I help you?`;
      }
      if (closestGreeting?.includes('what day is it') || closestGreeting?.includes('what\'s today')) {
        return `Today is ${currentDayName}! 📅 How can I help you?`;
      }
      return 'Hello! 😊 How can I help you today?';
    }
  };

  // ─── تحليل الروابط في النص ────────────────────────────
  const parseLinks = (text: string) => {
    const urlRegex = /(https?:\/\/[^\s]+)/g;
    const parts = text.split(urlRegex);
    return parts.map((part, index) => {
      if (urlRegex.test(part)) {
        return (
          <a
            key={index}
            href={part}
            target="_blank"
            rel="noopener noreferrer"
            className="text-blue-500 underline hover:text-blue-700"
          >
            {part}
          </a>
        );
      }
      return part;
    });
  };

  // ─── الحصول على الوقت واليوم الحالي ───────────────────
  const getCurrentTimeAndDay = () => {
    const now = new Date();
    const hour = now.getHours();
    const day = now.getDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
    return { hour, day };
  };

  // ─── تحديد الفترة الزمنية ─────────────────────────────
  const getTimePeriod = (hour: number): 'morning' | 'afternoon' | 'evening' | 'night' => {
    if (hour >= 5 && hour < 12) return 'morning';
    if (hour >= 12 && hour < 17) return 'afternoon';
    if (hour >= 17 && hour < 21) return 'evening';
    return 'night';
  };

  // ─── أسماء الأيام ────────────────────────────────────
  const getDayName = (day: number, language: 'ar' | 'en'): string => {
    const daysAr = ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'];
    const daysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    return language === 'ar' ? daysAr[day] : daysEn[day];
  };

  const clearChat = () => {
    setMessages([]);
    setGreeted(false);
  };

  // ─── تكبير الـ textarea تلقائياً ─────────────────────
  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setInput(e.target.value);
    e.target.style.height = 'auto';
    e.target.style.height = Math.min(e.target.scrollHeight, 96) + 'px';
  };

  return (
    <>
      {config.enabled === false ? null : (
        <>
          {/* ─── زر الفتح الخارجي (Robot) ─── */}
          {!open && (
            <div className={`fixed z-50 bottom-6 ${isRtl ? 'left-6 md:left-8' : 'right-6 md:right-8'} flex flex-col items-end gap-3`}>
              {/* بالون الترحيب بجانب الروبوت */}
              <motion.div
                initial={{ opacity: 0, y: 10, scale: 0.95 }}
                animate={{ opacity: 1, y: 0, scale: 1 }}
                transition={{ delay: 1.5, duration: 0.4 }}
                className={`relative mb-1 rounded-2xl bg-card border border-border/60 px-4 py-2.5 shadow-[0_8px_30px_rgb(0,0,0,0.12)] backdrop-blur-md ${isRtl ? 'ml-2' : 'mr-2'}`}
              >
                <p className="text-[14px] font-medium text-foreground flex items-center gap-2">
                  <span className="animate-pulse">👋</span> 
                  {language === 'ar' ? 'تحتاج مساعدة؟' : 'Need help?'}
                </p>
                <div className={`absolute -bottom-1.5 ${isRtl ? 'left-6' : 'right-6'} w-3 h-3 bg-card border-b border-r border-border/60 transform rotate-45`} />
              </motion.div>

              <motion.button
                whileTap={{ scale: 0.93 }}
                whileHover={{ y: -6, scale: 1.05 }}
                animate={{ y: [0, -8, 0] }}
                transition={{ duration: 4, repeat: Infinity, ease: 'easeInOut' }}
                className="group relative flex h-[5rem] w-[5rem] items-center justify-center rounded-[2.2rem] rounded-br-2xl bg-gradient-to-tr from-secondary/95 via-secondary to-secondary/85 text-white shadow-[0_16px_50px_-12px_hsl(var(--secondary)/0.9)] focus-visible:outline-none hover:shadow-[0_20px_60px_-15px_hsl(var(--secondary)/1)] transition-all duration-300 ring-2 ring-white/30 hover:ring-white/50"
                onClick={() => setOpen((o) => !o)}
                aria-label={chatTitle}
                title={chatTitle}
              >
                <div className="absolute inset-0 rounded-[2.2rem] rounded-br-2xl bg-gradient-to-tr from-transparent via-white/10 to-white/25 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
                <div className="absolute inset-0 rounded-[2.2rem] rounded-br-2xl bg-gradient-to-tr from-secondary/20 to-transparent opacity-50 group-hover:opacity-30 transition-opacity duration-300" />
                <RobotFace />
                
                {/* نقطة الإشعار */}
                {!open && messages.length === 0 && (
                  <span className="absolute -top-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 shadow-lg border-3 border-background animate-bounce">
                    <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75"></span>
                    <span className="text-white text-xs font-bold">!</span>
                  </span>
                )}
              </motion.button>
            </div>
          )}

          {/* ─── نافذة الشات ─── */}
          {open && (
            <motion.div
              initial={{ opacity: 0, y: 30, scale: 0.95 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: 20, scale: 0.95 }}
              transition={{ duration: 0.3, ease: 'easeOut' }}
              className={`fixed bottom-6 left-4 right-4 z-50 max-h-[calc(100vh-5.5rem)] overflow-hidden rounded-[2rem] border border-border/50 bg-gradient-to-br from-background/98 via-background/95 to-secondary/10 shadow-[0_24px_80px_-30px_rgba(15,23,42,0.6)] backdrop-blur-3xl flex flex-col sm:left-auto sm:right-8 sm:w-[420px] md:w-[460px] sm:max-h-[85vh] sm:rounded-[2.5rem] ${isRtl ? 'sm:left-8 sm:right-auto' : ''}`}
            >
              {/* ─── الهيدر ─── */}
              <div className="relative flex items-center justify-between border-b border-border/40 bg-gradient-to-r from-card/80 via-card/60 to-card/80 px-6 py-5 backdrop-blur-xl rounded-t-[2.5rem] sm:rounded-t-[2.5rem]">
                <div className="flex items-center gap-4">
                  <div className="relative flex h-12 w-12 items-center justify-center rounded-2xl border border-secondary/25 bg-gradient-to-br from-secondary/15 to-secondary/8 text-secondary shadow-lg">
                    {/* مؤشر أونلاين */}
                    <span className="absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded-full border-[3px] border-card bg-emerald-500 shadow-md animate-pulse" title={language === 'ar' ? 'متصل' : 'Online'} />
                    <div className="relative z-10">
                      <RobotFace small />
                    </div>
                  </div>
                  <div>
                    <div className="font-bold text-[16px] text-foreground tracking-tight">
                      {chatTitle}
                    </div>
                    <div className="mt-1 flex items-center gap-2 opacity-90">
                      <span className="inline-block h-2 w-2 rounded-full bg-emerald-400 animate-pulse" />
                      <span className="text-[13px] text-emerald-600 font-medium">
                        {t('متصل الآن', 'Online now')}
                      </span>
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-1">
                  <button
                    onClick={clearChat}
                    className="rounded-xl px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-secondary/15 hover:text-secondary transition-all duration-200 hover:scale-105"
                  >
                    {t('مسح', 'Clear')}
                  </button>
                  <button
                    onClick={() => setOpen(false)}
                    className="rounded-full p-2.5 h-10 w-10 flex items-center justify-center hover:bg-muted/80 text-muted-foreground transition-all duration-200 hover:scale-105"
                  >
                    <X className="w-5 h-5" />
                  </button>
                </div>
              </div>

              {/* ─── منطقة الرسائل ─── */}
              <div
                ref={listRef}
                className="flex-1 min-h-0 space-y-4 overflow-y-auto bg-gradient-to-b from-background/50 via-background/30 to-secondary/5 p-6 [-webkit-overflow-scrolling:touch] rounded-b-[2.5rem] sm:rounded-b-[2.5rem]"
              >
                <AnimatePresence initial={false}>
                  {messages.map((m) => (
                    <motion.div
                      key={m.id}
                      initial={{ opacity: 0, y: 10, scale: 0.98 }}
                      animate={{ opacity: 1, y: 0, scale: 1 }}
                      transition={{ duration: 0.2, ease: 'easeOut' }}
                      className={`max-w-[92%] whitespace-pre-wrap rounded-2xl border px-5 py-4 text-[15px] font-medium leading-7 ${isRtl ? 'text-right' : 'text-left'} ${
                        m.role === 'user'
                          ? 'ml-auto border-secondary/50 bg-gradient-to-br from-secondary/50 to-secondary/40 text-primary shadow-[0_12px_25px_-12px_hsl(var(--secondary)/0.8)]'
                          : m.role === 'system'
                            ? 'mx-auto border-border/40 bg-muted/50 text-muted-foreground text-[14px] text-center shadow-sm'
                            : 'mr-auto border-border/50 bg-card/90 text-foreground shadow-[0_12px_22px_-14px_hsl(var(--foreground)/0.3)]'
                      }` + (m.role === 'assistant' ? ' backdrop-blur-sm' : '')}
                    >
                      <div>{parseLinks(m.text)}</div>

                      {/* ─── اقتراحات كأزرار قابلة للنقر ─── */}
                      {m.role === 'assistant' && Array.isArray(m.suggestions) && m.suggestions.length > 0 && (
                        <div className={`mt-4 flex flex-wrap gap-2.5 ${isRtl ? 'justify-end' : 'justify-start'}`}>
                          {m.suggestions.map((s, idx) => (
                            <button
                              key={`${m.id}-s-${idx}`}
                              onClick={() => sendMessage(s)}
                              disabled={loading}
                              className="rounded-xl border border-secondary/40 bg-secondary/12 px-4 py-2 text-[13px] font-medium text-secondary transition-all hover:bg-secondary/25 hover:border-secondary/60 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed shadow-sm hover:shadow-md"
                            >
                              {s}
                            </button>
                          ))}
                        </div>
                      )}

                      {/* ─── badge المرسل ─── */}
                      {m.role !== 'system' && (
                        <div className={`mt-3 ${isRtl ? 'text-right' : 'text-left'}`}>
                          <span
                            className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[12px] font-semibold leading-none shadow-sm ${
                              m.role === 'user'
                                ? 'border border-secondary/50 bg-secondary/20 text-foreground'
                                : 'border border-border/50 bg-background/80 text-muted-foreground'
                            }`}
                          >
                            {m.role === 'user' ? (
                              <>{/* {roleEmoji(role)} */} {language === 'ar' ? 'أنت' : 'You'}</>
                            ) : (
                              <>🤖 {language === 'ar' ? 'المساعد' : 'Assistant'}</>
                            )}
                          </span>
                        </div>
                      )}
                    </motion.div>
                  ))}
                </AnimatePresence>

                {/* ─── مؤشر التحميل ─── */}
                {loading && (
                  <motion.div
                    initial={{ opacity: 0, y: 8 }}
                    animate={{ opacity: 1, y: 0 }}
                    className="mr-auto flex max-w-[88%] items-center gap-3 rounded-2xl border border-border/40 bg-card/90 p-4 text-sm text-muted-foreground shadow-sm backdrop-blur-sm"
                  >
                    <span className="inline-block w-2.5 h-2.5 rounded-full bg-secondary animate-bounce" />
                    <span className="inline-block w-2.5 h-2.5 rounded-full bg-secondary animate-bounce [animation-delay:0.15s]" />
                    <span className="inline-block w-2.5 h-2.5 rounded-full bg-secondary animate-bounce [animation-delay:0.3s]" />
                    <span className="text-[14px]">{t('يفكر...! لحظة صبر 🧠', 'Thinking... one moment 🧠')}</span>
                  </motion.div>
                )}
              </div>

              {/* ─── منطقة الإدخال ─── */}
              <div className="border-t border-border/40 bg-gradient-to-r from-card/60 via-card/40 to-card/60 px-6 py-4 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl rounded-b-[2.5rem] sm:rounded-b-[2.5rem]">
                <div className="flex items-end gap-3">
                  <textarea
                    ref={textareaRef}
                    rows={1}
                    value={input}
                    onChange={handleTextareaChange}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter' && !e.shiftKey) {
                        e.preventDefault();
                        sendMessage();
                      }
                    }}
                    placeholder={t('اكتب سؤالك هنا... 💬', 'Type your question here... 💬')}
                    className="max-h-28 flex-1 resize-none overflow-y-auto rounded-2xl border border-border/50 bg-background/80 px-4 py-3 text-[15px] leading-7 text-foreground outline-none transition-all placeholder:text-muted-foreground/80 focus:border-secondary/60 focus:bg-background/90 focus:ring-2 focus:ring-secondary/20 backdrop-blur-sm shadow-sm"
                    style={{ height: 'auto' }}
                  />
                  <Button
                    size="sm"
                    onClick={() => sendMessage()}
                    disabled={loading || !input.trim()}
                    className="flex items-center gap-2 rounded-2xl bg-secondary px-4 py-3 text-secondary-foreground hover:bg-secondary/90 shadow-lg hover:shadow-xl transition-all duration-200 hover:scale-105 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:scale-100"
                  >
                    <Send className="w-4 h-4" />
                    {t('إرسال', 'Send')}
                  </Button>
                </div>
                <p className="mt-2 text-center text-[12px] text-muted-foreground/70">
                  {t('اضغط Enter للإرسال • Shift+Enter لسطر جديد', 'Press Enter to send • Shift+Enter for new line')}
                </p>
              </div>
            </motion.div>
          )}
        </>
      )}
    </>
  );
};

// ─── دالة مساعدة للدور (خارج الكومبوننت) ────────────────
// function roleLabel(r: string, language: string): string {
//   if (r === 'student') return language === 'ar' ? 'طالب 🎓' : 'Student 🎓';
//   if (r === 'doctor') return language === 'ar' ? 'دكتور 👨‍🏫' : 'Doctor 👨‍🏫';
//   if (r === 'editor') return language === 'ar' ? 'محرر محتوى ✏️' : 'Editor ✏️';
//   if (r === 'admin') return language === 'ar' ? 'ادمن 🛡️' : 'Admin 🛡️';
//   return language === 'ar' ? 'زائر 👤' : 'Guest 👤';
// }

export default SmartChat;