import { FormGenerator } from '../FormGenerator/FormGenerator';
import { Popup, EditForm } from '../ui/Popup';
import { useWorkflowsLogic } from './workflowsLogic';
import { WorkflowsTableProps } from './workflowsTypes';
import styles from './WorkflowsTable.module.css';

function WorkflowsTable({ className = '' }: WorkflowsTableProps) {
  const logic = useWorkflowsLogic();

  // Show error state
  if (logic.error) {
    return (
      <div className={`${styles.workflowsTable} ${className}`}>
        <div className={styles.errorState}>
          <p>Error loading workflows: {logic.error}</p>
          <button onClick={logic.refetch} className={styles.retryButton}>
            Retry
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className={`${styles.workflowsTable} ${className}`}>
      <FormGenerator
        data={logic.workflows}
        columns={logic.columns}
        searchable={true}
        filterable={true}
        sortable={true}
        resizable={true}
        pagination={true}
        pageSize={10}
        loading={logic.loading}
        actions={logic.actions}
        onDelete={logic.handleDeleteSingle}
        onDeleteMultiple={logic.handleDeleteMultiple}
        onRefresh={logic.refetch}
        className={styles.workflowsFormGenerator}
        onRowClick={(workflow: any) => {
          // TODO: Navigate to workflow detail view
          console.log('Clicked workflow:', workflow);
        }}
      />

      {/* Edit Workflow Modal */}
      <Popup
        isOpen={logic.editModalOpen}
        title="Edit Workflow"
        onClose={logic.handleCancelEdit}
        size="small"
      >
        {logic.editingWorkflow && (
          <EditForm
            data={logic.editingWorkflow}
            fields={logic.editWorkflowFields}
            onSave={logic.handleSaveWorkflow}
            onCancel={logic.handleCancelEdit}
            saveButtonText="Save"
            cancelButtonText="Cancel"
          />
        )}
      </Popup>
    </div>
  );
}

export default WorkflowsTable;