import React, { useState } from 'react';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

const TestUploading = () => {
  const [percentage, setPercentage] = useState(50);

  // Design Variables from your SCSS
  const darkColor = '#28404e';
  const lightColor = '#27e1ae';

  return (
    <div className="flex flex-col items-center justify-center w-full min-h-screen bg-[#28404e] font-sans text-white">
      
      {/* Container logic */}
      <div className="flex flex-col items-center w-[200px]">
        
        {/* Title */}
        {/* SCSS: text-shadow, animation: title 0.5s infinite alternate linear */}
        <div className="text-[22px] font-semibold text-center py-[17px] px-[15px] animate-pulse drop-shadow-md">
          UPLOADING
        </div>

        {/* Progress Bar Container */}
        <div className="relative w-[200px] h-[200px] flex items-center justify-center">
          
          {/* The Progress Bar Library */}
          <div className="w-[114px] h-[114px]">
            <CircularProgressbar
              value={percentage}
              text={`${percentage}%`}
              strokeWidth={8}
              styles={buildStyles({
                // Rotation of path and trail, in number of turns (0-1)
                rotation: 0.75, // Rotates to start like your SVG (approx -90deg)
                
                // Whether to use rounded or flat corners on the ends
                strokeLinecap: 'round',
                
                // Text size
                textSize: '24px',
                
                // Colors
                pathColor: lightColor,
                textColor: '#fff',
                trailColor: 'transparent', // Your original didn't have a background trail
                backgroundColor: 'transparent',
              })}
            />
          </div>
          
          {/* Custom CSS for the text position to match your SCSS "top: 57px" specific alignment if needed, 
              though the library centers it automatically. We use the library default here for better alignment. */}
        </div>

        {/* Slider Container */}
        <div className="mt-[30px] w-[200px]">
          <input
            type="range"
            min="0"
            max="100"
            value={percentage}
            onChange={(e) => setPercentage(Number(e.target.value))}
            className="slider-custom w-full h-[10px] rounded-[4px] bg-black/20 appearance-none outline-none focus:outline-none cursor-pointer"
          />
        </div>
      </div>

      {/* Tailwind doesn't support complex browser-specific pseudo-elements (::-webkit-slider-thumb) 
        cleanly out of the box without plugins. We use a scoped style tag to match your SCSS exactly.
      */}
      <style>{`
        .slider-custom::-webkit-slider-runnable-track {
          width: 100%;
          height: 8px;
          cursor: pointer;
          background: ${lightColor};
          border-radius: 4px;
          box-shadow: inset 0 2px 1px 0 rgba(0, 0, 0, 0.2);
          transition: all 0.2s ease;
        }

        .slider-custom::-moz-range-track {
          width: 100%;
          height: 8px;
          cursor: pointer;
          background: ${lightColor};
          border-radius: 4px;
          box-shadow: inset 0 2px 1px 0 rgba(0, 0, 0, 0.2);
          transition: all 0.2s ease;
        }

        .slider-custom::-webkit-slider-thumb {
          border: 3px solid ${lightColor};
          height: 24px;
          width: 24px;
          border-radius: 50%;
          background: ${darkColor};
          cursor: pointer;
          -webkit-appearance: none;
          margin-top: -8px; /* Corrects vertical alignment */
          box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);
        }

        .slider-custom::-moz-range-thumb {
          border: 3px solid ${lightColor};
          height: 24px;
          width: 24px;
          border-radius: 50%;
          background: ${darkColor};
          cursor: pointer;
          box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);
        }
        
        /* The Circular Progress Bar Text Overrides to match SCSS placement */
        .CircularProgressbar-text {
          fill: white;
          font-weight: 400;
          dominant-baseline: middle;
          text-anchor: middle;
          transform: translateY(5px); /* Fine tuning to match your generic translatey(-75%) logic */
        }
      `}</style>
    </div>
  );
};

export default TestUploading;