import React from 'react';
import { getWorkflowStatusString } from '../utils/contract';

const WorkflowStatus = ({ status, isOwner, onAction, loading }) => {
  const workflowSteps = [
    { status: 0, label: "Enregistrement des électeurs" },
    { status: 1, label: "Enregistrement des propositions" },
    { status: 2, label: "Fin de l'enregistrement des propositions" },
    { status: 3, label: "Session de vote" },
    { status: 4, label: "Fin de la session de vote" },
    { status: 5, label: "Votes comptabilisés" }
  ];

  // Préparation des actions disponibles en fonction du statut actuel
  const getAvailableAction = () => {
    if (!isOwner) return null;

    switch (parseInt(status)) {
      case 0:
        return {
          label: "Démarrer l'enregistrement des propositions",
          action: "startProposalsRegistration",
          requireDuration: true
        };
      case 1:
        return {
          label: "Terminer l'enregistrement des propositions",
          action: "endProposalsRegistration"
        };
      case 2:
        return {
          label: "Démarrer la session de vote",
          action: "startVotingSession",
          requireDuration: true
        };
      case 3:
        return {
          label: "Terminer la session de vote",
          action: "endVotingSession"
        };
      case 4:
        return {
          label: "Comptabiliser les votes",
          action: "tallyVotes"
        };
      default:
        return null;
    }
  };

  const availableAction = getAvailableAction();
  const [duration, setDuration] = React.useState(60); // Durée par défaut: 60 minutes

  const handleActionClick = () => {
    if (availableAction.requireDuration) {
      onAction(availableAction.action, duration);
    } else {
      onAction(availableAction.action);
    }
  };

  return (
    <div className="card">
      <h2>Statut actuel: {getWorkflowStatusString(status)}</h2>
      
      <div className="workflow-status">
        {workflowSteps.map((step) => (
          <div 
            key={step.status} 
            className={`workflow-step ${parseInt(status) === step.status ? 'active' : ''} ${parseInt(status) > step.status ? 'completed' : ''}`}
          >
            <div className="step-number">{step.status + 1}</div>
            <div className="step-label">{step.label}</div>
          </div>
        ))}
      </div>
      
      {isOwner && availableAction && (
        <div className="admin-actions">
          {availableAction.requireDuration && (
            <div className="duration-input">
              <label htmlFor="duration">Durée (en minutes):</label>
              <input
                type="number"
                id="duration"
                className="input"
                value={duration}
                onChange={(e) => setDuration(e.target.value)}
                min="1"
              />
            </div>
          )}
          <button 
            className="button" 
            onClick={handleActionClick}
            disabled={loading}
          >
            {loading ? "Transaction en cours..." : availableAction.label}
          </button>
        </div>
      )}
    </div>
  );
};

export default WorkflowStatus;