'use client';

import { useState, useEffect, useCallback, use } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import ProtectedRoute from '../../protected-route';
import SidebarLayout from '../../components/sidebar-layout';
import { useTranslations } from '../../hooks/useTranslations';
import SearchablePatientSelect from '../../components/SearchablePatientSelect';
import { 
  FileText, 
  Download, 
  ArrowLeft,
  Edit,
  Trash2,
  Clock,
  User,
  Tag,
  Shield,
  Calendar,
  Upload,
  History,
  CheckCircle,
  AlertCircle,
  Archive,
  X,
  Plus,
  Save
} from 'lucide-react';
import toast from 'react-hot-toast';

interface IDocumentVersion {
  versionNumber: number;
  filename: string;
  originalName: string;
  mimeType: string;
  size: number;
  uploadedAt: string;
  uploadedBy: string;
  notes?: string;
}

interface IDocument {
  _id: string;
  documentNumber: string;
  title: string;
  description?: string;
  category: string;
  patientId?: string;
  patientName?: string;
  doctorId?: string;
  doctorName?: string;
  status: string;
  priority: string;
  expiryDate?: string;
  tags: string[];
  accessControl: {
    isPublic: boolean;
    allowedRoles: string[];
    allowedUsers: string[];
  };
  currentVersion: number;
  versions: IDocumentVersion[];
  notes?: string;
  createdBy: string;
  createdAt: string;
  updatedAt: string;
}

interface Patient {
  _id: string;
  firstName: string;
  lastName: string;
  email?: string;
}

export default function DocumentDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const resolvedParams = use(params);
  const router = useRouter();
  const { t, translationsLoaded } = useTranslations();
  const [document, setDocument] = useState<IDocument | null>(null);
  const [loading, setLoading] = useState(true);
  const [isEditing, setIsEditing] = useState(false);
  const [saving, setSaving] = useState(false);
  const [uploadingNewVersion, setUploadingNewVersion] = useState(false);
  const [newFile, setNewFile] = useState<File | null>(null);
  const [versionNotes, setVersionNotes] = useState('');
  const [showVersionModal, setShowVersionModal] = useState(false);
  
  // Edit form state
  const [editData, setEditData] = useState<{
    title: string;
    description: string;
    category: string;
    status: string;
    priority: string;
    expiryDate: string;
    tags: string[];
    notes: string;
    patientId: string;
    patientName: string;
    accessControl: {
      isPublic: boolean;
      allowedRoles: string[];
      allowedUsers: string[];
    };
  }>({
    title: '',
    description: '',
    category: '',
    status: '',
    priority: '',
    expiryDate: '',
    tags: [],
    notes: '',
    patientId: '',
    patientName: '',
    accessControl: {
      isPublic: false,
      allowedRoles: [],
      allowedUsers: [],
    },
  });
  const [tagInput, setTagInput] = useState('');

  useEffect(() => {
    fetchDocument();
  }, [resolvedParams.id]);

  const fetchDocument = async () => {
    try {
      setLoading(true);
      const response = await fetch(`/api/documents/${resolvedParams.id}`);
      if (!response.ok) {
        if (response.status === 404) {
          toast.error(t('documents.notFound') || 'Document not found');
          router.push('/documents');
          return;
        }
        throw new Error('Failed to fetch document');
      }
      const data = await response.json();
      setDocument(data);
      setEditData({
        title: data.title,
        description: data.description || '',
        category: data.category,
        status: data.status,
        priority: data.priority,
        expiryDate: data.expiryDate ? data.expiryDate.split('T')[0] : '',
        tags: data.tags || [],
        notes: data.notes || '',
        patientId: data.patientId || '',
        patientName: data.patientName || '',
        accessControl: data.accessControl || { isPublic: false, allowedRoles: [], allowedUsers: [] },
      });
    } catch (error) {
      console.error('Error fetching document:', error);
      toast.error(t('documents.fetchError') || 'Failed to fetch document');
    } finally {
      setLoading(false);
    }
  };

  const handleDownload = (version?: number) => {
    const url = version 
      ? `/api/documents/${resolvedParams.id}/download?version=${version}`
      : `/api/documents/${resolvedParams.id}/download`;
    window.open(url, '_blank');
  };

  const handleDelete = async () => {
    if (!confirm(t('documents.confirmDelete') || 'Are you sure you want to delete this document?')) {
      return;
    }

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

      if (!response.ok) throw new Error('Failed to delete document');
      
      toast.success(t('documents.deleteSuccess') || 'Document deleted successfully');
      router.push('/documents');
    } catch (error) {
      console.error('Error deleting document:', error);
      toast.error(t('documents.deleteError') || 'Failed to delete document');
    }
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      const formData = new FormData();
      formData.append('title', editData.title);
      formData.append('description', editData.description);
      formData.append('category', editData.category);
      formData.append('status', editData.status);
      formData.append('priority', editData.priority);
      formData.append('expiryDate', editData.expiryDate);
      formData.append('tags', JSON.stringify(editData.tags));
      formData.append('notes', editData.notes);
      formData.append('patientId', editData.patientId);
      formData.append('patientName', editData.patientName);
      formData.append('accessControl', JSON.stringify(editData.accessControl));

      const response = await fetch(`/api/documents/${resolvedParams.id}`, {
        method: 'PUT',
        body: formData,
      });

      if (!response.ok) throw new Error('Failed to update document');
      
      const updatedDoc = await response.json();
      setDocument(updatedDoc);
      setIsEditing(false);
      toast.success(t('documents.updateSuccess') || 'Document updated successfully');
    } catch (error) {
      console.error('Error updating document:', error);
      toast.error(t('documents.updateError') || 'Failed to update document');
    } finally {
      setSaving(false);
    }
  };

  const handleUploadNewVersion = async () => {
    if (!newFile) {
      toast.error(t('documents.selectFileError') || 'Please select a file');
      return;
    }

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

      const response = await fetch(`/api/documents/${resolvedParams.id}`, {
        method: 'PUT',
        body: formData,
      });

      if (!response.ok) throw new Error('Failed to upload new version');
      
      toast.success(t('documents.versionUploadSuccess') || 'New version uploaded successfully');
      setShowVersionModal(false);
      setNewFile(null);
      setVersionNotes('');
      fetchDocument();
    } catch (error) {
      console.error('Error uploading new version:', error);
      toast.error(t('documents.versionUploadError') || 'Failed to upload new version');
    } finally {
      setUploadingNewVersion(false);
    }
  };

  const handleAddTag = () => {
    if (tagInput.trim() && !editData.tags.includes(tagInput.trim())) {
      setEditData({
        ...editData,
        tags: [...editData.tags, tagInput.trim()],
      });
      setTagInput('');
    }
  };

  const handleRemoveTag = (tag: string) => {
    setEditData({
      ...editData,
      tags: editData.tags.filter(t => t !== tag),
    });
  };

  const handlePatientSelect = (patient: Patient | null) => {
    if (patient) {
      setEditData({
        ...editData,
        patientId: patient._id,
        patientName: `${patient.firstName} ${patient.lastName}`,
      });
    } else {
      setEditData({
        ...editData,
        patientId: '',
        patientName: '',
      });
    }
  };

  const handleRoleToggle = (role: string) => {
    const roles = editData.accessControl.allowedRoles;
    if (roles.includes(role)) {
      setEditData({
        ...editData,
        accessControl: {
          ...editData.accessControl,
          allowedRoles: roles.filter(r => r !== role),
        },
      });
    } else {
      setEditData({
        ...editData,
        accessControl: {
          ...editData.accessControl,
          allowedRoles: [...roles, role],
        },
      });
    }
  };

  const getCategoryLabel = (category: string) => {
    return t(`documents.categories.${category}`) || category.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
  };

  const getStatusLabel = (status: string) => {
    return t(`documents.statusLabels.${status}`) || status.charAt(0).toUpperCase() + status.slice(1);
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'active':
        return 'bg-green-100 text-green-800';
      case 'draft':
        return 'bg-gray-100 text-gray-800';
      case 'archived':
        return 'bg-blue-100 text-blue-800';
      case 'expired':
        return 'bg-red-100 text-red-800';
      default:
        return 'bg-gray-100 text-gray-800';
    }
  };

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case 'urgent':
        return 'bg-red-100 text-red-800';
      case 'high':
        return 'bg-orange-100 text-orange-800';
      case 'normal':
        return 'bg-blue-100 text-blue-800';
      case 'low':
        return 'bg-gray-100 text-gray-800';
      default:
        return 'bg-gray-100 text-gray-800';
    }
  };

  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'active':
        return <CheckCircle className="h-5 w-5 text-green-500" />;
      case 'draft':
        return <Clock className="h-5 w-5 text-gray-500" />;
      case 'archived':
        return <Archive className="h-5 w-5 text-blue-500" />;
      case 'expired':
        return <AlertCircle className="h-5 w-5 text-red-500" />;
      default:
        return <FileText className="h-5 w-5 text-gray-500" />;
    }
  };

  if (!translationsLoaded || loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  if (!document) {
    return (
      <ProtectedRoute>
        <SidebarLayout title={t('documents.notFound') || 'Document Not Found'}>
          <div className="text-center py-12">
            <FileText className="mx-auto h-12 w-12 text-gray-400" />
            <h3 className="mt-2 text-lg font-medium text-gray-900">
              {t('documents.notFound') || 'Document not found'}
            </h3>
            <Link
              href="/documents"
              className="mt-4 inline-flex items-center text-blue-600 hover:text-blue-800"
            >
              <ArrowLeft className="h-5 w-5 mr-2" />
              {t('documents.backToDocuments') || 'Back to Documents'}
            </Link>
          </div>
        </SidebarLayout>
      </ProtectedRoute>
    );
  }

  return (
    <ProtectedRoute>
      <SidebarLayout 
        title={document.title} 
        description={document.documentNumber}
      >
        <div className="max-w-5xl mx-auto">
          {/* Back Button and Actions */}
          <div className="flex justify-between items-center mb-6">
            <Link
              href="/documents"
              className="inline-flex items-center text-gray-600 hover:text-gray-900"
            >
              <ArrowLeft className="h-5 w-5 mr-2" />
              {t('documents.backToDocuments') || 'Back to Documents'}
            </Link>
            
            <div className="flex space-x-2">
              {!isEditing && (
                <>
                  <button
                    onClick={() => setIsEditing(true)}
                    className="flex items-center px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
                  >
                    <Edit className="h-5 w-5 mr-2" />
                    {t('common.edit') || 'Edit'}
                  </button>
                  <button
                    onClick={() => setShowVersionModal(true)}
                    className="flex items-center px-4 py-2 text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors"
                  >
                    <Upload className="h-5 w-5 mr-2" />
                    {t('documents.uploadNewVersion') || 'Upload New Version'}
                  </button>
                  {document.versions.length > 0 && (
                    <button
                      onClick={() => handleDownload()}
                      className="flex items-center px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors"
                    >
                      <Download className="h-5 w-5 mr-2" />
                      {t('common.download') || 'Download'}
                    </button>
                  )}
                  <button
                    onClick={handleDelete}
                    className="flex items-center px-4 py-2 text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors"
                  >
                    <Trash2 className="h-5 w-5 mr-2" />
                    {t('common.delete') || 'Delete'}
                  </button>
                </>
              )}
              {isEditing && (
                <>
                  <button
                    onClick={() => setIsEditing(false)}
                    className="flex items-center px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
                  >
                    <X className="h-5 w-5 mr-2" />
                    {t('common.cancel') || 'Cancel'}
                  </button>
                  <button
                    onClick={handleSave}
                    disabled={saving}
                    className="flex items-center px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
                  >
                    {saving ? (
                      <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
                    ) : (
                      <Save className="h-5 w-5 mr-2" />
                    )}
                    {t('common.save') || 'Save'}
                  </button>
                </>
              )}
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {/* Main Content */}
            <div className="lg:col-span-2 space-y-6">
              {/* Document Details */}
              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center">
                  <FileText className="h-5 w-5 mr-2 text-blue-600" />
                  {t('documents.documentDetails') || 'Document Details'}
                </h3>
                
                {isEditing ? (
                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        {t('documents.titleLabel') || 'Title'}
                      </label>
                      <input
                        type="text"
                        value={editData.title}
                        onChange={(e) => setEditData({ ...editData, title: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        {t('documents.descriptionLabel') || 'Description'}
                      </label>
                      <textarea
                        value={editData.description}
                        onChange={(e) => setEditData({ ...editData, description: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        rows={3}
                      />
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          {t('documents.category') || 'Category'}
                        </label>
                        <select
                          value={editData.category}
                          onChange={(e) => setEditData({ ...editData, category: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        >
                          <option value="consent-form">{t('documents.categories.consent-form') || 'Consent Form'}</option>
                          <option value="legal-document">{t('documents.categories.legal-document') || 'Legal Document'}</option>
                          <option value="medical-certificate">{t('documents.categories.medical-certificate') || 'Medical Certificate'}</option>
                          <option value="insurance">{t('documents.categories.insurance') || 'Insurance'}</option>
                          <option value="identification">{t('documents.categories.identification') || 'Identification'}</option>
                          <option value="referral">{t('documents.categories.referral') || 'Referral'}</option>
                          <option value="discharge-summary">{t('documents.categories.discharge-summary') || 'Discharge Summary'}</option>
                          <option value="prescription">{t('documents.categories.prescription') || 'Prescription'}</option>
                          <option value="lab-report">{t('documents.categories.lab-report') || 'Lab Report'}</option>
                          <option value="imaging-report">{t('documents.categories.imaging-report') || 'Imaging Report'}</option>
                          <option value="other">{t('documents.categories.other') || 'Other'}</option>
                        </select>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          {t('documents.status') || 'Status'}
                        </label>
                        <select
                          value={editData.status}
                          onChange={(e) => setEditData({ ...editData, status: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        >
                          <option value="draft">{t('documents.statusLabels.draft') || 'Draft'}</option>
                          <option value="active">{t('documents.statusLabels.active') || 'Active'}</option>
                          <option value="archived">{t('documents.statusLabels.archived') || 'Archived'}</option>
                          <option value="expired">{t('documents.statusLabels.expired') || 'Expired'}</option>
                        </select>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          {t('documents.priority') || 'Priority'}
                        </label>
                        <select
                          value={editData.priority}
                          onChange={(e) => setEditData({ ...editData, priority: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        >
                          <option value="low">{t('documents.priorityLabels.low') || 'Low'}</option>
                          <option value="normal">{t('documents.priorityLabels.normal') || 'Normal'}</option>
                          <option value="high">{t('documents.priorityLabels.high') || 'High'}</option>
                          <option value="urgent">{t('documents.priorityLabels.urgent') || 'Urgent'}</option>
                        </select>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          {t('documents.expiryDate') || 'Expiry Date'}
                        </label>
                        <input
                          type="date"
                          value={editData.expiryDate}
                          onChange={(e) => setEditData({ ...editData, expiryDate: e.target.value })}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        />
                      </div>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        {t('documents.notes') || 'Notes'}
                      </label>
                      <textarea
                        value={editData.notes}
                        onChange={(e) => setEditData({ ...editData, notes: e.target.value })}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        rows={3}
                      />
                    </div>
                    {/* Patient Selection in Edit Mode */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        {t('documents.selectPatient') || 'Select Patient'}
                      </label>
                      <SearchablePatientSelect
                        onSelect={handlePatientSelect}
                        selectedPatient={editData.patientId ? {
                          _id: editData.patientId,
                          firstName: editData.patientName.split(' ')[0],
                          lastName: editData.patientName.split(' ').slice(1).join(' '),
                        } : null}
                        placeholder={t('documents.searchPatient') || 'Search for a patient...'}
                      />
                    </div>
                    {/* Tags in Edit Mode */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        {t('documents.tags') || 'Tags'}
                      </label>
                      <div className="flex flex-wrap gap-2 mb-2">
                        {editData.tags.map((tag) => (
                          <span
                            key={tag}
                            className="inline-flex items-center px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm"
                          >
                            {tag}
                            <button
                              type="button"
                              onClick={() => handleRemoveTag(tag)}
                              className="ml-2 text-blue-600 hover:text-blue-800"
                            >
                              <X className="h-4 w-4" />
                            </button>
                          </span>
                        ))}
                      </div>
                      <div className="flex gap-2">
                        <input
                          type="text"
                          value={tagInput}
                          onChange={(e) => setTagInput(e.target.value)}
                          onKeyPress={(e) => e.key === 'Enter' && (e.preventDefault(), handleAddTag())}
                          className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                          placeholder={t('documents.addTagPlaceholder') || 'Add a tag'}
                        />
                        <button
                          type="button"
                          onClick={handleAddTag}
                          className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200"
                        >
                          <Plus className="h-5 w-5" />
                        </button>
                      </div>
                    </div>
                    {/* Access Control in Edit Mode */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        {t('documents.accessControl') || 'Access Control'}
                      </label>
                      <div className="space-y-3">
                        <div className="flex items-center">
                          <input
                            type="checkbox"
                            id="isPublicEdit"
                            checked={editData.accessControl.isPublic}
                            onChange={(e) => setEditData({
                              ...editData,
                              accessControl: { ...editData.accessControl, isPublic: e.target.checked }
                            })}
                            className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                          />
                          <label htmlFor="isPublicEdit" className="ml-2 text-sm text-gray-700">
                            {t('documents.isPublic') || 'Public'}
                          </label>
                        </div>
                        <div className="flex flex-wrap gap-2">
                          {['admin', 'doctor', 'staff', 'patient'].map((role) => (
                            <button
                              key={role}
                              type="button"
                              onClick={() => handleRoleToggle(role)}
                              className={`px-3 py-1 rounded-full text-sm font-medium ${
                                editData.accessControl.allowedRoles.includes(role)
                                  ? 'bg-blue-600 text-white'
                                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                              }`}
                            >
                              {role.charAt(0).toUpperCase() + role.slice(1)}
                            </button>
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>
                ) : (
                  <div className="space-y-4">
                    <div className="flex items-start justify-between">
                      <div>
                        <h4 className="text-xl font-semibold text-gray-900">{document.title}</h4>
                        <p className="text-sm text-gray-500">{document.documentNumber}</p>
                      </div>
                      <div className="flex items-center space-x-2">
                        {getStatusIcon(document.status)}
                        <span className={`px-2 py-1 text-xs font-medium rounded-full ${getStatusColor(document.status)}`}>
                          {getStatusLabel(document.status)}
                        </span>
                      </div>
                    </div>

                    {document.description && (
                      <p className="text-gray-600">{document.description}</p>
                    )}

                    <div className="grid grid-cols-2 gap-4 pt-4 border-t">
                      <div>
                        <span className="text-sm text-gray-500">{t('documents.category') || 'Category'}</span>
                        <p className="font-medium text-purple-600">{getCategoryLabel(document.category)}</p>
                      </div>
                      <div>
                        <span className="text-sm text-gray-500">{t('documents.priority') || 'Priority'}</span>
                        <p>
                          <span className={`px-2 py-1 text-xs font-medium rounded-full ${getPriorityColor(document.priority)}`}>
                            {t(`documents.priorityLabels.${document.priority}`) || document.priority}
                          </span>
                        </p>
                      </div>
                      <div>
                        <span className="text-sm text-gray-500">{t('documents.createdAt') || 'Created'}</span>
                        <p className="font-medium">{new Date(document.createdAt).toLocaleDateString()}</p>
                      </div>
                      {document.expiryDate && (
                        <div>
                          <span className="text-sm text-gray-500">{t('documents.expiryDate') || 'Expires'}</span>
                          <p className="font-medium">{new Date(document.expiryDate).toLocaleDateString()}</p>
                        </div>
                      )}
                    </div>

                    {document.notes && (
                      <div className="pt-4 border-t">
                        <span className="text-sm text-gray-500">{t('documents.notes') || 'Notes'}</span>
                        <p className="text-gray-700 mt-1">{document.notes}</p>
                      </div>
                    )}

                    {document.tags && document.tags.length > 0 && (
                      <div className="pt-4 border-t">
                        <span className="text-sm text-gray-500 flex items-center mb-2">
                          <Tag className="h-4 w-4 mr-1" />
                          {t('documents.tags') || 'Tags'}
                        </span>
                        <div className="flex flex-wrap gap-2">
                          {document.tags.map((tag) => (
                            <span
                              key={tag}
                              className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm"
                            >
                              {tag}
                            </span>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                )}
              </div>

              {/* Version History */}
              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center">
                  <History className="h-5 w-5 mr-2 text-blue-600" />
                  {t('documents.versionHistory') || 'Version History'}
                </h3>
                
                {document.versions.length === 0 ? (
                  <div className="text-center py-8 text-gray-500">
                    <FileText className="mx-auto h-12 w-12 text-gray-300" />
                    <p className="mt-2">{t('documents.noVersions') || 'No file versions available'}</p>
                  </div>
                ) : (
                  <div className="space-y-4">
                    {document.versions
                      .sort((a, b) => b.versionNumber - a.versionNumber)
                      .map((version) => (
                        <div
                          key={version.versionNumber}
                          className={`flex items-center justify-between p-4 border rounded-lg ${
                            version.versionNumber === document.currentVersion
                              ? 'border-blue-300 bg-blue-50'
                              : 'border-gray-200'
                          }`}
                        >
                          <div className="flex items-center space-x-4">
                            <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
                              version.versionNumber === document.currentVersion
                                ? 'bg-blue-600 text-white'
                                : 'bg-gray-200 text-gray-600'
                            }`}>
                              v{version.versionNumber}
                            </div>
                            <div>
                              <p className="font-medium text-gray-900">{version.originalName}</p>
                              <p className="text-sm text-gray-500">
                                {formatFileSize(version.size)} • {new Date(version.uploadedAt).toLocaleString()}
                              </p>
                              {version.notes && (
                                <p className="text-sm text-gray-600 mt-1">{version.notes}</p>
                              )}
                              <p className="text-xs text-gray-400 mt-1">
                                {t('documents.uploadedBy') || 'Uploaded by'}: {version.uploadedBy}
                              </p>
                            </div>
                          </div>
                          <button
                            onClick={() => handleDownload(version.versionNumber)}
                            className="p-2 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors"
                            title={t('common.download') || 'Download'}
                          >
                            <Download className="h-5 w-5" />
                          </button>
                        </div>
                      ))}
                  </div>
                )}
              </div>
            </div>

            {/* Sidebar */}
            <div className="space-y-6">
              {/* Patient Info */}
              {document.patientName && (
                <div className="bg-white rounded-lg shadow p-6">
                  <h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center">
                    <User className="h-5 w-5 mr-2 text-blue-600" />
                    {t('documents.patientInfo') || 'Patient'}
                  </h3>
                  <p className="font-medium text-gray-900">{document.patientName}</p>
                </div>
              )}

              {/* Access Control Info */}
              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center">
                  <Shield className="h-5 w-5 mr-2 text-blue-600" />
                  {t('documents.accessControl') || 'Access Control'}
                </h3>
                <div className="space-y-3">
                  <div className="flex items-center">
                    <span className={`w-3 h-3 rounded-full mr-2 ${
                      document.accessControl?.isPublic ? 'bg-green-500' : 'bg-gray-400'
                    }`}></span>
                    <span className="text-sm text-gray-600">
                      {document.accessControl?.isPublic 
                        ? (t('documents.publicAccess') || 'Public Access') 
                        : (t('documents.restrictedAccess') || 'Restricted Access')}
                    </span>
                  </div>
                  {document.accessControl?.allowedRoles && document.accessControl.allowedRoles.length > 0 && (
                    <div>
                      <span className="text-sm text-gray-500">{t('documents.allowedRoles') || 'Allowed Roles'}:</span>
                      <div className="flex flex-wrap gap-1 mt-1">
                        {document.accessControl.allowedRoles.map((role) => (
                          <span
                            key={role}
                            className="px-2 py-1 bg-gray-100 text-gray-700 rounded text-xs"
                          >
                            {role.charAt(0).toUpperCase() + role.slice(1)}
                          </span>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              </div>

              {/* Metadata */}
              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center">
                  <Calendar className="h-5 w-5 mr-2 text-blue-600" />
                  {t('documents.metadata') || 'Metadata'}
                </h3>
                <div className="space-y-3 text-sm">
                  <div className="flex justify-between">
                    <span className="text-gray-500">{t('documents.createdBy') || 'Created By'}</span>
                    <span className="text-gray-900">{document.createdBy}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-500">{t('documents.createdAt') || 'Created'}</span>
                    <span className="text-gray-900">{new Date(document.createdAt).toLocaleDateString()}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-500">{t('documents.updatedAt') || 'Updated'}</span>
                    <span className="text-gray-900">{new Date(document.updatedAt).toLocaleDateString()}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-500">{t('documents.currentVersion') || 'Current Version'}</span>
                    <span className="text-gray-900">v{document.currentVersion}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Upload New Version Modal */}
        {showVersionModal && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 p-6">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-medium text-gray-900">
                  {t('documents.uploadNewVersion') || 'Upload New Version'}
                </h3>
                <button
                  onClick={() => setShowVersionModal(false)}
                  className="text-gray-400 hover:text-gray-600"
                >
                  <X className="h-6 w-6" />
                </button>
              </div>
              
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    {t('documents.selectFile') || 'Select File'}
                  </label>
                  <input
                    type="file"
                    onChange={(e) => setNewFile(e.target.files?.[0] || null)}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  />
                  {newFile && (
                    <p className="mt-2 text-sm text-gray-500">
                      {newFile.name} ({formatFileSize(newFile.size)})
                    </p>
                  )}
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    {t('documents.versionNotes') || 'Version Notes'}
                  </label>
                  <textarea
                    value={versionNotes}
                    onChange={(e) => setVersionNotes(e.target.value)}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    rows={3}
                    placeholder={t('documents.versionNotesPlaceholder') || 'Describe what changed in this version...'}
                  />
                </div>
                
                <div className="flex justify-end space-x-3">
                  <button
                    onClick={() => setShowVersionModal(false)}
                    className="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
                  >
                    {t('common.cancel') || 'Cancel'}
                  </button>
                  <button
                    onClick={handleUploadNewVersion}
                    disabled={uploadingNewVersion || !newFile}
                    className="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
                  >
                    {uploadingNewVersion ? (
                      <span className="flex items-center">
                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                        {t('common.uploading') || 'Uploading...'}
                      </span>
                    ) : (
                      t('documents.upload') || 'Upload'
                    )}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
      </SidebarLayout>
    </ProtectedRoute>
  );
}