import React from 'react';
import { createPortal } from 'react-dom';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import {
  Brain, Send, Sparkles, User, Loader2,
  ShieldCheck, Settings, Zap, X, History, Plus, Trash2, ChevronLeft, ChevronRight, MessageSquare,
  ThumbsUp, ThumbsDown, Copy, RotateCcw, Edit2, Check, Save
} from 'lucide-react';
import { GhostButton, ModernCardHeader } from "../ui/settings-ui";
import { Badge } from "../ui/badge";
import { cn } from "@/lib/utils";
import { AnimatePresence, motion } from 'framer-motion';
import { Switch } from "../ui/switch";
import type { WawpDashboardData } from '../../types';

import { Reasoning, ReasoningContent, ReasoningTrigger } from "../ai-elements/reasoning";
import AISettings from "./AISettings";

import { AI_ACTIONS_SCHEMA } from '../../ai-actions-schema';

const WAWPLogo = ({ className, size = 24 }: { className?: string; size?: number }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 36 36" fill="none" className={className}>
    <rect width="36" height="36" rx="12" fill="#44FF87" />
    <path d="M26 7.5C26 6.94772 25.5523 6.5 25 6.5H23C22.4477 6.5 22 6.94772 22 7.5V9.5C22 10.0523 22.4477 10.5 23 10.5H25C25.5523 10.5 26 10.0523 26 9.5V7.5Z" fill="#004349" />
    <path d="M10 7.5C10 6.94772 10.4477 6.5 11 6.5H13C13.5523 6.5 14 6.94772 14 7.5V9.5C14 10.0523 13.5523 10.5 13 10.5H11C10.4477 10.5 10 10.0523 10 9.5V7.5Z" fill="#004349" />
    <path d="M6 13.5C6 11.2909 7.79086 9.5 10 9.5H26C28.2091 9.5 30 11.2909 30 13.5V23.5C30 25.7091 28.2091 27.5 26 27.5H10C7.79086 27.5 6 25.7091 6 23.5V13.5Z" fill="#004349" />
    <rect x="8" y="11.5" width="20" height="14" rx="2" fill="white" />
    <rect x="20" y="15.5" width="4" height="6" rx="1" fill="#004349" />
    <path d="M18 30.5C20 30.5 23 27.5 23 27.5H13C13 27.5 16 30.5 18 30.5Z" fill="#004349" />
    <rect x="12" y="15.5" width="4" height="6" rx="1" fill="#004349" />
  </svg>
);

interface Message {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  reasoning?: string;
  rating?: number;
  timestamp: Date;
  isThinking?: boolean;
}

interface ChatSession {
  id: number;
  title: string;
  timestamp: string;
}

const WELCOME_MESSAGE: Message = {
  id: 'welcome',
  role: 'assistant',
  content: "Hello! I am your Wawp AI Guide. I have access to your current settings, system status, and configurations. How can I help you optimize your automation today?",
  timestamp: new Date(),
  rating: 0
};

interface ActionAttrs {
  value: string | boolean;
  key: string;
  label: string;
  component: 'switch' | 'input' | string;
}

const ChatAction = ({ action, data, onComplete }: { action: ActionAttrs; data: WawpDashboardData; onComplete: (msg: string) => void }) => {
  const getRealDbKeyAndValue = () => {
    if (data && data.features) {
      const normalizedKey = String(action.key).toLowerCase().replace(/^wawp_/, '').replace(/_enabled$/, '').replace(/_popup$/, '');

      for (const k of Object.keys(data.features)) {
        const feat = data.features[k as keyof typeof data.features];
        if (feat && typeof feat === 'object') {
          const normalizedFeatKey = String(k).toLowerCase().replace(/^wawp_/, '').replace(/_enabled$/, '');
          const normalizedOption = String(feat.option || '').toLowerCase().replace(/^wawp_/, '').replace(/_enabled$/, '');

          if (normalizedKey === normalizedFeatKey || normalizedKey === normalizedOption || normalizedKey.includes(normalizedFeatKey) || normalizedFeatKey.includes(normalizedKey)) {
            return {
              dbKey: feat.option || k,
              dbValue: feat.enabled
            };
          }
        }
      }
    }
    return {
      dbKey: action.key,
      dbValue: action.value
    };
  };

  const { dbKey, dbValue } = getRealDbKeyAndValue();

  const getIsInitialChecked = () => {
    return dbValue === true || dbValue === 'true' || dbValue === 1 || dbValue === '1' || dbValue === 'yes';
  };

  const [checked, setChecked] = React.useState(getIsInitialChecked());
  const [inputValue, setInputValue] = React.useState(String(action.value ?? ''));
  const [isSaving, setIsSaving] = React.useState(false);
  const [isLoadingValue, setIsLoadingValue] = React.useState(action.component !== 'switch');

  // Fetch the actual current value from the database for input-type actions
  React.useEffect(() => {
    if (action.component === 'switch') return;

    const fetchRealValue = async () => {
      try {
        const response = await fetch(`${data.global.restUrl}/settings`, {
          headers: { 'X-WP-Nonce': data.global.wpRestNonce }
        });
        const res = await response.json();
        if (res.success && res.data) {
          const realVal = res.data[dbKey] ?? res.data[action.key];
          if (realVal !== undefined && realVal !== null) {
            setInputValue(String(realVal));
          }
        }
      } catch (e: unknown) {
        console.error("Failed to fetch real setting value", e);
      } finally {
        setIsLoadingValue(false);
      }
    };
    fetchRealValue();
  }, [action.component, action.key, dbKey, data.global.restUrl, data.global.wpRestNonce]);

  const formatPayloadValue = (isChecked: boolean) => {
    if (typeof dbValue === 'number') {
      return isChecked ? 1 : 0;
    } else if (typeof dbValue === 'boolean') {
      return isChecked;
    } else if (dbValue === 'yes' || dbValue === 'no') {
      return isChecked ? 'yes' : 'no';
    } else if (dbValue === '1' || dbValue === '0') {
      return isChecked ? '1' : '0';
    } else if (dbValue === 'true' || dbValue === 'false') {
      return isChecked ? 'true' : 'false';
    }
    if (dbKey.includes('enable') || dbKey.includes('active')) {
      return isChecked ? 1 : 0;
    }
    return isChecked ? 'yes' : 'no';
  };

  const handleSaveWithNewChecked = async (newChecked: boolean) => {
    setIsSaving(true);
    const newVal = formatPayloadValue(newChecked);
    try {
      const response = await fetch(`${data.global.restUrl}/settings`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': data.global.wpRestNonce
        },
        body: JSON.stringify({ settings: { [dbKey]: newVal } })
      });
      const res = await response.json();
      if (res.success) {
        const globalData = (window as unknown as { wawpDashboardData: WawpDashboardData }).wawpDashboardData;
        if (globalData && globalData.features) {
          const features = globalData.features as unknown as Record<string, unknown>;
          for (const k of Object.keys(features)) {
            const feat = features[k];
            if (feat && typeof feat === 'object' && ((feat as Record<string, unknown>).option === dbKey || k === dbKey)) {
              features[k] = { ...(feat as Record<string, unknown>), enabled: newVal };
            }
          }
        }
        onComplete(`✅ Successfully updated ${action.label}`);
      }
    } catch (e: unknown) {
      console.error("Action save failed", e);
    } finally {
      setIsSaving(false);
    }
  };

  const toggleVal = (newChecked: boolean) => {
    setChecked(newChecked);
    handleSaveWithNewChecked(newChecked);
  };

  const handleSave = async () => {
    setIsSaving(true);
    let finalValue: string | number | boolean = inputValue;
    if (action.component === 'switch') {
      finalValue = formatPayloadValue(checked);
    }
    try {
      const response = await fetch(`${data.global.restUrl}/settings`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': data.global.wpRestNonce
        },
        body: JSON.stringify({ settings: { [dbKey]: finalValue } })
      });
      const res = await response.json();
      if (res.success) {
        const globalData = (window as unknown as { wawpDashboardData: WawpDashboardData }).wawpDashboardData;
        if (globalData && globalData.features) {
          const features = globalData.features as unknown as Record<string, unknown>;
          for (const k of Object.keys(features)) {
            const feat = features[k];
            if (feat && typeof feat === 'object' && ((feat as Record<string, unknown>).option === dbKey || k === dbKey)) {
              features[k] = { ...(feat as Record<string, unknown>), enabled: finalValue };
            }
          }
        }
        onComplete(`✅ Successfully updated ${action.label}`);
      }
    } catch (e: unknown) {
      console.error("Action save failed", e);
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <div className="mt-4 p-4 bg-emerald-50/50 border border-emerald-100 rounded-xl flex flex-col gap-3 animate-in fade-in zoom-in-95 duration-300">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div className="w-6 h-6 rounded-md bg-emerald-100 flex items-center justify-center">
            <Zap className="w-3 h-3 text-emerald-600" />
          </div>
          <span className="text-[11px] font-bold text-emerald-900">{action.label}</span>
        </div>
        {action.component === 'switch' && (
          <Switch
            checked={checked}
            onCheckedChange={toggleVal}
          />
        )}
      </div>
      {action.component !== 'switch' && (
        <div className="space-y-1.5">
          <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1 truncate block">
            {action.label}
          </label>
          <div className="relative">
            {isLoadingValue ? (
              <div className="h-10 border border-slate-200 bg-slate-50/30 rounded-[5px] flex items-center px-3.5">
                <Loader2 className="w-3.5 h-3.5 animate-spin text-slate-300 mr-2" />
                <span className="text-[11px] text-slate-400">Loading current value...</span>
              </div>
            ) : (
              <input
                type="text"
                className="w-full h-10 border border-slate-200 bg-slate-50/30 focus:bg-white focus:border-[#004449] transition-all rounded-[5px] shadow-none text-[13px] font-bold text-slate-700 px-3.5 outline-none focus:ring-2 focus:ring-[#004449]/10"
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
                placeholder={`Enter ${action.label}...`}
              />
            )}
          </div>
        </div>
      )}
      <button
        onClick={handleSave}
        disabled={isSaving || isLoadingValue}
        className="h-9 bg-emerald-600 text-white rounded-lg text-[10px] font-black uppercase tracking-widest hover:bg-emerald-700 transition-all flex items-center justify-center gap-2 shadow-sm shadow-emerald-600/10 active:scale-95 disabled:opacity-50"
      >
        {isSaving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
        Confirm & Save Change
      </button>
    </div>
  );
};

const ChatNotificationAction = ({
  attrs,
  data,
  onComplete
}: {
  attrs: Record<string, string>;
  data: WawpDashboardData;
  onComplete: (msg: string) => void
}) => {
  const [isSaving, setIsSaving] = React.useState(false);

  const handleCreate = async () => {
    setIsSaving(true);
    try {
      const response = await fetch(`${data.global.restUrl}/notifications/create`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': data.global.wpRestNonce
        },
        body: JSON.stringify({ rule: attrs })
      });
      const res = await response.json();
      if (res.success) {
        onComplete(`🎉 Successfully created new notification rule: **${res.name}**`);
      } else {
        onComplete(`❌ Failed to create rule: ${res.message || 'Unknown error'}`);
      }
    } catch (e: unknown) {
      console.error("Rule creation failed", e);
      onComplete(`❌ Request failed during rule creation.`);
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <div className="mt-4 p-4 bg-emerald-50/50 border border-emerald-100 rounded-xl flex flex-col gap-3 animate-in fade-in zoom-in-95 duration-300">
      <div className="flex items-center gap-2">
        <div className="w-6 h-6 rounded-md bg-emerald-100 flex items-center justify-center">
          <Zap className="w-3 h-3 text-emerald-600" />
        </div>
        <span className="text-[11px] font-bold text-emerald-900">Suggested Notification</span>
      </div>
      <div className="bg-white p-3 rounded-lg border border-slate-100 flex flex-col gap-1.5 shadow-sm">
        <div className="flex justify-between items-center text-xs">
          <span className="text-slate-400 font-bold uppercase tracking-wider text-[10px]">Trigger:</span>
          <span className="font-semibold text-slate-700">{attrs.trigger_key || 'N/A'}</span>
        </div>
        <div className="flex justify-between items-center text-xs">
          <span className="text-slate-400 font-bold uppercase tracking-wider text-[10px]">Name:</span>
          <span className="font-semibold text-slate-700 truncate">{attrs.name || 'Auto Rule'}</span>
        </div>
        <div className="flex justify-between items-center text-xs">
          <span className="text-slate-400 font-bold uppercase tracking-wider text-[10px]">Channels:</span>
          <span className="font-semibold text-slate-700 truncate">
            {attrs.whatsapp_enabled === '1' ? 'WhatsApp ' : ''}
            {attrs.email_enabled === '1' ? 'Email' : ''}
          </span>
        </div>
        {attrs.whatsapp_message && (
          <div className="border-t border-slate-50 mt-1 pt-1.5">
            <span className="text-slate-400 font-bold uppercase tracking-wider text-[10px] block mb-0.5">Message:</span>
            <p className="text-[11px] text-slate-600 bg-slate-50/60 p-2 rounded border border-slate-100/80 m-0 break-words line-clamp-3">
              {attrs.whatsapp_message}
            </p>
          </div>
        )}
      </div>
      <button
        onClick={handleCreate}
        disabled={isSaving}
        className="h-9 bg-emerald-600 text-white rounded-lg text-[10px] font-black uppercase tracking-widest hover:bg-emerald-700 transition-all flex items-center justify-center gap-2 shadow-sm shadow-emerald-600/10 active:scale-95 disabled:opacity-50"
      >
        {isSaving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Check className="w-3.5 h-3.5" />}
        Approve &amp; Create Notification
      </button>
    </div>
  );
};

// Detect if text contains Arabic characters
const isArabic = (text: string): boolean => /[\u0600-\u06FF]/.test(text);

export default function AIGlobalAssistant({ data }: { data: WawpDashboardData }) {
  const [open, setOpen] = React.useState(false);
  const [view, setView] = React.useState<'chat' | 'settings'>('chat');
  const [sidebarOpen, setSidebarOpen] = React.useState(true);
  const [input, setInput] = React.useState('');
  const [messages, setMessages] = React.useState<Message[]>([]);
  const [sessions, setSessions] = React.useState<ChatSession[]>([]);
  const [currentSessionId, setCurrentSessionId] = React.useState<number | null>(null);
  const [aiSettings, setAiSettings] = React.useState<Record<string, string | boolean | undefined> | null>(null);
  const [isLoading, setIsLoading] = React.useState(false);
  const [isFetchingHistory, setIsFetchingHistory] = React.useState(false);
  const [isFetchingSessions, setIsFetchingSessions] = React.useState(false);
  const [editingId, setEditingId] = React.useState<string | null>(null);
  const [editContent, setEditContent] = React.useState('');
  const [renamingSessionId, setRenamingSessionId] = React.useState<number | null>(null);
  const [renamingTitle, setRenamingTitle] = React.useState('');
  const [currentThinkingStep, setCurrentThinkingStep] = React.useState(0);
  const scrollRef = React.useRef<HTMLDivElement>(null);
  const localIdCounter = React.useRef(0);
  const streamContentRef = React.useRef('');
  const streamReasoningRef = React.useRef('');

  const getAssistantIcon = (msgId?: string, content?: string) => {
    const isAction = msgId?.startsWith('action-') ||
      msgId?.startsWith('notif-') ||
      content?.includes('Successfully created') ||
      content?.includes('Successfully updated') ||
      content?.includes('🎉 Successfully created') ||
      content?.includes('✅ Successfully updated');

    if (isAction) {
      return <WAWPLogo size={18} />;
    }

    const provider = aiSettings?.activeProvider;
    if (!provider || provider === 'free') {
      return <Brain className="w-4 h-4" />;
    }

    return (
      <img
        src={`${data.global.pluginUrl}assets/icons/ai/${provider}.svg`}
        className="w-4 h-4 object-contain"
        alt={typeof provider === 'string' ? provider : undefined}
      />
    );
  };

  const thinkingSteps = [
    "Analyzing your current request...",
    "Scanning plugin configuration for context...",
    "Evaluating available AI actions for your intent...",
    "Formulating the most efficient response..."
  ];

  React.useEffect(() => {
    let interval: ReturnType<typeof setInterval> | undefined;
    if (isLoading) {
      interval = setInterval(() => {
        setCurrentThinkingStep(prev => (prev + 1) % thinkingSteps.length);
      }, 2500);
    }
    return () => clearInterval(interval);
  }, [isLoading, thinkingSteps.length]);

  const fetchAiSettings = React.useCallback(async () => {
    try {
      const response = await fetch(`${data.global.restUrl}/ai-assistant/settings`, {
        headers: { 'X-WP-Nonce': data.global.wpRestNonce }
      });
      const res = await response.json();
      if (res.success) setAiSettings(res.data);
    } catch (error) {
      console.error("Failed to fetch AI settings:", error);
    }
  }, [data.global.restUrl, data.global.wpRestNonce]);

  const fetchSessions = React.useCallback(async () => {
    setIsFetchingSessions(true);
    try {
      const response = await fetch(`${data.global.restUrl}/ai-assistant/sessions`, {
        headers: { 'X-WP-Nonce': data.global.wpRestNonce }
      });
      const res = await response.json();
      if (res.success) setSessions(res.data || []);
    } catch (error) {
      console.error("Failed to fetch sessions:", error);
    } finally {
      setIsFetchingSessions(false);
    }
  }, [data.global.restUrl, data.global.wpRestNonce]);

  const fetchHistory = React.useCallback(async (sessionId: number) => {
    setIsFetchingHistory(true);
    try {
      const response = await fetch(`${data.global.restUrl}/ai-assistant/chats?session_id=${sessionId}`, {
        headers: { 'X-WP-Nonce': data.global.wpRestNonce }
      });
      const res = await response.json();
      if (res.success && res.data) {
        const history = res.data.map((m: { id: number | string; role: 'user' | 'assistant'; content: string; rating?: string | number; timestamp: string }) => {
          let reasoning = '';
          let cleanContent = m.content.trim();
          if (m.role === 'assistant') {
            const thoughtMatch = cleanContent.match(/<thought>([\s\S]*?)<\/thought>/);
            if (thoughtMatch) {
              reasoning = thoughtMatch[1].trim();
              cleanContent = cleanContent.replace(/<thought>[\s\S]*?<\/thought>/, '').trim();
            }
          }
          return {
            id: m.id.toString(),
            role: m.role,
            content: cleanContent,
            reasoning: reasoning,
            rating: typeof m.rating === 'number' ? m.rating : parseInt(String(m.rating || 0)),
            timestamp: new Date(m.timestamp)
          };
        });
        setMessages([WELCOME_MESSAGE, ...history]);
      }
    } catch (error) {
      console.error("Failed to fetch history:", error);
    } finally {
      setIsFetchingHistory(false);
    }
  }, [data.global.restUrl, data.global.wpRestNonce]);

  const startNewChat = () => {
    setView('chat');
    setCurrentSessionId(null);
    setMessages([WELCOME_MESSAGE]);
    setEditingId(null);
  };

  const selectSession = (sessionId: number) => {
    setView('chat');
    setCurrentSessionId(sessionId);
    fetchHistory(sessionId);
    setEditingId(null);
  };

  const deleteSession = async (e: React.MouseEvent, sessionId: number) => {
    e.stopPropagation();
    if (!confirm('Are you sure you want to delete this conversation?')) return;
    try {
      await fetch(`${data.global.restUrl}/ai-assistant/sessions/${sessionId}`, {
        method: 'DELETE',
        headers: { 'X-WP-Nonce': data.global.wpRestNonce }
      });
      setSessions(prev => prev.filter(s => s.id !== sessionId));
      if (currentSessionId === sessionId) startNewChat();
    } catch (error) {
      console.error("Failed to delete session:", error);
    }
  };

  const renameSession = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!renamingSessionId || !renamingTitle.trim()) return;
    try {
      await fetch(`${data.global.restUrl}/ai-assistant/sessions`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': data.global.wpRestNonce
        },
        body: JSON.stringify({ id: renamingSessionId, title: renamingTitle })
      });
      setSessions(prev => prev.map(s => s.id === renamingSessionId ? { ...s, title: renamingTitle } : s));
      setRenamingSessionId(null);
    } catch (error) {
      console.error("Failed to rename session:", error);
    }
  };

  const handleOpen = () => {
    setOpen(true);
    fetchSessions();
    fetchAiSettings();
    if (!currentSessionId && messages.length === 0) {
      setMessages([WELCOME_MESSAGE]);
    }
  };

  React.useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }, [messages, isLoading, view]);

  const generateAutoTitle = async (sessionId: number, userMsg: string, aiMsg: string) => {
    try {
      const prompt = `Based on this user question and AI answer, generate a very short (max 4 words) title in the SAME language used (Arabic or English). Return ONLY the title text.
      USER: ${userMsg}
      AI: ${aiMsg.substring(0, 100)}...
      Title:`;

      let generatedTitle = '';

      // Try Paid Providers First
      const PAID_PROVIDERS = ['openai', 'anthropic', 'google', 'groq', 'deepseek'];
      for (const p of PAID_PROVIDERS) {
        const isEnabled = aiSettings?.[`${p}_enabled`];
        const pKey = aiSettings?.[`${p}_key`];
        const pModel = aiSettings?.[`${p}_model`];

        if (isEnabled && pKey) {
          try {
            const proxyResponse = await fetch(`${data.global.restUrl}/ai-assistant/chat-proxy`, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'X-WP-Nonce': data.global.wpRestNonce
              },
              body: JSON.stringify({
                messages: [{ role: 'user', content: prompt }],
                provider: p,
                model: pModel
              })
            });
            const proxyRes = await proxyResponse.json();
            if (proxyRes.success && proxyRes.content) {
              generatedTitle = proxyRes.content.replace(/["']/g, '').trim();
              break;
            }
          } catch {
            console.warn(`Title generation failed on ${p}, trying next...`);
          }
        }
      }

      // Fallback to Free if not generated via paid
      if (!generatedTitle) {
        const response = await fetch('https://text.pollinations.ai/', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            messages: [{ role: 'user', content: prompt }],
            model: 'openai',
            seed: 42
          })
        });
        generatedTitle = (await response.text()).replace(/["']/g, '').trim();
      }

      if (generatedTitle && generatedTitle.length > 2) {
        setSessions(prev => {
          const exists = prev.some(s => s.id === sessionId);
          if (exists) {
            return prev.map(s => s.id === sessionId ? { ...s, title: generatedTitle } : s);
          } else {
            return [{ id: sessionId, title: generatedTitle, timestamp: new Date().toISOString() }, ...prev];
          }
        });

        await fetch(`${data.global.restUrl}/ai-assistant/sessions`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-WP-Nonce': data.global.wpRestNonce
          },
          body: JSON.stringify({ id: sessionId, title: generatedTitle })
        });
      }
    } catch (err) {
      console.warn("Failed to generate auto title", err);
    }
  };

  const saveMessage = async (role: 'user' | 'assistant', content: string, msgId?: string, forceSessionId?: number | null) => {
    try {
      const sessionIdToUse = forceSessionId !== undefined ? forceSessionId : currentSessionId;
      const response = await fetch(`${data.global.restUrl}/ai-assistant/chats`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': data.global.wpRestNonce
        },
        body: JSON.stringify({ id: msgId, role, content, session_id: sessionIdToUse })
      });
      const res = await response.json();
      if (res.success) {
        if (!sessionIdToUse && res.session_id) {
          setCurrentSessionId(res.session_id);
          fetchSessions();
        }
        return { msgId: res.id, sessionId: res.session_id };
      }
    } catch (error) {
      console.error("Failed to save message:", error);
    }
    return null;
  };

  const rateMessage = async (msgId: string, rating: number) => {
    try {
      await fetch(`${data.global.restUrl}/ai-assistant/chats/${msgId}/rate`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': data.global.wpRestNonce
        },
        body: JSON.stringify({ rating })
      });
      setMessages(prev => prev.map(m => m.id === msgId ? { ...m, rating } : m));
    } catch (error) {
      console.error("Failed to rate message:", error);
    }
  };

  const deleteMessage = async (msgId: string) => {
    try {
      await fetch(`${data.global.restUrl}/ai-assistant/chats/${msgId}`, {
        method: 'DELETE',
        headers: { 'X-WP-Nonce': data.global.wpRestNonce }
      });
    } catch (error) {
      console.error("Failed to delete message:", error);
    }
  };

  const handleCopy = (text: string) => {
    navigator.clipboard.writeText(text);
  };

  const handleRegenerate = async () => {
    if (isLoading || messages.length < 2) return;

    const lastMsg = messages[messages.length - 1];
    if (lastMsg.role !== 'assistant') return;

    await deleteMessage(lastMsg.id);
    setMessages(prev => prev.slice(0, -1));

    const lastUserMsg = messages.findLast(m => m.role === 'user');
    if (lastUserMsg) {
      handleSend(lastUserMsg.content, true);
    }
  };

  const handleEditSave = async () => {
    if (!editingId || !editContent.trim()) return;

    await saveMessage('user', editContent, editingId);

    const editIndex = messages.findIndex(m => m.id === editingId);
    if (editIndex === -1) return;

    const updatedMessages = messages.slice(0, editIndex + 1);
    updatedMessages[editIndex].content = editContent;

    const nextMsg = messages[editIndex + 1];
    if (nextMsg && nextMsg.role === 'assistant') {
      await deleteMessage(nextMsg.id);
    }

    setMessages(updatedMessages);
    setEditingId(null);
    handleSend(editContent, true);
  };

  const handleSend = async (customInput?: string, isRetry = false) => {
    const textToSend = customInput || input;
    if (!textToSend.trim() || isLoading) return;

    let activeSessionId = currentSessionId;

    if (!isRetry) {
      localIdCounter.current++;
      const userMessage: Message = {
        id: `user-${localIdCounter.current}`,
        role: 'user',
        content: textToSend,
        timestamp: new Date()
      };
      setMessages(prev => [...prev, userMessage]);
      const res = await saveMessage('user', textToSend);
      if (res) {
        activeSessionId = res.sessionId;
        setMessages(prev => prev.map(m => m.id === userMessage.id ? { ...m, id: res.msgId.toString() } : m));
      }
      if (!customInput) setInput('');
    }

    setIsLoading(true);

    const apiMessages = [
      ...messages.filter(m => m.id !== 'welcome').map(m => ({ role: m.role, content: m.content })),
      { role: 'user', content: textToSend }
    ];

    // Build a precise, deterministic features snapshot for the AI
    const featuresSnapshot: Record<string, { status: string; allowed: boolean; db_key: string }> = {};
    if (data.features) {
      for (const k of Object.keys(data.features)) {
        const feat = data.features[k as keyof typeof data.features];
        if (feat && typeof feat === 'object' && 'option' in feat) {
          const f = feat as { enabled: string | number | boolean; allowed: boolean; option: string };
          featuresSnapshot[k] = {
            status: f.enabled ? 'Enabled' : 'Disabled',
            allowed: f.allowed,
            db_key: f.option
          };
        }
      }
    }

    const systemContext = `You are "Wawp Co-Pilot", the built-in AI assistant for the Wawp WordPress plugin (Automation Web Platform).

CRITICAL RULES:
- Respond in the SAME language the user writes in. Arabic→Arabic, English→English.
- The plugin name is always "Wawp" (capital W, lowercase awp). Never WAWP or wawp.
- Always start with <thought>brief analysis</thought> then your response.
- You are NOT a general AI. Every answer must relate to this plugin.
- Never say "I don't know" or "I can't help". Always provide a concrete next step.

CURRENT STATE:
Version: ${data.global?.version || 'unknown'}
Plan: ${data.connector?.plan_name || 'Free'}
Active Section: ${data.global?.section || 'dashboard'}
Connected: ${data.sidebarData?.isConnected ? 'Yes' : 'No'}
Active Senders: ${JSON.stringify(data.sidebarData?.enabledSenders || {})}

FEATURES STATUS:
${Object.entries(featuresSnapshot).map(([k, v]) => `- ${k}: ${v.status} (key: ${v.db_key}, allowed: ${v.allowed})`).join('\n')}

EXACT PAGE URLS (use these ONLY — never invent URLs):
- Dashboard: admin.php?page=wawp&wawp_section=dashboard
- Senders (WhatsApp/Email/Firebase): admin.php?page=wawp&wawp_section=senders
- Chat Widget: admin.php?page=wawp&wawp_section=chat_widget
- Notifications: admin.php?page=wawp&wawp_section=notifications
- Campaigns: admin.php?page=wawp&wawp_section=campaigns
- OTP Login: admin.php?page=wawp&wawp_section=otp_messages&tab=tab-otp-login
- Registration: admin.php?page=wawp&wawp_section=otp_messages&tab=tab-signup
- Checkout OTP: admin.php?page=wawp&wawp_section=otp_messages&tab=tab-checkout
- Login/Signup Pages: admin.php?page=wawp&wawp_section=otp_messages&tab=tab-login-signup-pages
- Abandoned Cart: admin.php?page=wawp&wawp_section=abandoned_cart
- Block Manager: admin.php?page=wawp&wawp_section=block_manager
- System Info: admin.php?page=wawp&wawp_section=system_info
- reCAPTCHA: admin.php?page=wawp&wawp_section=recaptcha
- Email Templates: admin.php?page=wawp&wawp_section=email_templates
- Activity Logs: admin.php?page=wawp&wawp_section=activity_logs

ACTION SYSTEM — to offer a toggle or input to the user, output exactly:
<action type="setting" key="DB_OPTION_KEY" label="Human Label" component="switch" value="CURRENT_VALUE" />
<action type="setting" key="DB_OPTION_KEY" label="Human Label" component="input" value="CURRENT_VALUE" />

EXAMPLES:
- Enable chat widget: <action type="setting" key="wawp_enable_button" label="Chat Widget" component="switch" value="no" />
- Change welcome message: <action type="setting" key="wawp_welcome_message" label="Welcome Message" component="input" value="Hello!" />
- Enable abandoned cart popup: <action type="setting" key="wawp_ac_enable_popup" label="Abandoned Cart Popup" component="switch" value="0" />

NOTIFICATION CREATION — to create a new notification, output:
<notification trigger_key="TRIGGER" name="Rule Name" sender_type="SENDER_TYPE" whatsapp_enabled="1" whatsapp_message="MESSAGE" email_enabled="0" email_subject="" email_body="" send_timing="instant" delay_value="0" delay_unit="minutes" admin_whatsapp_enabled="0" admin_email_enabled="0" />

Available trigger_keys:
- user_login: User logs in
- user_signup: New user registers
- wc_status_processing: Order processing
- wc_status_completed: Order completed
- wc_status_on-hold: Order on hold
- wc_status_cancelled: Order cancelled
- wc_status_refunded: Order refunded
- wc_status_failed: Order failed
- wc_status_pending: Order pending
- wc_order_note_added: Order note added
- abandoned_cart: Abandoned cart recovery
- potential_customer: Potential customer detected

Available sender_types:
- user_whatsapp: Send WhatsApp to user
- user_email: Send email to user
- user_both: Send WhatsApp + email to user
- admin_whatsapp: Send WhatsApp to admin
- admin_email: Send email to admin
- user_admin_whatsapp: Send WhatsApp to user + admin
- user_admin_both: Send all channels to user + admin

Available placeholders for messages:
- {{sitename}}: Site name
- {{wp-display-name}}: User display name
- {{order_id}}: Order ID
- {{order_total}}: Order total
- {{status}}: Order status

When the user asks to create a notification, suggest the best configuration and output the <notification> tag. The user can approve it directly.

KEY FORMAT RULES:
- Master toggles (dashboard): value "1" or "0"
- Chat widget keys: value "yes" or "no"
- OTP/checkout keys: value "yes" or "no"
- Always use the exact db_key from FEATURES STATUS or from this schema:
${JSON.stringify(AI_ACTIONS_SCHEMA, null, 2)}

Be concise, helpful, and proactive. If a relevant feature is disabled, suggest enabling it.

USER: ${textToSend}`;

    const fullApiMessages = [
      { role: 'system', content: systemContext },
      ...apiMessages
    ];

    // Build priority list: fastest providers first (groq > openai > deepseek > anthropic > google > free)
    const SPEED_ORDER = ['groq', 'openai', 'deepseek', 'anthropic', 'google'];
    const PROVIDERS: { id: string; model: string | boolean | undefined }[] = [];
    for (const p of SPEED_ORDER) {
      if (aiSettings?.[`${p}_enabled`] && aiSettings?.[`${p}_key`]) {
        PROVIDERS.push({ id: p, model: aiSettings[`${p}_model`] });
      }
    }

    if (aiSettings?.freeModeEnabled !== false) {
      PROVIDERS.push({ id: 'free', model: 'openai' });
    }

    if (PROVIDERS.length === 0) {
      localIdCounter.current++;
      setMessages(prev => [...prev, {
        id: `assistant-local-${localIdCounter.current}`,
        role: 'assistant',
        content: "⚠️ **No AI Brain Active.**\n\nAll AI providers are currently disabled. Please go to **AI Settings** and enable at least one brain (Free or Paid) to continue.",
        timestamp: new Date()
      }]);
      setIsLoading(false);
      return;
    }

    localIdCounter.current++;
    const assistantMsgId = `assistant-local-${localIdCounter.current}`;
    let streamSuccess = false;

    for (const providerInfo of PROVIDERS) {
      try {
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 45000); // 45s timeout

        const response = await fetch(`${data.global.restUrl}/ai-assistant/chat-stream`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-WP-Nonce': data.global.wpRestNonce
          },
          body: JSON.stringify({
            messages: fullApiMessages,
            provider: providerInfo.id,
            model: providerInfo.model
          }),
          signal: controller.signal
        });

        clearTimeout(timeoutId);
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

        const reader = response.body?.getReader();
        if (!reader) throw new Error("No reader available");

        const decoder = new TextDecoder();
        streamContentRef.current = '';
        streamReasoningRef.current = '';
        let isStarted = false;
        let hasError = false;

        while (true) {
          const { done, value } = await reader.read();
          if (done) break;

          const chunk = decoder.decode(value, { stream: true });
          const lines = chunk.split('\n');

          for (const line of lines) {
            if (line.startsWith('data: ')) {
              const dataStr = line.slice(6).trim();
              if (dataStr === '[DONE]') continue;

              try {
                const json = JSON.parse(dataStr);

                // Detect streaming errors from the server
                if (json.error) {
                  console.warn(`Stream error from ${providerInfo.id}:`, json.error);
                  hasError = true;
                  break;
                }

                let delta = '';
                let reasoningDelta = '';

                // Handle different provider response formats
                if (['openai', 'groq', 'deepseek', 'free'].includes(providerInfo.id)) {
                  delta = json.choices?.[0]?.delta?.content || '';
                  reasoningDelta = json.choices?.[0]?.delta?.reasoning_content || '';
                } else if (providerInfo.id === 'anthropic') {
                  if (json.type === 'content_block_delta') {
                    delta = json.delta?.text || '';
                  } else if (json.type === 'message_delta') {
                    // End of message
                  } else if (json.type === 'error') {
                    hasError = true;
                    break;
                  }
                } else if (providerInfo.id === 'google') {
                  delta = json.candidates?.[0]?.content?.parts?.[0]?.text || '';
                }

                if (delta || reasoningDelta) {
                  streamContentRef.current = streamContentRef.current + delta;
                  streamReasoningRef.current = streamReasoningRef.current + reasoningDelta;
                  streamSuccess = true;

                  if (!isStarted) {
                    setMessages(prev => [...prev, {
                      id: assistantMsgId,
                      role: 'assistant',
                      content: '',
                      reasoning: '',
                      timestamp: new Date(),
                      rating: 0
                    }]);
                    isStarted = true;
                    setIsLoading(false);
                  }

                  setMessages(prev => prev.map(m => m.id === assistantMsgId ? {
                    ...m,
                    content: streamContentRef.current.replace(/<thought>[\s\S]*?<\/thought>/, '').trim(),
                    reasoning: streamReasoningRef.current || (streamContentRef.current.match(/<thought>([\s\S]*?)<\/thought>/)?.[1] || m.reasoning)
                  } : m));
                }
              } catch {
                // Ignore parse errors for partial chunks
              }
            }
          }

          if (hasError) break;
        }

        // If we got an error mid-stream without any content, skip to next provider
        if (hasError && !streamSuccess) {
          console.warn(`Provider ${providerInfo.id} returned an error, trying next...`);
          continue;
        }

        if (streamSuccess) {
          // Final clean up and save
          const finalMsg = streamContentRef.current.replace(/<thought>[\s\S]*?<\/thought>/, '').trim();

          const saveRes = await saveMessage('assistant', streamContentRef.current, undefined, activeSessionId);
          if (saveRes) {
            setMessages(prev => prev.map(m => m.id === assistantMsgId ? { ...m, id: saveRes.msgId.toString() } : m));
            if (messages.length <= 3) generateAutoTitle(saveRes.sessionId, textToSend, finalMsg);
          }
          break;
        }
      } catch (err) {
        console.warn(`Provider ${providerInfo.id} failed, trying next...`, err);
      }
    }

    if (!streamSuccess) {
      localIdCounter.current++;
      setMessages(prev => [...prev, {
        id: `assistant-local-${localIdCounter.current}`,
        role: 'assistant',
        content: "⚠️ **Connection Issue**\n\nI couldn't reach any AI provider. Please check:\n- Your API keys in **AI Settings**\n- Your server's internet connectivity\n- That at least one AI provider is enabled",
        timestamp: new Date(),
        rating: 0
      }]);
    }
    setIsLoading(false);
  };

  return (
    <>
      <button
        onClick={handleOpen}
        className="flex items-center justify-center w-9 h-9 rounded-full bg-white/10 hover:bg-white/20 transition-all group relative"
      >
        <Sparkles className="w-4 h-4 text-emerald-400 group-hover:scale-110 transition-transform" />
        <span className="absolute -top-1 -right-1 w-2 h-2 bg-emerald-500 rounded-full animate-pulse border-2 border-[#044]" />
      </button>

      {createPortal(
        <AnimatePresence>
          {open && (
            <div className="wawp-ai-assistant-root">
              <motion.div
                initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
                onClick={() => setOpen(false)}
                className="fixed inset-0 bg-black/40 z-[9999999] backdrop-blur-sm"
              />
              <motion.div
                initial={{ x: data.global.isRtl ? '-100%' : '100%' }} animate={{ x: 0 }} exit={{ x: data.global.isRtl ? '-100%' : '100%' }}
                transition={{ type: 'spring', damping: 28, stiffness: 220 }}
                className={cn(
                  "fixed inset-y-0 w-full lg:max-w-[calc(100%-100px)] xl:max-w-[1400px] bg-white z-[9999999] shadow-none flex overflow-hidden",
                  data.global.isRtl ? "left-0" : "right-0"
                )}
              >
                {/* Sidebar */}
                <div className={cn(
                  "bg-slate-50/50 border-r border-slate-100 transition-all duration-300 flex flex-col shrink-0",
                  sidebarOpen ? "w-80" : "w-0 overflow-hidden opacity-0"
                )}>
                  <div className="p-5 border-b border-slate-100 flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <History className="w-4 h-4 text-emerald-500" />
                      <h3 className="font-semibold text-slate-700 text-sm m-0 leading-none">
                        Chat History
                      </h3>
                    </div>
                    <GhostButton size="icon" onClick={startNewChat} className="text-emerald-600 hover:bg-emerald-50 rounded-lg w-8 h-8">
                      <Plus className="w-3.5 h-3.5" />
                    </GhostButton>
                  </div>

                  <div className="flex-1 overflow-y-auto p-3 space-y-1 custom-scrollbar">
                    {isFetchingSessions && sessions.length === 0 ? (
                      <div className="flex justify-center p-8"><Loader2 className="w-5 h-5 animate-spin text-slate-200" /></div>
                    ) : sessions.length === 0 ? (
                      <div className="p-8 text-center text-slate-400 text-xs">No previous chats.</div>
                    ) : (
                      sessions.map(session => (
                        <div
                          key={session.id}
                          onClick={() => selectSession(session.id)}
                          className={cn(
                            "group p-3 rounded-xl cursor-pointer transition-all flex items-start gap-3",
                            currentSessionId === session.id ? "bg-white border border-emerald-100 shadow-sm" : "hover:bg-white/50 border border-transparent"
                          )}
                        >
                          <MessageSquare className={cn("w-3.5 h-3.5 mt-0.5 shrink-0", currentSessionId === session.id ? "text-emerald-500" : "text-slate-300")} />
                          <div className="flex-1 overflow-hidden">
                            {renamingSessionId === session.id ? (
                              <form onSubmit={renameSession} className="flex gap-1">
                                <input
                                  autoFocus
                                  value={renamingTitle}
                                  onChange={(e) => setRenamingTitle(e.target.value)}
                                  onBlur={() => setRenamingSessionId(null)}
                                  className="w-full text-xs p-1 border border-emerald-100 rounded focus:ring-0 focus:border-emerald-500 bg-white"
                                />
                                <button type="submit" className="text-emerald-600"><Check className="w-3 h-3" /></button>
                              </form>
                            ) : (
                              <div className="flex items-center justify-between">
                                <div className="text-xs font-medium text-slate-600 truncate">{session.title}</div>
                                <button
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    setRenamingSessionId(session.id);
                                    setRenamingTitle(session.title);
                                  }}
                                  className="opacity-0 group-hover:opacity-100 p-1 text-slate-300 hover:text-emerald-600"
                                >
                                  <Edit2 className="w-2.5 h-2.5" />
                                </button>
                              </div>
                            )}
                            <div className="text-[9px] text-slate-400 mt-0.5 uppercase tracking-tighter">{new Date(session.timestamp).toLocaleDateString()}</div>
                          </div>
                          <button
                            onClick={(e) => deleteSession(e, session.id)}
                            className="opacity-0 group-hover:opacity-100 p-1 hover:text-red-500 text-slate-300"
                          >
                            <Trash2 className="w-3 h-3" />
                          </button>
                        </div>
                      ))
                    )}
                  </div>

                  {/* Sidebar Bottom Actions */}
                  <div className="p-4 border-t border-slate-100 bg-slate-50/80">
                    <GhostButton
                      onClick={() => setView('settings')}
                      className={cn(
                        "w-full justify-start gap-2 text-xs font-bold uppercase tracking-widest transition-all",
                        view === 'settings' ? "text-emerald-600 bg-white shadow-sm ring-1 ring-emerald-100" : "text-slate-400 hover:text-emerald-600"
                      )}
                    >
                      <Settings className="w-3.5 h-3.5" />
                      AI Settings
                    </GhostButton>
                  </div>
                </div>

                {/* Main Content */}
                <div className="flex-1 flex flex-col relative bg-white">
                  <div className={cn(
                    "absolute top-1/2 -translate-y-1/2 z-10",
                    data.global.isRtl ? "-right-3" : "-left-3"
                  )}>
                    <button
                      onClick={() => setSidebarOpen(!sidebarOpen)}
                      className="w-6 h-12 bg-white border border-slate-100 rounded-full flex items-center justify-center text-slate-300 hover:text-emerald-500 transition-colors"
                    >
                      {sidebarOpen ? (data.global.isRtl ? <ChevronRight className="w-3 h-3" /> : <ChevronLeft className="w-3 h-3" />) : (data.global.isRtl ? <ChevronLeft className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />)}
                    </button>
                  </div>

                  {view === 'settings' ? (
                    <AISettings data={data} onBack={() => { setView('chat'); fetchAiSettings(); }} />
                  ) : (
                    <>
                      <ModernCardHeader
                        title={currentSessionId ? sessions.find(s => s.id === currentSessionId)?.title || "Wawp Co-Pilot" : "Wawp Co-Pilot"}
                        description="Live Context-Aware Assistant"
                        icon={() => <WAWPLogo size={20} />}
                        rightAction={
                          <div className="flex items-center gap-2">
                            <GhostButton size="icon" onClick={() => setOpen(false)} className="text-slate-300 hover:text-slate-600 rounded-full">
                              <X className="w-4 h-4" />
                            </GhostButton>
                          </div>
                        }
                      />

                      <div className="flex-1 overflow-y-auto p-6 lg:p-10 space-y-8 custom-scrollbar">
                        {isFetchingHistory && (
                          <div className="flex justify-center py-4"><Loader2 className="w-4 h-4 animate-spin text-emerald-500" /></div>
                        )}
                        {messages.map((msg, index) => (
                          <div key={msg.id} className={cn("flex gap-5 max-w-4xl group/msg", msg.role === 'user' ? "ml-auto flex-row-reverse" : "mr-auto")}>
                            <div className={cn(
                              "w-7 h-7 rounded-lg flex items-center justify-center shrink-0 transition-transform",
                              msg.role === 'assistant' ? "bg-emerald-50 text-emerald-600" : "bg-slate-50 text-slate-500"
                            )}>
                              {msg.role === 'assistant' ? (
                                getAssistantIcon(msg.id, msg.content)
                              ) : (
                                <User className="w-3.5 h-3.5" />
                              )}
                            </div>
                            <div className={cn("flex flex-col gap-1", msg.role === 'user' ? "items-end" : "items-start")}>
                              <div
                                dir={isArabic(msg.content) ? 'rtl' : 'ltr'}
                                className={cn(
                                  "relative px-4 py-3 rounded-2xl text-sm leading-relaxed border transition-all",
                                  isArabic(msg.content) ? "text-right" : "text-left",
                                  msg.role === 'assistant' ? "bg-slate-50/50 border-slate-100 text-slate-700" : "bg-emerald-600 border-emerald-500 text-white"
                                )}>
                                {editingId === msg.id ? (
                                  <div className="space-y-3 min-w-[200px]">
                                    <textarea
                                      value={editContent}
                                      onChange={(e) => setEditContent(e.target.value)}
                                      className="w-full bg-white/10 border border-white/20 rounded-xl p-3 text-sm text-white focus:ring-0 shadow-none resize-none"
                                      autoFocus
                                    />
                                    <div className="flex gap-2 justify-end">
                                      <button onClick={() => setEditingId(null)} className="p-1.5 hover:bg-white/10 rounded-lg"><X className="w-3.5 h-3.5" /></button>
                                      <button onClick={handleEditSave} className="p-1.5 hover:bg-white/10 rounded-lg"><Check className="w-3.5 h-3.5" /></button>
                                    </div>
                                  </div>
                                ) : (
                                  <div className={cn(
                                    "prose prose-sm max-w-none prose-emerald",
                                    msg.role === 'user' ? "text-white prose-invert" : "text-slate-700"
                                  )}>
                                    {(() => {
                                      interface ContentPart {
                                        type: 'text' | 'action' | 'notification';
                                        content?: string;
                                        attrs?: Record<string, string>;
                                      }
                                      const parts: ContentPart[] = [];
                                      let lastIndex = 0;

                                      const regexAction = /<action ([\s\S]*?) \/>/g;
                                      const regexNotif = /<notification ([\s\S]*?) \/>/g;

                                      interface TagMatch {
                                        start: number;
                                        end: number;
                                        type: 'action' | 'notification';
                                        attrStr: string;
                                      }

                                      const matches: TagMatch[] = [];
                                      let match;

                                      while ((match = regexAction.exec(msg.content)) !== null) {
                                        matches.push({
                                          start: match.index,
                                          end: regexAction.lastIndex,
                                          type: 'action',
                                          attrStr: match[1]
                                        });
                                      }

                                      while ((match = regexNotif.exec(msg.content)) !== null) {
                                        matches.push({
                                          start: match.index,
                                          end: regexNotif.lastIndex,
                                          type: 'notification',
                                          attrStr: match[1]
                                        });
                                      }

                                      matches.sort((a, b) => a.start - b.start);

                                      for (const m of matches) {
                                        const textBefore = msg.content.substring(lastIndex, m.start);
                                        if (textBefore.trim()) {
                                          parts.push({ type: 'text', content: textBefore });
                                        }

                                        const attrs: Record<string, string> = {};
                                        const attrMatches = m.attrStr.matchAll(/(\w+)="([^"]*)"/g);
                                        for (const am of attrMatches) {
                                          attrs[am[1]] = am[2];
                                        }

                                        parts.push({ type: m.type, attrs });
                                        lastIndex = m.end;
                                      }

                                      const remainingText = msg.content.substring(lastIndex);
                                      if (remainingText.trim() || parts.length === 0) {
                                        parts.push({ type: 'text', content: remainingText });
                                      }

                                      return parts.map((part, i) => (
                                        <React.Fragment key={i}>
                                          {part.type === 'text' ? (
                                            <ReactMarkdown
                                              remarkPlugins={[remarkGfm]}
                                              components={{
                                                table: (props: React.ComponentPropsWithoutRef<'table'>) => <div className="overflow-x-auto my-4 w-full"><table className="w-full text-xs border-collapse border border-slate-100 rounded-lg" {...props} /></div>,
                                                th: (props: React.ComponentPropsWithoutRef<'th'>) => <th className="bg-slate-50 border-b border-slate-100 px-3 py-2 font-bold text-slate-600 text-start" {...props} />,
                                                td: (props: React.ComponentPropsWithoutRef<'td'>) => <td className="border-b border-slate-50 px-3 py-2 text-start" {...props} />,
                                                a: (props: React.ComponentPropsWithoutRef<'a'>) => <a className="text-emerald-600 font-medium hover:underline" target="_blank" rel="noopener noreferrer" {...props} />,
                                                code: ({ inline, children, ...props }: { inline?: boolean; children?: React.ReactNode } & React.ComponentPropsWithoutRef<'code'>) => inline
                                                  ? <code className="bg-slate-100/50 text-emerald-700 px-1 py-0.5 rounded text-[11px] font-mono" {...props}>{children}</code>
                                                  : <div className="bg-slate-900 text-slate-100 p-4 rounded-xl my-3 overflow-x-auto text-xs font-mono" dir="ltr"><code {...props}>{children}</code></div>
                                              }}
                                            >
                                              {part.content}
                                            </ReactMarkdown>
                                          ) : part.type === 'action' ? (
                                            <ChatAction
                                              action={{
                                                key: part.attrs?.key || '',
                                                value: part.attrs?.value || '',
                                                label: part.attrs?.label || '',
                                                component: part.attrs?.component || 'input'
                                              }}
                                              data={data}
                                              onComplete={(m) => {
                                                localIdCounter.current++;
                                                setMessages(prev => [...prev, {
                                                  id: `action-${localIdCounter.current}`,
                                                  role: 'assistant',
                                                  content: m,
                                                  timestamp: new Date()
                                                }]);
                                              }}
                                            />
                                          ) : (
                                            <ChatNotificationAction
                                              attrs={part.attrs!}
                                              data={data}
                                              onComplete={(m) => {
                                                localIdCounter.current++;
                                                setMessages(prev => [...prev, {
                                                  id: `notif-${localIdCounter.current}`,
                                                  role: 'assistant',
                                                  content: m,
                                                  timestamp: new Date()
                                                }]);
                                              }}
                                            />
                                          )}
                                        </React.Fragment>
                                      ));
                                    })()}
                                  </div>
                                )}
                              </div>

                              {msg.reasoning && (
                                <div className="mt-2">
                                  <Reasoning
                                    className="mb-0"
                                    defaultOpen={false}
                                  >
                                    <ReasoningTrigger className="text-[11px] text-slate-400 hover:text-emerald-500 flex items-center gap-1.5 transition-colors font-medium" />
                                    <ReasoningContent
                                      dir={isArabic(msg.reasoning) ? 'rtl' : 'ltr'}
                                      className={cn(
                                        "italic text-slate-500 bg-slate-50/30 p-4 rounded-2xl border border-slate-100 mt-2 text-xs leading-relaxed",
                                        isArabic(msg.reasoning) ? "text-right" : "text-left"
                                      )}
                                    >
                                      {msg.reasoning}
                                    </ReasoningContent>
                                  </Reasoning>
                                </div>
                              )}

                              <div className={cn(
                                "flex items-center gap-1.5 mt-0.5 transition-opacity px-1",
                                msg.role === 'user' ? "flex-row-reverse" : "flex-row"
                              )}>
                                <span className="text-[8px] text-slate-300 uppercase tracking-widest font-medium">
                                  {msg.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                </span>

                                <div className="flex items-center gap-1 opacity-0 group-hover/msg:opacity-100 transition-opacity">
                                  {msg.role === 'assistant' ? (
                                    <>
                                      <button onClick={() => rateMessage(msg.id, msg.rating === 1 ? 0 : 1)} className={cn("p-1 transition-colors", msg.rating === 1 ? "text-emerald-500" : "text-slate-300 hover:text-emerald-500")}><ThumbsUp className="w-3 h-3" /></button>
                                      <button onClick={() => rateMessage(msg.id, msg.rating === -1 ? 0 : -1)} className={cn("p-1 transition-colors", msg.rating === -1 ? "text-red-500" : "text-slate-300 hover:text-red-500")}><ThumbsDown className="w-3 h-3" /></button>
                                      <button onClick={() => handleCopy(msg.content)} className="p-1 text-slate-300 hover:text-emerald-600"><Copy className="w-3 h-3" /></button>
                                      {index === messages.length - 1 && (
                                        <button onClick={handleRegenerate} className="p-1 text-slate-300 hover:text-emerald-600"><RotateCcw className="w-3 h-3" /></button>
                                      )}
                                    </>
                                  ) : (
                                    <>
                                      <button onClick={() => handleCopy(msg.content)} className="p-1 text-slate-300 hover:text-emerald-600"><Copy className="w-3 h-3" /></button>
                                      {index === messages.length - 2 && (
                                        <button onClick={() => { setEditingId(msg.id); setEditContent(msg.content); }} className="p-1 text-slate-300 hover:text-emerald-600"><Edit2 className="w-3 h-3" /></button>
                                      )}
                                    </>
                                  )}
                                </div>
                              </div>
                            </div>
                          </div>
                        ))}
                        {isLoading && (
                          <div className="flex gap-5 mr-auto max-w-xl">
                            <div className="w-7 h-7 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0">
                              {getAssistantIcon()}
                            </div>
                            <div className="flex-1">
                              <Reasoning isStreaming={true} className="mb-0">
                                <ReasoningTrigger className="text-[11px] font-medium text-emerald-600/70" />
                                <ReasoningContent className="italic text-slate-400 text-xs mt-2">
                                  {thinkingSteps[currentThinkingStep]}
                                </ReasoningContent>
                              </Reasoning>
                            </div>
                          </div>
                        )}
                        <div ref={scrollRef} />
                      </div>

                      {/* Input Area */}
                      <div className="p-6 lg:p-8 bg-white border-t border-slate-50">
                        <div className="max-w-4xl mx-auto space-y-4">
                          {messages.length <= 1 && (
                            <div className="flex flex-wrap gap-2 justify-center pb-4 animate-in fade-in slide-in-from-bottom-2">
                              {[
                                { label: 'My Setup', icon: Settings },
                                { label: 'Check Issues', icon: ShieldCheck },
                                { label: 'Meta API Help', icon: Zap }
                              ].map(btn => (
                                <GhostButton
                                  key={btn.label}
                                  size="sm"
                                  onClick={() => handleSend(btn.label)}
                                  className="bg-slate-50/50 border border-slate-100 text-slate-500 rounded-full px-4 hover:border-emerald-200 hover:text-emerald-600 transition-all text-[11px]"
                                >
                                  <btn.icon className="w-3 h-3 mr-1.5" />
                                  {btn.label}
                                </GhostButton>
                              ))}
                            </div>
                          )}

                          <div className="relative group">
                            <div className="relative flex items-center gap-3 p-2 bg-slate-50/50 border border-slate-100 rounded-[20px] focus-within:border-emerald-500/20 focus-within:bg-white transition-all">
                              <div className="flex gap-1.5 px-3 border-r border-slate-100 mr-1 shrink-0">
                                <Badge variant="outline" className="bg-white text-emerald-600 border-emerald-50 text-[9px] py-0 px-2 h-5 font-bold uppercase tracking-widest">
                                  <ShieldCheck className="w-2 h-2" /> Linked
                                </Badge>
                              </div>
                              <textarea
                                value={input}
                                onChange={(e) => setInput(e.target.value)}
                                onKeyDown={(e) => {
                                  if (e.key === 'Enter' && !e.shiftKey) {
                                    e.preventDefault();
                                    handleSend();
                                  }
                                }}
                                placeholder="Ask Wawp anything..."
                                className="flex-1 bg-transparent border-none focus:ring-0 text-sm py-3 px-1 resize-none min-h-[44px] max-h-32 text-slate-600 placeholder:text-slate-300 shadow-none"
                              />
                              <button
                                onClick={() => handleSend()}
                                disabled={isLoading || !input.trim()}
                                className={cn(
                                  "w-9 h-9 rounded-xl flex items-center justify-center transition-all shrink-0",
                                  input.trim() && !isLoading ? "bg-emerald-600 text-white hover:bg-emerald-700 shadow-lg shadow-emerald-600/10" : "bg-slate-100 text-slate-200"
                                )}
                              >
                                {isLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Send className="w-3.5 h-3.5" />}
                              </button>
                            </div>
                          </div>
                          <div className="flex justify-between items-center px-4">
                            <span className="text-[9px] text-slate-300 uppercase tracking-[0.2em] font-bold">Secure</span>
                            <div className="flex items-center gap-1.5">
                              <div className="w-1 h-1 bg-emerald-500 rounded-full" />
                              <span className="text-[9px] text-emerald-600/60 font-bold uppercase tracking-[0.2em]">Context Ready</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </>
                  )}
                </div>
              </motion.div>
            </div>
          )}
        </AnimatePresence>,
        document.body
      )}
    </>
  );
}