// src/components/admin/posts/PostForm.tsx

'use client';

import { useState, useCallback, useMemo } from 'react';
import { useRouter } from 'next/navigation';
import toast from 'react-hot-toast';
import Select, { StylesConfig, SingleValue } from 'react-select';
import dynamic from 'next/dynamic';
import ImageUpload from '@/components/ui/ImageUpload';
import SchemaEditor from '@/components/ui/SchemaEditor';
import { generateSlug, sanitizeSlug } from '@/lib/slugify';
import { getApiErrorMessage } from '@/lib/utils/apiError';

// RichTextEditor — SSR disabled (uses browser APIs)
const RichTextEditor = dynamic(
  () => import('@/components/admin/text-editor/RichTextEditor'),
  { ssr: false }
);

interface Language {
  code: string;
  name: string;
  name_native: string;
  is_rtl: boolean;
  is_default: boolean;
  is_active: boolean;
}

interface CategoryOption {
  id: string;
  name: string;
  parent_id: string | null;
}

interface Translation {
  language_code: string;
  title: string;
  slug: string;
  excerpt: string | null;
  content: string | null;
  alt_text: string | null;
  meta_title: string | null;
  meta_description: string | null;
  meta_keywords: string | null;
  post_schemas: Record<string, unknown>;
}

interface PostData {
  id?: string;
  category_id: string | null;
  image: string | null;
  is_active: boolean;
  is_featured: boolean;
  published_at: string | null;
  translations: Translation[];
}

interface PostFormProps {
  mode: 'create' | 'edit';
  initialData?: PostData | null;
  languages: Language[];
  categories: CategoryOption[];
}

interface SelectOption {
  value: string;
  label: string;
}

const INPUT_STYLE = {
  background: 'var(--color-surface-alt)',
  border: '1px solid var(--color-border)',
  color: 'var(--color-text)',
} as const;

const LABEL_STYLE = { color: 'var(--color-text-secondary)' } as const;
const ERROR_STYLE = { color: 'var(--color-danger)' } as const;

export default function PostForm({ 
  mode, 
  initialData, 
  languages,
  categories,
}: PostFormProps) {
  const router = useRouter();
  const isEditing = mode === 'edit';

  // Get active languages, default first
  const activeLanguages = useMemo(() => {
    return languages
      .filter(l => l.is_active)
      .sort((a, b) => {
        if (a.is_default) return -1;
        if (b.is_default) return 1;
        return a.name.localeCompare(b.name);
      });
  }, [languages]);

  const isMultiLang = activeLanguages.length > 1;

  // Get default language
  const defaultLanguage = activeLanguages.find(l => l.is_default) || activeLanguages[0];

  // Build react-select options for categories
  const categoryOptions: SelectOption[] = useMemo(() => {
    return categories.map(cat => ({
      value: cat.id,
      label: cat.name,
    }));
  }, [categories]);

  // Initialize translations
  const initialTranslations = useMemo(() => {
    if (isEditing && initialData?.translations && initialData.translations.length > 0) {
      return initialData.translations;
    }
    return activeLanguages.map(lang => ({
      language_code: lang.code,
      title: '',
      slug: '',
      excerpt: null,
      content: null,
      alt_text: null,
      meta_title: null,
      meta_description: null,
      meta_keywords: null,
      post_schemas: {},
    }));
  }, [isEditing, initialData, activeLanguages]);

  // Find currently selected category
  const selectedCategoryOption = useMemo(() => {
    if (!initialData?.category_id) return null;
    return categoryOptions.find(o => o.value === initialData.category_id) ?? null;
  }, [categoryOptions, initialData]);

  // State for active tab
  const [activeTab, setActiveTab] = useState<string>(defaultLanguage?.code || activeLanguages[0]?.code || 'en');

  // Form state
  const [formData, setFormData] = useState({
    category_id: initialData?.category_id || null,
    image: initialData?.image || null,
    is_active: initialData?.is_active !== undefined ? initialData.is_active : true,
    is_featured: initialData?.is_featured !== undefined ? initialData.is_featured : false,
    published_at: initialData?.published_at || null,
    translations: initialTranslations,
  });

  const [selectedCategory, setSelectedCategory] = useState<SingleValue<SelectOption>>(selectedCategoryOption);
  const [loading, setLoading] = useState(false);
  const [errors, setErrors] = useState<Record<string, Record<string, string>>>({});

  // react-select custom styles using CSS variables
  const selectStyles: StylesConfig<SelectOption, false> = useMemo(() => ({
    control: (base, state) => ({
      ...base,
      background: 'var(--color-surface-alt)',
      border: `1px solid ${state.isFocused ? 'var(--color-cta)' : 'var(--color-border)'}`,
      borderRadius: '0.5rem',
      boxShadow: state.isFocused ? '0 0 0 2px color-mix(in srgb, var(--color-cta) 20%, transparent)' : 'none',
      minHeight: '42px',
      cursor: 'pointer',
      transition: 'all 0.15s',
      '&:hover': { borderColor: 'var(--color-cta)' },
    }),
    valueContainer: (base) => ({ ...base, padding: '2px 12px' }),
    singleValue: (base) => ({ ...base, color: 'var(--color-text)', fontSize: '0.875rem' }),
    placeholder: (base) => ({ ...base, color: 'var(--color-text-tertiary)', fontSize: '0.875rem' }),
    input: (base) => ({ ...base, color: 'var(--color-text)', fontSize: '0.875rem' }),
    menu: (base) => ({
      ...base,
      background: 'var(--color-surface)',
      border: '1px solid var(--color-border)',
      borderRadius: '0.5rem',
      boxShadow: 'var(--shadow-card-md)',
      zIndex: 50,
      overflow: 'hidden',
    }),
    menuList: (base) => ({ ...base, padding: '4px' }),
    option: (base, state) => ({
      ...base,
      background: state.isSelected
        ? 'var(--color-cta)'
        : state.isFocused
        ? 'color-mix(in srgb, var(--color-cta) 10%, transparent)'
        : 'transparent',
      color: state.isSelected ? 'white' : 'var(--color-text)',
      fontSize: '0.875rem',
      borderRadius: '0.375rem',
      cursor: 'pointer',
      padding: '8px 12px',
      '&:active': { background: 'color-mix(in srgb, var(--color-cta) 20%, transparent)' },
    }),
    clearIndicator: (base) => ({
      ...base,
      color: 'var(--color-text-tertiary)',
      cursor: 'pointer',
      padding: '0 6px',
      '&:hover': { color: 'var(--color-danger)' },
    }),
    dropdownIndicator: (base) => ({
      ...base,
      color: 'var(--color-text-tertiary)',
      padding: '0 8px',
      '&:hover': { color: 'var(--color-text)' },
    }),
    indicatorSeparator: (base) => ({ ...base, background: 'var(--color-border)' }),
    noOptionsMessage: (base) => ({ ...base, color: 'var(--color-text-secondary)', fontSize: '0.875rem' }),
  }), []);

  const getTranslation = useCallback((languageCode: string) => {
    return formData.translations.find(t => t.language_code === languageCode);
  }, [formData.translations]);

  const updateTranslation = useCallback((languageCode: string, field: string, value: unknown) => {
    setFormData(prev => {
      const existingIndex = prev.translations.findIndex(t => t.language_code === languageCode);
      const newTranslations = [...prev.translations];
      
      if (existingIndex >= 0) {
        newTranslations[existingIndex] = { 
          ...newTranslations[existingIndex], 
          [field]: value 
        };
      } else {
        newTranslations.push({ 
          language_code: languageCode, 
          title: '',
          slug: '',
          excerpt: null,
          content: null,
          alt_text: null,
          meta_title: null,
          meta_description: null,
          meta_keywords: null,
          post_schemas: {},
          [field]: value 
        });
      }
      
      return { ...prev, translations: newTranslations };
    });
    
    // Clear error for this field
    if (errors[languageCode]?.[field]) {
      setErrors(prev => {
        const newErrors = { ...prev };
        if (newErrors[languageCode]) {
          delete newErrors[languageCode][field];
          if (Object.keys(newErrors[languageCode]).length === 0) {
            delete newErrors[languageCode];
          }
        }
        return newErrors;
      });
    }
  }, [errors]);

  /**
   * Handle title change:
   * - Always update the title field
   * - In CREATE mode only: auto-generate slug from title using language-aware slugify
   */
  const handleTitleChange = useCallback((languageCode: string, value: string) => {
    updateTranslation(languageCode, 'title', value);

    if (!isEditing) {
      updateTranslation(languageCode, 'slug', generateSlug(value));
    }
  }, [isEditing, updateTranslation]);

  /**
   * Handle manual slug change — sanitize input, never auto-overwrite after manual edit.
   */
  const handleSlugChange = useCallback((languageCode: string, value: string) => {
    updateTranslation(languageCode, 'slug', sanitizeSlug(value));
  }, [updateTranslation]);

  const handleTranslationChange = useCallback((languageCode: string, field: string, value: unknown) => {
    updateTranslation(languageCode, field, value);
  }, [updateTranslation]);

  const handleImageUpload = useCallback((publicId: string) => {
    setFormData(prev => ({ ...prev, image: publicId }));
  }, []);

  const handleImageRemove = useCallback(() => {
    setFormData(prev => ({ ...prev, image: null }));
  }, []);

  const handleCategoryChange = useCallback((option: SingleValue<SelectOption>) => {
    setSelectedCategory(option);
    setFormData(prev => ({ ...prev, category_id: option?.value ?? null }));
  }, []);

  const toggleFeatured = useCallback(() => {
    setFormData(prev => ({ ...prev, is_featured: !prev.is_featured }));
  }, []);

  const toggleStatus = useCallback(() => {
    setFormData(prev => ({ ...prev, is_active: !prev.is_active }));
  }, []);

  const handlePublishedAtChange = useCallback((value: string) => {
    setFormData(prev => ({ ...prev, published_at: value || null }));
  }, []);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setErrors({});
    setLoading(true);

    // Validate: at least one translation with title and slug
    const hasValidTranslation = formData.translations.some(t => 
      t.title.trim().length > 0 && t.slug.trim().length > 0
    );
    if (!hasValidTranslation) {
      toast.error('At least one translation with title and slug is required');
      setLoading(false);
      return;
    }

    // Validate slugs are unique within same language
    const slugMap = new Map<string, Set<string>>();
    for (const t of formData.translations) {
      if (!slugMap.has(t.language_code)) {
        slugMap.set(t.language_code, new Set());
      }
      if (slugMap.get(t.language_code)!.has(t.slug)) {
        toast.error(`Duplicate slug "${t.slug}" for language ${t.language_code}`);
        setLoading(false);
        return;
      }
      slugMap.get(t.language_code)!.add(t.slug);
    }

    try {
      const url = isEditing ? `/api/posts/${initialData?.id}` : '/api/posts';
      const method = isEditing ? 'PUT' : 'POST';

      const payload = {
        category_id: formData.category_id,
        image: formData.image,
        is_active: formData.is_active,
        is_featured: formData.is_featured,
        published_at: formData.published_at,
        translations: formData.translations.filter(t => t.title.trim().length > 0),
      };

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

      const data = await res.json();

      if (!res.ok || !data.success) {
        if (data.errors) {
          const fieldErrors: Record<string, Record<string, string>> = {};
          if (Array.isArray(data.errors)) {
            data.errors.forEach((err: { path: string[]; message: string }) => {
              if (err.path) {
                const match = err.path.join('.');
                if (match.includes('translations')) {
                  const langMatch = match.match(/translations\[(\d+)\]/);
                  if (langMatch) {
                    const idx = parseInt(langMatch[1]);
                    const translation = formData.translations[idx];
                    if (translation) {
                      const field = err.path[err.path.length - 1];
                      if (!fieldErrors[translation.language_code]) {
                        fieldErrors[translation.language_code] = {};
                      }
                      fieldErrors[translation.language_code][field] = err.message;
                    }
                  }
                }
              }
            });
          }
          setErrors(fieldErrors);
          toast.error('Please fix the validation errors');
        } else {
          toast.error(getApiErrorMessage(data, 'Failed to save post'));
        }
        return;
      }

      toast.success(data.message || (isEditing ? 'Post updated successfully' : 'Post created successfully'));
      router.push('/admin/dashboard/posts');
      router.refresh();
    } catch (err) {
      console.error('[PostForm]', err);
      toast.error('Network error — please try again');
    } finally {
      setLoading(false);
    }
  }

  // If no languages, show message
  if (activeLanguages.length === 0) {
    return (
      <div className="p-6 rounded-lg text-center" style={{
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-card)',
      }}>
        <p style={{ color: 'var(--color-text-secondary)' }}>
          No active languages found. Please add languages first.
        </p>
      </div>
    );
  }

  return (
    <div className="p-6 md:p-8" style={{
      background: 'var(--color-surface)',
      border: '1px solid var(--color-border)',
      borderRadius: 'var(--radius-card)',
      boxShadow: 'var(--shadow-card-md)',
      maxWidth: '1000px',
      width: '100%',
    }}>
      <form onSubmit={handleSubmit}>
        <div className="space-y-6">

          {/* Basic Info Row */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Category */}
            <div>
              <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                Category
              </label>
              <Select<SelectOption, false>
                instanceId="category-select"
                options={categoryOptions}
                value={selectedCategory}
                onChange={handleCategoryChange}
                placeholder="Select a category..."
                isClearable
                isSearchable
                styles={selectStyles}
                noOptionsMessage={() => 'No categories found'}
              />
              <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
                Assign a category to this post
              </p>
            </div>

            {/* Image Upload */}
            <ImageUpload
              value={formData.image}
              onUpload={handleImageUpload}
              onRemove={handleImageRemove}
              label="Featured Image"
              folder="posts"
              maxSize={5}
              aspectRatio={1.91}
            />
          </div>

          {/* Status Toggles */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                Post Status
              </label>
              <button
                type="button"
                onClick={toggleStatus}
                className="px-4 py-2 rounded-lg text-sm font-medium transition-all"
                style={{
                  background: formData.is_active ? 'var(--color-success)' : 'var(--color-surface-alt)',
                  border: formData.is_active ? 'none' : '1px solid var(--color-border)',
                  color: formData.is_active ? 'white' : 'var(--color-text-secondary)',
                }}
              >
                {formData.is_active ? '✅ Active' : '❌ Inactive'}
              </button>
            </div>

            <div>
              <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                Featured Post
              </label>
              <button
                type="button"
                onClick={toggleFeatured}
                className="px-4 py-2 rounded-lg text-sm font-medium transition-all"
                style={{
                  background: formData.is_featured ? 'var(--color-cta)' : 'var(--color-surface-alt)',
                  border: formData.is_featured ? 'none' : '1px solid var(--color-border)',
                  color: formData.is_featured ? 'white' : 'var(--color-text-secondary)',
                }}
              >
                {formData.is_featured ? '⭐ Featured' : 'Not Featured'}
              </button>
            </div>

            <div>
              <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                Published Date
              </label>
              <input
                type="date"
                value={formData.published_at || ''}
                onChange={(e) => handlePublishedAtChange(e.target.value)}
                className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20"
                style={INPUT_STYLE}
              />
              <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
                Leave empty for draft status
              </p>
            </div>
          </div>

          {/* Language Tabs */}
          <div>
            {isMultiLang && (
              <div>
                <label className="block text-sm font-medium mb-3" style={LABEL_STYLE}>
                  Translations <span className="text-red-500">*</span>
                </label>

                <div className="flex flex-wrap gap-1 border-b" style={{ borderColor: 'var(--color-border)' }}>
                  {activeLanguages.map((lang) => {
                    const translation = getTranslation(lang.code);
                    const hasError = errors[lang.code]?.title || errors[lang.code]?.slug;
                    const hasTranslation = translation?.title && translation.title.trim().length > 0;

                    return (
                      <button
                        key={lang.code}
                        type="button"
                        onClick={() => setActiveTab(lang.code)}
                        className={`px-4 py-2 text-sm font-medium transition-all whitespace-nowrap border-b-2 ${
                          activeTab === lang.code ? 'border-cta text-cta' : 'border-transparent text-text-secondary hover:text-text'
                        } ${hasError ? 'border-red-500' : ''}`}
                        style={{
                          color: activeTab === lang.code ? 'var(--color-cta)' : 'var(--color-text-secondary)',
                          borderColor: activeTab === lang.code ? 'var(--color-cta)' : 'transparent',
                          direction: lang.is_rtl ? 'rtl' : 'ltr',
                        }}
                      >
                        <span className="flex items-center gap-1">
                          {lang.is_default ? '⭐ ' : ''}
                          {lang.name_native}
                          <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                            ({lang.code})
                          </span>
                          {hasTranslation && <span className="text-xs text-green-500">✅</span>}
                          {hasError && <span className="text-red-500">*</span>}
                        </span>
                      </button>
                    );
                  })}
                </div>
              </div>
            )}

            {/* Tab Content */}
            <div className="mt-4">
              {activeLanguages.map((lang) => {
                const isActive = activeTab === lang.code;
                const translation = getTranslation(lang.code);
                const isRTL = lang.is_rtl;
                const errorsForLang = errors[lang.code] || {};

                return (
                  <div key={lang.code} className={isActive ? 'block' : 'hidden'}>
                    <div className="space-y-4">

                      {/* Title */}
                      <div>
                        <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                          Title <span className="text-red-500">*</span>
                        </label>
                        <input
                          type="text"
                          value={translation?.title || ''}
                          onChange={(e) => handleTitleChange(lang.code, e.target.value)}
                          placeholder={isMultiLang ? `Enter title in ${lang.name}` : 'Enter post title'}
                          className={`w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 ${errorsForLang.title ? 'border-red-500' : ''}`}
                          style={{ ...INPUT_STYLE, direction: isRTL ? 'rtl' : 'ltr' }}
                        />
                        {errorsForLang.title && (
                          <p className="text-xs mt-1" style={ERROR_STYLE}>{errorsForLang.title}</p>
                        )}
                      </div>

                      {/* Slug */}
                      <div>
                        <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                          Slug <span className="text-red-500">*</span>
                          {!isEditing && (
                            <span className="ml-2 text-xs font-normal" style={{ color: 'var(--color-text-tertiary)' }}>
                              (auto-generated from title)
                            </span>
                          )}
                        </label>
                        <input
                          type="text"
                          value={translation?.slug || ''}
                          onChange={(e) => handleSlugChange(lang.code, e.target.value)}
                          placeholder={isMultiLang ? `Enter slug in ${lang.name}` : 'Enter slug'}
                          className={`w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 ${errorsForLang.slug ? 'border-red-500' : ''}`}
                          style={{ ...INPUT_STYLE, direction: isRTL ? 'rtl' : 'ltr' }}
                        />
                        {errorsForLang.slug && (
                          <p className="text-xs mt-1" style={ERROR_STYLE}>{errorsForLang.slug}</p>
                        )}
                        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
                          URL-friendly name (e.g., my-first-blog-post)
                        </p>
                      </div>

                      {/* Excerpt */}
                      <div>
                        <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                          Excerpt (Short Summary)
                        </label>
                        <textarea
                          rows={2}
                          value={translation?.excerpt || ''}
                          onChange={(e) => handleTranslationChange(lang.code, 'excerpt', e.target.value)}
                          placeholder={isMultiLang ? `Enter excerpt in ${lang.name}` : 'Enter excerpt'}
                          className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 resize-none"
                          style={INPUT_STYLE}
                        />
                      </div>

                      {/* Content — RichTextEditor */}
                      <div>
                        <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                          Content
                        </label>
                        <RichTextEditor
                          content={translation?.content ?? ''}
                          onChange={(html) => handleTranslationChange(lang.code, 'content', html)}
                          isRTL={isRTL}
                        />
                      </div>

                      {/* Alt Text */}
                      <div>
                        <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                          Alt Text (Image SEO)
                        </label>
                        <input
                          type="text"
                          value={translation?.alt_text || ''}
                          onChange={(e) => handleTranslationChange(lang.code, 'alt_text', e.target.value)}
                          placeholder={isMultiLang ? `Enter alt text for image in ${lang.name}` : 'Enter alt text for image'}
                          maxLength={255}
                          className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20"
                          style={INPUT_STYLE}
                        />
                        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
                          {translation?.alt_text?.length || 0}/255 characters
                        </p>
                      </div>

                      {/* Meta Title */}
                      <div>
                        <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                          Meta Title (SEO)
                        </label>
                        <input
                          type="text"
                          value={translation?.meta_title || ''}
                          onChange={(e) => handleTranslationChange(lang.code, 'meta_title', e.target.value)}
                          placeholder={isMultiLang ? `Enter meta title in ${lang.name}` : 'Enter meta title'}
                          maxLength={200}
                          className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20"
                          style={INPUT_STYLE}
                        />
                        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
                          {translation?.meta_title?.length || 0}/200 characters
                        </p>
                      </div>

                      {/* Meta Description */}
                      <div>
                        <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                          Meta Description (SEO)
                        </label>
                        <textarea
                          rows={2}
                          value={translation?.meta_description || ''}
                          onChange={(e) => handleTranslationChange(lang.code, 'meta_description', e.target.value)}
                          placeholder={isMultiLang ? `Enter meta description in ${lang.name}` : 'Enter meta description'}
                          maxLength={300}
                          className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 resize-none"
                          style={INPUT_STYLE}
                        />
                        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
                          {translation?.meta_description?.length || 0}/300 characters
                        </p>
                      </div>

                      {/* Meta Keywords */}
                      <div>
                        <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
                          Meta Keywords (SEO)
                        </label>
                        <input
                          type="text"
                          value={translation?.meta_keywords || ''}
                          onChange={(e) => handleTranslationChange(lang.code, 'meta_keywords', e.target.value)}
                          placeholder={isMultiLang ? `Enter meta keywords in ${lang.name}` : 'Enter meta keywords (comma separated)'}
                          maxLength={255}
                          className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20"
                          style={INPUT_STYLE}
                        />
                        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
                          {translation?.meta_keywords?.length || 0}/255 characters — comma separated
                        </p>
                      </div>

                      {/* Schema Editor */}
                      <SchemaEditor
                        value={translation?.post_schemas || {}}
                        onChange={(schemas) => handleTranslationChange(lang.code, 'post_schemas', schemas)}
                        label={isMultiLang ? `Schema Markup (${lang.name})` : 'Schema Markup'}
                        isRTL={isRTL}
                      />
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Form Actions */}
          <div className="flex gap-3 pt-4 border-t" style={{ borderColor: 'var(--color-border)' }}>
            <button
              type="submit"
              disabled={loading}
              className="px-6 py-2.5 rounded-lg text-sm font-medium transition-all disabled:opacity-50 hover:opacity-90"
              style={{ background: 'var(--color-cta)', color: 'white' }}
            >
              {loading ? (
                <span className="flex items-center gap-2">
                  <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
                  </svg>
                  Saving...
                </span>
              ) : (isEditing ? 'Update Post' : 'Create Post')}
            </button>
            <button
              type="button"
              onClick={() => router.back()}
              className="px-6 py-2.5 rounded-lg text-sm font-medium transition-all hover:opacity-80"
              style={{
                background: 'var(--color-surface-alt)',
                color: 'var(--color-text)',
                border: '1px solid var(--color-border)',
              }}
            >
              Cancel
            </button>
          </div>

        </div>
      </form>
    </div>
  );
}