"use client";
import React, { useState } from "react";
import Banner from "./Banner";

export default function Login() {

  const [user_name, setUserName] = useState<string>('');
  const [user_pass, setPassword] = useState<string>('');
  const [error, setError] = useState<string | null>(null);

  const handleUserNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUserName(e.target.value);
  };

  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value);
  };

  
  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      const nextInput = e.currentTarget.form?.elements[
        (e.currentTarget.tabIndex || 1) 
      ] as HTMLInputElement | null;

      if (nextInput) {
        nextInput.focus();
      }
    }
    handleSubmit();
  };

  const handleSubmit = () => {
    if (user_name.trim() === '' || user_pass.trim() === '') {
      setError('Please enter both UserName and password.');
      return;
    }

  };

  return (
    <React.Fragment>
      <Banner />

      {/* Athir */}
      <div className="wrapper">
        <div className="flex justify-center items-center min-h-screen">
          <div className="w-full sm:w-11/12 md:w-3/4 lg:w-2/3 xl:w-1/2 z-10 mt-[20%]">
            <div className="bg-white shadow-lg px-8 py-3  mb-10 mt-5">
              <form
                action="https://rw-cars.com/login/login_pro"
                method="post"
                accept-charset="utf-8"
              >
                <div className=" mt-10 mb-5">
                  <h1 className=" text-center text-3xl ">Log In</h1>
                </div>

                <div className="border border-gray-500 px-4 py-3   ">
                  <label className="block text-gray-700 text-sm  mb-3">
                    USERNAME
                  </label>
                  <input
                    className=" appearance-none  rounded w-full py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                    name="user_name"
                    id="user_name"
                    type="text"
                    placeholder="johndoe@example.com"
                    value={user_name}
                    onChange={handleUserNameChange}
                    onKeyPress={handleKeyPress}
                    tabIndex={1}
                  />
                </div>

                <div className="border border-gray-500 px-4 py-2 my-5">
                  <label className="block text-gray-700 text-sm mb-2">
                    PASSWORD
                  </label>
                  <input
                    className=" appearance-none  rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                    name="user_pass"
                    id="user_pass"
                    type="password"
                    placeholder="************"
                    value={user_pass}
                    onChange={handlePasswordChange}
                    onKeyPress={handleKeyPress}
                    tabIndex={2}
                  />
                </div>

                <div className="flex items-center justify-between mb-6 my-5">
                  <label className="flex items-center text-gray-500">
                    <input className="w-5 h-5 mr-2" type="checkbox" />
                    <span className="text-sm">Remember Me</span>
                  </label>

                  <a
                    className="text-gray-500 text-sm hover:text-gray-800"
                    href="#"
                  >
                    Forgot Password?
                  </a>
                </div>
                <div className="py-10">
                {error && <p style={{ color: 'red' }}>{error}</p>}
                  <button
                    className="bg-red-600 hover:bg-50 text-white hover:text-balck  py-7 px-4 w-full mb-[10%] focus:outline-none focus:shadow-outline"
                    type="submit" onClick={handleSubmit}
                  >
                    LOGIN
                  </button>
                </div>
              </form>
            </div>
            <p className="text-center text-gray-500 text-xs">
              ©Copyright 2023 Royal World Shipping Developed by RWTech
            </p>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}