import React, { useState, useEffect } from 'react';

const ProposalManagement = ({ 
  isVoter, 
  submitProposal, 
  fetchProposals, 
  currentStatus, 
  proposals,
  loading 
}) => {
  const [proposalDescription, setProposalDescription] = useState('');
  const [error, setError] = useState('');

  useEffect(() => {
    if (isVoter && parseInt(currentStatus) >= 1) {
      fetchProposals();
    }
  }, [isVoter, currentStatus, fetchProposals]);

  const handleSubmitProposal = () => {
    if (!proposalDescription.trim()) {
      setError('La description de la proposition ne peut pas être vide.');
      return;
    }
    
    setError('');
    submitProposal(proposalDescription);
    setProposalDescription('');
  };

  // Si l'utilisateur n'est pas un électeur ou si on n'est pas encore à la phase de propositions
  if (!isVoter || parseInt(currentStatus) < 1) {
    return null;
  }

  return (
    <div className="card">
      <h2>Propositions</h2>
      
      {parseInt(currentStatus) === 1 && (
        <div className="voter-actions">
          <h3>Soumettre une proposition</h3>
          <textarea
            className="input"
            placeholder="Description de votre proposition"
            value={proposalDescription}
            onChange={(e) => setProposalDescription(e.target.value)}
            rows={4}
          />
          {error && <p className="status error">{error}</p>}
          <button
            className="button"
            onClick={handleSubmitProposal}
            disabled={loading || !proposalDescription.trim()}
          >
            {loading ? "Transaction en cours..." : "Soumettre la proposition"}
          </button>
        </div>
      )}
      
      {proposals.length > 0 ? (
        <div className="proposals-list">
          <h3>Liste des propositions ({proposals.length})</h3>
          <ul className="proposal-list">
            {proposals.map((proposal, index) => (
              <li key={index + 1} className="proposal-item">
                <strong>Proposition #{index + 1}:</strong> {proposal.description}
                {parseInt(currentStatus) >= 5 && (
                  <div className="vote-count">
                    <span>{proposal.voteCount} vote(s)</span>
                  </div>
                )}
              </li>
            ))}
          </ul>
        </div>
      ) : (
        parseInt(currentStatus) > 1 && (
          <p>Aucune proposition n'a été soumise.</p>
        )
      )}
    </div>
  );
};

export default ProposalManagement;