// frontend/src/components/alerts/AlertCard.tsx
/**
 * Individual alert/recommendation card component
 * Displays alert details with appropriate styling and actions
 */

import React, { useState } from 'react';
import { AlertItem, ItemSeverity, ItemType } from '../../types/alerts';
import { formatDistanceToNow } from 'date-fns';
import { es } from 'date-fns/locale';

interface AlertCardProps {
  item: AlertItem;
  onAcknowledge: (itemId: string) => void;
  onResolve: (itemId: string) => void;
  compact?: boolean;
  showActions?: boolean;
}

const getSeverityConfig = (severity: ItemSeverity, itemType: ItemType) => {
  if (itemType === 'recommendation') {
    switch (severity) {
      case 'high':
        return {
          color: 'bg-blue-50 border-blue-200 text-blue-900',
          icon: '💡',
          badge: 'bg-blue-100 text-blue-800'
        };
      case 'medium':
        return {
          color: 'bg-blue-50 border-blue-100 text-blue-800',
          icon: '💡',
          badge: 'bg-blue-50 text-blue-600'
        };
      case 'low':
        return {
          color: 'bg-gray-50 border-gray-200 text-gray-700',
          icon: '💡',
          badge: 'bg-gray-100 text-gray-600'
        };
      default:
        return {
          color: 'bg-blue-50 border-blue-200 text-blue-900',
          icon: '💡',
          badge: 'bg-blue-100 text-blue-800'
        };
    }
  } else {
    switch (severity) {
      case 'urgent':
        return {
          color: 'bg-red-50 border-red-300 text-red-900',
          icon: '🚨',
          badge: 'bg-red-100 text-red-800',
          pulse: true
        };
      case 'high':
        return {
          color: 'bg-orange-50 border-orange-200 text-orange-900',
          icon: '⚠️',
          badge: 'bg-orange-100 text-orange-800'
        };
      case 'medium':
        return {
          color: 'bg-yellow-50 border-yellow-200 text-yellow-900',
          icon: '🔔',
          badge: 'bg-yellow-100 text-yellow-800'
        };
      case 'low':
        return {
          color: 'bg-green-50 border-green-200 text-green-900',
          icon: 'ℹ️',
          badge: 'bg-green-100 text-green-800'
        };
      default:
        return {
          color: 'bg-gray-50 border-gray-200 text-gray-700',
          icon: '📋',
          badge: 'bg-gray-100 text-gray-600'
        };
    }
  }
};

const getStatusConfig = (status: string) => {
  switch (status) {
    case 'acknowledged':
      return {
        color: 'bg-blue-100 text-blue-800',
        label: 'Reconocido'
      };
    case 'resolved':
      return {
        color: 'bg-green-100 text-green-800',
        label: 'Resuelto'
      };
    default:
      return {
        color: 'bg-gray-100 text-gray-800',
        label: 'Activo'
      };
  }
};

export const AlertCard: React.FC<AlertCardProps> = ({
  item,
  onAcknowledge,
  onResolve,
  compact = false,
  showActions = true
}) => {
  const [isExpanded, setIsExpanded] = useState(false);
  const [actionLoading, setActionLoading] = useState<string | null>(null);
  
  const severityConfig = getSeverityConfig(item.severity, item.item_type);
  const statusConfig = getStatusConfig(item.status);
  
  const handleAction = async (action: () => void, actionType: string) => {
    setActionLoading(actionType);
    try {
      await action();
    } finally {
      setActionLoading(null);
    }
  };
  
  const timeAgo = formatDistanceToNow(new Date(item.timestamp), {
    addSuffix: true,
    locale: es
  });
  
  return (
    <div className={`
      rounded-lg border-2 transition-all duration-200 hover:shadow-md
      ${severityConfig.color}
      ${severityConfig.pulse ? 'animate-pulse' : ''}
      ${item.status !== 'active' ? 'opacity-75' : ''}
    `}>
      {/* Header */}
      <div className="p-4">
        <div className="flex items-start justify-between">
          <div className="flex items-start space-x-3 flex-1 min-w-0">
            {/* Icon and Type Badge */}
            <div className="flex-shrink-0">
              <span className="text-2xl">{severityConfig.icon}</span>
            </div>
            
            <div className="flex-1 min-w-0">
              {/* Title and Badges */}
              <div className="flex items-start justify-between mb-2">
                <div className="flex-1 min-w-0">
                  <h3 className="text-lg font-semibold truncate">
                    {item.title}
                  </h3>
                  <div className="flex items-center space-x-2 mt-1">
                    <span className={`
                      inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                      ${severityConfig.badge}
                    `}>
                      {item.item_type === 'alert' ? 'Alerta' : 'Recomendación'} - {item.severity}
                    </span>
                    <span className={`
                      inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                      ${statusConfig.color}
                    `}>
                      {statusConfig.label}
                    </span>
                    <span className="text-xs text-gray-500">
                      {item.service}
                    </span>
                  </div>
                </div>
                
                {/* Expand Button */}
                {!compact && (
                  <button
                    onClick={() => setIsExpanded(!isExpanded)}
                    className="ml-2 text-gray-400 hover:text-gray-600 transition-colors"
                  >
                    <svg
                      className={`w-5 h-5 transform transition-transform ${
                        isExpanded ? 'rotate-180' : ''
                      }`}
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                    </svg>
                  </button>
                )}
              </div>
              
              {/* Message */}
              <p className={`text-sm ${compact ? 'line-clamp-2' : ''}`}>
                {item.message}
              </p>
              
              {/* Timestamp */}
              <p className="text-xs text-gray-500 mt-2">
                {timeAgo} • {new Date(item.timestamp).toLocaleString('es-ES')}
              </p>
            </div>
          </div>
        </div>
        
        {/* Quick Actions */}
        {showActions && item.status === 'active' && (
          <div className="flex items-center space-x-2 mt-3">
            <button
              onClick={() => handleAction(() => onAcknowledge(item.id), 'acknowledge')}
              disabled={actionLoading === 'acknowledge'}
              className="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
            >
              {actionLoading === 'acknowledge' ? (
                <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-blue-700" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
              ) : (
                <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
              )}
              Reconocer
            </button>
            
            <button
              onClick={() => handleAction(() => onResolve(item.id), 'resolve')}
              disabled={actionLoading === 'resolve'}
              className="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-green-700 bg-green-100 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50"
            >
              {actionLoading === 'resolve' ? (
                <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-green-700" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
              ) : (
                <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              )}
              Resolver
            </button>
          </div>
        )}
      </div>
      
      {/* Expanded Details */}
      {isExpanded && (
        <div className="border-t border-gray-200 px-4 py-3 bg-gray-50 bg-opacity-50">
          {/* Actions */}
          {item.actions.length > 0 && (
            <div className="mb-3">
              <h4 className="text-sm font-medium text-gray-700 mb-2">Acciones sugeridas:</h4>
              <ul className="list-disc list-inside space-y-1">
                {item.actions.map((action, index) => (
                  <li key={index} className="text-sm text-gray-600">
                    {action}
                  </li>
                ))}
              </ul>
            </div>
          )}
          
          {/* Metadata */}
          {Object.keys(item.metadata).length > 0 && (
            <div className="mb-3">
              <h4 className="text-sm font-medium text-gray-700 mb-2">Detalles técnicos:</h4>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                {Object.entries(item.metadata).map(([key, value]) => (
                  <div key={key} className="text-sm">
                    <span className="font-medium text-gray-600">{key}:</span>{' '}
                    <span className="text-gray-800">
                      {typeof value === 'object' ? JSON.stringify(value) : String(value)}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          )}
          
          {/* Acknowledgment/Resolution Info */}
          {(item.acknowledged_at || item.resolved_at) && (
            <div className="text-xs text-gray-500 space-y-1">
              {item.acknowledged_at && (
                <p>
                  Reconocido: {new Date(item.acknowledged_at).toLocaleString('es-ES')}
                  {item.acknowledged_by && ` por ${item.acknowledged_by}`}
                </p>
              )}
              {item.resolved_at && (
                <p>
                  Resuelto: {new Date(item.resolved_at).toLocaleString('es-ES')}
                  {item.resolved_by && ` por ${item.resolved_by}`}
                </p>
              )}
            </div>
          )}
        </div>
      )}
    </div>
  );
};