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

const ImportModal = ({ 
  show, 
  importError, 
  importSuccess, 
  onFileImport, 
  onClose 
}) => {
  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-md w-full">
        <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">Import JSON Data</h2>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
            <X className="w-6 h-6" />
          </button>
        </div>
        
        <div className="p-6">
          {!importSuccess ? (
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Select JSON File
                </label>
                <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors">
                  <Upload className="mx-auto h-12 w-12 text-gray-400 mb-4" />
                  <div className="text-sm text-gray-600 mb-4">
                    Click to select or drag and drop your JSON file here
                  </div>
                  <input
                    type="file"
                    accept=".json"
                    onChange={onFileImport}
                    className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
                  />
                </div>
              </div>

              {importError && (
                <div className="bg-red-50 border border-red-200 rounded-lg p-4">
                  <div className="flex">
                    <XCircle className="h-5 w-5 text-red-400 mt-0.5 mr-3" />
                    <div className="text-sm text-red-700">{importError}</div>
                  </div>
                </div>
              )}

              <div className="text-xs text-gray-500">
                <p className="font-medium mb-2">Expected JSON structure:</p>
                <ul className="list-disc list-inside space-y-1">
                  <li>Document (required)</li>
                  <li>Definition (required)</li>
                  <li>MORB (required)</li>
                  <li>Internal Policies (required)</li>
                  <li>PIC (required)</li>
                  <li>Other sections will be auto-created if missing</li>
                </ul>
              </div>
            </div>
          ) : (
            <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                <div className="flex">
                <CheckCircle className="h-5 w-5 text-green-400 mt-0.5 mr-3" />
                <div>
                    <div className="text-sm font-medium text-green-800">Import Successful!</div>
                    <div className="text-sm text-green-700 mt-1">
                    Your JSON data has been imported successfully. The modal will close automatically.
                    </div>
                </div>
                </div>
            </div>
            )}
        </div>
        </div>
    </div>
    )}

export default ImportModal;