import React, { useState } from 'react';

const TestPoll = () => {
  const [selected, setSelected] = useState('opt-1');
  const [submitted, setSubmitted] = useState(false);

  const options = [
    { id: 'opt-1', label: 'Absolutely love it! 🚀' },
    { id: 'opt-2', label: 'It’s pretty cool ⭐' },
    { id: 'opt-3', label: 'Needs more polish 🔧' },
    { id: 'opt-4', label: 'Not my vibe 🌑' },
  ];

  if (submitted) {
    return (
      <div className="flex h-full w-full flex-col items-center justify-center text-white animate-fade-in">
        <h2 className="text-3xl font-bold mb-2">Thank You!</h2>
        <p className="text-blue-200">Your feedback has been recorded.</p>
        <button 
            onClick={() => setSubmitted(false)}
            className="mt-6 text-sm text-white/50 hover:text-white underline decoration-dashed"
        >
            Reset Test
        </button>
      </div>
    );
  }

  return (
    <div className="flex h-full w-full items-center justify-center p-4">
      <div className="w-full max-w-lg rounded-2xl border border-white/10 bg-black/40 backdrop-blur-xl p-8 shadow-2xl">
        <h2 className="mb-6 text-2xl font-bold text-white">
          How is the new interface?
        </h2>

        <ul className="space-y-3">
          {options.map((option) => (
            <li key={option.id} className="relative group">
              
              {/* Hidden Input */}
              <input
                type="radio"
                id={option.id}
                name="poll"
                value={option.id}
                checked={selected === option.id}
                onChange={() => setSelected(option.id)}
                className="peer absolute opacity-0" 
              />

              {/* Styled Label */}
              <label
                htmlFor={option.id}
                className={`
                  relative block cursor-pointer overflow-hidden rounded-xl py-3 pl-12 pr-4 text-lg font-medium
                  transition-all duration-300 ease-out border border-transparent
                  
                  /* Default Text Color (Unselected) */
                  text-slate-400

                  /* Selected: Gradient Text & Background Highlight */
                  peer-checked:bg-white/5 peer-checked:border-white/10
                  peer-checked:bg-gradient-to-r peer-checked:from-white peer-checked:to-blue-400 
                  peer-checked:bg-clip-text peer-checked:text-transparent
                  
                  /* Outer Circle */
                  before:absolute before:left-4 before:top-1/2 before:h-5 before:w-5 
                  before:-translate-y-1/2 before:rounded-full 
                  before:border-2 before:border-slate-500 before:content-['']
                  before:transition-colors
                  
                  /* Selected Circle Animation */
                  peer-checked:before:border-blue-400 peer-checked:before:shadow-[0_0_10px_rgba(96,165,250,0.5)]

                  /* Inner Dot */
                  after:absolute after:left-4 after:top-1/2 after:h-0 after:w-0 
                  after:-translate-y-1/2 after:rounded-full 
                  after:bg-blue-400 after:content-[''] after:transition-all after:duration-300
                  
                  /* Selected Inner Dot Expansion */
                  peer-checked:after:h-2.5 peer-checked:after:w-2.5
                `}
              >
                {option.label}
              </label>

              {/* The Guiding Arrow */}
              <span 
                className={`
                  pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 
                  text-blue-400 opacity-0 transition-all duration-500
                  translate-x-4
                  
                  peer-checked:opacity-100 peer-checked:translate-x-0
                  peer-checked:animate-pulse
                `}
              >
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor" className="w-5 h-5">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
                </svg>
              </span>
            </li>
          ))}
        </ul>

        <button
          onClick={() => setSubmitted(true)}
          className="mt-8 w-full rounded-lg bg-blue-600 py-3 font-semibold text-white transition-all hover:bg-blue-500 hover:shadow-[0_0_20px_rgba(37,99,235,0.5)] active:scale-95"
        >
          Submit Vote
        </button>
      </div>
    </div>
  );
};

export default TestPoll;