"use client";

function MainComponent() {
  const [diceMode, setDiceMode] = React.useState("auto");
  const [sliderValue, setSliderValue] = React.useState(50);
  const diceModeText = diceMode === "auto" ? "AUTO DICE" : "ROLL DICE";
  const diceModeClasses = diceMode === "auto" ? "justify-end" : "justify-start";
  const diceModeToggleText = diceMode === "auto" ? "Auto" : "Manual";
  const sliderProgressWidth = `${sliderValue}%`;
  return (
    <div className="bg-[#010101] p-4 rounded-lg max-w-[768px] mx-auto my-8">
      <div className="mb-4 flex justify-between items-center">
        <div className="text-white font-roboto">
          <span className="text-sm">Bet Amount</span>
          <div className="flex items-center space-x-2 bg-[#121212] p-2 rounded-md mt-2">
            <i className="fa fa-btc text-[#F2994A]"></i>
            <input
              type="text"
              name="bet_amount"
              className="bg-transparent text-white outline-none w-full"
              defaultValue="0.00000001"
            />
            <button className="bg-[#27AE60] text-white py-1 px-2 rounded-md">
              2X
            </button>
            <button className="bg-[#27AE60] text-white py-1 px-2 ml-1">
              1/2
            </button>
          </div>
        </div>
        <div className="text-white font-roboto">
          <span className="text-sm">Profit On Win</span>
          <div className="flex items-center space-x-2 bg-[#121212] p-2 rounded-md mt-2">
            <i className="fa fa-btc text-[#F2994A]"></i>
            <input
              type="text"
              name="profit_on_win"
              className="bg-transparent text-white outline-none w-full"
              defaultValue="0.00000001"
            />
          </div>
        </div>
      </div>
      <div className="mb-4 grid grid-cols-3 gap-4 text-white font-roboto">
        <div className="text-sm">Roll over to win</div>
        <div className="text-sm">Multiplier</div>
        <div className="text-sm">Win Chance</div>
        <div className="bg-[#121212] p-2 rounded-md flex justify-between items-center">
          <input
            type="text"
            name="roll_over_to_win"
            className="bg-transparent text-white font-roboto w-full outline-none"
            defaultValue="51.50"
          />
          <i className="fa fa-percent text-[#27AE60]"></i>
        </div>
        <div className="bg-[#121212] p-2 rounded-md flex justify-between items-center">
          <input
            type="text"
            name="multiplier"
            className="bg-transparent text-white font-roboto w-full outline-none"
            defaultValue="2.00"
          />
          <i className="fa fa-times text-[#27AE60]"></i>
        </div>
        <div className="bg-[#121212] p-2 rounded-md flex justify-between items-center">
          <input
            type="text"
            name="win_chance"
            className="bg-transparent text-white font-roboto w-full outline-none"
            defaultValue="48.50"
          />
          <i className="fa fa-percent text-[#27AE60]"></i>
        </div>
      </div>
      <div className="mb-4 flex items-center justify-between">
        <div
          className={`bg-gray-300 rounded-full p-1 w-14 h-7 flex items-center cursor-pointer ${diceModeClasses}`}
        >
          <div
            className={`bg-[#FF8C00] w-6 h-6 rounded-full shadow-md transition-transform duration-300`}
            onClick={() => setDiceMode(diceMode === "auto" ? "manual" : "auto")}
          ></div>
        </div>
        <span className="font-roboto text-white">{diceModeToggleText}</span>
        <button
          className="bg-[#3686E2] text-white w-full max-w-xs py-3 rounded-md font-roboto"
          onClick={() => setDiceMode(diceMode === "auto" ? "manual" : "auto")}
        >
          {diceModeText}
        </button>
      </div>
      <div className="mb-4 relative">
        <div className="w-full h-2 bg-red-500 rounded-md overflow-hidden">
          <div
            className="bg-green-500 h-2"
            style={{ width: sliderProgressWidth }}
          ></div>
        </div>
        <div className="flex justify-between text-white">
          <span>0</span>
          <input
            type="range"
            name="slider"
            className="absolute top-0 left-0 w-full h-2 opacity-0 cursor-pointer appearance-none"
            value={sliderValue}
            onChange={(e) => setSliderValue(e.target.value)}
          />
          <span>100</span>
        </div>
      </div>
      <div className="mb-4 grid grid-cols-2 gap-4 text-white font-roboto">
        <div>
          <span className="text-sm">On Win</span>
          <div className="bg-[#121212] p-4 rounded-md mt-2 space-y-4">
            <div className="flex items-center justify-between">
              <i className="fa fa-check text-[#27AE60]"></i>
              <span>Reset</span>
              <i className="fa fa-circle text-gray-600"></i>
              <span>Increase By</span>
              <span className="text-[#27AE60] bg-[#010101] py-1 px-3 rounded-md">
                100%
              </span>
            </div>
            <input
              type="text"
              name="stop_on_profit"
              className="bg-[#121212] p-2 rounded-md w-full"
              defaultValue="0.00000000"
            />
          </div>
        </div>
        <div>
          <span className="text-sm">On Loss</span>
          <div className="bg-[#121212] p-4 rounded-md mt-2 space-y-4">
            <div className="flex items-center justify-between">
              <i className="fa fa-times text-red-500"></i>
              <span>Reset</span>
              <i className="fa fa-circle text-gray-600"></i>
              <span>Increase By</span>
              <span className="text-[#27AE60] bg-[#010101] py-1 px-3 rounded-md">
                100%
              </span>
            </div>
            <input
              type="text"
              name="stop_on_loss"
              className="bg-[#121212] p-2 rounded-md w-full"
              defaultValue="0.00000000"
            />
          </div>
        </div>
        <div className="bg-[#121212] p-4 rounded-md flex justify-between col-span-2">
          <div>
            <span className="text-sm">Bets</span>
            <div className="text-white text-lg mt-2">0</div>
          </div>
          <div>
            <span className="text-sm">Profit</span>
            <div className="text-[#27AE60] text-lg mt-2">0.00000000</div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default MainComponent;