import React, { useState } from "react";
import styles from "./StatPage.module.css";

function StatPage() {
  const [months, setMonths] = useState(3);
  const participationRate = 77;

  // les event incomplets
  const incompleteEvents = [
    { title: "Événement A", tasks: "Préparation des flyers" },
    { title: "Événement B", tasks: "Réservation de la salle" },
    { title: "Événement C", tasks: "Communication sur les réseaux" },
  ];
/* c la liste des membres en attente*/
  const pendingMembers = [
    { name: "Alice Dupont" },
    { name: "Bob Martin" },
    { name: "Charlie Durand" },
  ];

  const handleValidate = (name) => {
    console.log(`Valider ${name}`);
  };

  const handleReject = (name) => {
    console.log(`Refuser ${name}`);
  };

  return (
    <div className={styles.container}>
      <div className={`${styles.leftBlock} glassCard`}>
        <div className={styles.participationHeader}>
          <label htmlFor="months">Taux de participation depuis </label>
          <select
            id="months"
            value={months}
            onChange={(e) => setMonths(e.target.value)}
            className={styles.monthsDropdown}
          >
            <option value="1">1 mois</option>
            <option value="3">3 mois</option>
            <option value="6">6 mois</option>
            <option value="12">12 mois</option>
          </select>
        </div>
        <div className={styles.chartContainer}>
          <svg viewBox="0 0 100 100" className={styles.donutChart}>
            <circle
              cx="50"
              cy="50"
              r="40"
              fill="none"
              stroke="#e0e0e0"
              strokeWidth="20"
            />
            <circle
              cx="50"
              cy="50"
              r="40"
              fill="none"
              stroke="#07f60fff"
              strokeWidth="20"
              strokeDasharray={`${participationRate} 100`}
              transform="rotate(-90 50 50)"
            />
            <text x="50" y="50" textAnchor="middle" dy="5" fontSize="16">
              {participationRate}%
            </text>
          </svg>
        </div>
      </div>
      <div className={styles.rightSection}>
       
        <div className={`${styles.rightBlock} glassCard`}>
          <h2>Événements incomplets</h2>
          <div className={styles.eventsContainer}>
            {incompleteEvents.map((event, index) => (
              <div key={index} className={`glassCard ${styles.eventCard}`}>
                <h3>{event.title}</h3>
                <p>{event.tasks}</p>
              </div>
            ))}
          </div>
        </div>

        <div className={`${styles.rightBlock} glassCard`}>
          <h2>Membres en attente de validation</h2>
          <div className={styles.membersContainer}>
            {pendingMembers.map((member, index) => (
              <div key={index} className={`glassCard ${styles.memberCard}`}>
                <p>{member.name}</p>
                <div className={styles.buttonGroup}>
                  <button
                    className={styles.validateButton}
                    onClick={() => handleValidate(member.name)}
                  >
                    Valider
                  </button>
                  <button
                    className={styles.rejectButton}
                    onClick={() => handleReject(member.name)}
                  >
                    Refuser
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default StatPage;