import React, { useState, useEffect, useRef } from 'react';
import { authFetch } from '../../services/apiClient';
import { OfficeDocument } from '../../types';
import { CURRENT_USER_MOCK } from '../../constants';
import { Search, ArrowDownLeft, ArrowUpRight, Truck, FileText, Plus, Download, CheckCircle2, X, Mail, File, Edit, Eye, Upload, Image as ImageIcon, Trash2 } from 'lucide-react';

interface Employee {
    id: number;
    name: string;
    position?: string;
    status?: string;
}

export const DocumentFlow: React.FC = () => {
    const [documents, setDocuments] = useState<OfficeDocument[]>([]);
    const [loading, setLoading] = useState(true);
    const [search, setSearch] = useState('');
    const [showCreateModal, setShowCreateModal] = useState(false);
    const [showViewModal, setShowViewModal] = useState(false);
    const [showEditModal, setShowEditModal] = useState(false);
    const [selectedDocument, setSelectedDocument] = useState<OfficeDocument | null>(null);
    const [isUploading, setIsUploading] = useState(false);
    const [employees, setEmployees] = useState<Employee[]>([]);
    const fileInputRef = useRef<HTMLInputElement>(null);
    
    const [formData, setFormData] = useState({
        regNumber: '',
        title: '',
        correspondent: '',
        documentType: 'incoming' as 'incoming' | 'outgoing',
        letterType: 'paper' as 'email' | 'paper',
        date: new Date().toISOString().split('T')[0],
        assignedTo: '',
        trackingNumber: '',
        notes: '',
        fileUrl: ''
    });

    // Генерируем регистрационный номер при открытии модального окна создания
    useEffect(() => {
        if (showCreateModal && !formData.regNumber) {
            generateRegNumber(formData.documentType, formData.date).then(regNumber => {
                setFormData(prev => ({ ...prev, regNumber }));
            });
        }
    }, [showCreateModal]);

    useEffect(() => {
        fetchDocuments();
        fetchEmployees();
    }, []);

    const fetchEmployees = async () => {
        try {
            const response = await authFetch('/api/employees');
            if (response.ok) {
                const data = await response.json();
                // Фильтруем только активных сотрудников
                const activeEmployees = data
                    .filter((emp: Employee) => !emp.status || emp.status === 'active')
                    .map((emp: Employee) => ({
                        id: emp.id,
                        name: emp.name,
                        position: emp.position || ''
                    }))
                    .sort((a: Employee, b: Employee) => a.name.localeCompare(b.name));
                setEmployees(activeEmployees);
            }
        } catch (error) {
            console.error('Ошибка загрузки сотрудников:', error);
        }
    };

    const fetchDocuments = async () => {
        try {
            const response = await authFetch('/api/office/documents');
            if (response.ok) {
                const data = await response.json();
                // Преобразуем snake_case в camelCase
                const normalizedData = data.map((doc: any) => ({
                    id: doc.id,
                    regNumber: doc.reg_number || doc.regNumber || '',
                    title: doc.title || '',
                    correspondent: doc.correspondent || '',
                    date: doc.date || '',
                    status: doc.status || 'registered',
                    type: doc.document_type || doc.type || 'incoming',
                    letterType: doc.letter_type || doc.letterType || 'paper',
                    assignedTo: doc.assigned_to || doc.assignedTo,
                    trackingNumber: doc.tracking_number || doc.trackingNumber,
                    fileUrl: doc.file_url || doc.fileUrl,
                    notes: doc.notes,
                    createdBy: doc.created_by || doc.createdBy || '',
                    createdAt: doc.created_at,
                    updatedAt: doc.updated_at
                }));
                setDocuments(normalizedData);
            }
        } catch (error) {
            console.error('Ошибка загрузки документов:', error);
        } finally {
            setLoading(false);
        }
    };

    const generateRegNumber = async (documentType: string, date: string) => {
        try {
            const response = await authFetch(`/api/office/documents/next-reg-number?documentType=${documentType}&date=${date}`);
            if (response.ok) {
                const data = await response.json();
                return data.regNumber;
            }
        } catch (error) {
            console.error('Ошибка генерации номера:', error);
        }
        // Fallback: простая генерация на клиенте
        const docDate = date ? new Date(date) : new Date();
        const year = docDate.getFullYear().toString().slice(-2);
        const prefix = documentType === 'incoming' ? 'ВХ' : 'ИСХ';
        const timestamp = Date.now().toString().slice(-4);
        return `${prefix}-${year}-${timestamp}`;
    };

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

            // Если регистрационный номер не указан, генерируем автоматически
            let regNumber = formData.regNumber?.trim();
            if (!regNumber) {
                regNumber = await generateRegNumber(formData.documentType, formData.date);
            }

            const requestBody = {
                reg_number: regNumber,
                title: formData.title.trim(),
                correspondent: formData.correspondent.trim(),
                document_type: formData.documentType,
                letter_type: formData.letterType,
                date: formData.date,
                assigned_to: formData.assignedTo?.trim() || null,
                tracking_number: formData.trackingNumber?.trim() || null,
                file_url: formData.fileUrl || null,
                notes: formData.notes?.trim() || null,
                created_by: CURRENT_USER_MOCK.name || 'Система'
            };

            console.log('Создание документа:', requestBody); // Для отладки

            const response = await authFetch('/api/office/documents', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(requestBody)
            });

            if (response.ok) {
                const newDoc = await response.json();
                // Преобразуем snake_case в camelCase
                const normalizedDoc = {
                    id: newDoc.id,
                    regNumber: newDoc.reg_number || regNumber,
                    title: newDoc.title || formData.title,
                    correspondent: newDoc.correspondent || formData.correspondent,
                    date: newDoc.date || formData.date,
                    status: newDoc.status || 'registered',
                    type: newDoc.document_type || formData.documentType,
                    letterType: newDoc.letter_type || formData.letterType,
                    assignedTo: newDoc.assigned_to || formData.assignedTo,
                    trackingNumber: newDoc.tracking_number || formData.trackingNumber,
                    fileUrl: newDoc.file_url || formData.fileUrl,
                    notes: newDoc.notes || formData.notes,
                    createdBy: newDoc.created_by || CURRENT_USER_MOCK.name,
                    createdAt: newDoc.created_at,
                    updatedAt: newDoc.updated_at
                };
                setDocuments([normalizedDoc, ...documents]);
                setShowCreateModal(false);
                setFormData({
                    regNumber: '',
                    title: '',
                    correspondent: '',
                    documentType: 'incoming',
                    letterType: 'paper',
                    date: new Date().toISOString().split('T')[0],
                    assignedTo: '',
                    trackingNumber: '',
                    notes: '',
                    fileUrl: ''
                });
            } else {
                const errorText = await response.text();
                let errorData;
                try {
                    errorData = JSON.parse(errorText);
                } catch {
                    errorData = { error: errorText || 'Неизвестная ошибка' };
                }
                console.error('Ошибка создания документа:', errorData);
                alert(`Ошибка создания документа: ${errorData.error || 'Неизвестная ошибка'}`);
            }
        } catch (error: any) {
            console.error('Ошибка создания документа:', error);
            alert(`Ошибка создания документа: ${error.message || 'Неизвестная ошибка'}`);
        }
    };

    const handleViewDocument = (doc: OfficeDocument) => {
        setSelectedDocument(doc);
        setShowViewModal(true);
    };

    const handleEditDocument = (doc: OfficeDocument) => {
        setSelectedDocument(doc);
        setFormData({
            regNumber: doc.regNumber || '',
            title: doc.title || '',
            correspondent: doc.correspondent || '',
            documentType: doc.type || 'incoming',
            letterType: doc.letterType || 'paper',
            date: doc.date || new Date().toISOString().split('T')[0],
            assignedTo: doc.assignedTo || '',
            trackingNumber: doc.trackingNumber || '',
            notes: doc.notes || '',
            fileUrl: doc.fileUrl || ''
        });
        setShowEditModal(true);
    };

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

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

            const response = await authFetch('/api/office/documents/upload', {
                method: 'POST',
                body: formDataUpload
            });

            if (response.ok) {
                const result = await response.json();
                setFormData({ ...formData, fileUrl: result.url || result.fileUrl });
                alert('Файл успешно загружен');
            } 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 handleUpdateDocument = async () => {
        if (!selectedDocument) return;

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

            const response = await authFetch(`/api/office/documents/${selectedDocument.id}`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    reg_number: formData.regNumber,
                    title: formData.title,
                    correspondent: formData.correspondent,
                    document_type: formData.documentType,
                    letter_type: formData.letterType,
                    date: formData.date,
                    assigned_to: formData.assignedTo || null,
                    tracking_number: formData.trackingNumber || null,
                    file_url: formData.fileUrl || null,
                    notes: formData.notes || null
                })
            });

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

    const handleUpdateStatus = async (docId: number | string, newStatus: string) => {
        try {
            const response = await authFetch(`/api/office/documents/${docId}`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ status: newStatus })
            });

            if (response.ok) {
                fetchDocuments();
            }
        } catch (error) {
            console.error('Ошибка обновления статуса:', error);
        }
    };

    const handleDeleteDocument = async (doc: OfficeDocument) => {
        if (!confirm(`Вы уверены, что хотите удалить документ "${doc.title}"?`)) {
            return;
        }

        try {
            const response = await authFetch(`/api/office/documents/${doc.id}`, {
                method: 'DELETE'
            });

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

    const filteredDocuments = documents.filter(doc => {
        const regNumber = (doc.regNumber || '').toLowerCase();
        const title = (doc.title || '').toLowerCase();
        const correspondent = (doc.correspondent || '').toLowerCase();
        const searchLower = search.toLowerCase();
        return regNumber.includes(searchLower) || 
               title.includes(searchLower) || 
               correspondent.includes(searchLower);
    });

    const getStatusLabel = (status: string) => {
        const labels = {
            registered: 'Зарегистрирован',
            processed: 'В работе',
            sent: 'Отправлен',
            archived: 'Архивирован'
        };
        return labels[status as keyof typeof labels] || status;
    };

    return (
        <div className="space-y-4 animate-fade-in">
            <div className="flex gap-2">
                <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                    <input 
                        type="text" 
                        placeholder="Поиск по номеру, отправителю..." 
                        value={search}
                        onChange={(e) => setSearch(e.target.value)}
                        className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 text-sm focus:ring-2 focus:ring-primary-500 outline-none shadow-sm"
                    />
                </div>
                <button 
                    onClick={async () => {
                        const newRegNumber = await generateRegNumber('incoming', new Date().toISOString().split('T')[0]);
                        setFormData({
                            regNumber: newRegNumber,
                            title: '',
                            correspondent: '',
                            documentType: 'incoming',
                            letterType: 'paper',
                            date: new Date().toISOString().split('T')[0],
                            assignedTo: '',
                            trackingNumber: '',
                            notes: '',
                            fileUrl: ''
                        });
                        setShowCreateModal(true);
                    }}
                    className="bg-primary-600 text-white p-2.5 rounded-xl shadow-lg active:scale-95 transition-all flex items-center gap-2 px-4 text-sm font-bold"
                >
                    <Plus className="w-5 h-5"/>
                    Создать
                </button>
            </div>

            {loading ? (
                <div className="text-center py-8 text-slate-500">Загрузка...</div>
            ) : filteredDocuments && filteredDocuments.length > 0 ? (
                <div className="space-y-3">
                    {filteredDocuments.map(doc => {
                        if (!doc || !doc.id) return null;
                        return (
                        <div key={doc.id} className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex items-center gap-4 group">
                            <div className={`p-3 rounded-2xl flex-shrink-0 border ${
                                doc.type === 'incoming' ? 'bg-emerald-50 border-emerald-100 text-emerald-600' : 'bg-blue-50 border-blue-100 text-blue-600'
                            }`}>
                                {doc.type === 'incoming' ? <ArrowDownLeft className="w-5 h-5"/> : <ArrowUpRight className="w-5 h-5"/>}
                            </div>
                            <div className="flex-1 min-w-0">
                                <div className="flex justify-between items-start mb-0.5">
                                    <span className="text-[10px] font-black bg-slate-100 text-slate-500 px-2 py-0.5 rounded tracking-wider">{doc.regNumber}</span>
                                    <span className="text-[10px] text-slate-400 font-bold">{doc.date}</span>
                                </div>
                                <h4 className="font-bold text-slate-800 text-sm truncate group-hover:text-primary-600 transition-colors">{doc.title}</h4>
                                <div className="flex items-center gap-2 mt-1">
                                    <p className="text-[11px] text-slate-500 truncate font-medium flex-1">{doc.correspondent}</p>
                                    {doc.letterType && (
                                        <div className="flex items-center gap-1 text-[9px] font-bold text-slate-500 bg-slate-50 px-2 py-0.5 rounded border border-slate-200">
                                            {doc.letterType === 'email' ? (
                                                <>
                                                    <Mail className="w-3 h-3" />
                                                    Email
                                                </>
                                            ) : (
                                                <>
                                                    <FileText className="w-3 h-3" />
                                                    Бумага
                                                </>
                                            )}
                                        </div>
                                    )}
                                </div>
                                
                                <div className="mt-3 flex items-center justify-between">
                                    <span className="text-[9px] font-black text-primary-600 bg-primary-50 px-2 py-0.5 rounded uppercase tracking-tighter border border-primary-100">
                                        {getStatusLabel(doc.status)}
                                    </span>
                                    {doc.trackingNumber && (
                                        <div className="flex items-center gap-1.5 text-[9px] font-bold text-slate-500 bg-slate-50 px-2 py-0.5 rounded border border-slate-200">
                                            <Truck className="w-3 h-3"/> {doc.trackingNumber}
                                        </div>
                                    )}
                                </div>
                            </div>
                            <div className="flex gap-2 flex-shrink-0">
                                <button
                                    onClick={() => handleViewDocument(doc)}
                                    className="p-2 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition-colors opacity-0 group-hover:opacity-100"
                                    title="Просмотреть"
                                >
                                    <Eye className="w-5 h-5"/>
                                </button>
                                <button
                                    onClick={() => handleEditDocument(doc)}
                                    className="p-2 bg-amber-50 text-amber-600 rounded-lg hover:bg-amber-100 transition-colors opacity-0 group-hover:opacity-100"
                                    title="Редактировать"
                                >
                                    <Edit className="w-5 h-5"/>
                                </button>
                                <button
                                    onClick={() => handleDeleteDocument(doc)}
                                    className="p-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors opacity-0 group-hover:opacity-100"
                                    title="Удалить"
                                >
                                    <Trash2 className="w-5 h-5"/>
                                </button>
                                {doc.fileUrl && (
                                    <a
                                        href={doc.fileUrl}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="p-2 text-slate-300 hover:text-primary-600 transition-colors opacity-0 group-hover:opacity-100"
                                        title="Скачать файл"
                                    >
                                        <Download className="w-5 h-5"/>
                                    </a>
                                )}
                            </div>
                        </div>
                        );
                    }).filter(Boolean)}
                </div>
            ) : (
                <div className="text-center py-8 text-slate-500">Нет документов</div>
            )}
            
            <div className="bg-slate-100 rounded-2xl p-6 border-2 border-dashed border-slate-200 flex flex-col items-center justify-center text-slate-400">
                <FileText className="w-10 h-10 mb-2 opacity-20"/>
                <p className="text-xs font-black uppercase tracking-widest">Цифровой архив</p>
                <p className="text-[10px] mt-1">Всего {documents.length} документов в системе</p>
            </div>

            {/* Create Document 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-md 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>
                                <select
                                    value={formData.documentType}
                                    onChange={async (e) => {
                                        const newType = e.target.value as any;
                                        const newRegNumber = await generateRegNumber(newType, formData.date);
                                        setFormData({ ...formData, documentType: newType, regNumber: newRegNumber });
                                    }}
                                    className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                                >
                                    <option value="incoming">Входящий</option>
                                    <option value="outgoing">Исходящий</option>
                                </select>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-1">Тип письма</label>
                                <select
                                    value={formData.letterType}
                                    onChange={(e) => setFormData({ ...formData, letterType: e.target.value as any })}
                                    className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                                >
                                    <option value="email">Email</option>
                                    <option value="paper">Бумага</option>
                                </select>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-1">
                                    Регистрационный номер
                                    <span className="text-xs text-slate-400 ml-2">(автоматически, можно изменить)</span>
                                </label>
                                <div className="flex gap-2">
                                    <input
                                        type="text"
                                        value={formData.regNumber}
                                        onChange={(e) => setFormData({ ...formData, regNumber: e.target.value })}
                                        className="flex-1 px-3 py-2 border border-slate-300 rounded-lg text-sm"
                                        placeholder="Автоматически сгенерируется"
                                    />
                                    <button
                                        type="button"
                                        onClick={async () => {
                                            const newRegNumber = await generateRegNumber(formData.documentType, formData.date);
                                            setFormData({ ...formData, regNumber: newRegNumber });
                                        }}
                                        className="px-3 py-2 bg-slate-100 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-200 transition-colors"
                                        title="Сгенерировать новый номер"
                                    >
                                        Обновить
                                    </button>
                                </div>
                            </div>

                            <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>
                                <input
                                    type="text"
                                    value={formData.correspondent}
                                    onChange={(e) => setFormData({ ...formData, correspondent: 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>
                                <input
                                    type="date"
                                    value={formData.date}
                                    onChange={(e) => setFormData({ ...formData, date: 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.assignedTo}
                                    onChange={(e) => setFormData({ ...formData, assignedTo: e.target.value })}
                                    className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                                >
                                    <option value="">Не назначено</option>
                                    {employees.map((emp) => (
                                        <option key={emp.id} value={emp.name}>
                                            {emp.name}{emp.position ? ` - ${emp.position}` : ''}
                                        </option>
                                    ))}
                                </select>
                                {employees.length === 0 && (
                                    <p className="text-xs text-slate-400 mt-1">Загрузка списка сотрудников...</p>
                                )}
                            </div>

                            {formData.documentType === 'outgoing' && (
                                <div>
                                    <label className="block text-sm font-medium text-slate-700 mb-1">Трек-номер</label>
                                    <input
                                        type="text"
                                        value={formData.trackingNumber}
                                        onChange={(e) => setFormData({ ...formData, trackingNumber: e.target.value })}
                                        className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                                        placeholder="Номер для отслеживания (необязательно)"
                                    />
                                </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"
                                    />
                                    <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>
                                    {formData.fileUrl && (
                                        <span className="text-xs text-slate-500 flex items-center gap-1">
                                            <File className="w-3 h-3" />
                                            Файл загружен
                                        </span>
                                    )}
                                </div>
                                <p className="text-xs text-slate-400 mt-1">Скан или текстовый файл (PDF, DOC, TXT, изображения)</p>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-1">Примечания</label>
                                <textarea
                                    value={formData.notes}
                                    onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                                    className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                                    rows={3}
                                    placeholder="Дополнительная информация"
                                />
                            </div>

                            <div className="flex gap-3 pt-4">
                                <button
                                    onClick={handleCreateDocument}
                                    disabled={!formData.title || !formData.correspondent}
                                    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 Document Modal */}
            {showViewModal && selectedDocument && (
                <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-3xl w-full max-h-[90vh] overflow-y-auto">
                        <div className="flex justify-between items-center mb-6">
                            <div className="flex items-center gap-3">
                                <div className={`p-3 rounded-2xl ${
                                    selectedDocument.type === 'incoming' ? 'bg-emerald-50 text-emerald-600' : 'bg-blue-50 text-blue-600'
                                }`}>
                                    {selectedDocument.type === 'incoming' ? <ArrowDownLeft className="w-6 h-6"/> : <ArrowUpRight className="w-6 h-6"/>}
                                </div>
                                <div>
                                    <h3 className="text-xl font-bold text-slate-800">{selectedDocument.title}</h3>
                                    <p className="text-sm text-slate-500 mt-1">{selectedDocument.correspondent}</p>
                                </div>
                            </div>
                            <div className="flex gap-2">
                                <button
                                    onClick={() => {
                                        setShowViewModal(false);
                                        handleEditDocument(selectedDocument);
                                    }}
                                    className="p-2 bg-amber-50 text-amber-600 rounded-lg hover:bg-amber-100 transition-colors"
                                    title="Редактировать"
                                >
                                    <Edit className="w-5 h-5" />
                                </button>
                                <button
                                    onClick={() => {
                                        setShowViewModal(false);
                                        if (selectedDocument && confirm(`Вы уверены, что хотите удалить документ "${selectedDocument.title}"?`)) {
                                            handleDeleteDocument(selectedDocument);
                                        }
                                    }}
                                    className="p-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors"
                                    title="Удалить"
                                >
                                    <Trash2 className="w-5 h-5" />
                                </button>
                                <button
                                    onClick={() => {
                                        setShowViewModal(false);
                                        setSelectedDocument(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="grid grid-cols-2 gap-4">
                                <div className="bg-slate-50 p-4 rounded-xl">
                                    <p className="text-xs font-bold text-slate-400 uppercase mb-1">Регистрационный номер</p>
                                    <p className="text-sm font-bold text-slate-800">{selectedDocument.regNumber}</p>
                                </div>
                                <div className="bg-slate-50 p-4 rounded-xl">
                                    <p className="text-xs font-bold text-slate-400 uppercase mb-1">Дата</p>
                                    <p className="text-sm font-bold text-slate-800">{selectedDocument.date}</p>
                                </div>
                                <div className="bg-slate-50 p-4 rounded-xl">
                                    <p className="text-xs font-bold text-slate-400 uppercase mb-1">Тип письма</p>
                                    <div className="flex items-center gap-2">
                                        {selectedDocument.letterType === 'email' ? (
                                            <Mail className="w-4 h-4 text-blue-600" />
                                        ) : (
                                            <FileText className="w-4 h-4 text-amber-600" />
                                        )}
                                        <p className="text-sm font-bold text-slate-800">
                                            {selectedDocument.letterType === 'email' ? 'Email' : 'Бумага'}
                                        </p>
                                    </div>
                                </div>
                                <div className="bg-slate-50 p-4 rounded-xl">
                                    <p className="text-xs font-bold text-slate-400 uppercase mb-1">Статус</p>
                                    <span className="text-xs font-black text-primary-600 bg-primary-50 px-2 py-1 rounded uppercase tracking-tighter border border-primary-100">
                                        {getStatusLabel(selectedDocument.status)}
                                    </span>
                                </div>
                            </div>

                            {selectedDocument.assignedTo && (
                                <div className="bg-slate-50 p-4 rounded-xl">
                                    <p className="text-xs font-bold text-slate-400 uppercase mb-1">Назначен</p>
                                    <p className="text-sm font-bold text-slate-800">{selectedDocument.assignedTo}</p>
                                </div>
                            )}

                            {selectedDocument.trackingNumber && (
                                <div className="bg-slate-50 p-4 rounded-xl">
                                    <p className="text-xs font-bold text-slate-400 uppercase mb-1">Трек-номер</p>
                                    <div className="flex items-center gap-2">
                                        <Truck className="w-4 h-4 text-slate-500" />
                                        <p className="text-sm font-bold text-slate-800">{selectedDocument.trackingNumber}</p>
                                    </div>
                                </div>
                            )}

                            {selectedDocument.fileUrl && (
                                <div className="bg-slate-50 p-4 rounded-xl">
                                    <p className="text-xs font-bold text-slate-400 uppercase mb-2">Оригинал</p>
                                    <a
                                        href={selectedDocument.fileUrl}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="flex items-center gap-2 text-sm font-bold text-primary-600 hover:text-primary-700 transition-colors"
                                    >
                                        <Download className="w-4 h-4" />
                                        Скачать файл
                                    </a>
                                </div>
                            )}

                            {selectedDocument.notes && (
                                <div className="bg-slate-50 p-4 rounded-xl">
                                    <p className="text-xs font-bold text-slate-400 uppercase mb-1">Примечания</p>
                                    <p className="text-sm text-slate-700 whitespace-pre-wrap">{selectedDocument.notes}</p>
                                </div>
                            )}

                            <div className="pt-4 border-t border-slate-200 flex items-center justify-between text-xs text-slate-500">
                                <span>Создано: {selectedDocument.createdBy}</span>
                                {selectedDocument.createdAt && (
                                    <span>{new Date(selectedDocument.createdAt).toLocaleString('ru-RU')}</span>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* Edit Document Modal */}
            {showEditModal && selectedDocument && (
                <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 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);
                                    setSelectedDocument(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>
                                <select
                                    value={formData.documentType}
                                    onChange={(e) => setFormData({ ...formData, documentType: e.target.value as any })}
                                    className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                                >
                                    <option value="incoming">Входящий</option>
                                    <option value="outgoing">Исходящий</option>
                                </select>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-1">Тип письма</label>
                                <select
                                    value={formData.letterType}
                                    onChange={(e) => setFormData({ ...formData, letterType: e.target.value as any })}
                                    className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                                >
                                    <option value="email">Email</option>
                                    <option value="paper">Бумага</option>
                                </select>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-1">Регистрационный номер *</label>
                                <input
                                    type="text"
                                    value={formData.regNumber}
                                    onChange={(e) => setFormData({ ...formData, regNumber: 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>
                                <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>
                                <input
                                    type="text"
                                    value={formData.correspondent}
                                    onChange={(e) => setFormData({ ...formData, correspondent: 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>
                                <input
                                    type="date"
                                    value={formData.date}
                                    onChange={(e) => setFormData({ ...formData, date: 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.assignedTo}
                                    onChange={(e) => setFormData({ ...formData, assignedTo: e.target.value })}
                                    className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                                >
                                    <option value="">Не назначено</option>
                                    {employees.map((emp) => (
                                        <option key={emp.id} value={emp.name}>
                                            {emp.name}{emp.position ? ` - ${emp.position}` : ''}
                                        </option>
                                    ))}
                                </select>
                                {employees.length === 0 && (
                                    <p className="text-xs text-slate-400 mt-1">Загрузка списка сотрудников...</p>
                                )}
                            </div>

                            {formData.documentType === 'outgoing' && (
                                <div>
                                    <label className="block text-sm font-medium text-slate-700 mb-1">Трек-номер</label>
                                    <input
                                        type="text"
                                        value={formData.trackingNumber}
                                        onChange={(e) => setFormData({ ...formData, trackingNumber: e.target.value })}
                                        className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                                        placeholder="Номер для отслеживания (необязательно)"
                                    />
                                </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"
                                    />
                                    <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 ? 'Загрузка...' : formData.fileUrl ? 'Заменить файл' : 'Выбрать файл'}
                                    </button>
                                    {formData.fileUrl && (
                                        <span className="text-xs text-slate-500 flex items-center gap-1">
                                            <File className="w-3 h-3" />
                                            Файл загружен
                                        </span>
                                    )}
                                </div>
                                <p className="text-xs text-slate-400 mt-1">Скан или текстовый файл (PDF, DOC, TXT, изображения)</p>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-1">Примечания</label>
                                <textarea
                                    value={formData.notes}
                                    onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                                    className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                                    rows={3}
                                    placeholder="Дополнительная информация"
                                />
                            </div>

                            <div className="flex gap-3 pt-4">
                                <button
                                    onClick={handleUpdateDocument}
                                    disabled={!formData.regNumber || !formData.title || !formData.correspondent}
                                    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);
                                        setSelectedDocument(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>
            )}
        </div>
    );
};