import React, { useState, useEffect, useRef } from 'react';
import { authFetch } from '../../services/apiClient';
import { BookOpen, Search, Folder, FileText, Plus, Edit, Eye, CheckCircle2, X, Upload, Image as ImageIcon, File, Trash2 } from 'lucide-react';
import { KnowledgeBaseArticle, KnowledgeBaseCategory } from '../../types';
import { CURRENT_USER_MOCK } from '../../constants';
import './KnowledgeBase.css';

// ReactQuill loaded dynamically when KnowledgeBase mounts to reduce initial bundle
type ReactQuillComponent = React.ComponentType<any>;

// Базовый URL бэкенда для загрузки файлов (как в PR фото отчётах)
const getBackendBase = () => {
  const apiBase = import.meta.env.VITE_API_BASE_URL || 'http://localhost:4000/api';
  return apiBase.replace(/\/api\/?$/, '');
};

// Подставить в HTML контента img src базовый URL бэкенда и обернуть в ссылку (клик — полный размер)
const rewriteContentImageUrls = (html: string): string => {
  if (!html || !html.includes('<img')) return html;
  const base = getBackendBase();
  return html.replace(
    /<img([^>]*)\ssrc=["']([^"']+)["']/gi,
    (_, attrs, src) => {
      const fullSrc = src.startsWith('http') || src.startsWith('data:') ? src : `${base}${src.startsWith('/') ? src : `/${src}`}`;
      return `<a href="${fullSrc}" target="_blank" rel="noopener noreferrer" class="kb-article-img-link"><img${attrs} src="${fullSrc}" class="kb-article-img" /></a>`;
    }
  );
};

// Компонент для отображения изображения с обработкой ошибок (URL через бэкенд, как в PR фото)
const AttachmentImage: React.FC<{ url: string; filename: string }> = ({ url, filename }) => {
  const [imageError, setImageError] = useState(false);
  const [imageLoading, setImageLoading] = useState(true);
  const base = getBackendBase();
  const imageUrl = url.startsWith('http') || url.startsWith('data:') ? url : `${base}${url.startsWith('/') ? url : `/${url}`}`;
  const fileUrl = url.startsWith('http') || url.startsWith('data:') ? url : `${base}${url.startsWith('/') ? url : `/${url}`}`;

  return (
    <a href={fileUrl} target="_blank" rel="noopener noreferrer" className="block">
      {!imageError ? (
        <>
          {imageLoading && (
            <div className="w-full h-32 bg-slate-100 flex items-center justify-center">
              <div className="text-slate-400 text-xs">Загрузка...</div>
            </div>
          )}
          <img 
            src={imageUrl} 
            alt={filename}
            className={`w-full h-32 object-cover hover:opacity-90 transition-opacity ${imageLoading ? 'hidden' : ''}`}
            onError={() => {
              setImageError(true);
              setImageLoading(false);
            }}
            onLoad={() => setImageLoading(false)}
          />
        </>
      ) : (
        <div className="w-full h-32 bg-slate-100 flex items-center justify-center">
          <div className="text-center">
            <ImageIcon className="w-8 h-8 text-slate-400 mx-auto mb-1" />
            <p className="text-xs text-slate-500 px-2 truncate max-w-full">{filename}</p>
          </div>
        </div>
      )}
      <p className="p-2 text-xs text-slate-600 truncate bg-slate-50">{filename}</p>
    </a>
  );
};

export const KnowledgeBase: React.FC = () => {
  const [categories, setCategories] = useState<KnowledgeBaseCategory[]>([]);
  const [articles, setArticles] = useState<KnowledgeBaseArticle[]>([]);
  const [selectedCategory, setSelectedCategory] = useState<number | null>(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedArticle, setSelectedArticle] = useState<KnowledgeBaseArticle | null>(null);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [showViewModal, setShowViewModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [showCreateCategoryModal, setShowCreateCategoryModal] = useState(false);
  const [newCategoryName, setNewCategoryName] = useState('');
  const [formData, setFormData] = useState({
    title: '',
    categoryId: '',
    content: '',
    contentType: 'html' as 'markdown' | 'html',
    tags: ''
  });
  const [uploadedFiles, setUploadedFiles] = useState<Array<{ filename: string; url: string; size: number; mimetype: string }>>([]);
  const [isUploading, setIsUploading] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const quillRef = useRef<any>(null);
  const [QuillEditor, setQuillEditor] = useState<ReactQuillComponent | null>(null);

  useEffect(() => {
    let cancelled = false;
    Promise.all([
      import('react-quill-new'),
      import('react-quill-new/dist/quill.snow.css')
    ]).then(([mod]) => {
      if (!cancelled) setQuillEditor(() => mod.default);
    }).catch(err => console.error('Failed to load Quill editor', err));
    return () => { cancelled = true; };
  }, []);

  // Функция для очистки HTML и получения текстового превью
  const stripHtml = (html: string): string => {
    const tmp = document.createElement('DIV');
    tmp.innerHTML = html;
    return tmp.textContent || tmp.innerText || '';
  };

  useEffect(() => {
    fetchCategories();
    fetchArticles();
  }, [selectedCategory, searchQuery]);

  const fetchCategories = async () => {
    try {
      const response = await authFetch('/api/office/knowledge-base/categories');
      if (response.ok) {
        const data = await response.json();
        setCategories(data);
      }
    } catch (error) {
      console.error('Ошибка загрузки категорий:', error);
    }
  };

  const fetchArticles = async () => {
    try {
      const params = new URLSearchParams();
      if (selectedCategory) params.append('categoryId', selectedCategory.toString());
      if (searchQuery) params.append('search', searchQuery);
      params.append('isPublished', 'true');

      const response = await authFetch(`/api/office/knowledge-base/articles?${params}`);
      if (response.ok) {
        const data = await response.json();
        // Нормализуем данные из API
        const normalizedData = data.map((article: any) => {
          // Обрабатываем attachments - нормализуем URL
          let attachments = Array.isArray(article.attachments) 
            ? article.attachments 
            : (typeof article.attachments === 'string' ? JSON.parse(article.attachments || '[]') : []);
          
          // Убеждаемся, что все URL начинаются с /uploads/ если они относительные
          attachments = attachments.map((url: string) => {
            if (!url) return url;
            // Если URL уже абсолютный (http/https), оставляем как есть
            if (url.startsWith('http://') || url.startsWith('https://')) {
              return url;
            }
            // Если URL начинается с /, оставляем как есть
            if (url.startsWith('/')) {
              return url;
            }
            // Иначе добавляем / в начало
            return `/${url}`;
          });
          
          return {
            id: article.id,
            title: article.title || '',
            slug: article.slug || '',
            categoryId: article.category_id || article.categoryId,
            category: article.category_name ? {
              id: article.category_id,
              name: article.category_name
            } : article.category,
            content: article.content || '',
            contentType: article.content_type || article.contentType || 'markdown',
            author: article.author || '',
            version: article.version || 1,
            parentVersionId: article.parent_version_id || article.parentVersionId,
            isPublished: article.is_published !== undefined ? article.is_published : (article.isPublished !== undefined ? article.isPublished : true),
            tags: Array.isArray(article.tags) ? article.tags : (typeof article.tags === 'string' ? JSON.parse(article.tags || '[]') : []),
            attachments: attachments,
            viewCount: article.view_count || article.viewCount || 0,
            createdAt: article.created_at || article.createdAt,
            updatedAt: article.updated_at || article.updatedAt,
            publishedAt: article.published_at || article.publishedAt
          };
        });
        setArticles(normalizedData);
      }
    } catch (error) {
      console.error('Ошибка загрузки статей:', error);
    }
  };

  const handleCreateCategory = async () => {
    try {
      if (!newCategoryName || !newCategoryName.trim()) {
        alert('Пожалуйста, укажите название категории');
        return;
      }

      const response = await authFetch('/api/office/knowledge-base/categories', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: newCategoryName.trim()
        })
      });

      if (response.ok) {
        const newCategory = await response.json();
        // Обновляем список категорий
        await fetchCategories();
        setShowCreateCategoryModal(false);
        setNewCategoryName('');
        alert('Категория успешно создана');
      } else {
        const errorData = await response.json().catch(() => ({ error: 'Неизвестная ошибка' }));
        alert(`Ошибка создания категории: ${errorData.error || 'Неизвестная ошибка'}`);
      }
    } catch (error: any) {
      console.error('Ошибка создания категории:', error);
      alert(`Ошибка создания категории: ${error.message || 'Неизвестная ошибка'}`);
    }
  };

  const handleViewArticle = (article: KnowledgeBaseArticle) => {
    setSelectedArticle(article);
    setShowViewModal(true);
  };

  const handleEditArticle = (article: KnowledgeBaseArticle) => {
    setSelectedArticle(article);
    setFormData({
      title: article.title || '',
      categoryId: article.categoryId ? article.categoryId.toString() : '',
      content: article.content || '',
      contentType: article.contentType || 'html',
      tags: Array.isArray(article.tags) ? article.tags.join(', ') : ''
    });
    // Восстанавливаем загруженные файлы из attachments
    if (article.attachments && Array.isArray(article.attachments) && article.attachments.length > 0) {
      const files = article.attachments.map((url: string) => ({
        filename: url.split('/').pop() || 'file',
        url: url,
        size: 0,
        mimetype: url.match(/\.(jpg|jpeg|png|gif|webp)$/i) ? 'image/jpeg' : 'application/octet-stream'
      }));
      setUploadedFiles(files);
    } else {
      setUploadedFiles([]);
    }
    setShowEditModal(true);
  };

  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    setIsUploading(true);
    try {
      const formData = new FormData();
      formData.append('file', file);

      const response = await authFetch('/api/office/knowledge-base/upload', {
        method: 'POST',
        body: formData
      });

      if (response.ok) {
        const result = await response.json();
        setUploadedFiles([...uploadedFiles, result.file]);
        
        // Если это изображение, вставляем его в редактор
        if (file.type.startsWith('image/')) {
          const quill = quillRef.current?.getEditor();
          if (quill) {
            const range = quill.getSelection();
            const index = range ? range.index : quill.getLength();
            quill.insertEmbed(index, 'image', result.file.url);
            quill.setSelection(index + 1);
          }
        }
      } else {
        const errorData = await response.json().catch(() => ({ error: 'Неизвестная ошибка' }));
        alert(`Ошибка загрузки файла: ${errorData.error || 'Неизвестная ошибка'}`);
      }
    } catch (error: any) {
      console.error('Ошибка загрузки файла:', error);
      alert(`Ошибка загрузки файла: ${error.message || 'Неизвестная ошибка'}`);
    } finally {
      setIsUploading(false);
      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }
    }
  };

  const handleRemoveFile = (index: number) => {
    setUploadedFiles(uploadedFiles.filter((_, i) => i !== index));
  };

  const handleImageUpload = () => {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.onchange = async () => {
      const file = input.files?.[0];
      if (!file) return;

      setIsUploading(true);
      try {
        const formData = new FormData();
        formData.append('file', file);

        const response = await authFetch('/api/office/knowledge-base/upload', {
          method: 'POST',
          body: formData
        });

        if (response.ok) {
          const result = await response.json();
          const quill = quillRef.current?.getEditor();
          if (quill) {
            const range = quill.getSelection();
            const index = range ? range.index : quill.getLength();
            quill.insertEmbed(index, 'image', result.file.url);
            quill.setSelection(index + 1);
          }
          setUploadedFiles([...uploadedFiles, result.file]);
        } else {
          const errorData = await response.json().catch(() => ({ error: 'Неизвестная ошибка' }));
          alert(`Ошибка загрузки изображения: ${errorData.error || 'Неизвестная ошибка'}`);
        }
      } catch (error: any) {
        console.error('Ошибка загрузки изображения:', error);
        alert(`Ошибка загрузки изображения: ${error.message || 'Неизвестная ошибка'}`);
      } finally {
        setIsUploading(false);
      }
    };
    input.click();
  };

  const handleUpdateArticle = async () => {
    if (!selectedArticle) return;

    try {
      if (!formData.title || !formData.title.trim()) {
        alert('Пожалуйста, укажите заголовок статьи');
        return;
      }
      if (!formData.content || !formData.content.trim()) {
        alert('Пожалуйста, укажите содержание статьи');
        return;
      }

      const tagsArray = formData.tags ? formData.tags.split(',').map(t => t.trim()).filter(Boolean) : [];
      const attachmentsArray = uploadedFiles.map(f => f.url);

      const response = await authFetch(`/api/office/knowledge-base/articles/${selectedArticle.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          title: formData.title,
          categoryId: formData.categoryId ? parseInt(formData.categoryId) : null,
          content: formData.content,
          contentType: formData.contentType,
          tags: tagsArray,
          attachments: attachmentsArray
        })
      });

      if (response.ok) {
        fetchArticles();
        setShowEditModal(false);
        setSelectedArticle(null);
        setUploadedFiles([]);
        alert('Статья успешно обновлена');
      } else {
        const errorData = await response.json().catch(() => ({ error: 'Неизвестная ошибка' }));
        alert(`Ошибка обновления статьи: ${errorData.error || 'Неизвестная ошибка'}`);
      }
    } catch (error: any) {
      console.error('Ошибка обновления статьи:', error);
      alert(`Ошибка обновления статьи: ${error.message || 'Неизвестная ошибка'}`);
    }
  };

  const handleCreateArticle = async () => {
    try {
      if (!formData.title || !formData.title.trim()) {
        alert('Пожалуйста, укажите заголовок статьи');
        return;
      }
      if (!formData.content || !formData.content.trim()) {
        alert('Пожалуйста, укажите содержание статьи');
        return;
      }

      const tagsArray = formData.tags ? formData.tags.split(',').map(t => t.trim()).filter(Boolean) : [];
      const attachmentsArray = uploadedFiles.map(f => f.url);

      const response = await authFetch('/api/office/knowledge-base/articles', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          title: formData.title,
          slug: formData.title.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, ''),
          categoryId: formData.categoryId ? parseInt(formData.categoryId) : null,
          content: formData.content,
          contentType: formData.contentType,
          author: CURRENT_USER_MOCK.name,
          tags: tagsArray,
          attachments: attachmentsArray,
          isPublished: true
        })
      });

      if (response.ok) {
        const newArticle = await response.json();
        // Нормализуем данные
        const normalizedArticle = {
          id: newArticle.id,
          title: newArticle.title || formData.title,
          slug: newArticle.slug || '',
          categoryId: newArticle.category_id || (formData.categoryId ? parseInt(formData.categoryId) : null),
          category: categories.find(c => c.id === (formData.categoryId ? parseInt(formData.categoryId) : null)),
          content: newArticle.content || formData.content,
          contentType: newArticle.content_type || formData.contentType,
          author: newArticle.author || CURRENT_USER_MOCK.name,
          version: newArticle.version || 1,
          isPublished: newArticle.is_published !== undefined ? newArticle.is_published : true,
          tags: tagsArray,
          attachments: [],
          viewCount: 0,
          createdAt: newArticle.created_at,
          updatedAt: newArticle.updated_at,
          publishedAt: newArticle.published_at
        };
        setArticles([normalizedArticle, ...articles]);
        setShowCreateModal(false);
        setFormData({
          title: '',
          categoryId: '',
          content: '',
          contentType: 'html',
          tags: ''
        });
        setUploadedFiles([]);
      } else {
        const errorData = await response.json().catch(() => ({ error: 'Неизвестная ошибка' }));
        alert(`Ошибка создания статьи: ${errorData.error || 'Неизвестная ошибка'}`);
      }
    } catch (error: any) {
      console.error('Ошибка создания статьи:', error);
      alert(`Ошибка создания статьи: ${error.message || 'Неизвестная ошибка'}`);
    }
  };

  return (
    <div className="space-y-6 animate-fade-in">
      <div className="flex justify-between items-center">
        <h3 className="text-lg font-bold text-slate-800">База знаний</h3>
        <button
          onClick={() => {
            setFormData({
              title: '',
              categoryId: '',
              content: '',
              contentType: 'html',
              tags: ''
            });
            setUploadedFiles([]);
            setShowCreateModal(true);
          }}
          className="bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-bold hover:bg-primary-700 transition-colors flex items-center gap-2"
        >
          <Plus className="w-4 h-4" />
          Новая статья
        </button>
      </div>

      {/* Поиск */}
      <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-4">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="Поиск по статьям..."
            className="w-full pl-10 pr-4 py-3 border border-slate-300 rounded-lg text-sm"
          />
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Категории */}
        <div className="lg:col-span-1">
          <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-4">
            <div className="flex justify-between items-center mb-4">
              <h4 className="font-bold text-slate-800 flex items-center gap-2">
                <Folder className="w-4 h-4" />
                Категории
              </h4>
              <button
                onClick={() => setShowCreateCategoryModal(true)}
                className="p-1.5 bg-primary-50 text-primary-600 rounded-lg hover:bg-primary-100 transition-colors"
                title="Создать категорию"
              >
                <Plus className="w-4 h-4" />
              </button>
            </div>
            <div className="space-y-2">
              <button
                onClick={() => setSelectedCategory(null)}
                className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
                  selectedCategory === null
                    ? 'bg-primary-50 text-primary-700 font-bold'
                    : 'text-slate-600 hover:bg-slate-50'
                }`}
              >
                Все статьи
              </button>
              {categories.map((category) => (
                <button
                  key={category.id}
                  onClick={() => setSelectedCategory(category.id)}
                  className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
                    selectedCategory === category.id
                      ? 'bg-primary-50 text-primary-700 font-bold'
                      : 'text-slate-600 hover:bg-slate-50'
                  }`}
                >
                  {category.name}
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* Список статей */}
        <div className="lg:col-span-3">
          {articles.length > 0 ? (
            <div className="space-y-3">
              {articles.map((article) => (
                <div
                  key={article.id}
                  className="bg-white rounded-xl border border-slate-200 shadow-sm p-4 hover:shadow-md transition-shadow"
                >
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <h5 className="font-bold text-slate-800 mb-2">{article.title}</h5>
                      <p className="text-sm text-slate-600 line-clamp-2 mb-3">
                        {article.contentType === 'html' 
                          ? (() => {
                              const textContent = stripHtml(article.content || '');
                              return textContent.substring(0, 150) + (textContent.length > 150 ? '...' : '');
                            })()
                          : ((article.content || '').substring(0, 150) + (article.content && article.content.length > 150 ? '...' : ''))
                        }
                      </p>
                      <div className="flex items-center gap-4 text-xs text-slate-500">
                        {article.category && (
                          <span className="px-2 py-1 bg-slate-100 rounded">
                            {article.category.name}
                          </span>
                        )}
                        <span>Автор: {article.author}</span>
                        <span>{article.createdAt ? new Date(article.createdAt).toLocaleDateString('ru-RU') : 'Дата не указана'}</span>
                        <span>Просмотров: {article.viewCount}</span>
                      </div>
                    </div>
                    <div className="flex gap-2">
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          handleViewArticle(article);
                        }}
                        className="p-2 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition-colors"
                        title="Просмотреть статью"
                      >
                        <Eye className="w-4 h-4" />
                      </button>
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          handleEditArticle(article);
                        }}
                        className="p-2 bg-amber-50 text-amber-600 rounded-lg hover:bg-amber-100 transition-colors"
                        title="Редактировать статью"
                      >
                        <Edit className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-12 text-center">
              <BookOpen className="w-12 h-12 mx-auto text-slate-300 mb-4" />
              <p className="text-slate-500">Статьи не найдены</p>
            </div>
          )}
        </div>
      </div>

      {/* Create Article Modal */}
      {showCreateModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-bold text-slate-800">Создать статью</h3>
              <button
                onClick={() => setShowCreateModal(false)}
                className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Заголовок *</label>
                <input
                  type="text"
                  value={formData.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                  placeholder="Введите заголовок статьи"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Категория</label>
                <select
                  value={formData.categoryId}
                  onChange={(e) => setFormData({ ...formData, categoryId: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                >
                  <option value="">Без категории</option>
                  {categories.map((cat) => (
                    <option key={cat.id} value={cat.id.toString()}>
                      {cat.name}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Содержание *</label>
                <div className="border border-slate-300 rounded-lg overflow-hidden">
                  {QuillEditor ? (
                    <QuillEditor
                      ref={quillRef}
                      theme="snow"
                      value={formData.content}
                      onChange={(value: string) => setFormData({ ...formData, content: value })}
                      modules={{
                        toolbar: {
                          container: [
                            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                            ['bold', 'italic', 'underline', 'strike'],
                            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                            [{ 'script': 'sub'}, { 'script': 'super' }],
                            [{ 'indent': '-1'}, { 'indent': '+1' }],
                            [{ 'color': [] }, { 'background': [] }],
                            [{ 'align': [] }],
                            ['link', 'image'],
                            ['clean']
                          ],
                          handlers: {
                            image: handleImageUpload
                          }
                        }
                      }}
                      formats={[
                        'header', 'bold', 'italic', 'underline', 'strike',
                        'list', 'bullet', 'script', 'indent',
                        'color', 'background', 'align',
                        'link', 'image'
                      ]}
                      placeholder="Введите содержание статьи..."
                      style={{ minHeight: '300px' }}
                    />
                  ) : (
                    <div className="min-h-[300px] flex items-center justify-center bg-slate-50 text-slate-500 text-sm">Загрузка редактора...</div>
                  )}
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Загрузить файлы</label>
                <div className="flex items-center gap-3">
                  <input
                    ref={fileInputRef}
                    type="file"
                    onChange={handleFileUpload}
                    className="hidden"
                    accept="image/*,.pdf,.doc,.docx,.txt,.zip,.rar"
                  />
                  <button
                    type="button"
                    onClick={() => fileInputRef.current?.click()}
                    disabled={isUploading}
                    className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-200 transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    <Upload className="w-4 h-4" />
                    {isUploading ? 'Загрузка...' : 'Выбрать файл'}
                  </button>
                  <span className="text-xs text-slate-500">Изображения, PDF, документы, архивы (до 20MB)</span>
                </div>
                {uploadedFiles.length > 0 && (
                  <div className="mt-3 space-y-2">
                    {uploadedFiles.map((file, index) => (
                      <div key={index} className="flex items-center justify-between p-2 bg-slate-50 rounded-lg">
                        <div className="flex items-center gap-2 flex-1 min-w-0">
                          {file.mimetype.startsWith('image/') ? (
                            <ImageIcon className="w-4 h-4 text-blue-600 flex-shrink-0" />
                          ) : (
                            <File className="w-4 h-4 text-slate-600 flex-shrink-0" />
                          )}
                          <span className="text-sm text-slate-700 truncate">{file.filename}</span>
                          <span className="text-xs text-slate-500 ml-2">
                            ({(file.size / 1024).toFixed(1)} KB)
                          </span>
                        </div>
                        <button
                          type="button"
                          onClick={() => handleRemoveFile(index)}
                          className="p-1 text-red-600 hover:bg-red-50 rounded transition-colors"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Теги (через запятую)</label>
                <input
                  type="text"
                  value={formData.tags}
                  onChange={(e) => setFormData({ ...formData, tags: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                  placeholder="например: инструкция, ремонт, настройка"
                />
              </div>

              <div className="flex gap-3 pt-4">
                <button
                  onClick={handleCreateArticle}
                  disabled={!formData.title || !formData.content}
                  className="flex-1 bg-primary-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-primary-700 transition-colors disabled:bg-slate-300 disabled:cursor-not-allowed"
                >
                  Создать
                </button>
                <button
                  onClick={() => setShowCreateModal(false)}
                  className="px-4 py-2 bg-slate-100 text-slate-600 rounded-lg font-bold text-sm hover:bg-slate-200 transition-colors"
                >
                  Отмена
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* View Article Modal */}
      {showViewModal && selectedArticle && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl p-6 max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-bold text-slate-800">{selectedArticle.title}</h3>
              <div className="flex gap-2">
                <button
                  onClick={() => {
                    setShowViewModal(false);
                    handleEditArticle(selectedArticle);
                  }}
                  className="p-2 bg-amber-50 text-amber-600 rounded-lg hover:bg-amber-100 transition-colors"
                  title="Редактировать"
                >
                  <Edit className="w-4 h-4" />
                </button>
                <button
                  onClick={() => {
                    setShowViewModal(false);
                    setSelectedArticle(null);
                  }}
                  className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
                >
                  <X className="w-5 h-5" />
                </button>
              </div>
            </div>

            <div className="space-y-4">
              <div className="flex items-center gap-4 text-sm text-slate-600 pb-4 border-b border-slate-200">
                {selectedArticle.category && (
                  <span className="px-2 py-1 bg-slate-100 rounded">
                    {selectedArticle.category.name}
                  </span>
                )}
                <span>Автор: {selectedArticle.author}</span>
                <span>{selectedArticle.createdAt ? new Date(selectedArticle.createdAt).toLocaleDateString('ru-RU') : 'Дата не указана'}</span>
                <span>Просмотров: {selectedArticle.viewCount}</span>
              </div>

              <div className="prose max-w-none">
                {selectedArticle.contentType === 'html' ? (
                  <div 
                    className="ql-editor"
                    dangerouslySetInnerHTML={{ __html: rewriteContentImageUrls(selectedArticle.content || '') }} 
                  />
                ) : (
                  <pre className="whitespace-pre-wrap font-sans text-sm text-slate-700">{selectedArticle.content || ''}</pre>
                )}
              </div>

              {selectedArticle.attachments && selectedArticle.attachments.length > 0 && (
                <div className="pt-4 border-t border-slate-200">
                  <p className="text-sm font-medium text-slate-700 mb-2">Прикрепленные файлы:</p>
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                    {selectedArticle.attachments.map((url: string, index: number) => {
                      const isImage = /\.(jpg|jpeg|png|gif|webp)$/i.test(url);
                      const filename = url.split('/').pop() || `Файл ${index + 1}`;
                      const base = getBackendBase();
                      const fileUrl = url.startsWith('http') || url.startsWith('data:') ? url : `${base}${url.startsWith('/') ? url : `/${url}`}`;

                      return (
                        <div key={index} className="border border-slate-200 rounded-lg overflow-hidden bg-white">
                          {isImage ? (
                            <AttachmentImage url={url} filename={filename} />
                          ) : (
                            <a 
                              href={fileUrl} 
                              target="_blank" 
                              rel="noopener noreferrer"
                              className="flex items-center gap-2 p-3 hover:bg-slate-50 transition-colors"
                            >
                              <File className="w-5 h-5 text-slate-400" />
                              <span className="text-sm text-slate-700 truncate flex-1">{filename}</span>
                            </a>
                          )}
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}

              {selectedArticle.tags && selectedArticle.tags.length > 0 && (
                <div className="pt-4 border-t border-slate-200">
                  <p className="text-sm font-medium text-slate-700 mb-2">Теги:</p>
                  <div className="flex flex-wrap gap-2">
                    {selectedArticle.tags.map((tag, index) => (
                      <span key={index} className="px-2 py-1 bg-primary-50 text-primary-700 rounded text-xs">
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Edit Article Modal */}
      {showEditModal && selectedArticle && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-bold text-slate-800">Редактировать статью</h3>
              <button
                onClick={() => {
                  setShowEditModal(false);
                  setSelectedArticle(null);
                }}
                className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Заголовок *</label>
                <input
                  type="text"
                  value={formData.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Категория</label>
                <select
                  value={formData.categoryId}
                  onChange={(e) => setFormData({ ...formData, categoryId: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                >
                  <option value="">Без категории</option>
                  {categories.map((cat) => (
                    <option key={cat.id} value={cat.id.toString()}>
                      {cat.name}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Содержание *</label>
                <div className="border border-slate-300 rounded-lg overflow-hidden">
                  {QuillEditor ? (
                    <QuillEditor
                      ref={quillRef}
                      theme="snow"
                      value={formData.content}
                      onChange={(value: string) => setFormData({ ...formData, content: value })}
                      modules={{
                        toolbar: {
                          container: [
                            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                            ['bold', 'italic', 'underline', 'strike'],
                            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                            [{ 'script': 'sub'}, { 'script': 'super' }],
                            [{ 'indent': '-1'}, { 'indent': '+1' }],
                            [{ 'color': [] }, { 'background': [] }],
                            [{ 'align': [] }],
                            ['link', 'image'],
                            ['clean']
                          ],
                          handlers: {
                            image: handleImageUpload
                          }
                        }
                      }}
                      formats={[
                        'header', 'bold', 'italic', 'underline', 'strike',
                        'list', 'bullet', 'script', 'indent',
                        'color', 'background', 'align',
                        'link', 'image'
                      ]}
                      placeholder="Введите содержание статьи..."
                      style={{ minHeight: '300px' }}
                    />
                  ) : (
                    <div className="min-h-[300px] flex items-center justify-center bg-slate-50 text-slate-500 text-sm">Загрузка редактора...</div>
                  )}
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Загрузить файлы</label>
                <div className="flex items-center gap-3">
                  <input
                    ref={fileInputRef}
                    type="file"
                    onChange={handleFileUpload}
                    className="hidden"
                    accept="image/*,.pdf,.doc,.docx,.txt,.zip,.rar"
                  />
                  <button
                    type="button"
                    onClick={() => fileInputRef.current?.click()}
                    disabled={isUploading}
                    className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-200 transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    <Upload className="w-4 h-4" />
                    {isUploading ? 'Загрузка...' : 'Выбрать файл'}
                  </button>
                  <span className="text-xs text-slate-500">Изображения, PDF, документы, архивы (до 20MB)</span>
                </div>
                {uploadedFiles.length > 0 && (
                  <div className="mt-3 space-y-2">
                    {uploadedFiles.map((file, index) => (
                      <div key={index} className="flex items-center justify-between p-2 bg-slate-50 rounded-lg">
                        <div className="flex items-center gap-2 flex-1 min-w-0">
                          {file.mimetype.startsWith('image/') ? (
                            <ImageIcon className="w-4 h-4 text-blue-600 flex-shrink-0" />
                          ) : (
                            <File className="w-4 h-4 text-slate-600 flex-shrink-0" />
                          )}
                          <span className="text-sm text-slate-700 truncate">{file.filename}</span>
                          <span className="text-xs text-slate-500 ml-2">
                            ({(file.size / 1024).toFixed(1)} KB)
                          </span>
                        </div>
                        <button
                          type="button"
                          onClick={() => handleRemoveFile(index)}
                          className="p-1 text-red-600 hover:bg-red-50 rounded transition-colors"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Теги (через запятую)</label>
                <input
                  type="text"
                  value={formData.tags}
                  onChange={(e) => setFormData({ ...formData, tags: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                  placeholder="например: инструкция, ремонт, настройка"
                />
              </div>

              <div className="flex gap-3 pt-4">
                <button
                  onClick={handleUpdateArticle}
                  disabled={!formData.title || !formData.content}
                  className="flex-1 bg-primary-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-primary-700 transition-colors disabled:bg-slate-300 disabled:cursor-not-allowed"
                >
                  Сохранить
                </button>
                <button
                  onClick={() => {
                    setShowEditModal(false);
                    setSelectedArticle(null);
                  }}
                  className="px-4 py-2 bg-slate-100 text-slate-600 rounded-lg font-bold text-sm hover:bg-slate-200 transition-colors"
                >
                  Отмена
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Create Category Modal */}
      {showCreateCategoryModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl p-6 max-w-md w-full">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-bold text-slate-800">Создать категорию</h3>
              <button
                onClick={() => {
                  setShowCreateCategoryModal(false);
                  setNewCategoryName('');
                }}
                className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Название категории *</label>
                <input
                  type="text"
                  value={newCategoryName}
                  onChange={(e) => setNewCategoryName(e.target.value)}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                  placeholder="Введите название категории"
                  required
                />
              </div>

              <div className="flex gap-3 pt-4">
                <button
                  onClick={handleCreateCategory}
                  disabled={!newCategoryName || !newCategoryName.trim()}
                  className="flex-1 bg-primary-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-primary-700 transition-colors disabled:bg-slate-300 disabled:cursor-not-allowed"
                >
                  Создать
                </button>
                <button
                  onClick={() => {
                    setShowCreateCategoryModal(false);
                    setNewCategoryName('');
                  }}
                  className="px-4 py-2 bg-slate-100 text-slate-600 rounded-lg font-bold text-sm hover:bg-slate-200 transition-colors"
                >
                  Отмена
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};