
import React, { useState } from 'react';
import { Search, Plus, FileText, CheckCircle, XCircle, Download, Upload, Eye, Edit, Trash2, Save, X } from 'lucide-react';
import { formatIsoToDdMmYyyy } from '@/lib/vnDateFormat';

const DocumentTable = ({ 
  documents, 
  availableRoles, 
  onPICChange, 
  onViewDocument, 
  onEditDocument, 
  onDeleteDocument,
  getStatusColor 
}) => {
  const formatDate = (dateStr) => {
    if (!dateStr) return 'Never';
    try {
      return formatIsoToDdMmYyyy(dateStr) || String(dateStr);
    } catch (e) {
      return dateStr;
    }
  };

  return (
    <div className="bg-white rounded-lg shadow">
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Document
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Status
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Requirements
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                PIC
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Last Update
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Actions
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {documents.map((doc) => (
              <tr key={doc.id} className="hover:bg-gray-50">
                <td className="px-6 py-4">
                  <div className="flex items-start">
                    <FileText className="w-5 h-5 text-gray-400 mt-1 mr-3 flex-shrink-0" />
                    <div>
                      <div className="text-sm font-medium text-gray-900">{doc.name}</div>
                      {doc.definition && (
                        <div className="text-xs text-gray-500 mt-1 line-clamp-2">
                          {doc.definition.substring(0, 100)}...
                        </div>
                      )}
                    </div>
                  </div>
                </td>
                <td className="px-6 py-4">
                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(doc.status)}`}>
                    {doc.status}
                  </span>
                </td>
                <td className="px-6 py-4">
                  <div className="flex space-x-2">
                    {doc.morb && (
                      <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-red-100 text-red-800">
                        MORB
                      </span>
                    )}
                    {doc.internalPolicies && (
                      <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                        Internal
                      </span>
                    )}
                  </div>
                </td>
                <td className="px-6 py-4">
                  <select
                    value={doc.pic || ''}
                    onChange={(e) => onPICChange(doc.id, e.target.value)}
                    className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white"
                  >
                    <option value="">Select PIC...</option>
                    {availableRoles.map(role => (
                      <option key={role} value={role}>{role}</option>
                    ))}
                  </select>
                </td>
                <td className="px-6 py-4 text-sm text-gray-500">
                  {formatDate(doc.lastUpdate)}
                </td>
                <td className="px-6 py-4">
                  <div className="flex space-x-2">
                    <button
                      onClick={() => onViewDocument(doc)}
                      className="text-blue-600 hover:text-blue-800"
                      title="View Details"
                    >
                      <Eye className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => onEditDocument(doc)}
                      className="text-green-600 hover:text-green-800"
                      title="Edit Document"
                    >
                      <Edit className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => onDeleteDocument(doc.id)}
                      className="text-red-600 hover:text-red-800"
                      title="Delete Document"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default DocumentTable;