import React, { useState } from "react";
import { Doughnut } from "react-chartjs-2";
import { Chart, ArcElement } from "chart.js";
import styles from "./StatPage.module.css";
import Button from "./../../components/ui/button/button";

// Enregistrer les éléments nécessaires
Chart.register(ArcElement);

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

  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" },
  ];

  const pendingMembers = [
    { name: "Antoine Ordonneau" },
    { name: "Giovanni Josserand" },
    { name: "Quentin T'Jampens" },
  ];

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

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

  const chartData = {
    labels: ["Progress", "Background"],
    datasets: [
      {
        data: [participationRate, 100 - participationRate],
        backgroundColor: ["#1e60f9ff", "#ffffffff"],
        borderWidth: 0,
        weight:10,
        cutout: "90%",
        circumference: 360,
        rotation: -90,
      },
    ],
  };

  const chartOptions = {
    responsive: true,
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        enabled: false,
      },
    },
    animation: {
      animateScale: true,
      animateRotate: true,
    },
  };

  return (
    <div className={styles.container}>
      <div className={`${styles.leftBlock} glassCard`}>
        <div className={styles.participationHeader}>
          <div className={styles.partiText}>
          <label htmlFor="months">Taux de participation </label>
          <label htmlFor="months2">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>
        <div className={styles.chartContainer}>
          <div style={{ position: "relative", width: "100%", height: "100%" }}>
            <Doughnut data={chartData} options={chartOptions} />
            <div style={{
                position: "absolute",
                top: "50%",
                left: "50%",
                textAlign:"center",
                transform: "translate(-50%, -50%)",
                fontSize: "60px",
                fontWeight: "bold",
                color: "#333",
              }}
            >
              {participationRate}%
            </div>
          </div>
        </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
                    onClick={() => handleValidate(member.name)}
                    variant="primary"
                  >
                    Valider
                  </Button>
                  <Button
                    onClick={() => handleReject(member.name)}
                    variant="danger"
                  >
                    Refuser
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default StatPage;