huge update

app/editor/page.tsx

@@ -1,27 +1,26 @@
 'use client';
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback, Suspense } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { motion, AnimatePresence } from 'framer-motion';
 import { 
   ArrowLeft, 
   Save, 
   Eye, 
-  Plus, 
   X, 
   Bold, 
   Italic, 
   Code, 
   Image, 
   Link,
-  Type,
   List,
   ListOrdered,
   Quote,
   Hash,
   Loader2,
-  Upload,
-  Check
+  ExternalLink,
+  Github,
+  Tag
 } from 'lucide-react';
 
 interface Project {
@@ -30,7 +29,6 @@ interface Project {
   description: string;
   content?: string;
   category: string;
-  difficulty?: string;
   tags?: string[];
   featured: boolean;
   published: boolean;
@@ -41,17 +39,18 @@ interface Project {
   updatedAt: string;
 }
 
-export default function EditorPage() {
+function EditorPageContent() {
   const searchParams = useSearchParams();
   const projectId = searchParams.get('id');
   const contentRef = useRef<HTMLDivElement>(null);
   
-  const [project, setProject] = useState<Project | null>(null);
+  const [, setProject] = useState<Project | null>(null);
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
   const [isCreating, setIsCreating] = useState(!projectId);
   const [showPreview, setShowPreview] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
   
   // Form state
   const [formData, setFormData] = useState({
@@ -59,7 +58,6 @@ export default function EditorPage() {
     description: '',
     content: '',
     category: 'web',
-    difficulty: 'beginner',
     tags: [] as string[],
     featured: false,
     published: false,
@@ -68,6 +66,44 @@ export default function EditorPage() {
     image: ''
   });
 
+  const loadProject = useCallback(async (id: string) => {
+    try {
+      console.log('Fetching projects...');
+      const response = await fetch('/api/projects');
+      
+      if (response.ok) {
+        const data = await response.json();
+        console.log('Projects loaded:', data);
+        
+        const foundProject = data.projects.find((p: Project) => p.id.toString() === id);
+        console.log('Found project:', foundProject);
+        
+        if (foundProject) {
+          setProject(foundProject);
+          setFormData({
+            title: foundProject.title || '',
+            description: foundProject.description || '',
+            content: foundProject.content || '',
+            category: foundProject.category || 'web',
+            tags: foundProject.tags || [],
+            featured: foundProject.featured || false,
+            published: foundProject.published || false,
+            github: foundProject.github || '',
+            live: foundProject.live || '',
+            image: foundProject.image || ''
+          });
+          console.log('Form data set for project:', foundProject.title);
+        } else {
+          console.log('Project not found with ID:', id);
+        }
+      } else {
+        console.error('Failed to fetch projects:', response.status);
+      }
+    } catch (error) {
+      console.error('Error loading project:', error);
+    }
+  }, []);
+
   // Check authentication and load project
   useEffect(() => {
     const init = async () => {
@@ -103,85 +139,92 @@ export default function EditorPage() {
     };
 
     init();
-  }, [projectId]);
-
-  const loadProject = async (id: string) => {
-    try {
-      console.log('Fetching projects...');
-      const response = await fetch('/api/projects');
-      
-      if (response.ok) {
-        const data = await response.json();
-        console.log('Projects loaded:', data);
-        
-        const foundProject = data.projects.find((p: Project) => p.id.toString() === id);
-        console.log('Found project:', foundProject);
-        
-        if (foundProject) {
-          setProject(foundProject);
-          setFormData({
-            title: foundProject.title || '',
-            description: foundProject.description || '',
-            content: foundProject.content || '',
-            category: foundProject.category || 'web',
-            difficulty: foundProject.difficulty || 'beginner',
-            tags: foundProject.tags || [],
-            featured: foundProject.featured || false,
-            published: foundProject.published || false,
-            github: foundProject.github || '',
-            live: foundProject.live || '',
-            image: foundProject.image || ''
-          });
-          console.log('Form data set:', formData);
-        } else {
-          console.log('Project not found with ID:', id);
-        }
-      } else {
-        console.error('Failed to fetch projects:', response.status);
-      }
-    } catch (error) {
-      console.error('Error loading project:', error);
-    }
-  };
+  }, [projectId, loadProject]);
 
   const handleSave = async () => {
     try {
       setIsSaving(true);
       
+      // Validate required fields
+      if (!formData.title.trim()) {
+        alert('Please enter a project title');
+        return;
+      }
+      
+      if (!formData.description.trim()) {
+        alert('Please enter a project description');
+        return;
+      }
+      
       const url = projectId ? `/api/projects/${projectId}` : '/api/projects';
       const method = projectId ? 'PUT' : 'POST';
       
-      console.log('Saving project:', { url, method, formData });
+      // Prepare data for saving - only include fields that exist in the database schema
+      const saveData = {
+        title: formData.title.trim(),
+        description: formData.description.trim(),
+        content: formData.content.trim(),
+        category: formData.category,
+        tags: formData.tags,
+        github: formData.github.trim() || null,
+        live: formData.live.trim() || null,
+        imageUrl: formData.image.trim() || null,
+        published: formData.published,
+        featured: formData.featured,
+        // Add required fields that might be missing
+        date: new Date().toISOString().split('T')[0] // Current date in YYYY-MM-DD format
+      };
+      
+      console.log('Saving project:', { url, method, saveData });
       
       const response = await fetch(url, {
         method,
         headers: {
           'Content-Type': 'application/json',
+          'x-admin-request': 'true'
         },
-        body: JSON.stringify(formData)
+        body: JSON.stringify(saveData)
       });
 
       if (response.ok) {
         const savedProject = await response.json();
-        console.log('Project saved:', savedProject);
+        console.log('Project saved successfully:', savedProject);
+        
+        // Update local state with the saved project data
+        setProject(savedProject);
+        setFormData(prev => ({
+          ...prev,
+          title: savedProject.title || '',
+          description: savedProject.description || '',
+          content: savedProject.content || '',
+          category: savedProject.category || 'web',
+          tags: savedProject.tags || [],
+          featured: savedProject.featured || false,
+          published: savedProject.published || false,
+          github: savedProject.github || '',
+          live: savedProject.live || '',
+          image: savedProject.imageUrl || ''
+        }));
         
         // Show success and redirect
+        alert('Project saved successfully!');
         setTimeout(() => {
           window.location.href = '/manage';
         }, 1000);
       } else {
-        console.error('Error saving project:', response.status);
-        alert('Error saving project');
+        const errorData = await response.json();
+        console.error('Error saving project:', response.status, errorData);
+        alert(`Error saving project: ${errorData.error || 'Unknown error'}`);
       }
     } catch (error) {
       console.error('Error saving project:', error);
-      alert('Error saving project');
+      alert(`Error saving project: ${error instanceof Error ? error.message : 'Unknown error'}`);
     } finally {
       setIsSaving(false);
     }
   };
 
-  const handleInputChange = (field: string, value: any) => {
+  const handleInputChange = (field: string, value: string | boolean | string[]) => {
     setFormData(prev => ({
       ...prev,
       [field]: value
@@ -196,6 +239,42 @@ export default function EditorPage() {
     }));
   };
 
+  // Simple markdown to HTML converter
+  const parseMarkdown = (text: string) => {
+    if (!text) return '';
+    
+    return text
+      // Headers
+      .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+      .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+      .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+      // Bold
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      // Italic
+      .replace(/\*(.*?)\*/g, '<em>$1</em>')
+      // Code blocks
+      .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
+      // Inline code
+      .replace(/`(.*?)`/g, '<code>$1</code>')
+      // Links
+      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>')
+      // Images
+      .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" />')
+      // Ensure all images have alt attributes
+      .replace(/<img([^>]*?)(?:\s+alt\s*=\s*["'][^"']*["'])?([^>]*?)>/g, (match, before, after) => {
+        if (match.includes('alt=')) return match;
+        return `<img${before} alt=""${after}>`;
+      })
+      // Lists
+      .replace(/^\* (.*$)/gim, '<li>$1</li>')
+      .replace(/^- (.*$)/gim, '<li>$1</li>')
+      .replace(/^(\d+)\. (.*$)/gim, '<li>$2</li>')
+      // Blockquotes
+      .replace(/^> (.*$)/gim, '<blockquote>$1</blockquote>')
+      // Line breaks
+      .replace(/\n/g, '<br>');
+  };
+
   // Rich text editor functions
   const insertFormatting = (format: string) => {
     const content = contentRef.current;
@@ -263,14 +342,21 @@ export default function EditorPage() {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen admin-gradient flex items-center justify-center">
+      <div className="min-h-screen animated-bg flex items-center justify-center">
         <div className="text-center">
           <motion.div
-            animate={{ rotate: 360 }}
-            transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
-            className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"
-          />
-          <p className="text-white">Loading editor...</p>
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="glass-card p-8 rounded-2xl"
+          >
+            <motion.div
+              animate={{ rotate: 360 }}
+              transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+              className="w-12 h-12 border-3 border-blue-500 border-t-transparent rounded-full mx-auto mb-6"
+            />
+            <h2 className="text-xl font-semibold gradient-text mb-2">Loading Editor</h2>
+            <p className="text-gray-400">Preparing your workspace...</p>
+          </motion.div>
         </div>
       </div>
     );
@@ -278,7 +364,7 @@ export default function EditorPage() {
 
   if (!isAuthenticated) {
     return (
-      <div className="min-h-screen admin-gradient flex items-center justify-center">
+      <div className="min-h-screen animated-bg flex items-center justify-center">
         <motion.div 
           initial={{ opacity: 0, scale: 0.9 }}
           animate={{ opacity: 1, scale: 1 }}
@@ -304,42 +390,43 @@ export default function EditorPage() {
   }
 
   return (
-    <div className="min-h-screen admin-gradient">
+    <div className="min-h-screen animated-bg">
       {/* Header */}
-      <div className="admin-glass-header border-b border-white/10">
-        <div className="max-w-7xl mx-auto px-6">
-          <div className="flex items-center justify-between h-16">
-            <div className="flex items-center space-x-4">
+      <div className="glass-card border-b border-white/10 sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between h-auto sm:h-16 py-4 sm:py-0 gap-4 sm:gap-0">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
               <button
                 onClick={() => window.location.href = '/manage'}
-                className="flex items-center space-x-2 text-white/70 hover:text-white transition-colors"
+                className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors"
               >
                 <ArrowLeft className="w-5 h-5" />
-                <span>Back to Dashboard</span>
+                <span className="hidden sm:inline">Back to Dashboard</span>
+                <span className="sm:hidden">Back</span>
               </button>
-              <div className="h-6 w-px bg-white/20" />
-              <h1 className="text-xl font-semibold text-white">
+              <div className="hidden sm:block h-6 w-px bg-white/20" />
+              <h1 className="text-lg sm:text-xl font-semibold gradient-text truncate max-w-xs sm:max-w-none">
                 {isCreating ? 'Create New Project' : `Edit: ${formData.title || 'Untitled'}`}
               </h1>
             </div>
             
-            <div className="flex items-center space-x-3">
+            <div className="flex items-center space-x-2 sm:space-x-3 w-full sm:w-auto">
               <button
                 onClick={() => setShowPreview(!showPreview)}
-                className={`flex items-center space-x-2 px-4 py-2 rounded-xl transition-all ${
+                className={`flex items-center space-x-2 px-4 py-2 rounded-lg font-medium transition-all duration-200 text-sm ${
                   showPreview 
-                    ? 'bg-purple-500 text-white' 
-                    : 'bg-white/10 text-white/70 hover:bg-white/20'
+                    ? 'bg-blue-600 text-white shadow-lg' 
+                    : 'bg-gray-800/50 text-gray-300 hover:bg-gray-700/50 hover:text-white'
                 }`}
               >
                 <Eye className="w-4 h-4" />
-                <span>Preview</span>
+                <span className="hidden sm:inline">Preview</span>
               </button>
               
               <button
                 onClick={handleSave}
                 disabled={isSaving}
-                className="flex items-center space-x-2 px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl hover:scale-105 transition-all font-medium disabled:opacity-50"
+                className="btn-primary flex items-center space-x-2 px-6 py-2 text-sm sm:text-base flex-1 sm:flex-none disabled:opacity-50"
               >
                 {isSaving ? (
                   <Loader2 className="w-4 h-4 animate-spin" />
@@ -354,21 +441,35 @@ export default function EditorPage() {
       </div>
 
       {/* Editor Content */}
-      <div className="max-w-7xl mx-auto px-6 py-8">
-        <div className="grid grid-cols-1 xl:grid-cols-4 gap-8">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
+        <div className="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
+          {/* Floating particles background */}
+          <div className="particles">
+            {[...Array(20)].map((_, i) => (
+              <div
+                key={i}
+                className="particle"
+                style={{
+                  left: `${Math.random() * 100}%`,
+                  animationDelay: `${Math.random() * 20}s`,
+                  animationDuration: `${20 + Math.random() * 10}s`
+                }}
+              />
+            ))}
+          </div>
           {/* Main Editor */}
           <div className="xl:col-span-3 space-y-6">
             {/* Project Title */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
-              className="admin-glass-card p-6 rounded-xl"
+              className="glass-card p-6 rounded-2xl"
             >
               <input
                 type="text"
                 value={formData.title}
                 onChange={(e) => handleInputChange('title', e.target.value)}
-                className="w-full text-3xl font-bold bg-white/10 text-white placeholder-white/50 focus:outline-none p-4 rounded-lg border border-white/20 focus:ring-2 focus:ring-blue-500"
+                className="w-full text-3xl font-bold form-input-enhanced focus:outline-none p-4 rounded-lg"
                 placeholder="Enter project title..."
               />
             </motion.div>
@@ -378,95 +479,95 @@ export default function EditorPage() {
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.1 }}
-              className="admin-glass-card p-4 rounded-xl"
+              className="glass-card p-4 rounded-2xl"
             >
-              <div className="flex flex-wrap items-center gap-2">
-                <div className="flex items-center space-x-1 border-r border-white/20 pr-3">
+              <div className="flex flex-wrap items-center gap-1 sm:gap-2">
+                <div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
                   <button
                     onClick={() => insertFormatting('bold')}
-                    className="p-2 hover:bg-white/10 rounded-lg transition-colors"
+                    className="p-2 rounded-lg text-gray-300"
                     title="Bold"
                   >
-                    <Bold className="w-4 h-4 text-white/70" />
+                    <Bold className="w-4 h-4" />
                   </button>
                   <button
                     onClick={() => insertFormatting('italic')}
-                    className="p-2 hover:bg-white/10 rounded-lg transition-colors"
+                    className="p-2 rounded-lg text-gray-300"
                     title="Italic"
                   >
-                    <Italic className="w-4 h-4 text-white/70" />
+                    <Italic className="w-4 h-4" />
                   </button>
                   <button
                     onClick={() => insertFormatting('code')}
-                    className="p-2 hover:bg-white/10 rounded-lg transition-colors"
+                    className="p-2 rounded-lg text-gray-300"
                     title="Code"
                   >
-                    <Code className="w-4 h-4 text-white/70" />
+                    <Code className="w-4 h-4" />
                   </button>
                 </div>
 
-                <div className="flex items-center space-x-1 border-r border-white/20 pr-3">
+                <div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
                   <button
                     onClick={() => insertFormatting('h1')}
-                    className="p-2 hover:bg-white/10 rounded-lg transition-colors"
+                    className="p-2 rounded-lg text-gray-300"
                     title="Heading 1"
                   >
-                    <Hash className="w-4 h-4 text-white/70" />
+                    <Hash className="w-4 h-4" />
                   </button>
                   <button
                     onClick={() => insertFormatting('h2')}
-                    className="p-2 hover:bg-white/10 rounded-lg transition-colors text-sm"
+                    className="p-2 hover:bg-gray-800/50 rounded-lg transition-all duration-200 text-xs sm:text-sm text-gray-300 hover:text-white hover:scale-105"
                     title="Heading 2"
                   >
                     H2
                   </button>
                   <button
                     onClick={() => insertFormatting('h3')}
-                    className="p-2 hover:bg-white/10 rounded-lg transition-colors text-sm"
+                    className="p-2 hover:bg-gray-800/50 rounded-lg transition-all duration-200 text-xs sm:text-sm text-gray-300 hover:text-white hover:scale-105"
                     title="Heading 3"
                   >
                     H3
                   </button>
                 </div>
 
-                <div className="flex items-center space-x-1 border-r border-white/20 pr-3">
+                <div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
                   <button
                     onClick={() => insertFormatting('list')}
-                    className="p-2 hover:bg-white/10 rounded-lg transition-colors"
+                    className="p-2 rounded-lg text-gray-300"
                     title="Bullet List"
                   >
-                    <List className="w-4 h-4 text-white/70" />
+                    <List className="w-4 h-4" />
                   </button>
                   <button
                     onClick={() => insertFormatting('orderedList')}
-                    className="p-2 hover:bg-white/10 rounded-lg transition-colors"
+                    className="p-2 rounded-lg text-gray-300"
                     title="Numbered List"
                   >
-                    <ListOrdered className="w-4 h-4 text-white/70" />
+                    <ListOrdered className="w-4 h-4" />
                   </button>
                   <button
                     onClick={() => insertFormatting('quote')}
-                    className="p-2 hover:bg-white/10 rounded-lg transition-colors"
+                    className="p-2 rounded-lg text-gray-300"
                     title="Quote"
                   >
-                    <Quote className="w-4 h-4 text-white/70" />
+                    <Quote className="w-4 h-4" />
                   </button>
                 </div>
 
                 <div className="flex items-center space-x-1">
                   <button
                     onClick={() => insertFormatting('link')}
-                    className="p-2 hover:bg-white/10 rounded-lg transition-colors"
+                    className="p-2 rounded-lg text-gray-300"
                     title="Link"
                   >
-                    <Link className="w-4 h-4 text-white/70" />
+                    <Link className="w-4 h-4" />
                   </button>
                   <button
                     onClick={() => insertFormatting('image')}
-                    className="p-2 hover:bg-white/10 rounded-lg transition-colors"
+                    className="p-2 rounded-lg text-gray-300"
                     title="Image"
                   >
-                    <Image className="w-4 h-4 text-white/70" />
+                    <Image className="w-4 h-4" />
                   </button>
                 </div>
               </div>
@@ -477,24 +578,29 @@ export default function EditorPage() {
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.2 }}
-              className="admin-glass-card p-6 rounded-xl"
+              className="glass-card p-6 rounded-2xl"
             >
-              <h3 className="text-lg font-semibold text-white mb-4">Content</h3>
+              <h3 className="text-lg font-semibold gradient-text mb-4">Content</h3>
               <div
                 ref={contentRef}
                 contentEditable
-                className="w-full min-h-[400px] p-6 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500 leading-relaxed"
+                className="editor-content-editable w-full min-h-[400px] p-6 form-input-enhanced rounded-lg focus:outline-none leading-relaxed"
                 style={{ whiteSpace: 'pre-wrap' }}
                 onInput={(e) => {
                   const target = e.target as HTMLDivElement;
+                  setIsTyping(true);
                   setFormData(prev => ({
                     ...prev,
                     content: target.textContent || ''
                   }));
                 }}
+                onBlur={() => {
+                  setIsTyping(false);
+                }}
                 suppressContentEditableWarning={true}
+                data-placeholder="Start writing your project content..."
               >
-                {formData.content || 'Start writing your project content...'}
+                {!isTyping ? formData.content : undefined}
               </div>
               <p className="text-xs text-white/50 mt-2">
                 Supports Markdown formatting. Use the toolbar above or type directly.
@@ -506,14 +612,14 @@ export default function EditorPage() {
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.3 }}
-              className="admin-glass-card p-6 rounded-xl"
+              className="glass-card p-6 rounded-2xl"
             >
-              <h3 className="text-lg font-semibold text-white mb-4">Description</h3>
+              <h3 className="text-lg font-semibold gradient-text mb-4">Description</h3>
               <textarea
                 value={formData.description}
                 onChange={(e) => handleInputChange('description', e.target.value)}
                 rows={4}
-                className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
+                className="w-full px-4 py-3 form-input-enhanced rounded-lg focus:outline-none resize-none"
                 placeholder="Brief description of your project..."
               />
             </motion.div>
@@ -526,43 +632,30 @@ export default function EditorPage() {
               initial={{ opacity: 0, x: 20 }}
               animate={{ opacity: 1, x: 0 }}
               transition={{ delay: 0.4 }}
-              className="admin-glass-card p-6 rounded-xl"
+              className="glass-card p-6 rounded-2xl"
             >
-              <h3 className="text-lg font-semibold text-white mb-4">Settings</h3>
+              <h3 className="text-lg font-semibold gradient-text mb-4">Settings</h3>
               
               <div className="space-y-4">
                 <div>
                   <label className="block text-sm font-medium text-white/70 mb-2">
                     Category
                   </label>
-                  <select
-                    value={formData.category}
-                    onChange={(e) => handleInputChange('category', e.target.value)}
-                    className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  >
-                    <option value="web">Web Development</option>
-                    <option value="mobile">Mobile Development</option>
-                    <option value="desktop">Desktop Application</option>
-                    <option value="game">Game Development</option>
-                    <option value="ai">AI/ML</option>
-                    <option value="other">Other</option>
-                  </select>
+                  <div className="custom-select">
+                    <select
+                      value={formData.category}
+                      onChange={(e) => handleInputChange('category', e.target.value)}
+                    >
+                      <option value="web">Web Development</option>
+                      <option value="mobile">Mobile Development</option>
+                      <option value="desktop">Desktop Application</option>
+                      <option value="game">Game Development</option>
+                      <option value="ai">AI/ML</option>
+                      <option value="other">Other</option>
+                    </select>
+                  </div>
                 </div>
 
-                <div>
-                  <label className="block text-sm font-medium text-white/70 mb-2">
-                    Difficulty
-                  </label>
-                  <select
-                    value={formData.difficulty}
-                    onChange={(e) => handleInputChange('difficulty', e.target.value)}
-                    className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  >
-                    <option value="beginner">Beginner</option>
-                    <option value="intermediate">Intermediate</option>
-                    <option value="advanced">Advanced</option>
-                  </select>
-                </div>
 
                 <div>
                   <label className="block text-sm font-medium text-white/70 mb-2">
@@ -572,7 +665,7 @@ export default function EditorPage() {
                     type="text"
                     value={formData.tags.join(', ')}
                     onChange={(e) => handleTagsChange(e.target.value)}
-                    className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full px-3 py-2 form-input-enhanced rounded-lg focus:outline-none"
                     placeholder="React, TypeScript, Next.js"
                   />
                 </div>
@@ -584,9 +677,9 @@ export default function EditorPage() {
               initial={{ opacity: 0, x: 20 }}
               animate={{ opacity: 1, x: 0 }}
               transition={{ delay: 0.5 }}
-              className="admin-glass-card p-6 rounded-xl"
+              className="glass-card p-6 rounded-2xl"
             >
-              <h3 className="text-lg font-semibold text-white mb-4">Links</h3>
+              <h3 className="text-lg font-semibold gradient-text mb-4">Links</h3>
               
               <div className="space-y-4">
                 <div>
@@ -597,7 +690,7 @@ export default function EditorPage() {
                     type="url"
                     value={formData.github}
                     onChange={(e) => handleInputChange('github', e.target.value)}
-                    className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full px-3 py-2 form-input-enhanced rounded-lg focus:outline-none"
                     placeholder="https://github.com/username/repo"
                   />
                 </div>
@@ -610,7 +703,7 @@ export default function EditorPage() {
                     type="url"
                     value={formData.live}
                     onChange={(e) => handleInputChange('live', e.target.value)}
-                    className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full px-3 py-2 form-input-enhanced rounded-lg focus:outline-none"
                     placeholder="https://example.com"
                   />
                 </div>
@@ -622,9 +715,9 @@ export default function EditorPage() {
               initial={{ opacity: 0, x: 20 }}
               animate={{ opacity: 1, x: 0 }}
               transition={{ delay: 0.6 }}
-              className="admin-glass-card p-6 rounded-xl"
+              className="glass-card p-6 rounded-2xl"
             >
-              <h3 className="text-lg font-semibold text-white mb-4">Publish</h3>
+              <h3 className="text-lg font-semibold gradient-text mb-4">Publish</h3>
               
               <div className="space-y-4">
                 <label className="flex items-center space-x-3">
@@ -632,7 +725,7 @@ export default function EditorPage() {
                     type="checkbox"
                     checked={formData.featured}
                     onChange={(e) => handleInputChange('featured', e.target.checked)}
-                    className="w-4 h-4 text-blue-500 bg-white/10 border-white/20 rounded focus:ring-blue-500"
+                    className="w-4 h-4 text-blue-500 bg-gray-900/80 border-gray-600/50 rounded focus:ring-blue-500 focus:ring-2"
                   />
                   <span className="text-white">Featured Project</span>
                 </label>
@@ -642,7 +735,7 @@ export default function EditorPage() {
                     type="checkbox"
                     checked={formData.published}
                     onChange={(e) => handleInputChange('published', e.target.checked)}
-                    className="w-4 h-4 text-blue-500 bg-white/10 border-white/20 rounded focus:ring-blue-500"
+                    className="w-4 h-4 text-blue-500 bg-gray-900/80 border-gray-600/50 rounded focus:ring-blue-500 focus:ring-2"
                   />
                   <span className="text-white">Published</span>
                 </label>
@@ -661,6 +754,151 @@ export default function EditorPage() {
           </div>
         </div>
       </div>
+
+      {/* Preview Modal */}
+      <AnimatePresence>
+        {showPreview && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+            onClick={() => setShowPreview(false)}
+          >
+            <motion.div
+              initial={{ scale: 0.9, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.9, opacity: 0 }}
+              className="glass-card rounded-2xl p-8 max-w-4xl w-full max-h-[90vh] overflow-y-auto"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="flex items-center justify-between mb-6">
+                <h2 className="text-2xl font-bold gradient-text">Project Preview</h2>
+                <button
+                  onClick={() => setShowPreview(false)}
+                  className="p-2 rounded-lg"
+                >
+                  <X className="w-5 h-5 text-white/70" />
+                </button>
+              </div>
+
+              {/* Preview Content */}
+              <div className="space-y-6">
+                {/* Project Header */}
+                <div className="text-center">
+                  <h1 className="text-4xl font-bold gradient-text mb-4">
+                    {formData.title || 'Untitled Project'}
+                  </h1>
+                  <p className="text-xl text-gray-400 mb-6">
+                    {formData.description || 'No description provided'}
+                  </p>
+                  
+                  {/* Project Meta */}
+                  <div className="flex flex-wrap justify-center gap-4 mb-6">
+                    <div className="flex items-center space-x-2 text-gray-300">
+                      <Tag className="w-4 h-4" />
+                      <span className="capitalize">{formData.category}</span>
+                    </div>
+                    {formData.featured && (
+                      <div className="flex items-center space-x-2 text-blue-400">
+                        <span className="text-sm font-semibold">⭐ Featured</span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Tags */}
+                  {formData.tags.length > 0 && (
+                    <div className="flex flex-wrap justify-center gap-2 mb-6">
+                      {formData.tags.map((tag, index) => (
+                        <span
+                          key={index}
+                          className="px-3 py-1 bg-gray-800/50 text-gray-300 text-sm rounded-full border border-gray-700"
+                        >
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* Links */}
+                  {((formData.github && formData.github.trim()) || (formData.live && formData.live.trim())) && (
+                    <div className="flex justify-center space-x-4 mb-8">
+                      {formData.github && formData.github.trim() && (
+                        <a
+                          href={formData.github}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="flex items-center space-x-2 px-4 py-2 bg-gray-800/50 text-gray-300 rounded-lg"
+                        >
+                          <Github className="w-4 h-4" />
+                          <span>GitHub</span>
+                        </a>
+                      )}
+                      {formData.live && formData.live.trim() && (
+                        <a
+                          href={formData.live}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="flex items-center space-x-2 px-4 py-2 bg-blue-600/80 text-white rounded-lg"
+                        >
+                          <ExternalLink className="w-4 h-4" />
+                          <span>Live Demo</span>
+                        </a>
+                      )}
+                    </div>
+                  )}
+                </div>
+
+                {/* Content Preview */}
+                {formData.content && (
+                  <div className="border-t border-white/10 pt-6">
+                    <h3 className="text-xl font-semibold gradient-text mb-4">Content</h3>
+                    <div className="prose prose-invert max-w-none">
+                      <div 
+                        className="markdown text-gray-300 leading-relaxed"
+                        dangerouslySetInnerHTML={{ __html: parseMarkdown(formData.content) }}
+                      />
+                    </div>
+                  </div>
+                )}
+
+                {/* Status */}
+                <div className="border-t border-white/10 pt-6">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-4">
+                      <span className={`px-3 py-1 rounded-full text-sm font-medium ${
+                        formData.published 
+                          ? 'bg-green-500/20 text-green-400' 
+                          : 'bg-yellow-500/20 text-yellow-400'
+                      }`}>
+                        {formData.published ? 'Published' : 'Draft'}
+                      </span>
+                      {formData.featured && (
+                        <span className="px-3 py-1 bg-blue-500/20 text-blue-400 rounded-full text-sm font-medium">
+                          Featured
+                        </span>
+                      )}
+                    </div>
+                    <div className="text-sm text-gray-400">
+                      Last updated: {new Date().toLocaleDateString()}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
+}
+
+export default function EditorPage() {
+  return (
+    <Suspense fallback={<div className="min-h-screen bg-gray-900 flex items-center justify-center">
+      <div className="text-white">Loading editor...</div>
+    </div>}>
+      <EditorPageContent />
+    </Suspense>
+  );
 }