import React from 'react';

const DeviceInfoModal = ({ device, onClose }) => {
  if (!device) return null;

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
      <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onClick={onClose}></div>
        <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        
        <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full">
          <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div className="sm:flex sm:items-start">
              <div className="mt-3 text-center sm:mt-0 sm:text-left w-full">
                <div className="flex justify-between items-center mb-4">
                  <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                    {device.name} Details
                  </h3>
                  <button onClick={onClose} className="text-gray-400 hover:text-gray-500 focus:outline-none">
                    <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                </div>
                
                <div className="mt-4 space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <span className="text-sm font-medium text-gray-500 block">Model</span>
                      <span className="text-sm text-gray-900">{device.model || 'Unknown'}</span>
                    </div>
                    <div>
                      <span className="text-sm font-medium text-gray-500 block">Generation</span>
                      <span className="text-sm text-gray-900">{device.generation || 'Unknown'}</span>
                    </div>
                    <div>
                      <span className="text-sm font-medium text-gray-500 block">Serial Number</span>
                      <span className="text-sm text-gray-900 font-mono">{device.serialNumber}</span>
                    </div>
                    <div>
                      <span className="text-sm font-medium text-gray-500 block">Firmware Version</span>
                      <span className="text-sm text-gray-900">{device.firmware || 'Unknown'}</span>
                    </div>
                    <div>
                      <span className="text-sm font-medium text-gray-500 block">Connection Type</span>
                      <span className="text-sm text-gray-900">Lightning</span>
                    </div>
                    <div>
                      <span className="text-sm font-medium text-gray-500 block">Connection Time</span>
                      <span className="text-sm text-gray-900">{device.connectionTime}</span>
                    </div>
                    <div>
                      <span className="text-sm font-medium text-gray-500 block">Battery Level</span>
                      <span className="text-sm text-gray-900">{device.battery ? `${device.battery}%` : 'N/A'}</span>
                    </div>
                    <div>
                      <span className="text-sm font-medium text-gray-500 block">Device Status</span>
                      <span className={`text-sm font-medium ${
                        device.status === 'charging' ? 'text-yellow-600' : 
                        device.status === 'syncing' ? 'text-blue-600' : 
                        device.status === 'connected' ? 'text-green-600' : 'text-gray-600'
                      }`}>
                        {device.status || 'Unknown'}
                      </span>
                    </div>
                  </div>
                  
                  <div className="pt-4 border-t border-gray-100">
                    <h4 className="text-sm font-medium text-gray-900 mb-2">Device Capabilities</h4>
                    <div className="flex flex-wrap gap-2">
                      {device.capabilities?.map((cap, index) => (
                        <span key={index} className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                          {cap}
                        </span>
                      ))}
                      {(!device.capabilities || device.capabilities.length === 0) && (
                        <span className="text-sm text-gray-500">No capabilities detected</span>
                      )}
                    </div>
                  </div>
                  
                  <div className="pt-4 border-t border-gray-100">
                    <h4 className="text-sm font-medium text-gray-900 mb-2">Device Notes</h4>
                    <textarea 
                      className="block w-full sm:text-sm rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
                      rows="3"
                      placeholder="Add notes about this device..."
                      defaultValue={device.notes || ''}
                    ></textarea>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button 
              type="button" 
              className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
              onClick={onClose}
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};