import React from 'react';
import { IoIosPlay } from 'react-icons/io';
import { useNavigate } from 'react-router-dom';
import { useLanguage } from '../../../../providers/language/LanguageContext';
import { useWorkflowSelection } from '../../../../contexts/WorkflowSelectionContext';
import styles from '../ActionButton.module.css';

export interface PlayActionButtonProps<T = any> {
  row: T;
  onPlay?: (row: T) => Promise<void> | void;
  disabled?: boolean | { disabled: boolean; message?: string };
  loading?: boolean;
  className?: string;
  title?: string;
  hookData?: any; // Contains all hook data including operations
  // Field mappings
  idField?: string; // Field name for the unique identifier
  nameField?: string; // Field name for display name
  contentField?: string; // Field name for content (e.g., 'content' for prompts, 'prompt' for workflows)
  // Navigation
  navigateTo?: string; // Path to navigate to after selection (default: 'start/dashboard')
  // Behavior
  mode?: 'workflow' | 'prompt'; // 'workflow' selects workflow, 'prompt' sets input value
}

export function PlayActionButton<T = any>({
  row,
  onPlay,
  disabled = false,
  loading = false,
  className = '',
  title,
  hookData,
  idField = 'id',
  nameField = 'name',
  contentField = 'content',
  navigateTo = 'start/dashboard',
  mode = 'prompt'
}: PlayActionButtonProps<T>) {
  const { t } = useLanguage();
  const navigate = useNavigate();
  const { selectWorkflow } = useWorkflowSelection();
  
  // Extract disabled state and tooltip message
  const isDisabled = typeof disabled === 'boolean' ? disabled : disabled?.disabled || false;
  const disabledMessage = typeof disabled === 'object' ? disabled?.message : undefined;

  const handleClick = async (e: React.MouseEvent) => {
    e.stopPropagation();
    if (!isDisabled && !loading) {
      try {
        // Call the onPlay callback if provided
        if (onPlay) {
          await onPlay(row);
        }

        if (mode === 'workflow') {
          // Workflow mode: select workflow and navigate
          const workflowId = (row as any)[idField];
          if (!workflowId) {
            console.error('Workflow ID not found in row');
            return;
          }
          selectWorkflow(workflowId);
        } else {
          // Prompt mode: set input value in dashboard
          const content = (row as any)[contentField];
          if (content && typeof content === 'string') {
            // Dispatch event to set dashboard input value
            window.dispatchEvent(new CustomEvent('dashboardSetInput', { 
              detail: { value: content } 
            }));
          }
        }

        // Navigate to dashboard (or specified path)
        navigate(`/${navigateTo}`);
      } catch (error: any) {
        console.error('Error in PlayActionButton:', error);
      }
    }
  };

  const buttonTitle = title || (mode === 'workflow' 
    ? t('workflows.action.play', 'Play') 
    : t('prompts.action.start', 'Start Prompt'));
  const isLoading = loading;
  const finalTitle = isDisabled && disabledMessage ? disabledMessage : buttonTitle;

  return (
    <button
      onClick={handleClick}
      className={`${styles.actionButton} ${styles.play} ${isLoading ? styles.loading : ''} ${isDisabled ? styles.disabled : ''} ${className}`}
      title={finalTitle}
      disabled={isDisabled || isLoading}
    >
      <span className={styles.actionIcon}>
        {isLoading ? '⏳' : <IoIosPlay />}
      </span>
    </button>
  );
}

export default PlayActionButton;