@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/components/addOns/functional/blogSections/BlogFormPopUp.tsx

@@ -1,555 +1,556 @@
-'use client';
-
-import React, { useEffect, useRef, useCallback, useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { CloseButton, ToggleButton, UpdateButton, CancelButton, ChatToggleButton, ChatSubmitButton, DeleteButton } from '@/components/other/button'; // Updated import
-import { Input } from '@/components/other/input';
-import { Label } from '@/components/other/label';
-import { X, ChevronLeft, ChevronRight } from 'lucide-react';
-import { useAuth, useUser } from '@clerk/nextjs';
-import { useStrapiAuth } from '@/lib/auth-context';
-import { useChat } from 'ai/react';
-
-interface BlogPost {
-  id: number;
-  documentId: string;
-  title: string;
-  description: string;
-  author: string;
-  publishedAt: string;
-}
-
-interface BlogFormPopUpProps {
-  isModalOpen: boolean;
-  setIsModalOpen: (open: boolean) => void;
-  isConfirmDeleteOpen: boolean;
-  setIsConfirmDeleteOpen: (open: boolean) => void;
-  postToDelete: { id: number; documentId: string; title: string } | null;
-  setPostToDelete: (post: { id: number; documentId: string; title: string } | null) => void;
-  isLoading: boolean;
-  setIsLoading: (loading: boolean) => void;
-  formData: BlogPost;
-  setFormData: (data: BlogPost) => void;
-  setError: (error: string | null) => void;
-  setShowSuccess: (show: boolean) => void;
-  fetchData: () => Promise<void>;
-}
-
-const BlogFormPopUp: React.FC<BlogFormPopUpProps> = ({
-  isModalOpen,
-  setIsModalOpen,
-  isConfirmDeleteOpen,
-  setIsConfirmDeleteOpen,
-  postToDelete,
-  setPostToDelete,
-  isLoading,
-  setIsLoading,
-  formData,
-  setFormData,
-  setError,
-  setShowSuccess,
-  fetchData,
-}) => {
-  const [formError, setFormError] = useState<string | null>(null);
-  const [isChatbotOpen, setIsChatbotOpen] = useState(false);
-  const [showKeywords, setShowKeywords] = useState(false);
-  const [titleCharCount, setTitleCharCount] = useState(formData.title.length);
-  const [titleWordCount, setTitleWordCount] = useState(formData.title.trim().split(/\s+/).filter(Boolean).length);
-  const [descriptionCharCount, setDescriptionCharCount] = useState(formData.description.length);
-  const [descriptionWordCount, setDescriptionWordCount] = useState(
-    formData.description.trim().split(/\s+/).filter(Boolean).length
-  );
-  const modalRef = useRef<HTMLDivElement>(null);
-  const descriptionRef = useRef<HTMLTextAreaElement>(null);
-  const { user, authLoading } = useStrapiAuth();
-  const { getToken, isSignedIn } = useAuth();
-  const { user: clerkUser } = useUser();
-  const [scrollPosition, setScrollPosition] = useState(0);
-
-  const seoKeywords = [
-    'fitness training',
-    'gym workout plans',
-    'strength exercises',
-    'cardio routines',
-    'weight loss tips',
-    'muscle building',
-    'home workouts',
-    'personal trainer',
-    'fitness motivation',
-    'healthy lifestyle',
-    'gym equipment',
-    'bodybuilding tips',
-    'HIIT workouts',
-    'nutrition for fitness',
-    'exercise routines',
-  ];
-
-  const { messages, input, handleInputChange, handleSubmit: handleChatSubmit, isLoading: isChatLoading, error } = useChat({
-    api: '/api/chat',
-    initialMessages: [
-      {
-        id: 'system-prompt',
-        role: 'system',
-        content: `You are an AI assistant helping with blog writing and SEO optimization. You are aware of the current blog post's title: "${formData.title}", description: "${formData.description}", and the following SEO keywords: ${seoKeywords.join(', ')}. Provide suggestions to improve the blog post's SEO, such as keyword usage, content structure, or meta descriptions. Respond concisely and relevantly to user queries.`,
-      },
-    ],
-  });
-
-  useEffect(() => {
-  }, [user, clerkUser]);
-
-  const handleClose = useCallback(() => {
-    setIsModalOpen(false);
-    setFormData({
-      id: 0,
-      documentId: '',
-      title: '',
-      description: '',
-      author: user?.businessTitle || clerkUser?.username || user?.username || 'Anonymous',
-      publishedAt: '',
-    });
-    setFormError(null);
-    setIsChatbotOpen(false);
-    setShowKeywords(false);
-    setTitleCharCount(0);
-    setTitleWordCount(0);
-    setDescriptionCharCount(0);
-    setDescriptionWordCount(0);
-    window.scrollTo({ top: scrollPosition, behavior: 'smooth' });
-  }, [setIsModalOpen, setFormData, user, clerkUser, scrollPosition]);
-
-  const handleKeywordClick = useCallback(
-    (keyword: string) => {
-      const textarea = descriptionRef.current;
-      if (!textarea) {
-        setFormError('Text area not initialized');
-        return;
-      }
-
-      const start = textarea.selectionStart;
-      const end = textarea.selectionEnd;
-      const text = formData.description;
-      const newText = text.substring(0, start) + `${keyword} ` + text.substring(end);
-      const truncatedText = newText.slice(0, 1500);
-      setFormData({ ...formData, description: truncatedText });
-      setDescriptionCharCount(truncatedText.length);
-      setDescriptionWordCount(truncatedText.trim().split(/\s+/).filter(Boolean).length);
-
-      setTimeout(() => {
-        textarea.focus();
-        textarea.selectionStart = textarea.selectionEnd = start + keyword.length + 1;
-      }, 0);
-    },
-    [formData, setFormData]
-  );
-
-  const handleConfirmDelete = async () => {
-    if (!postToDelete) return;
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const token = await getToken();
-      const response = await fetch('/api/blog', {
-        method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({ documentId: postToDelete.documentId }),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || 'Failed to delete blog post');
-      }
-
-      await fetchData();
-      setIsConfirmDeleteOpen(false);
-      setPostToDelete(null);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'An unknown error occurred');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleCancelDelete = () => {
-    setIsConfirmDeleteOpen(false);
-    setPostToDelete(null);
-    window.scrollTo({ top: scrollPosition, behavior: 'smooth' });
-  };
-
-  useEffect(() => {
-    if (isModalOpen) {
-      if (authLoading) {
-        setFormError('Authentication is still loading, please wait...');
-      } else if (!isSignedIn || !user || !clerkUser?.id) {
-        setFormError('You must be signed in to create or edit a blog post');
-        setFormData({ ...formData, author: 'Anonymous' });
-      } else if (user?.businessTitle) {
-        setFormData({
-          ...formData,
-          author: user.businessTitle,
-        });
-        setFormError(null);
-      } else {
-        setFormData({ ...formData, author: clerkUser?.username || user?.username || 'Anonymous' });
-        setFormError('Business title not found; using username or default author name');
-      }
-      setTitleCharCount(formData.title.length);
-      setTitleWordCount(formData.title.trim().split(/\s+/).filter(Boolean).length);
-      setDescriptionCharCount(formData.description.length);
-      setDescriptionWordCount(formData.description.trim().split(/\s+/).filter(Boolean).length);
-    }
-  }, [isModalOpen, user, isSignedIn, clerkUser, authLoading, setFormData, formData.title, formData.description]);
-
-  useEffect(() => {
-    if (isModalOpen && modalRef.current) {
-      setScrollPosition(window.scrollY);
-      const modal = modalRef.current;
-      const focusableElements = modal.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      const firstElement = focusableElements[0] as HTMLElement;
-      if (firstElement) {
-        firstElement.focus({ preventScroll: true });
-      }
-
-      const handleKeyDown = (e: KeyboardEvent) => {
-        if (e.key === 'Tab') {
-          const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
-          if (document.activeElement === lastElement && !e.shiftKey) {
-            e.preventDefault();
-            firstElement.focus({ preventScroll: true });
-          }
-          if (document.activeElement === firstElement && e.shiftKey) {
-            e.preventDefault();
-            lastElement.focus({ preventScroll: true });
-          }
-        }
-        if (e.key === 'Escape') {
-          handleClose();
-        }
-      };
-
-      modal.addEventListener('keydown', handleKeyDown);
-      return () => modal.removeEventListener('keydown', handleKeyDown);
-    }
-  }, [isModalOpen, handleClose]);
-
-  useEffect(() => {
-    if (isModalOpen || isConfirmDeleteOpen) {
-      const scrollY = window.scrollY;
-      document.body.style.position = 'fixed';
-      document.body.style.top = `-${scrollY}px`;
-      document.body.style.width = '100%';
-      document.body.classList.add('overflow-hidden');
-      setScrollPosition(scrollY);
-    } else {
-      const scrollY = scrollPosition;
-      document.body.style.position = '';
-      document.body.style.top = '';
-      document.body.style.width = '';
-      document.body.classList.remove('overflow-hidden');
-      window.scrollTo({ top: scrollY, behavior: 'instant' });
-    }
-
-    return () => {
-      document.body.style.position = '';
-      document.body.style.top = '';
-      document.body.style.width = '';
-      document.body.classList.remove('overflow-hidden');
-    };
-  }, [isModalOpen, isConfirmDeleteOpen, scrollPosition]);
-
-  useEffect(() => {
-    const event = new CustomEvent('modalStateChange', {
-      detail: { isOpen: isModalOpen || isConfirmDeleteOpen },
-    });
-    window.dispatchEvent(event);
-  }, [isModalOpen, isConfirmDeleteOpen]);
-
-  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value.slice(0, 50);
-    setFormData({ ...formData, title: value });
-    setTitleCharCount(value.length);
-    setTitleWordCount(value.trim().split(/\s+/).filter(Boolean).length);
-  };
-
-  const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const value = e.target.value.slice(0, 1500);
-    setFormData({ ...formData, description: value });
-    setDescriptionCharCount(value.length);
-    setDescriptionWordCount(value.trim().split(/\s+/).filter(Boolean).length);
-  };
-
-  const onSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!isSignedIn || !user || !clerkUser?.id) {
-      setError('You must be signed in to submit a blog post');
-      return;
-    }
-    if (!formData.title || !formData.description || !formData.author) {
-      setFormError('Please fill in all required fields');
-      return;
-    }
-
-    setIsLoading(true);
-    setFormError(null);
-    try {
-      const token = await getToken();
-      const response = await fetch('/api/blog', {
-        method: formData.id ? 'PUT' : 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({
-          documentId: formData.documentId,
-          data: {
-            title: formData.title,
-            description: formData.description,
-            author: formData.author,
-            publishedAt: formData.publishedAt || new Date().toISOString(),
-          },
-        }),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || 'Failed to submit blog post');
-      }
-
-      await fetchData();
-      setShowSuccess(true);
-      setTimeout(() => setShowSuccess(false), 3000);
-      handleClose();
-    } catch (err) {
-      setFormError(err instanceof Error ? err.message : 'An unknown error occurred');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const modalVariants = {
-    hidden: { opacity: 0, y: '100vh' },
-    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
-    exit: { opacity: 0, y: '100vh', transition: { duration: 0.3, ease: 'easeIn' } },
-  };
-
-  return (
-    <div>
-      {isModalOpen && (
-        <motion.div
-          variants={modalVariants}
-          initial="hidden"
-          animate="visible"
-          exit="exit"
-          className="fixed inset-0 flex items-center justify-center z-[10000] p-4"
-          onClick={handleClose}
-        >
-          <motion.div
-            ref={modalRef}
-            className="relative w-full max-w-5xl mx-4 bg-gray-800/90 backdrop-blur-lg rounded-2xl p-4 sm:p-6 max-h-[90vh] overflow-y-auto overflow-x-hidden flex flex-col sm:flex-row gap-4"
-            onClick={(e) => e.stopPropagation()}
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby="modal-title"
-          >
-            <div className="flex-1">
-              <div className="relative mb-6 pr-12">
-                <h3 id="modal-title" className="text-xl sm:text-2xl font-bold text-white">
-                  {formData.id ? 'Edit Blog Post' : 'Add New Blog Post'}
-                </h3>
-                <CloseButton variant="close-form" onClick={handleClose}>
-                  <X className="h-6 w-6 sm:h-8 sm:w-8" />
-                </CloseButton>
-              </div>
-              <form onSubmit={onSubmit} className="space-y-4">
-                <div>
-                  <Label htmlFor="title" className="block text-sm font-semibold text-gray-200 mb-2">
-                    Title
-                  </Label>
-                  <Input
-                    id="title"
-                    type="text"
-                    placeholder="Enter post title"
-                    value={formData.title}
-                    onChange={handleTitleChange}
-                    maxLength={50}
-                    className="w-full bg-transparent text-white border-gray-400 rounded-md p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    required
-                  />
-                  <p className="text-sm text-gray-500 mt-1">
-                    {titleCharCount}/50 characters, {titleWordCount} words
-                  </p>
-                </div>
-                <div>
-                  <Label htmlFor="author" className="block text-sm font-semibold text-gray-200 mb-2">
-                    Author
-                  </Label>
-                  <Input
-                    id="author"
-                    type="text"
-                    value={formData.author}
-                    onChange={(e) => setFormData({ ...formData, author: e.target.value })}
-                    className="w-full bg-transparent text-white border-gray-400 rounded-md p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    required
-                  />
-                </div>
-                <div>
-                  <Label htmlFor="description" className="block text-sm font-semibold text-gray-200 mb-2">
-                    Description
-                  </Label>
-                  <textarea
-                    ref={descriptionRef}
-                    id="description"
-                    placeholder="Enter post description"
-                    value={formData.description}
-                    onChange={handleDescriptionChange}
-                    maxLength={1500}
-                    className="w-full bg-transparent text-white border border-gray-400 rounded-md p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 min-h-[150px]"
-                    required
-                  />
-                  <p className="text-sm text-gray-500 mt-1">
-                    {descriptionCharCount}/1500 characters, {descriptionWordCount} words
-                  </p>
-                </div>
-                <div>
-                  <ToggleButton
-                    variant="toggle-keywords"
-                    onClick={() => setShowKeywords(!showKeywords)}
-                    aria-expanded={showKeywords}
-                    aria-controls="seo-keywords"
-                  >
-                    {showKeywords ? 'Hide Keywords' : 'Show SEO Keywords'}
-                  </ToggleButton>
-                  {showKeywords && (
-                    <ul id="seo-keywords" className="mt-2 bg-gray-700 border border-gray-600 rounded-md p-4 max-h-40 overflow-y-auto text-white text-sm">
-                      {seoKeywords.map((keyword, index) => (
-                        <li
-                          key={index}
-                          onClick={() => handleKeywordClick(keyword)}
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                              e.preventDefault();
-                              handleKeywordClick(keyword);
-                            }
-                          }}
-                          tabIndex={0}
-                          role="button"
-                          aria-label={`Insert keyword: ${keyword}`}
-                          className="cursor-pointer py-1 px-2 hover:bg-blue-500 hover:text-white rounded transition-colors break-words"
-                        >
-                          {keyword}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </div>
-                <div className="flex flex-col sm:flex-row gap-3 justify-end">
-                  <UpdateButton
-                    type="submit"
-                    disabled={isLoading || !isSignedIn || !user || !clerkUser?.id || authLoading}
-                  >
-                    {isLoading ? 'Saving...' : formData.id ? 'Update' : 'Submit'}
-                  </UpdateButton>
-                  <CancelButton type="button" onClick={handleClose}>
-                    Cancel
-                  </CancelButton>
-                </div>
-                {formError && <p className="text-red-500 text-sm font-semibold break-words">{formError}</p>}
-              </form>
-            </div>
-            <ChatToggleButton
-              onClick={() => setIsChatbotOpen(!isChatbotOpen)}
-              aria-label={isChatbotOpen ? 'Close AI chatbot' : 'Open AI chatbot'}
-            >
-              {isChatbotOpen ? (
-                <ChevronLeft className="h-5 w-5 text-white" />
-              ) : (
-                <ChevronRight className="h-5 w-5 text-white" />
-              )}
-            </ChatToggleButton>
-            <AnimatePresence>
-              {isChatbotOpen && (
-                <motion.div
-                  initial={{ opacity: 0, x: 50 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  exit={{ opacity: 0, x: 50 }}
-                  transition={{ duration: 0.3, ease: 'easeInOut' }}
-                  className="hidden sm:flex flex-col w-72 bg-gray-700 border-l border-gray-600 p-4 max-h-[90vh] overflow-y-auto"
-                >
-                  <h4 className="text-lg font-bold text-white mb-3">AI Chatbot is coming soon!</h4>
-                  {error && <p className="text-red-500 text-sm bg-gray-800 p-2 rounded-md break-words">Error: {error.message}</p>}
-                  <div className="flex-1 overflow-y-auto bg-gray-800 p-3 rounded-md border border-gray-600 break-words">
-                    {messages
-                      .filter((msg) => msg.role !== 'system')
-                      .map((msg, index) => (
-                        <p
-                          key={index}
-                          className={`text-sm p-2 rounded-md mb-2 ${msg.role === 'user' ? 'bg-blue-500 text-white text-right' : 'bg-gray-700 text-white text-left'}`}
-                        >
-                          {msg.content}
-                        </p>
-                      ))}
-                  </div>
-                  <form onSubmit={handleChatSubmit} className="flex gap-2 mt-3">
-                    <Input
-                      value={input}
-                      onChange={handleInputChange}
-                      placeholder="Ask for suggestions..."
-                      disabled={isChatLoading}
-                      className="flex-1 bg-gray-800 text-white border-gray-600 rounded-md p-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    />
-                    <ChatSubmitButton type="submit" disabled={isChatLoading}>
-                      {isChatLoading ? '⟳' : '➤'}
-                    </ChatSubmitButton>
-                  </form>
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </motion.div>
-        </motion.div>
-      )}
-
-      {isConfirmDeleteOpen && postToDelete && (
-        <motion.div
-          variants={modalVariants}
-          initial="hidden"
-          animate="visible"
-          exit="exit"
-          className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4"
-          onClick={handleCancelDelete}
-          data-testid="confirm-modal-overlay"
-        >
-          <div
-            className="relative w-full max-w-md mx-auto bg-gray-800/90 backdrop-blur-lg rounded-2xl p-4 sm:p-6 h-fit max-h-[90vh] overflow-y-auto"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <CloseButton onClick={handleCancelDelete}>
-              <X className="h-6 w-6 sm:h-8 sm:w-8" />
-            </CloseButton>
-            <h3 id="modal-title" className="text-xl font-bold text-white mb-4">
-              Confirm Deletion
-            </h3>
-            <p className="text-white text-sm mb-4">
-              Are you sure you want to delete the post &quot;{postToDelete.title}&quot;? This action cannot be undone.
-            </p>
-            <div className="flex flex-col sm:flex-row gap-3 justify-end">
-              <DeleteButton onClick={handleConfirmDelete} disabled={isLoading}>
-                {isLoading ? 'Deleting...' : 'Delete'}
-              </DeleteButton>
-              <CancelButton onClick={handleCancelDelete}>
-                Cancel
-              </CancelButton>
-            </div>
-          </div>
-        </motion.div>
-      )}
-    </div>
-  );
-};
-
+'use client';
+
+import React, { useEffect, useRef, useCallback, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { CloseButton, ToggleButton, UpdateButton, CancelButton, ChatToggleButton, ChatSubmitButton, DeleteButton } from '@/components/other/button'; // Updated import
+import { Input } from '@/components/other/input';
+import { Label } from '@/components/other/label';
+import { X, ChevronLeft, ChevronRight } from 'lucide-react';
+import { useAuth, useUser } from '@clerk/nextjs';
+import { useStrapiAuth } from '@/lib/auth/auth-context';
+import { useChat } from 'ai/react';
+
+interface BlogPost {
+  id: number;
+  documentId: string;
+  title: string;
+  description: string;
+  author: string;
+  publishedAt: string;
+}
+
+interface BlogFormPopUpProps {
+  isModalOpen: boolean;
+  setIsModalOpen: (open: boolean) => void;
+  isConfirmDeleteOpen: boolean;
+  setIsConfirmDeleteOpen: (open: boolean) => void;
+  postToDelete: { id: number; documentId: string; title: string } | null;
+  setPostToDelete: (post: { id: number; documentId: string; title: string } | null) => void;
+  isLoading: boolean;
+  setIsLoading: (loading: boolean) => void;
+  formData: BlogPost;
+  setFormData: (data: BlogPost) => void;
+  setError: (error: string | null) => void;
+  setShowSuccess: (show: boolean) => void;
+  fetchData: () => Promise<void>;
+}
+
+const BlogFormPopUp: React.FC<BlogFormPopUpProps> = ({
+  isModalOpen,
+  setIsModalOpen,
+  isConfirmDeleteOpen,
+  setIsConfirmDeleteOpen,
+  postToDelete,
+  setPostToDelete,
+  isLoading,
+  setIsLoading,
+  formData,
+  setFormData,
+  setError,
+  setShowSuccess,
+  fetchData,
+}) => {
+  const [formError, setFormError] = useState<string | null>(null);
+  const [isChatbotOpen, setIsChatbotOpen] = useState(false);
+  const [showKeywords, setShowKeywords] = useState(false);
+  const [titleCharCount, setTitleCharCount] = useState(formData.title.length);
+  const [titleWordCount, setTitleWordCount] = useState(formData.title.trim().split(/\s+/).filter(Boolean).length);
+  const [descriptionCharCount, setDescriptionCharCount] = useState(formData.description.length);
+  const [descriptionWordCount, setDescriptionWordCount] = useState(
+    formData.description.trim().split(/\s+/).filter(Boolean).length
+  );
+  const modalRef = useRef<HTMLDivElement>(null);
+  const descriptionRef = useRef<HTMLTextAreaElement>(null);
+  const { user, authLoading } = useStrapiAuth();
+  const { getToken, isSignedIn } = useAuth();
+  const { user: clerkUser } = useUser();
+  const [scrollPosition, setScrollPosition] = useState(0);
+
+  const seoKeywords = [
+    'fitness training',
+    'gym workout plans',
+    'strength exercises',
+    'cardio routines',
+    'weight loss tips',
+    'muscle building',
+    'home workouts',
+    'personal trainer',
+    'fitness motivation',
+    'healthy lifestyle',
+    'gym equipment',
+    'bodybuilding tips',
+    'HIIT workouts',
+    'nutrition for fitness',
+    'exercise routines',
+  ];
+
+  const { messages, input, handleInputChange, handleSubmit: handleChatSubmit, isLoading: isChatLoading, error } = useChat({
+    api: '/api/chat',
+    initialMessages: [
+      {
+        id: 'system-prompt',
+        role: 'system',
+        content: `You are an AI assistant helping with blog writing and SEO optimization. You are aware of the current blog post's title: "${formData.title}", description: "${formData.description}", and the following SEO keywords: ${seoKeywords.join(', ')}. Provide suggestions to improve the blog post's SEO, such as keyword usage, content structure, or meta descriptions. Respond concisely and relevantly to user queries.`,
+      },
+    ],
+  });
+
+  useEffect(() => {
+  }, [user, clerkUser]);
+
+  const handleClose = useCallback(() => {
+    setIsModalOpen(false);
+    setFormData({
+      id: 0,
+      documentId: '',
+      title: '',
+      description: '',
+      author: user?.businessTitle || clerkUser?.username || user?.username || 'Anonymous',
+      publishedAt: '',
+    });
+    setFormError(null);
+    setIsChatbotOpen(false);
+    setShowKeywords(false);
+    setTitleCharCount(0);
+    setTitleWordCount(0);
+    setDescriptionCharCount(0);
+    setDescriptionWordCount(0);
+    window.scrollTo({ top: scrollPosition, behavior: 'smooth' });
+  }, [setIsModalOpen, setFormData, user, clerkUser, scrollPosition]);
+
+  const handleKeywordClick = useCallback(
+    (keyword: string) => {
+      const textarea = descriptionRef.current;
+      if (!textarea) {
+        setFormError('Text area not initialized');
+        return;
+      }
+
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const text = formData.description;
+      const newText = text.substring(0, start) + `${keyword} ` + text.substring(end);
+      const truncatedText = newText.slice(0, 1500);
+      setFormData({ ...formData, description: truncatedText });
+      setDescriptionCharCount(truncatedText.length);
+      setDescriptionWordCount(truncatedText.trim().split(/\s+/).filter(Boolean).length);
+
+      setTimeout(() => {
+        textarea.focus();
+        textarea.selectionStart = textarea.selectionEnd = start + keyword.length + 1;
+      }, 0);
+    },
+    [formData, setFormData]
+  );
+
+  const handleConfirmDelete = async () => {
+    if (!postToDelete) return;
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const token = await getToken();
+      const response = await fetch('/api/blog', {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ documentId: postToDelete.documentId }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Failed to delete blog post');
+      }
+
+      await fetchData();
+      setIsConfirmDeleteOpen(false);
+      setPostToDelete(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An unknown error occurred');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCancelDelete = () => {
+    setIsConfirmDeleteOpen(false);
+    setPostToDelete(null);
+    window.scrollTo({ top: scrollPosition, behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    if (isModalOpen) {
+      if (authLoading) {
+        setFormError('Authentication is still loading, please wait...');
+      } else if (!isSignedIn || !user || !clerkUser?.id) {
+        setFormError('You must be signed in to create or edit a blog post');
+        setFormData({ ...formData, author: 'Anonymous' });
+      } else if (user?.businessTitle) {
+        setFormData({
+          ...formData,
+          author: user.businessTitle,
+        });
+        setFormError(null);
+      } else {
+        setFormData({ ...formData, author: clerkUser?.username || user?.username || 'Anonymous' });
+        setFormError('Business title not found; using username or default author name');
+      }
+      setTitleCharCount(formData.title.length);
+      setTitleWordCount(formData.title.trim().split(/\s+/).filter(Boolean).length);
+      setDescriptionCharCount(formData.description.length);
+      setDescriptionWordCount(formData.description.trim().split(/\s+/).filter(Boolean).length);
+    }
+  }, [isModalOpen, user, isSignedIn, clerkUser, authLoading, setFormData, formData.title, formData.description]);
+
+  useEffect(() => {
+    if (isModalOpen && modalRef.current) {
+      setScrollPosition(window.scrollY);
+      const modal = modalRef.current;
+      const focusableElements = modal.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      const firstElement = focusableElements[0] as HTMLElement;
+      if (firstElement) {
+        firstElement.focus({ preventScroll: true });
+      }
+
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Tab') {
+          const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+          if (document.activeElement === lastElement && !e.shiftKey) {
+            e.preventDefault();
+            firstElement.focus({ preventScroll: true });
+          }
+          if (document.activeElement === firstElement && e.shiftKey) {
+            e.preventDefault();
+            lastElement.focus({ preventScroll: true });
+          }
+        }
+        if (e.key === 'Escape') {
+          handleClose();
+        }
+      };
+
+      modal.addEventListener('keydown', handleKeyDown);
+      return () => modal.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [isModalOpen, handleClose]);
+
+  useEffect(() => {
+    if (isModalOpen || isConfirmDeleteOpen) {
+      const scrollY = window.scrollY;
+      document.body.style.position = 'fixed';
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.width = '100%';
+      document.body.classList.add('overflow-hidden');
+      setScrollPosition(scrollY);
+    } else {
+      const scrollY = scrollPosition;
+      document.body.style.position = '';
+      document.body.style.top = '';
+      document.body.style.width = '';
+      document.body.classList.remove('overflow-hidden');
+      window.scrollTo({ top: scrollY, behavior: 'instant' });
+    }
+
+    return () => {
+      document.body.style.position = '';
+      document.body.style.top = '';
+      document.body.style.width = '';
+      document.body.classList.remove('overflow-hidden');
+    };
+  }, [isModalOpen, isConfirmDeleteOpen, scrollPosition]);
+
+  useEffect(() => {
+    const event = new CustomEvent('modalStateChange', {
+      detail: { isOpen: isModalOpen || isConfirmDeleteOpen },
+    });
+    window.dispatchEvent(event);
+  }, [isModalOpen, isConfirmDeleteOpen]);
+
+  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value.slice(0, 50);
+    setFormData({ ...formData, title: value });
+    setTitleCharCount(value.length);
+    setTitleWordCount(value.trim().split(/\s+/).filter(Boolean).length);
+  };
+
+  const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value.slice(0, 1500);
+    setFormData({ ...formData, description: value });
+    setDescriptionCharCount(value.length);
+    setDescriptionWordCount(value.trim().split(/\s+/).filter(Boolean).length);
+  };
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isSignedIn || !user || !clerkUser?.id) {
+      setError('You must be signed in to submit a blog post');
+      return;
+    }
+    if (!formData.title || !formData.description || !formData.author) {
+      setFormError('Please fill in all required fields');
+      return;
+    }
+
+    setIsLoading(true);
+    setFormError(null);
+    try {
+      const token = await getToken();
+      const response = await fetch('/api/blog', {
+        method: formData.id ? 'PUT' : 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          documentId: formData.documentId,
+          data: {
+            title: formData.title,
+            description: formData.description,
+            author: formData.author,
+            publishedAt: formData.publishedAt || new Date().toISOString(),
+          },
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Failed to submit blog post');
+      }
+
+      await fetchData();
+      setShowSuccess(true);
+      setTimeout(() => setShowSuccess(false), 3000);
+      handleClose();
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : 'An unknown error occurred');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const modalVariants = {
+    hidden: { opacity: 0, y: '100vh' },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
+    exit: { opacity: 0, y: '100vh', transition: { duration: 0.3, ease: 'easeIn' } },
+  };
+
+  return (
+    <div>
+      {isModalOpen && (
+        <motion.div
+          variants={modalVariants}
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          className="fixed inset-0 flex items-center justify-center z-[10000] p-4"
+          onClick={handleClose}
+        >
+          <motion.div
+            ref={modalRef}
+            className="relative w-full max-w-5xl mx-4 bg-gray-800/90 backdrop-blur-lg rounded-2xl p-4 sm:p-6 max-h-[90vh] overflow-y-auto overflow-x-hidden flex flex-col sm:flex-row gap-4"
+            onClick={(e) => e.stopPropagation()}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="modal-title"
+          >
+            <div className="flex-1">
+              <div className="relative mb-6 pr-12">
+                <h3 id="modal-title" className="text-xl sm:text-2xl font-bold text-white">
+                  {formData.id ? 'Edit Blog Post' : 'Add New Blog Post'}
+                </h3>
+                <CloseButton variant="close-form" onClick={handleClose}>
+                  <X className="h-6 w-6 sm:h-8 sm:w-8" />
+                </CloseButton>
+              </div>
+              <form onSubmit={onSubmit} className="space-y-4">
+                <div>
+                  <Label htmlFor="title" className="block text-sm font-semibold text-gray-200 mb-2">
+                    Title
+                  </Label>
+                  <Input
+                    id="title"
+                    type="text"
+                    placeholder="Enter post title"
+                    value={formData.title}
+                    onChange={handleTitleChange}
+                    maxLength={50}
+                    className="w-full bg-transparent text-white border-gray-400 rounded-md p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    required
+                  />
+                  <p className="text-sm text-gray-500 mt-1">
+                    {titleCharCount}/50 characters, {titleWordCount} words
+                  </p>
+                </div>
+                <div>
+                  <Label htmlFor="author" className="block text-sm font-semibold text-gray-200 mb-2">
+                    Author
+                  </Label>
+                  <Input
+                    id="author"
+                    type="text"
+                    value={formData.author}
+                    onChange={(e) => setFormData({ ...formData, author: e.target.value })}
+                    className="w-full bg-transparent text-white border-gray-400 rounded-md p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    required
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="description" className="block text-sm font-semibold text-gray-200 mb-2">
+                    Description
+                  </Label>
+                  <textarea
+                    ref={descriptionRef}
+                    id="description"
+                    placeholder="Enter post description"
+                    value={formData.description}
+                    onChange={handleDescriptionChange}
+                    maxLength={1500}
+                    className="w-full bg-transparent text-white border border-gray-400 rounded-md p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 min-h-[150px]"
+                    required
+                  />
+                  <p className="text-sm text-gray-500 mt-1">
+                    {descriptionCharCount}/1500 characters, {descriptionWordCount} words
+                  </p>
+                </div>
+                <div>
+                  <ToggleButton
+                    type="button" 
+                    variant="toggle-keywords"
+                    onClick={() => setShowKeywords(!showKeywords)}
+                    aria-expanded={showKeywords}
+                    aria-controls="seo-keywords"
+                  >
+                    {showKeywords ? 'Hide Keywords' : 'Show SEO Keywords'}
+                  </ToggleButton>
+                  {showKeywords && (
+                    <ul id="seo-keywords" className="mt-2 bg-gray-700 border border-gray-600 rounded-md p-4 max-h-40 overflow-y-auto text-white text-sm">
+                      {seoKeywords.map((keyword, index) => (
+                        <li
+                          key={index}
+                          onClick={() => handleKeywordClick(keyword)}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                              e.preventDefault();
+                              handleKeywordClick(keyword);
+                            }
+                          }}
+                          tabIndex={0}
+                          role="button"
+                          aria-label={`Insert keyword: ${keyword}`}
+                          className="cursor-pointer py-1 px-2 hover:bg-blue-500 hover:text-white rounded transition-colors break-words"
+                        >
+                          {keyword}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+                <div className="flex flex-col sm:flex-row gap-3 justify-end">
+                  <UpdateButton
+                    type="submit"
+                    disabled={isLoading || !isSignedIn || !user || !clerkUser?.id || authLoading}
+                  >
+                    {isLoading ? 'Saving...' : formData.id ? 'Update' : 'Submit'}
+                  </UpdateButton>
+                  <CancelButton type="button" onClick={handleClose}>
+                    Cancel
+                  </CancelButton>
+                </div>
+                {formError && <p className="text-red-500 text-sm font-semibold break-words">{formError}</p>}
+              </form>
+            </div>
+            <ChatToggleButton
+              onClick={() => setIsChatbotOpen(!isChatbotOpen)}
+              aria-label={isChatbotOpen ? 'Close AI chatbot' : 'Open AI chatbot'}
+            >
+              {isChatbotOpen ? (
+                <ChevronLeft className="h-5 w-5 text-white" />
+              ) : (
+                <ChevronRight className="h-5 w-5 text-white" />
+              )}
+            </ChatToggleButton>
+            <AnimatePresence>
+              {isChatbotOpen && (
+                <motion.div
+                  initial={{ opacity: 0, x: 50 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  exit={{ opacity: 0, x: 50 }}
+                  transition={{ duration: 0.3, ease: 'easeInOut' }}
+                  className="hidden sm:flex flex-col w-72 bg-gray-700 border-l border-gray-600 p-4 max-h-[90vh] overflow-y-auto"
+                >
+                  <h4 className="text-lg font-bold text-white mb-3">AI Chatbot is coming soon!</h4>
+                  {error && <p className="text-red-500 text-sm bg-gray-800 p-2 rounded-md break-words">Error: {error.message}</p>}
+                  <div className="flex-1 overflow-y-auto bg-gray-800 p-3 rounded-md border border-gray-600 break-words">
+                    {messages
+                      .filter((msg) => msg.role !== 'system')
+                      .map((msg, index) => (
+                        <p
+                          key={index}
+                          className={`text-sm p-2 rounded-md mb-2 ${msg.role === 'user' ? 'bg-blue-500 text-white text-right' : 'bg-gray-700 text-white text-left'}`}
+                        >
+                          {msg.content}
+                        </p>
+                      ))}
+                  </div>
+                  <form onSubmit={handleChatSubmit} className="flex gap-2 mt-3">
+                    <Input
+                      value={input}
+                      onChange={handleInputChange}
+                      placeholder="Ask for suggestions..."
+                      disabled={isChatLoading}
+                      className="flex-1 bg-gray-800 text-white border-gray-600 rounded-md p-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    />
+                    <ChatSubmitButton type="submit" disabled={isChatLoading}>
+                      {isChatLoading ? '⟳' : '➤'}
+                    </ChatSubmitButton>
+                  </form>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </motion.div>
+        </motion.div>
+      )}
+
+      {isConfirmDeleteOpen && postToDelete && (
+        <motion.div
+          variants={modalVariants}
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4"
+          onClick={handleCancelDelete}
+          data-testid="confirm-modal-overlay"
+        >
+          <div
+            className="relative w-full max-w-md mx-auto bg-gray-800/90 backdrop-blur-lg rounded-2xl p-4 sm:p-6 h-fit max-h-[90vh] overflow-y-auto"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <CloseButton onClick={handleCancelDelete}>
+              <X className="h-6 w-6 sm:h-8 sm:w-8" />
+            </CloseButton>
+            <h3 id="modal-title" className="text-xl font-bold text-white mb-4">
+              Confirm Deletion
+            </h3>
+            <p className="text-white text-sm mb-4">
+              Are you sure you want to delete the post &quot;{postToDelete.title}&quot;? This action cannot be undone.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-3 justify-end">
+              <DeleteButton onClick={handleConfirmDelete} disabled={isLoading}>
+                {isLoading ? 'Deleting...' : 'Delete'}
+              </DeleteButton>
+              <CancelButton onClick={handleCancelDelete}>
+                Cancel
+              </CancelButton>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </div>
+  );
+};
+
 export default BlogFormPopUp;