import React, { useState } from "react";

export default function VotingSystem() {
  const [votes, setVotes] = useState({
    "Esakki Raj": 0,
    "Sedhu Vignesh": 0,
    Dhanush: 0,
    Siva: 0,
  });
  const [totalVotes, setTotalVotes] = useState(0);
  const [showResults, setShowResults] = useState(false);

  const vote = (candidate) => {
    setVotes((prev) => ({ ...prev, [candidate]: prev[candidate] + 1 }));
    setTotalVotes((prev) => prev + 1);
  };

  const reset = () => {
    setVotes({ "Esakki Raj": 0, "Sedhu Vignesh": 0, Dhanush: 0, Siva: 0 });
    setTotalVotes(0);
    setShowResults(false);
  };

  const style = `
    .container {
      font-family: Arial, sans-serif;
      max-width: 400px;
      margin: 40px auto;
      background: #f8f9fa;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      text-align: center;
    }
    h2 {
      color: #222;
      margin-bottom: 10px;
    }
    h3 {
      margin: 10px 0;
      color: #333;
    }
    .vote-btn {
      width: 100%;
      padding: 10px;
      margin: 6px 0;
      border: none;
      border-radius: 6px;
      font-size: 15px;
      color: white;
      cursor: pointer;
      transition: 0.2s;
    }
    .vote-btn:hover { opacity: 0.85; }
    .blue { background: #007bff; }
    .green { background: #28a745; }
    .purple { background: #6f42c1; }
    .orange { background: #fd7e14; }
    .yellow {
      background: #ffc107;
      color: #000;
      font-weight: bold;
      border: 2px solid #e0a800;
      margin-top: 12px;
    }
    .reset-btn {
      background: #dc3545;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
    }
    .reset-btn:hover { background: #c82333; }
    .results {
      background: #fff;
      border-radius: 8px;
      padding: 15px;
      margin-top: 10px;
      box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
    }
  `;

  return (
    <div className="container">
      <style>{style}</style>
      <h2>College Election</h2>

      {!showResults ? (
        <>
          <h3>Vote for President:</h3>
          <p>Total Votes: {totalVotes}</p>

          <button className="vote-btn blue" onClick={() => vote("Esakki Raj")}>
            Esakki Raj
          </button>
          <button
            className="vote-btn green"
            onClick={() => vote("Sedhu Vignesh")}
          >
            Sedhu Vignesh
          </button>
          <button className="vote-btn purple" onClick={() => vote("Dhanush")}>
            Dhanush
          </button>
          <button className="vote-btn orange" onClick={() => vote("Siva")}>
            Siva
          </button>

          <button className="vote-btn yellow" onClick={() => setShowResults(true)}>
            📊 Show Results
          </button>
        </>
      ) : (
        <div className="results">
          <h3>Election Results</h3>
          <p>Total Votes Cast: {totalVotes}</p>
          <p>Esakki Raj: {votes["Esakki Raj"]} votes</p>
          <p>Sedhu Vignesh: {votes["Sedhu Vignesh"]} votes</p>
          <p>Dhanush: {votes["Dhanush"]} votes</p>
          <p>Siva: {votes["Siva"]} votes</p>
          <button className="reset-btn" onClick={reset}>
            🔁 Reset Election
          </button>
        </div>
      )}
    </div>
  );
}