bakery-ia/frontend/src/components/dashboard/ActionQueueCard.tsx

// ================================================================
// frontend/src/components/dashboard/ActionQueueCard.tsx
// ================================================================
/**
 * Action Queue Card - What needs your attention right now
 *
 * Prioritized list of actions the user needs to take, with context
 * about why each action is needed and what happens if they don't do it.
 */

import React, { useState } from 'react';
import {
  FileText,
  AlertCircle,
  CheckCircle2,
  Eye,
  Edit,
  Clock,
  Euro,
  ChevronDown,
  ChevronUp,
} from 'lucide-react';
import { ActionItem, ActionQueue } from '../../api/hooks/newDashboard';
import { useReasoningFormatter } from '../../hooks/useReasoningTranslation';
import { useTranslation } from 'react-i18next';

interface ActionQueueCardProps {
  actionQueue: ActionQueue;
  loading?: boolean;
  onApprove?: (actionId: string) => void;
  onViewDetails?: (actionId: string) => void;
  onModify?: (actionId: string) => void;
}

const urgencyConfig = {
  critical: {
    bg: 'bg-red-50',
    border: 'border-red-300',
    badge: 'bg-red-100 text-red-800',
    icon: AlertCircle,
  },
  important: {
    bg: 'bg-amber-50',
    border: 'border-amber-300',
    badge: 'bg-amber-100 text-amber-800',
    icon: AlertCircle,
  },
  normal: {
    bg: 'bg-blue-50',
    border: 'border-blue-300',
    badge: 'bg-blue-100 text-blue-800',
    icon: FileText,
  },
};

function ActionItemCard({
  action,
  onApprove,
  onViewDetails,
  onModify,
}: {
  action: ActionItem;
  onApprove?: (id: string) => void;
  onViewDetails?: (id: string) => void;
  onModify?: (id: string) => void;
}) {
  const [expanded, setExpanded] = useState(false);
  const config = urgencyConfig[action.urgency as keyof typeof urgencyConfig] || urgencyConfig.normal;
  const UrgencyIcon = config.icon;
  const { formatPOAction } = useReasoningFormatter();
  const { t } = useTranslation('reasoning');

  // Translate reasoning_data (or fallback to deprecated text fields)
  const { reasoning, consequence, severity } = action.reasoning_data
    ? formatPOAction(action.reasoning_data)
    : { reasoning: action.reasoning || '', consequence: action.consequence || '', severity: '' };

  return (
    <div
      className={`${config.bg} ${config.border} border-2 rounded-lg p-4 md:p-5 transition-all duration-200 hover:shadow-md`}
    >
      {/* Header */}
      <div className="flex items-start gap-3 mb-3">
        <UrgencyIcon className={`w-6 h-6 flex-shrink-0 ${config.badge.split(' ')[1]}`} />
        <div className="flex-1 min-w-0">
          <div className="flex items-start justify-between gap-2 mb-1">
            <h3 className="font-bold text-lg">{action.title || 'Action Required'}</h3>
            <span className={`${config.badge} px-2 py-1 rounded text-xs font-semibold uppercase flex-shrink-0`}>
              {action.urgency || 'normal'}
            </span>
          </div>
          <p className="text-sm text-gray-600">{action.subtitle || ''}</p>
        </div>
      </div>

      {/* Amount (for POs) */}
      {action.amount && (
        <div className="flex items-center gap-2 mb-3 text-lg font-bold">
          <Euro className="w-5 h-5" />
          <span>
            {action.amount.toFixed(2)} {action.currency}
          </span>
        </div>
      )}

      {/* Reasoning (always visible) */}
      <div className="bg-white rounded-md p-3 mb-3">
        <p className="text-sm font-medium text-gray-700 mb-1">
          {t('jtbd.action_queue.why_needed')}
        </p>
        <p className="text-sm text-gray-600">{reasoning}</p>
      </div>

      {/* Consequence (expandable) */}
      {consequence && (
        <>
          <button
            onClick={() => setExpanded(!expanded)}
            className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 transition-colors mb-3 w-full"
          >
            {expanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
            <span className="font-medium">{t('jtbd.action_queue.what_if_not')}</span>
          </button>

          {expanded && (
            <div className="bg-amber-50 border border-amber-200 rounded-md p-3 mb-3">
              <p className="text-sm text-amber-900">{consequence}</p>
              {severity && (
                <span className="text-xs font-semibold text-amber-900 mt-1 block">
                  {severity}
                </span>
              )}
            </div>
          )}
        </>
      )}

      {/* Time Estimate */}
      <div className="flex items-center gap-2 text-xs text-gray-500 mb-4">
        <Clock className="w-4 h-4" />
        <span>
          {t('jtbd.action_queue.estimated_time')}: {action.estimatedTimeMinutes || 5} min
        </span>
      </div>

      {/* Action Buttons */}
      <div className="flex flex-wrap gap-2">
        {(action.actions || []).map((button, index) => {
          const buttonStyles = {
            primary: 'bg-blue-600 hover:bg-blue-700 text-white',
            secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800',
            tertiary: 'bg-white hover:bg-gray-50 text-gray-700 border border-gray-300',
          };

          const handleClick = () => {
            if (button.action === 'approve' && onApprove) {
              onApprove(action.id);
            } else if (button.action === 'view_details' && onViewDetails) {
              onViewDetails(action.id);
            } else if (button.action === 'modify' && onModify) {
              onModify(action.id);
            }
          };

          return (
            <button
              key={index}
              onClick={handleClick}
              className={`${buttonStyles[button.type]} px-4 py-2 rounded-lg font-semibold text-sm transition-colors duration-200 flex items-center gap-2 min-h-[44px]`}
            >
              {button.action === 'approve' && <CheckCircle2 className="w-4 h-4" />}
              {button.action === 'view_details' && <Eye className="w-4 h-4" />}
              {button.action === 'modify' && <Edit className="w-4 h-4" />}
              {button.label}
            </button>
          );
        })}
      </div>
    </div>
  );
}

export function ActionQueueCard({
  actionQueue,
  loading,
  onApprove,
  onViewDetails,
  onModify,
}: ActionQueueCardProps) {
  const [showAll, setShowAll] = useState(false);
  const { t } = useTranslation('reasoning');

  if (loading || !actionQueue) {
    return (
      <div className="bg-white rounded-xl shadow-md p-6">
        <div className="animate-pulse space-y-4">
          <div className="h-6 bg-gray-200 rounded w-1/2"></div>
          <div className="h-32 bg-gray-200 rounded"></div>
          <div className="h-32 bg-gray-200 rounded"></div>
        </div>
      </div>
    );
  }

  if (!actionQueue.actions || actionQueue.actions.length === 0) {
    return (
      <div className="bg-green-50 border-2 border-green-200 rounded-xl p-8 text-center">
        <CheckCircle2 className="w-16 h-16 text-green-600 mx-auto mb-4" />
        <h3 className="text-xl font-bold text-green-900 mb-2">
          {t('jtbd.action_queue.all_caught_up')}
        </h3>
        <p className="text-green-700">{t('jtbd.action_queue.no_actions')}</p>
      </div>
    );
  }

  const displayedActions = showAll ? actionQueue.actions : actionQueue.actions.slice(0, 3);

  return (
    <div className="bg-white rounded-xl shadow-md p-6">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-2xl font-bold text-gray-900">{t('jtbd.action_queue.title')}</h2>
        {(actionQueue.totalActions || 0) > 3 && (
          <span className="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-semibold">
            {actionQueue.totalActions || 0} {t('jtbd.action_queue.total')}
          </span>
        )}
      </div>

      {/* Summary Badges */}
      {((actionQueue.criticalCount || 0) > 0 || (actionQueue.importantCount || 0) > 0) && (
        <div className="flex flex-wrap gap-2 mb-6">
          {(actionQueue.criticalCount || 0) > 0 && (
            <span className="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-semibold">
              {actionQueue.criticalCount || 0} {t('jtbd.action_queue.critical')}
            </span>
          )}
          {(actionQueue.importantCount || 0) > 0 && (
            <span className="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm font-semibold">
              {actionQueue.importantCount || 0} {t('jtbd.action_queue.important')}
            </span>
          )}
        </div>
      )}

      {/* Action Items */}
      <div className="space-y-4">
        {displayedActions.map((action) => (
          <ActionItemCard
            key={action.id}
            action={action}
            onApprove={onApprove}
            onViewDetails={onViewDetails}
            onModify={onModify}
          />
        ))}
      </div>

      {/* Show More/Less */}
      {(actionQueue.totalActions || 0) > 3 && (
        <button
          onClick={() => setShowAll(!showAll)}
          className="w-full mt-4 py-3 bg-gray-100 hover:bg-gray-200 rounded-lg font-semibold text-gray-700 transition-colors duration-200"
        >
          {showAll
            ? t('jtbd.action_queue.show_less')
            : t('jtbd.action_queue.show_more', { count: (actionQueue.totalActions || 3) - 3 })}
        </button>
      )}
    </div>
  );
}