'use client';

import React, { useState, useEffect, useRef, useCallback, Suspense } from 'react';
import { useSearchParams } from 'next/navigation';
import { motion, AnimatePresence } from 'framer-motion';
import ReactMarkdown from 'react-markdown';
import { 
  ArrowLeft, 
  Save, 
  Eye, 
  X, 
  Bold, 
  Italic, 
  Code, 
  Image, 
  Link,
  List,
  ListOrdered,
  Quote,
  Hash,
  Loader2,
  ExternalLink,
  Github,
  Tag
} from 'lucide-react';

interface Project {
  id: string;
  title: string;
  description: string;
  content?: string;
  category: string;
  tags?: string[];
  featured: boolean;
  published: boolean;
  github?: string;
  live?: string;
  image?: string;
  createdAt: string;
  updatedAt: string;
}

function EditorPageContent() {
  const searchParams = useSearchParams();
  const projectId = searchParams.get('id');
  const contentRef = useRef<HTMLDivElement>(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({
    title: '',
    description: '',
    content: '',
    category: 'web',
    tags: [] as string[],
    featured: false,
    published: false,
    github: '',
    live: '',
    image: ''
  });

  const loadProject = useCallback(async (id: string) => {
    try {
      const response = await fetch('/api/projects');
      
      if (response.ok) {
        const data = await response.json();
        const foundProject = data.projects.find((p: Project) => p.id.toString() === id);
        
        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 || ''
          });
        }
      } else {
        if (process.env.NODE_ENV === 'development') {
          console.error('Failed to fetch projects:', response.status);
        }
      }
    } catch (error) {
      if (process.env.NODE_ENV === 'development') {
        console.error('Error loading project:', error);
      }
    }
  }, []);

  // Check authentication and load project
  useEffect(() => {
    const init = async () => {
      try {
        // Check auth
        const authStatus = sessionStorage.getItem('admin_authenticated');
        const sessionToken = sessionStorage.getItem('admin_session_token');
        
        if (authStatus === 'true' && sessionToken) {
          setIsAuthenticated(true);
          
          // Load project if editing
          if (projectId) {
            await loadProject(projectId);
          } else {
            setIsCreating(true);
          }
        } else {
          setIsAuthenticated(false);
        }
      } catch (error) {
        if (process.env.NODE_ENV === 'development') {
          console.error('Error in init:', error);
        }
        setIsAuthenticated(false);
      } finally {
        setIsLoading(false);
      }
    };

    init();
  }, [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';
      
      // 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
      };
      
      const response = await fetch(url, {
        method,
        headers: {
          'Content-Type': 'application/json',
          'x-admin-request': 'true'
        },
        body: JSON.stringify(saveData)
      });

      if (response.ok) {
        const savedProject = await response.json();
        
        // 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 {
        const errorData = await response.json();
        if (process.env.NODE_ENV === 'development') {
          console.error('Error saving project:', response.status, errorData);
        }
        alert(`Error saving project: ${errorData.error || 'Unknown error'}`);
      }
    } catch (error) {
      if (process.env.NODE_ENV === 'development') {
        console.error('Error saving project:', error);
      }
      alert(`Error saving project: ${error instanceof Error ? error.message : 'Unknown error'}`);
    } finally {
      setIsSaving(false);
    }
  };

  const handleInputChange = (field: string, value: string | boolean | string[]) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  const handleTagsChange = (tagsString: string) => {
    const tags = tagsString.split(',').map(tag => tag.trim()).filter(tag => tag);
    setFormData(prev => ({
      ...prev,
      tags
    }));
  };

  // Markdown components for react-markdown with security
  const markdownComponents = {
    a: ({ node, ...props }: { node?: unknown; href?: string; children?: React.ReactNode }) => {
      // Validate URLs to prevent javascript: and data: protocols
      const href = props.href || '';
      const isSafe = href && !href.startsWith('javascript:') && !href.startsWith('data:');
      return (
        <a
          {...props}
          href={isSafe ? href : '#'}
          target={isSafe && href.startsWith('http') ? '_blank' : undefined}
          rel={isSafe && href.startsWith('http') ? 'noopener noreferrer' : undefined}
        />
      );
    },
    img: ({ node, ...props }: { node?: unknown; src?: string; alt?: string }) => {
      // Validate image URLs
      const src = props.src || '';
      const isSafe = src && !src.startsWith('javascript:') && !src.startsWith('data:');
      return isSafe ? <img {...props} src={src} alt={props.alt || ''} /> : null;
    },
  };

  // Rich text editor functions
  const insertFormatting = (format: string) => {
    const content = contentRef.current;
    if (!content) return;

    const selection = window.getSelection();
    if (!selection || selection.rangeCount === 0) return;

    const range = selection.getRangeAt(0);
    let newText = '';
    
    switch (format) {
      case 'bold':
        newText = `**${selection.toString() || 'bold text'}**`;
        break;
      case 'italic':
        newText = `*${selection.toString() || 'italic text'}*`;
        break;
      case 'code':
        newText = `\`${selection.toString() || 'code'}\``;
        break;
      case 'h1':
        newText = `# ${selection.toString() || 'Heading 1'}`;
        break;
      case 'h2':
        newText = `## ${selection.toString() || 'Heading 2'}`;
        break;
      case 'h3':
        newText = `### ${selection.toString() || 'Heading 3'}`;
        break;
      case 'list':
        newText = `- ${selection.toString() || 'List item'}`;
        break;
      case 'orderedList':
        newText = `1. ${selection.toString() || 'List item'}`;
        break;
      case 'quote':
        newText = `> ${selection.toString() || 'Quote'}`;
        break;
      case 'link':
        const url = prompt('Enter URL:');
        if (url) {
          newText = `[${selection.toString() || 'link text'}](${url})`;
        }
        break;
      case 'image':
        const imageUrl = prompt('Enter image URL:');
        if (imageUrl) {
          newText = `![${selection.toString() || 'alt text'}](${imageUrl})`;
        }
        break;
    }

    if (newText) {
      range.deleteContents();
      range.insertNode(document.createTextNode(newText));
      
      // Update form data
      setFormData(prev => ({
        ...prev,
        content: content.textContent || ''
      }));
    }
  };

  if (isLoading) {
    return (
      <div className="min-h-screen animated-bg flex items-center justify-center">
        <div className="text-center">
          <motion.div
            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>
    );
  }

  if (!isAuthenticated) {
    return (
      <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 }}
          className="text-center text-white max-w-md mx-auto p-8 admin-glass-card rounded-2xl"
        >
          <div className="mb-6">
            <div className="w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
              <X className="w-8 h-8 text-red-400" />
            </div>
            <h1 className="text-2xl font-bold mb-2">Access Denied</h1>
            <p className="text-white/70 mb-6">You need to be logged in to access the editor.</p>
          </div>
          
          <button
            onClick={() => window.location.href = '/manage'}
            className="w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl hover:scale-105 transition-all font-medium"
          >
            Go to Admin Login
          </button>
        </motion.div>
      </div>
    );
  }

  return (
    <div className="min-h-screen animated-bg">
      {/* Header */}
      <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="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors"
              >
                <ArrowLeft className="w-5 h-5" />
                <span className="hidden sm:inline">Back to Dashboard</span>
                <span className="sm:hidden">Back</span>
              </button>
              <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-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-lg font-medium transition-all duration-200 text-sm ${
                  showPreview 
                    ? '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 className="hidden sm:inline">Preview</span>
              </button>
              
              <button
                onClick={handleSave}
                disabled={isSaving}
                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" />
                ) : (
                  <Save className="w-4 h-4" />
                )}
                <span>{isSaving ? 'Saving...' : 'Save Project'}</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Editor Content */}
      <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="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 form-input-enhanced focus:outline-none p-4 rounded-lg"
                placeholder="Enter project title..."
              />
            </motion.div>

            {/* Rich Text Toolbar */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 }}
              className="glass-card p-4 rounded-2xl"
            >
              <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 rounded-lg text-gray-300"
                    title="Bold"
                  >
                    <Bold className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => insertFormatting('italic')}
                    className="p-2 rounded-lg text-gray-300"
                    title="Italic"
                  >
                    <Italic className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => insertFormatting('code')}
                    className="p-2 rounded-lg text-gray-300"
                    title="Code"
                  >
                    <Code className="w-4 h-4" />
                  </button>
                </div>

                <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 rounded-lg text-gray-300"
                    title="Heading 1"
                  >
                    <Hash className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => insertFormatting('h2')}
                    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-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-2 sm:pr-3">
                  <button
                    onClick={() => insertFormatting('list')}
                    className="p-2 rounded-lg text-gray-300"
                    title="Bullet List"
                  >
                    <List className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => insertFormatting('orderedList')}
                    className="p-2 rounded-lg text-gray-300"
                    title="Numbered List"
                  >
                    <ListOrdered className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => insertFormatting('quote')}
                    className="p-2 rounded-lg text-gray-300"
                    title="Quote"
                  >
                    <Quote className="w-4 h-4" />
                  </button>
                </div>

                <div className="flex items-center space-x-1">
                  <button
                    onClick={() => insertFormatting('link')}
                    className="p-2 rounded-lg text-gray-300"
                    title="Link"
                  >
                    <Link className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => insertFormatting('image')}
                    className="p-2 rounded-lg text-gray-300"
                    title="Image"
                  >
                    {/* eslint-disable-next-line jsx-a11y/alt-text */}
                    <Image className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </motion.div>

            {/* Content Editor */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
              className="glass-card p-6 rounded-2xl"
            >
              <h3 className="text-lg font-semibold gradient-text mb-4">Content</h3>
              <div
                ref={contentRef}
                contentEditable
                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..."
              >
                {!isTyping ? formData.content : undefined}
              </div>
              <p className="text-xs text-white/50 mt-2">
                Supports Markdown formatting. Use the toolbar above or type directly.
              </p>
            </motion.div>

            {/* Description */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.3 }}
              className="glass-card p-6 rounded-2xl"
            >
              <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 form-input-enhanced rounded-lg focus:outline-none resize-none"
                placeholder="Brief description of your project..."
              />
            </motion.div>
          </div>

          {/* Sidebar */}
          <div className="space-y-6">
            {/* Project Settings */}
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.4 }}
              className="glass-card p-6 rounded-2xl"
            >
              <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>
                  <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">
                    Tags
                  </label>
                  <input
                    type="text"
                    value={formData.tags.join(', ')}
                    onChange={(e) => handleTagsChange(e.target.value)}
                    className="w-full px-3 py-2 form-input-enhanced rounded-lg focus:outline-none"
                    placeholder="React, TypeScript, Next.js"
                  />
                </div>
              </div>
            </motion.div>

            {/* Links */}
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.5 }}
              className="glass-card p-6 rounded-2xl"
            >
              <h3 className="text-lg font-semibold gradient-text mb-4">Links</h3>
              
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-white/70 mb-2">
                    GitHub URL
                  </label>
                  <input
                    type="url"
                    value={formData.github}
                    onChange={(e) => handleInputChange('github', e.target.value)}
                    className="w-full px-3 py-2 form-input-enhanced rounded-lg focus:outline-none"
                    placeholder="https://github.com/username/repo"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-white/70 mb-2">
                    Live URL
                  </label>
                  <input
                    type="url"
                    value={formData.live}
                    onChange={(e) => handleInputChange('live', e.target.value)}
                    className="w-full px-3 py-2 form-input-enhanced rounded-lg focus:outline-none"
                    placeholder="https://example.com"
                  />
                </div>
              </div>
            </motion.div>

            {/* Publish */}
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.6 }}
              className="glass-card p-6 rounded-2xl"
            >
              <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">
                  <input
                    type="checkbox"
                    checked={formData.featured}
                    onChange={(e) => handleInputChange('featured', e.target.checked)}
                    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>

                <label className="flex items-center space-x-3">
                  <input
                    type="checkbox"
                    checked={formData.published}
                    onChange={(e) => handleInputChange('published', e.target.checked)}
                    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>
              </div>

              <div className="mt-6 pt-4 border-t border-white/20">
                <h4 className="text-sm font-medium text-white/70 mb-2">Preview</h4>
                <div className="text-xs text-white/50 space-y-1">
                  <p>Status: {formData.published ? 'Published' : 'Draft'}</p>
                  {formData.featured && <p className="text-blue-400">⭐ Featured</p>}
                  <p>Category: {formData.category}</p>
                  <p>Tags: {formData.tags.length} tags</p>
                </div>
              </div>
            </motion.div>
          </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">
                        <ReactMarkdown components={markdownComponents}>
                          {formData.content}
                        </ReactMarkdown>
                      </div>
                    </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>
  );
}