import React from 'react'
import { FaFileAlt, FaDownload } from 'react-icons/fa'
import dayjs from 'dayjs'
import { DocumentDto } from '@/proxy/intranet/models'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { getFileIcon, getFileType } from '@/proxy/intranet/utils'

const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', '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 RecentDocuments: React.FC<{ documents: DocumentDto[] }> = ({ documents }) => {
  const { translate } = useLocalization();
  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
      <div className="p-4 border-b border-gray-200 dark:border-gray-700">
        <div className="flex items-center justify-between">
          <h2 className="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
            <FaFileAlt className="w-5 h-5" />
            {translate('::App.Platform.Intranet.Widgets.RecentDocuments.Title')}
          </h2>
        </div>
      </div>
      <div className="divide-y divide-gray-200 dark:divide-gray-700">
        {documents.length > 0 ? (
          documents.slice(0, 3).map((doc) => (
            <div
              key={doc.id}
              className="p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
            >
              <div className="flex items-start gap-3">
                <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
                  {getFileIcon(doc.extension)}
                </div>
                <div className="flex-1 min-w-0">
                  <h4 className="text-sm font-medium text-gray-900 dark:text-white truncate">
                    {doc.name}
                  </h4>
                  <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
                    {getFileType(doc.extension)}
                    <span className="mx-1">•</span>
                    {formatFileSize(doc.size)}
                  </p>
                  <div className="text-xs text-gray-500 dark:text-gray-400 mt-1 flex items-center gap-2">
                    <span>{dayjs(doc.modifiedAt).fromNow()}</span>
                    {doc.isReadOnly && (
                      <>
                        <span>•</span>
                        <span className="text-orange-500">🔒 {translate('::App.Platform.Intranet.Widgets.RecentDocuments.ReadOnly')}</span>
                      </>
                    )}
                  </div>
                </div>
                <button
                  onClick={(e) => {
                    e.stopPropagation()
                    const link = document.createElement('a')
                    link.href = `/cdn/${doc.path}`
                    link.download = doc.name
                    link.click()
                  }}
                  className="p-2 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-lg transition-colors group"
                  title={translate('::App.Platform.Intranet.Widgets.RecentDocuments.Download')}
                >
                  <FaDownload className="w-5 h-5 text-gray-600 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" />
                </button>
              </div>
            </div>
          ))
        ) : (
          <div className="p-4 text-center text-sm text-gray-500 dark:text-gray-400">
            {translate('::App.Platform.Intranet.Widgets.RecentDocuments.NoDocuments')}
          </div>
        )}
      </div>
    </div>
  )
}

export default RecentDocuments