import React from 'react';

const DeviceCard = ({ device, onAction }) => {
  const getDeviceIcon = (type) => {
    switch (type) {
      case 'iPhone':
        return (
          <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
            <line x1="12" y1="18" x2="12.01" y2="18" />
          </svg>
        );
      case 'iPad':
        return (
          <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="4" y="2" width="16" height="20" rx="2" ry="2" />
            <line x1="12" y1="18" x2="12.01" y2="18" />
          </svg>
        );
      case 'iPod':
        return (
          <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="4" y="4" width="16" height="16" rx="4" ry="4" />
            <circle cx="12" cy="12" r="3" />
          </svg>
        );
      case 'iPod Touch':
        return (
          <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="4" y="4" width="16" height="16" rx="4" ry="4" />
            <circle cx="12" cy="12" r="3" />
          </svg>
        );
      case 'iPod Nano':
        return (
          <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="4" y="6" width="16" height="12" rx="2" ry="2" />
            <line x1="12" y1="12" x2="12.01" y2="12" />
          </svg>
        );
      default:
        return (
          <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M18 8h1a4 4 0 0 1 0 8h-1" />
            <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z" />
            <line x1="6" y1="1" x2="6" y2="4" />
            <line x1="10" y1="1" x2="10" y2="4" />
            <line x1="14" y1="1" x2="14" y2="4" />
          </svg>
        );
    }
  };

  const getDeviceColor = (type) => {
    if (type.includes('iPhone')) return 'border-blue-500 shadow-blue-200';
    if (type.includes('iPad')) return 'border-gray-400 shadow-gray-200';
    if (type.includes('iPod')) return 'border-purple-500 shadow-purple-200';
    return 'border-gray-300 shadow-gray-200';
  };

  const getDeviceStatus = (status) => {
    switch (status) {
      case 'connected':
        return <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Connected</span>;
      case 'charging':
        return <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Charging</span>;
      case 'syncing':
        return <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Syncing</span>;
      case 'paused':
        return <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Paused</span>;
      default:
        return <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Unknown</span>;
    }
  };

  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow duration-200">
      <div className="p-6">
        <div className="flex items-start justify-between">
          <div className="flex items-center">
            <div className={`flex-shrink-0 h-12 w-12 rounded-lg ${getDeviceColor(device.type)} flex items-center justify-center text-gray-700`}>
              {getDeviceIcon(device.type)}
            </div>
            <div className="ml-4">
              <h3 className="text-lg font-semibold text-gray-900">{device.name}</h3>
              <p className="text-sm text-gray-500">{device.serialNumber}</p>
              <div className="mt-1 flex items-center">
                <span className="text-xs text-gray-400 mr-2">Generated: {device.generation || 'Unknown'}</span>
                <span className="text-xs text-gray-300">•</span>
                <span className="text-xs text-gray-400 ml-2">Connected: {device.connectionTime}</span>
              </div>
            </div>
          </div>
          <div className="flex flex-col items-end">
            {getDeviceStatus(device.status)}
            {device.battery && (
              <div className="mt-2 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-gray-400 mr-1" viewBox="0 0 20 20" fill="currentColor">
                  <path fillRule="evenodd" d="M3 6a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm1 3a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1zm6-1a1 1 0 100 2h5a1 1 0 100-2H11zm-3 5a1 1 0 011-1h3a1 1 0 110 2H11a1 1 0 01-1-1z" clipRule="evenodd" />
                </svg>
                <span className="text-sm font-medium text-gray-700">{device.battery}%</span>
              </div>
            )}
          </div>
        </div>

        <div className="mt-4 space-y-2">
          <div className="grid grid-cols-2 gap-3">
            {device.actions?.map((action, index) => (
              <button
                key={index}
                onClick={() => onAction(device, action.name)}
                className={`flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
                  action.danger 
                    ? 'bg-red-50 text-red-700 hover:bg-red-100' 
                    : 'bg-blue-50 text-blue-700 hover:bg-blue-100'
                }`}
              >
                {action.icon && <span className="mr-1.5">{action.icon}</span>}
                {action.name}
              </button>
            ))}
          </div>
        </div>

        <div className="mt-4 pt-4 border-t border-gray-100">
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <span className="text-gray-500 block">Model</span>
              <span className="text-gray-900 font-medium">{device.model || 'Unknown'}</span>
            </div>
            <div>
              <span className="text-gray-500 block">Firmware</span>
              <span className="text-gray-900 font-medium">{device.firmware || 'Unknown'}</span>
            </div>
            <div>
              <span className="text-gray-500 block">Connection Type</span>
              <span className="text-gray-900 font-medium">Lightning</span>
            </div>
            <div>
              <span className="text-gray-500 block">Connection Time</span>
              <span className="text-gray-900 font-medium">{device.connectionTime}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};