/**
 * Insights Panel Component
 * Displays auto-generated insights and alerts
 */
import React from 'react';
import { RunInsight } from '../../../types/automation';
import { CheckCircleIcon, ExclamationTriangleIcon, InfoIcon, XCircleIcon } from '../../../icons';

interface InsightsPanelProps {
  insights: RunInsight[];
}

const InsightsPanel: React.FC<InsightsPanelProps> = ({ insights }) => {
  if (!insights || insights.length === 0) {
    return null;
  }

  const getInsightStyle = (severity: string) => {
    switch (severity) {
      case 'error':
        return 'bg-error-50 dark:bg-error-900/20 border-error-200 dark:border-error-800';
      case 'warning':
        return 'bg-warning-50 dark:bg-warning-900/20 border-warning-200 dark:border-warning-800';
      case 'info':
      default:
        return 'bg-brand-50 dark:bg-brand-900/20 border-brand-200 dark:border-brand-800';
    }
  };

  const getInsightIcon = (type: string) => {
    switch (type) {
      case 'success':
        return <CheckCircleIcon className="size-5 text-success-600 dark:text-success-400" />;
      case 'error':
        return <XCircleIcon className="size-5 text-error-600 dark:text-error-400" />;
      case 'warning':
      case 'variance':
        return <ExclamationTriangleIcon className="size-5 text-warning-600 dark:text-warning-400" />;
      default:
        return <InfoIcon className="size-5 text-brand-600 dark:text-brand-400" />;
    }
  };

  return (
    <div className="bg-white dark:bg-gray-900 rounded-xl p-6">
      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Insights</h3>
      <div className="space-y-3">
        {insights.map((insight, idx) => (
          <div
            key={idx}
            className={`flex items-start gap-3 p-4 rounded-lg border ${getInsightStyle(insight.severity)}`}
          >
            <div className="flex-shrink-0 mt-0.5">
              {getInsightIcon(insight.type)}
            </div>
            <div className="flex-1 text-sm text-gray-800 dark:text-gray-200">
              {insight.message}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default InsightsPanel;