'use client';

import { type ActionItem } from '@/lib/copilot';

interface ActionPreviewProps {
  actions: ActionItem[];
  onConfirm: (action: ActionItem) => void;
  onDismiss: (action: ActionItem) => void;
}

const ACTION_LABELS: Record<string, string> = {
  search_vehicles: 'Fahrzeuge durchsuchen',
  search_contacts: 'Kontakte durchsuchen',
  get_sale_overview: 'Verkaufsuebersicht abrufen',
  create_vehicle: 'Fahrzeug anlegen',
  create_contact: 'Kontakt anlegen',
};

export function ActionPreview({ actions, onConfirm, onDismiss }: ActionPreviewProps) {
  if (actions.length === 0) return null;

  return (
    <div className="border border-yellow-300 bg-yellow-50 rounded-lg p-3 space-y-2" data-testid="action-preview">
      <p className="font-semibold text-yellow-800">
        Der Copilot moechte folgende Aktionen ausfuehren:
      </p>
      {actions.map((action, idx) => (
        <div
          key={`${action.type}-${idx}`}
          className="flex items-center justify-between bg-white rounded p-2 border border-yellow-200"
          data-testid={`action-item-${idx}`}
        >
          <div className="flex-1">
            <p className="font-medium">
              {ACTION_LABELS[action.type] || action.type}
            </p>
            <p className="text-sm text-gray-600">
              {Object.entries(action.params).map(([key, value]) =>
                `${key}: ${String(value)}`
              ).join(', ') || 'Keine Parameter'}
            </p>
          </div>
          <div className="flex gap-2 ml-2">
            <button
              onClick={() => onConfirm(action)}
              className="bg-green-600 text-white px-3 py-1 rounded text-sm hover:bg-green-700"
              data-testid={`confirm-action-${idx}`}
            >
              Bestaetigen
            </button>
            <button
              onClick={() => onDismiss(action)}
              className="bg-gray-300 text-gray-700 px-3 py-1 rounded text-sm hover:bg-gray-400"
              data-testid={`dismiss-action-${idx}`}
            >
              Ablehnen
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}