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

const AddDocumentModal = ({ 
  show, 
  newDocumentData, 
  setNewDocumentData, 
  availableRoles, 
  onSave, 
  onCancel 
}) => {
  if (!show) return null;

  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-2xl 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">Add New Document</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>
            <label className="block text-sm font-medium text-gray-700 mb-2">Document Name *</label>
            <input
              type="text"
              value={newDocumentData.name}
              onChange={(e) => setNewDocumentData({...newDocumentData, name: e.target.value})}
              placeholder="Enter document name..."
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              required
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Definition/Description</label>
            <textarea
              value={newDocumentData.definition}
              onChange={(e) => setNewDocumentData({...newDocumentData, definition: e.target.value})}
              placeholder="Enter document definition or description..."
              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"
            />
          </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">PIC</label>
              <select
                value={newDocumentData.pic}
                onChange={(e) => setNewDocumentData({...newDocumentData, 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>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Status</label>
              <select
                value={newDocumentData.status}
                onChange={(e) => setNewDocumentData({...newDocumentData, 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>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Phase</label>
              <input
                type="text"
                value={newDocumentData.phase}
                onChange={(e) => setNewDocumentData({...newDocumentData, 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"
              />
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-3">Requirements</label>
            <div className="space-y-3">
              <div className="flex items-center">
                <input
                  type="checkbox"
                  id="morb"
                  checked={newDocumentData.morb}
                  onChange={(e) => setNewDocumentData({...newDocumentData, morb: e.target.checked})}
                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                />
                <label htmlFor="morb" className="ml-2 text-sm text-gray-700">
                  MORB Required
                </label>
              </div>
              <div className="flex items-center">
                <input
                  type="checkbox"
                  id="internalPolicies"
                  checked={newDocumentData.internalPolicies}
                  onChange={(e) => setNewDocumentData({...newDocumentData, internalPolicies: e.target.checked})}
                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                />
                <label htmlFor="internalPolicies" className="ml-2 text-sm text-gray-700">
                  Internal Policies Required
                </label>
              </div>
            </div>
          </div>
        </div>

        <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}
            disabled={!newDocumentData.name.trim()}
            className="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed"
          >
            <Plus className="w-4 h-4 mr-2" />
            Add Document
          </button>
        </div>
      </div>
    </div>
  );
};

export default AddDocumentModal;