@devvistatech/devvista-kit 0.0.1

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

@@ -0,0 +1,555 @@
+'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>
+  );
+};
+
+export default BlogFormPopUp;