'use client';

import { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { 
  Plus, 
  Trash2, 
  Star, 
  Loader2, 
  ChevronLeft, 
  ChevronRight, 
  Save,
  Globe,
  X,
  User,
  Users
} from 'lucide-react';

const SummernoteEditor = dynamic(
  () => import('../../../components/organisms/SummernoteEditor'),
  { 
    ssr: false,
    loading: () => <div className="border rounded-md p-4">Loading editor...</div>
  }
);

const tabs = [
  'BASIC INFO',
  'CONTENT',
  'SCHEMA',
  'META TAGS',
  'SETTINGS'
];

const initialForm = {
  title: '',
  slug: '',
  category_id: '',
  country_id: '',
  author_id: '', // Added author_id field
  short_description: '',
  views: 0,
  sort_order: 1,
  sm_question: JSON.stringify(['']),
  sm_answer: JSON.stringify(['']),
  description: '',
  image: '',
  image_ext: '',
  is_featured: false,
  is_active: true,
  seo: '{}',
  custom_post_type: 'blog',
  post_attributes: '{}',
  enable_meta_tags: false,
  meta_title: '',
  meta_description: '',
  meta_keywords: '',
};

export default function AddArticle({ id, isEditMode = false }) {
  const router = useRouter();
  const [form, setForm] = useState(initialForm);
  const [loading, setLoading] = useState(false);
  const [categories, setCategories] = useState([]);
  const [countries, setCountries] = useState([]);
  const [authors, setAuthors] = useState([]); // Added authors state
  const [showCountryDropdown, setShowCountryDropdown] = useState(false);
  const [showAuthorDropdown, setShowAuthorDropdown] = useState(false); // Added author dropdown
  const [newCategory, setNewCategory] = useState('');
  const [imageUploading, setImageUploading] = useState(false);
  const [activeTab, setActiveTab] = useState('BASIC INFO');
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  useEffect(() => {
    loadCategories();
    loadCountries();
    loadAuthors(); // Load authors
    if (isEditMode && id) {
      loadArticle();
    }
  }, [id, isEditMode]);

  // Load authors from API
  const loadAuthors = async () => {
    try {
      const res = await fetch('/api/internal/blogs/authors');
      const data = await res.json();
      
      if (data.success) {
        setAuthors(data.data);
      } else {
        toast.error(data.message || 'Failed to load authors');
      }
    } catch (error) {
      console.error('Error loading authors:', error);
      toast.error('Failed to load authors');
    }
  };

  // Get selected author name
  const getSelectedAuthorName = () => {
    if (!form.author_id) return 'Select Author';
    const author = authors.find(a => a.id == form.author_id);
    return author ? author.full_name : 'Select Author';
  };

  // Load countries from API
  const loadCountries = async () => {
    try {
      const res = await fetch('/api/internal/blogs/countries');
      const data = await res.json();
      
      if (data.success) {
        setCountries(data.data);
      } else {
        toast.error(data.message || 'Failed to load countries');
      }
    } catch (error) {
      console.error('Error loading countries:', error);
      toast.error('Failed to load countries');
    }
  };

  // Get selected country name
  const getSelectedCountryName = () => {
    if (!form.country_id) return 'Select Country';
    const country = countries.find(c => c.id == form.country_id);
    return country ? `${country.country} (${country.code})` : 'Select Country';
  };

  // Helper function to safely get string values
  const safeString = (value) => {
    return value !== null && value !== undefined ? String(value) : '';
  };

  // Helper function to safely get boolean values
  const safeBool = (value) => {
    return Boolean(value);
  };

  // Helper function to safely get number values
  const safeNumber = (value) => {
    const num = Number(value);
    return isNaN(num) ? 0 : num;
  };

  const loadArticle = async () => {
    try {
      setLoading(true);
      const res = await fetch(`/api/internal/blogs/${id}`);
      
      if (!res.ok) {
        throw new Error('Failed to fetch article');
      }

      const data = await res.json();
      
      if (!data?.success || !data?.data) {
        throw new Error(data?.message || 'Article not found');
      }

      const article = data.data;
      
      const parseJsonField = (field, defaultValue) => {
        try {
          return field ? JSON.parse(field) : defaultValue;
        } catch {
          return defaultValue;
        }
      };

      const seoData = parseJsonField(article.seo, {});
      const smQuestion = parseJsonField(article.sm_question, ['']);
      const smAnswer = parseJsonField(article.sm_answer, ['']);

      // Safely set form data with proper type conversions
      setForm({
        title: safeString(article.title),
        slug: safeString(article.slug),
        category_id: safeString(article.category_id),
        country_id: safeString(article.country_id || ''),
        author_id: safeString(article.author_id || ''), // Added
        short_description: safeString(article.short_description),
        views: safeNumber(article.views),
        sort_order: safeNumber(article.sort_order),
        description: safeString(article.description),
        image: safeString(article.image),
        image_ext: safeString(article.image_ext),
        is_featured: safeBool(article.is_featured),
        is_active: safeBool(article.is_active),
        sm_question: JSON.stringify(smQuestion),
        sm_answer: JSON.stringify(smAnswer),
        seo: safeString(article.seo || '{}'),
        likes: safeNumber(article.likes),
        custom_post_type: safeString(article.custom_post_type || 'blog'),
        post_attributes: safeString(article.post_attributes || '{}'),
        enable_meta_tags: safeBool(article.enable_meta_tags),
        meta_title: safeString(seoData.meta_title || article.meta_title),
        meta_description: safeString(seoData.meta_description || article.meta_description),
        meta_keywords: safeString(seoData.meta_keywords || article.meta_keywords),
      });
    } catch (error) {
      console.error('Error loading article:', error);
      toast.error(error.message || 'Failed to load article');
      router.push('/admin/articles/list');
    } finally {
      setLoading(false);
    }
  };
  
  const loadCategories = async () => {
    try {
      const res = await fetch('/api/internal/blog-categories');
      const data = await res.json();
      
      if (data.success) {
        setCategories(data.data);
        if (!isEditMode && !form.category_id && data.data.length > 0) {
          setForm(prev => ({ ...prev, category_id: String(data.data[0].id) }));
        }
      } else {
        toast.error(data.message || 'Failed to load categories');
      }
    } catch (error) {
      toast.error('Failed to load categories');
      console.error('Error loading categories:', error);
    }
  };

  // Handle author selection
  const handleAuthorSelect = (authorId) => {
    setForm(prev => ({ ...prev, author_id: String(authorId) }));
    setShowAuthorDropdown(false);
  };

  // Clear author selection
  const handleClearAuthor = () => {
    setForm(prev => ({ ...prev, author_id: '' }));
  };

  // Handle country selection
  const handleCountrySelect = (countryId) => {
    setForm(prev => ({ ...prev, country_id: String(countryId) }));
    setShowCountryDropdown(false);
  };

  // Clear country selection
  const handleClearCountry = () => {
    setForm(prev => ({ ...prev, country_id: '' }));
  };

  const addSchemaRow = () => {
    const questions = JSON.parse(form.sm_question);
    const answers = JSON.parse(form.sm_answer);
    questions.push('');
    answers.push('');
    setForm(prev => ({
      ...prev,
      sm_question: JSON.stringify(questions),
      sm_answer: JSON.stringify(answers),
    }));
  };

  const removeSchemaRow = (index) => {
    const questions = JSON.parse(form.sm_question);
    const answers = JSON.parse(form.sm_answer);
    if (questions.length > 1) {
      questions.splice(index, 1);
      answers.splice(index, 1);
      setForm(prev => ({
        ...prev,
        sm_question: JSON.stringify(questions),
        sm_answer: JSON.stringify(answers),
      }));
    }
  };

  const handleSchemaChange = (index, field, value) => {
    const questions = JSON.parse(form.sm_question);
    const answers = JSON.parse(form.sm_answer);
    if (field === 'question') questions[index] = safeString(value);
    else answers[index] = safeString(value);
    setForm(prev => ({
      ...prev,
      sm_question: JSON.stringify(questions),
      sm_answer: JSON.stringify(answers),
    }));
  };

  const handleAddCategory = async () => {
    if (!newCategory.trim()) {
      toast.error('Category name cannot be empty');
      return;
    }

    try {
      setLoading(true);
      const res = await fetch('/api/internal/blog-categories', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: newCategory,
          slug: generateSlug(newCategory),
          is_active: true,
          sort_order: categories.length + 1,
        }),
      });

      const data = await res.json();
      
      if (data.success) {
        toast.success('Category added successfully');
        setNewCategory('');
        await loadCategories();
        setForm(prev => ({ ...prev, category_id: String(data.data.id) }));
      } else {
        toast.error(data.message || 'Failed to add category');
      }
    } catch (error) {
      toast.error('Failed to add category');
      console.error('Error adding category:', error);
    } finally {
      setLoading(false);
    }
  };
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!form.title || !form.slug || !form.category_id) {
      toast.error('Please fill all required fields');
      return;
    }

    try {
      setLoading(true);
      
      let reviews = [];
      try {
        reviews = JSON.parse(form.review_detail);
        if (!Array.isArray(reviews)) reviews = [];
      } catch {
        reviews = [];
      }
      const avgReview = reviews.length > 0 
        ? reviews.reduce((sum, r) => sum + (r.rating || 0), 0) / reviews.length 
        : 0;

      const payload = {
        ...form,
        seo: JSON.stringify({
          meta_title: form.meta_title,
          meta_description: form.meta_description,
          meta_keywords: form.meta_keywords,
        }),
        category_id: Number(form.category_id),
        country_id: form.country_id ? Number(form.country_id) : null,
        author_id: form.author_id ? Number(form.author_id) : null, // Include author_id
        review_count: reviews.length,
        rating_count: reviews.filter(r => r.rating).length,
        avg_review_value: parseFloat(avgReview.toFixed(1)),
        views: Number(form.views),
        likes: Number(form.likes),
        sort_order: Number(form.sort_order),
        custom_post_type: form.custom_post_type || 'blog'
      };

      const url = isEditMode ? `/api/internal/blogs/${id}` : '/api/internal/blogs';
      const method = isEditMode ? 'PUT' : 'POST';

      const res = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });

      let data;
      try {
        if (!res.ok) {
          const errorText = await res.text();
          throw new Error(`Request failed: ${res.status} ${res.statusText}\n${errorText}`);
        }
        data = await res.json();
      } catch (err) {
        toast.error('Server error or invalid response');
        console.error('Fetch error:', err);
        setLoading(false);
        return;
      }
      if (data.success) {
        toast.success(`Article ${isEditMode ? 'updated' : 'created'} successfully!`);
        router.push('/admin/articles/list');
      } else {
        toast.error(data.message || `Failed to ${isEditMode ? 'update' : 'create'} article`);
      }
    } catch (error) {
      console.error('Error submitting article:', error);
      toast.error(`Error ${isEditMode ? 'updating' : 'creating'} article`);
    } finally {
      setLoading(false);
    }
  };

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setForm(prev => ({ 
      ...prev, 
      [name]: type === 'checkbox' ? checked : safeString(value)
    }));
  };

  const handleTitleChange = (e) => {
    const title = safeString(e.target.value);
    setForm(prev => ({ 
      ...prev, 
      title, 
      slug: isEditMode ? form.slug : generateSlug(title) 
    }));
  };

  const generateSlug = (text) => {
    return safeString(text)
      .toLowerCase()
      .replace(/[^\w\s-]/g, '')
      .replace(/\s+/g, '-')
      .replace(/--+/g, '-')
      .trim();
  };

  const handleDescriptionChange = (html) => {
    setForm(prev => {
      const newForm = { ...prev, description: safeString(html) };
      return newForm;
    });
  };

  const handleImageChange = async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    try {
      setImageUploading(true);
      const formData = new FormData();
      formData.append('image', file);
      formData.append('uploadType', 'articles-featured');

      const res = await fetch('/api/internal/upload', {
        method: 'POST',
        body: formData,
      });

      const data = await res.json();
      
      if (data.success && data.url) {
        const ext = file.name.split('.').pop();
        setForm(prev => ({ 
          ...prev, 
          image: safeString(data.s3Key), 
          image_ext: safeString(ext)
        }));
        toast.success('Image uploaded successfully');
      } else {
        toast.error(data.message || 'Image upload failed');
      }
    } catch (error) {
      toast.error('Image upload error');
      console.error('Upload error:', error);
    } finally {
      setImageUploading(false);
    }
  };

  const renderContent = () => {
    switch (activeTab) {
      case 'BASIC INFO':
        return (
          <div className="space-y-4">
            <div className="space-y-2">
              <label className="block font-medium">Post Title *</label>
              <input
                type="text"
                name="title"
                value={form.title}
                onChange={handleTitleChange}
                required
                className="w-full p-2 border rounded-md"
                placeholder="Enter article title"
              />
            </div>

            <div className="space-y-2">
              <label className="block font-medium">Slug *</label>
              <input
                type="text"
                name="slug"
                value={form.slug}
                onChange={handleChange}
                required
                className="w-full p-2 border rounded-md"
                placeholder="Article URL slug"
              />
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {/* Category Section */}
              <div className="space-y-2">
                <label className="block font-medium">Category *</label>
                <div className="flex gap-2 flex-col">
                  <select
                    name="category_id"
                    value={form.category_id}
                    onChange={handleChange}
                    required
                    className="w-full p-2 border rounded-md"
                    disabled={loading}
                  >
                    <option value="">Select category</option>
                    {categories.map((cat) => (
                      <option key={cat.id} value={cat.id}>
                        {cat.name}
                      </option>
                    ))}
                  </select>
                  <div className="flex gap-2">
                    <input
                      type="text"
                      value={newCategory}
                      onChange={(e) => setNewCategory(e.target.value)}
                      placeholder="New category name"
                      className="p-2 border rounded-md flex-1"
                      disabled={loading}
                    />
                    <button
                      type="button"
                      onClick={handleAddCategory}
                      className="px-4 py-2 bg-gradient-to-b from-[#0B6D76] to-[#094F56] text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400"
                      disabled={loading || !newCategory.trim()}
                    >
                      {loading ? 'Adding...' : 'Add'}
                    </button>
                  </div>
                </div>
              </div>

              {/* Country Section */}
              <div className="space-y-2">
                <label className="block font-medium">Country</label>
                <div className="relative">
                  <button
                    type="button"
                    onClick={() => setShowCountryDropdown(!showCountryDropdown)}
                    className="w-full p-2 border rounded-md text-left flex items-center justify-between bg-white hover:bg-gray-50"
                  >
                    <span className="flex items-center gap-2">
                      <Globe size={16} className="text-gray-500" />
                      {getSelectedCountryName()}
                    </span>
                    {form.country_id ? (
                      <button
                        type="button"
                        onClick={(e) => {
                          e.stopPropagation();
                          handleClearCountry();
                        }}
                        className="text-gray-400 hover:text-gray-600"
                      >
                        <X size={16} />
                      </button>
                    ) : (
                      <ChevronRight size={16} className="text-gray-400" />
                    )}
                  </button>

                  {showCountryDropdown && (
                    <div className="absolute z-20 mt-1 w-full bg-white border rounded-md shadow-lg max-h-60 overflow-y-auto">
                      <div className="py-1">
                        {countries.length > 0 ? (
                          countries.map((country) => (
                            <button
                              key={country.id}
                              type="button"
                              onClick={() => handleCountrySelect(country.id)}
                              className={`w-full text-left px-4 py-2 hover:bg-gray-100 flex justify-between items-center ${
                                form.country_id == country.id ? 'bg-blue-50 text-blue-600' : ''
                              }`}
                            >
                              <span>{country.country}</span>
                              <span className="text-sm text-gray-500">{country.code}</span>
                            </button>
                          ))
                        ) : (
                          <div className="px-4 py-2 text-gray-500 text-sm">
                            No countries found
                          </div>
                        )}
                      </div>
                    </div>
                  )}
                </div>
                {form.country_id && (
                  <div className="mt-2 text-sm text-gray-600">
                    <span className="font-medium">Selected: </span>
                    {getSelectedCountryName()}
                  </div>
                )}
              </div>
            </div>

            {/* Author Section */}
            <div className="space-y-2">
              <label className="block font-medium">Author</label>
              <div className="relative">
                <button
                  type="button"
                  onClick={() => setShowAuthorDropdown(!showAuthorDropdown)}
                  className="w-full p-2 border rounded-md text-left flex items-center justify-between bg-white hover:bg-gray-50"
                >
                  <span className="flex items-center gap-2">
                    <Users size={16} className="text-gray-500" />
                    {getSelectedAuthorName()}
                  </span>
                  {form.author_id ? (
                    <button
                      type="button"
                      onClick={(e) => {
                        e.stopPropagation();
                        handleClearAuthor();
                      }}
                      className="text-gray-400 hover:text-gray-600"
                    >
                      <X size={16} />
                    </button>
                  ) : (
                    <ChevronRight size={16} className="text-gray-400" />
                  )}
                </button>

                {showAuthorDropdown && (
                  <div className="absolute z-20 mt-1 w-full bg-white border rounded-md shadow-lg max-h-60 overflow-y-auto">
                    <div className="py-1">
                      {authors.length > 0 ? (
                        authors
                          .map((author) => (
                            <button
                              key={author.id}
                              type="button"
                              onClick={() => handleAuthorSelect(author.id)}
                              className={`w-full text-left px-4 py-2 hover:bg-gray-100 flex justify-between items-center ${
                                form.author_id == author.id ? 'bg-blue-50 text-blue-600' : ''
                              }`}
                            >
                              <div className="flex items-center gap-2">
                                {author.profile_image ? (
                                  <img 
                                    src={author.profile_image} 
                                    alt={author.full_name}
                                    className="w-6 h-6 rounded-full object-cover"
                                  />
                                ) : (
                                  <User size={16} className="text-gray-400" />
                                )}
                                <span>{author.full_name}</span>
                              </div>
                              <span className="text-xs text-gray-500">{author.slug}</span>
                            </button>
                          ))
                      ) : (
                        <div className="px-4 py-2 text-gray-500 text-sm">
                          No authors found. <a href="/admin/authors/add" className="text-blue-600 hover:underline">Add authors first</a>
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>
              {form.author_id && (
                <div className="mt-2 text-sm text-gray-600">
                  <span className="font-medium">Selected Author: </span>
                  {getSelectedAuthorName()}
                </div>
              )}
            </div>

            <div className="space-y-2">
              <label className="block font-medium">Short Description</label>
              <textarea
                name="short_description"
                value={form.short_description}
                onChange={handleChange}
                className="w-full p-2 border rounded-md min-h-[100px]"
                placeholder="Brief summary of the article"
              />
            </div>
          </div>
        );

      case 'CONTENT':
        return (
          <div className="space-y-4">
            <div className="space-y-2">
              <label className="block font-medium">Description</label>
              <SummernoteEditor
                value={form.description}
                onChange={handleDescriptionChange}
                placeholder="Write your article content here..."
              />
            </div>

            <div className="space-y-2">
              <label className="block font-medium">Featured Image</label>
              <input
                type="file"
                accept="image/*"
                onChange={handleImageChange}
                className="w-full p-2 border rounded-md"
                disabled={imageUploading}
              />
              {form.image && (
                <div className="mt-2">
                  <img
                    src={`https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${form.image}`}
                    alt="Preview"
                    className="w-40 h-24 object-cover rounded border"
                  />
                  <button
                    type="button"
                    onClick={() => setForm(prev => ({ ...prev, image: '', image_ext: '' }))}
                    className="mt-2 text-sm text-red-500 flex items-center gap-1"
                  >
                    <Trash2 size={14} /> Remove Image
                  </button>
                </div>
              )}
              {imageUploading && (
                <div className="mt-2 text-sm text-gray-500 flex items-center gap-2">
                  <Loader2 className="animate-spin" size={16} /> Uploading image...
                </div>
              )}
            </div>
          </div>
        );
      
      case 'SCHEMA':
        return (
          <div className="space-y-4">
            <div className="flex justify-between items-center">
              <h2 className="text-lg font-semibold">Schema Markup</h2>
              <button
                type="button"
                onClick={addSchemaRow}
                className="bg-gradient-to-b from-[#0B6D76] to-[#094F56] text-white px-4 py-2 rounded hover:bg-blue-700"
              >
                Add FAQ Item
              </button>
            </div>

            {(() => {
              try {
                const questions = JSON.parse(form.sm_question);
                const answers = JSON.parse(form.sm_answer);
                return Array.isArray(questions) ? questions.map((question, index) => (
                  <div key={index} className="flex gap-4 items-start mt-4">
                    <div className="flex-1 space-y-2">
                      <input
                        type="text"
                        value={safeString(question)}
                        onChange={(e) => handleSchemaChange(index, "question", e.target.value)}
                        placeholder="Question"
                        className="w-full p-2 border rounded"
                      />
                      <textarea
                        value={safeString(answers[index])}
                        onChange={(e) => handleSchemaChange(index, "answer", e.target.value)}
                        placeholder="Answer"
                        className="w-full p-2 border rounded min-h-[80px]"
                      />
                    </div>
                    <button
                      type="button"
                      onClick={() => removeSchemaRow(index)}
                      className="text-red-500 hover:text-red-700 p-2"
                      title="Remove this FAQ item"
                    >
                      <Trash2 size={18} />
                    </button>
                  </div>
                )) : [];
              } catch {
                return [];
              }
            })()}
          </div>
        );

      case 'META TAGS':
        return (
          <div className="space-y-4">
            <div className="flex justify-between items-center">
              <h2 className="text-lg font-semibold">Meta Tags</h2>
              <label className="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  name="enable_meta_tags"
                  checked={form.enable_meta_tags}
                  onChange={handleChange}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                <span className="ml-2 text-sm font-medium">
                  {form.enable_meta_tags ? 'Enabled' : 'Disabled'}
                </span>
              </label>
            </div>

            {form.enable_meta_tags && (
              <div className="space-y-4 mt-4">
                <div className="space-y-2">
                  <label className="block font-medium">Meta Title</label>
                  <input
                    type="text"
                    name="meta_title"
                    value={form.meta_title}
                    onChange={handleChange}
                    className="w-full p-2 border rounded-md"
                    placeholder="Meta title"
                    maxLength={60}
                  />
                  <div className="text-xs text-gray-500">
                    {form.meta_title.length}/60 characters
                  </div>
                </div>

                <div className="space-y-2">
                  <label className="block font-medium">Meta Description</label>
                  <textarea
                    name="meta_description"
                    value={form.meta_description}
                    onChange={handleChange}
                    className="w-full p-2 border rounded-md min-h-[80px]"
                    placeholder="Meta description"
                    maxLength={160}
                  />
                  <div className="text-xs text-gray-500">
                    {form.meta_description.length}/160 characters
                  </div>
                </div>

                <div className="space-y-2">
                  <label className="block font-medium">Meta Keywords</label>
                  <input
                    type="text"
                    name="meta_keywords"
                    value={form.meta_keywords}
                    onChange={handleChange}
                    className="w-full p-2 border rounded-md"
                    placeholder="Enter your keywords"
                  />
                </div>
              </div>
            )}
          </div>
        );

      case 'SETTINGS':
        return (
          <div className="space-y-4">
            <h2 className="text-lg font-semibold">Settings</h2>
            <div className="flex flex-wrap gap-6">
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  name="is_active"
                  checked={form.is_active}
                  onChange={handleChange}
                  className="w-4 h-4"
                />
                <span className="font-medium">Active</span>
              </label>
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  name="is_featured"
                  checked={form.is_featured}
                  onChange={handleChange}
                  className="w-4 h-4"
                />
                <span className="font-medium">Featured</span>
              </label>
            </div>
          </div>
        );

      default:
        return null;
    }
  };

  return (
    <form onSubmit={handleSubmit} className="min-h-screen flex flex-col md:flex-row bg-gray-100">
      {/* Mobile Menu Button */}
      <div className="md:hidden bg-white p-4 flex justify-between items-center border-b">
        <h2 className="text-xl font-bold text-gray-800">
          {isEditMode ? 'Edit Article' : 'Create Article'}
        </h2>
        <button
          type="button"
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          className="text-gray-500 hover:text-gray-600"
        >
          <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            {mobileMenuOpen ? (
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            ) : (
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
            )}
          </svg>
        </button>
      </div>

      {/* Mobile Sidebar */}
      {mobileMenuOpen && (
        <div className="md:hidden bg-white border-b shadow-lg p-4">
          <ul className="space-y-2">
            {tabs.map((tab) => (
              <li key={tab}>
                <button
                  type="button"
                  onClick={() => {
                    setActiveTab(tab);
                    setMobileMenuOpen(false);
                  }}
                  className={`w-full text-left px-4 py-2 rounded-lg transition-colors ${
                    activeTab === tab ? 'bg-[#0B6D76] text-white' : 'hover:bg-gray-200'
                  }`}
                >
                  {tab}
                </button>
              </li>
            ))}
          </ul>
        </div>
      )}

      {/* Desktop Sidebar */}
      <div className="hidden md:block w-64 bg-white border-r shadow-lg p-6">
        <h2 className="text-xl font-bold mb-6 text-gray-800">
          {isEditMode ? 'Edit Article' : 'Create Article'}
        </h2>
        <ul className="space-y-2">
          {tabs.map((tab) => (
            <li key={tab}>
              <button
                type="button"
                onClick={() => setActiveTab(tab)}
                className={`w-full text-left px-4 py-2 rounded-lg transition-colors ${
                  activeTab === tab ? 'bg-[#0B6D76] text-white' : 'hover:bg-gray-200'
                }`}
              >
                {tab}
              </button>
            </li>
          ))}
        </ul>
      </div>

      {/* Main Content */}
      <div className="flex-1 p-4 md:p-6 lg:p-8 bg-white">
        <div className="max-w-4xl mx-auto">
          {/* Mobile Tab Indicator */}
          <div className="md:hidden mb-6">
            <div className="bg-[#0B6D76] text-white px-4 py-2 rounded-lg">
              {activeTab}
            </div>
          </div>

          <div className="bg-white p-4 sm:p-6 rounded-lg border">
            {renderContent()}
          </div>

          {/* Navigation buttons */}
          <div className="flex justify-between pt-6 mt-6">
            {activeTab !== 'BASIC INFO' ? (
              <button
                type="button"
                onClick={() => setActiveTab(tabs[tabs.indexOf(activeTab) - 1])}
                className="btn-gray flex items-center gap-2 px-4 py-2"
              >
                <ChevronLeft size={18} /> Previous
              </button>
            ) : (
              <div></div>
            )}

            {activeTab !== 'SETTINGS' ? (
              <button
                type="button"
                onClick={() => setActiveTab(tabs[tabs.indexOf(activeTab) + 1])}
                className="ml-auto btn-primary flex items-center gap-2 px-4 py-2"
              >
                Next <ChevronRight size={18} />
              </button>
            ) : (
              <button
                type="submit"
                className="ml-auto btn-primary flex items-center gap-2 px-6 py-2"
                disabled={loading}
              >
                {loading ? (
                  <>
                    <Loader2 className="animate-spin" size={18} /> 
                    {isEditMode ? 'Updating...' : 'Creating...'}
                  </>
                ) : (
                  <>
                    <Save size={18} /> 
                    {isEditMode ? 'Update Article' : 'Create Article'}
                  </>
                )}
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Close dropdowns when clicking outside */}
      {(showCountryDropdown || showAuthorDropdown) && (
        <div
          className="fixed inset-0 z-10"
          onClick={() => {
            setShowCountryDropdown(false);
            setShowAuthorDropdown(false);
          }}
        />
      )}

      {/* Add these styles to your global CSS or CSS module */}
      <style jsx>{`
        .btn-primary {
          @apply bg-gradient-to-b from-[#0B6D76] to-[#094F56] text-white font-medium rounded-lg transition-colors hover:from-[#094F56] hover:to-[#083a40] disabled:opacity-70;
        }
        .btn-gray {
          @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium rounded-lg transition-colors;
        }
      `}</style>
    </form>
  );
}