import React from 'react';
import type { MessageBlock } from '@/store/commStore';

interface ActionCardBlockProps {
  block: MessageBlock;
}

interface ActionItem {
  label: string;
  action: string;
  type?: 'primary' | 'secondary';
}

const ActionCardBlock: React.FC<ActionCardBlockProps> = ({ block }) => {
  const { title, body, actions } = block.block_data;

  const cardTitle: string = title || '';
  const cardBody: string = body || '';
  const actionList: ActionItem[] = Array.isArray(actions) ? actions : [];

  const handleActionClick = (action: ActionItem) => {
    if (action.action === 'dismiss') {
      // Frontend handles dismiss — no-op here, parent component can wire up
      return;
    }
    // Validate URL — only allow http: and https: protocols to prevent javascript: URLs
    const url = action.action;
    try {
      const parsed = new URL(url);
      if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return;
    } catch {
      return; // Invalid URL
    }
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  return (
    <div className="border border-secondary-200 rounded-lg p-4 shadow-sm bg-white space-y-2">
      {cardTitle && (
        <h4 className="text-sm font-semibold text-secondary-800">{cardTitle}</h4>
      )}
      {cardBody && (
        <p className="text-sm text-secondary-600">{cardBody}</p>
      )}
      {actionList.length > 0 && (
        <div className="flex flex-wrap gap-2 pt-1">
          {actionList.map((action, idx) => {
            const isPrimary = action.type !== 'secondary';
            return (
              <button
                key={idx}
                onClick={() => handleActionClick(action)}
                className={
                  isPrimary
                    ? 'px-3 py-1.5 text-sm rounded-lg bg-primary-600 text-white hover:bg-primary-700 transition-colors'
                    : 'px-3 py-1.5 text-sm rounded-lg bg-secondary-100 text-secondary-700 hover:bg-secondary-200 transition-colors'
                }
              >
                {action.label || 'Aktion'}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
};

export default ActionCardBlock;