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 DocumentModal = ({ 
  document, 
  editMode, 
  editData, 
  setEditData, 
  availableRoles, 
  onSave, 
  onCancel, 
  getStatusColor 
}) => {
  if (!document) return null;

  const formatDate = (dateStr) => {
    if (!dateStr) return 'Never';
    try {
      return formatIsoToDdMmYyyy(dateStr) || String(dateStr);
    } catch (e) {
      return dateStr;
    }
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div className="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
        <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
          <h2 className="text-xl font-semibold text-gray-900">
            {editMode ? 'Edit Document' : 'Document Details'}
          </h2>
          <button onClick={onCancel} className="text-gray-400 hover:text-gray-600">
            <X className="w-6 h-6" />
          </button>
        </div>
        
        <div className="p-6 space-y-6">
          <div>
            <h3 className="text-lg font-medium text-gray-900 mb-2">{document.name}</h3>
            {document.definition && (
              <p className="text-gray-600 text-sm leading-relaxed">{document.definition}</p>
            )}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Status</label>
              {editMode ? (
                <select
                  value={editData.status}
                  onChange={(e) => setEditData({...editData, status: e.target.value})}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                  <option value="Not Started">Not Started</option>
                  <option value="In Progress">In Progress</option>
                  <option value="Under Review">Under Review</option>
                  <option value="Completed">Completed</option>
                </select>
              ) : (
                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(document.status)}`}>
                  {document.status}
                </span>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">PIC</label>
              {editMode ? (
                <select
                  value={editData.pic}
                  onChange={(e) => setEditData({...editData, pic: e.target.value})}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                  <option value="">Select PIC...</option>
                  {availableRoles.map(role => (
                    <option key={role} value={role}>{role}</option>
                  ))}
                </select>
              ) : (
                <p className="text-sm text-gray-900">{document.pic || '-'}</p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Documentation Link</label>
              {editMode ? (
                <input
                  type="url"
                  value={editData.link}
                  onChange={(e) => setEditData({...editData, link: e.target.value})}
                  placeholder="https://..."
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              ) : (
                <p className="text-sm text-gray-900">
                  {document.link ? (
                    <a href={document.link} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                      View Document
                    </a>
                  ) : '-'}
                </p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Phase</label>
              {editMode ? (
                <input
                  type="text"
                  value={editData.phase}
                  onChange={(e) => setEditData({...editData, phase: e.target.value})}
                  placeholder="Project phase..."
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              ) : (
                <p className="text-sm text-gray-900">{document.phase || '-'}</p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Reviewed By</label>
              {editMode ? (
                <input
                  type="text"
                  value={editData.reviewedBy}
                  onChange={(e) => setEditData({...editData, reviewedBy: e.target.value})}
                  placeholder="Reviewer name..."
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              ) : (
                <p className="text-sm text-gray-900">{document.reviewedBy || '-'}</p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Last Update</label>
              {editMode ? (
                <input
                  type="date"
                  value={editData.lastUpdate ? new Date(editData.lastUpdate).toISOString().split('T')[0] : ''}
                  onChange={(e) => setEditData({...editData, lastUpdate: e.target.value})}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              ) : (
                <p className="text-sm text-gray-900">{formatDate(document.lastUpdate)}</p>
              )}
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Review Remarks</label>
            {editMode ? (
              <textarea
                value={editData.reviewRemarks}
                onChange={(e) => setEditData({...editData, reviewRemarks: e.target.value})}
                placeholder="Enter review remarks..."
                rows={4}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            ) : (
              <p className="text-sm text-gray-900">{document.reviewRemarks || '-'}</p>
            )}
          </div>

          <div>
            <h4 className="text-sm font-medium text-gray-700 mb-2">Requirements</h4>
            <div className="flex space-x-4">
              <div className="flex items-center">
                {document.morb ? (
                  <CheckCircle className="w-5 h-5 text-green-500 mr-2" />
                ) : (
                  <XCircle className="w-5 h-5 text-gray-400 mr-2" />
                )}
                <span className="text-sm text-gray-700">MORB Required</span>
              </div>
              <div className="flex items-center">
                {document.internalPolicies ? (
                  <CheckCircle className="w-5 h-5 text-green-500 mr-2" />
                ) : (
                  <XCircle className="w-5 h-5 text-gray-400 mr-2" />
                )}
                <span className="text-sm text-gray-700">Internal Policies</span>
              </div>
            </div>
          </div>
        </div>

        {editMode && (
          <div className="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
            <button
              onClick={onCancel}
              className="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
            >
              Cancel
            </button>
            <button
              onClick={onSave}
              className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
            >
              <Save className="w-4 h-4 mr-2" />
              Save Changes
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default DocumentModal;