/**
 * WorkflowInsights Component
 * Shows actionable insights in a collapsible notification box
 * Placed between page title and navigation tabs
 */
import React, { useState } from 'react';
import { CheckCircleIcon, AlertIcon, InfoIcon, BoltIcon, CloseIcon } from '../../icons';

export interface WorkflowInsight {
  type: 'success' | 'warning' | 'info' | 'action';
  message: string;
}

interface WorkflowInsightsProps {
  insights: WorkflowInsight[];
  className?: string;
}

export const WorkflowInsights: React.FC<WorkflowInsightsProps> = ({ insights, className = '' }) => {
  const [isCollapsed, setIsCollapsed] = useState(false);

  if (!insights || insights.length === 0 || isCollapsed) return null;

  // Determine notification color based on most critical insight type
  const hasCritical = insights.some(i => i.type === 'warning' || i.type === 'action');
  const hasSuccess = insights.some(i => i.type === 'success');
  
  const notificationColors = hasCritical 
    ? {
        bg: 'bg-amber-50 dark:bg-amber-500/10',
        border: 'border-amber-300 dark:border-amber-700',
        iconBg: 'bg-amber-100 dark:bg-amber-500/20',
      }
    : hasSuccess
    ? {
        bg: 'bg-green-50 dark:bg-green-500/10',
        border: 'border-green-300 dark:border-green-700',
        iconBg: 'bg-green-100 dark:bg-green-500/20',
      }
    : {
        bg: 'bg-blue-50 dark:bg-blue-500/10',
        border: 'border-blue-300 dark:border-blue-700',
        iconBg: 'bg-blue-100 dark:bg-blue-500/20',
      };

  const getIcon = (type: string) => {
    switch (type) {
      case 'success':
        return <CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400" />;
      case 'warning':
        return <AlertIcon className="w-5 h-5 text-amber-600 dark:text-amber-400" />;
      case 'action':
        return <BoltIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />;
      default:
        return <InfoIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />;
    }
  };

  return (
    <div className={`relative ${className}`}>
      <div className={`flex items-start gap-3 px-4 py-3 rounded-lg border ${notificationColors.bg} ${notificationColors.border} shadow-sm`}>
        {/* Icon */}
        <div className={`flex-shrink-0 p-1.5 rounded-md ${notificationColors.iconBg}`}>
          {getIcon(insights[0].type)}
        </div>
        
        {/* Content */}
        <div className="flex-1 space-y-2">
          {insights.map((insight, index) => (
            <div key={index} className="flex items-start gap-2">
              {insights.length > 1 && (
                <span className="text-gray-400 dark:text-gray-500 text-base font-normal mt-0.5">•</span>
              )}
              <p className="text-base font-normal text-gray-700 dark:text-gray-300">
                {insight.message}
              </p>
            </div>
          ))}
        </div>

        {/* Close button */}
        <button
          onClick={() => setIsCollapsed(true)}
          className="flex-shrink-0 p-1 rounded hover:bg-gray-200/50 dark:hover:bg-gray-700/50 transition-colors"
          aria-label="Dismiss"
        >
          <CloseIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
        </button>
      </div>
    </div>
  );
};
