import { useEffect, useState } from "react";
import GuestLayout from "@/Layouts/GuestLayout";
import { Head, useForm, Link } from "@inertiajs/react";
import useFormChange from "@/utils/useFormChange";

export default function Login(props) {
  const { status } = props;
  const { data, setData, post, processing, errors, reset } = useForm({
    email: "",
    password: "",
    remember: 1,
  });

  const [showPassword, setShowPassword] = useState(false);

  useEffect(() => {
    return () => {
      reset("password");
    };
  }, []);

  function handleChange(e) {
    let { name, value } = useFormChange(e)
    setData((state) => ({
      ...state,
      [name]: value,
    }))
  }

  const submit = (e) => {
    e.preventDefault();
    post('/login');
  };

  return (
    <GuestLayout>
      <Head title={`Log in - ${props.appName}`} />

      <div className="bg-white/5 backdrop-blur-sm md:bg-transparent rounded-2xl p-6 md:p-0 shadow-xl md:shadow-none border border-white/10 md:border-none">
        <div className="flex items-center mb-10">
          <h2 className="text-3xl font-bold pr-8 md:pr-0 text-center md:text-left drop-shadow-md text-white">
            Login
          </h2>
        </div>

        {status && (
          <div className="mb-4 text-sm font-medium text-green-600">
            {status}
          </div>
        )}
        {props.flash?.message && (
          <div className="mb-4 text-center text-red-500 font-semibold bg-red-100 p-2 rounded">
            {props.flash?.message}
          </div>
        )}

        <form onSubmit={submit} className="space-y-6">

          {/* Email Input */}
          <div className="relative group">
            <input
              className="backdrop-blur-sm bg-white/90 block w-full pl-10 pr-3 py-3 border-none rounded-md leading-5 text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:bg-white sm:text-sm shadow-sm transition-all duration-200"
              id="email"
              name="email"
              placeholder="Email"
              type="email"
              value={data.email}
              onChange={handleChange}
              required
            />
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none z-10 text-gray-500">
              <i className="fa fa-envelope text-xl group-focus-within:text-[#3f2b96] transition-colors"></i>
            </div>
            {errors.email && <p className="text-red-500 text-xs mt-1">{errors.email}</p>}
          </div>

          {/* Password Input */}
          <div className="relative group">
            <input
              className="backdrop-blur-sm bg-white/90 block w-full pl-10 pr-10 py-3 border-none rounded-md leading-5 text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:bg-white sm:text-sm shadow-sm transition-all duration-200"
              id="password"
              name="password"
              placeholder="Password"
              type={showPassword ? "text" : "password"}
              value={data.password}
              onChange={handleChange}
              required
            />
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none z-10 text-gray-500">
              <i className="fa fa-lock text-xl group-focus-within:text-[#3f2b96] transition-colors"></i>
            </div>
            <div
              className="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer text-gray-500 hover:text-[#3f2b96] transition-colors z-10"
              onClick={() => setShowPassword(!showPassword)}
            >
              <i className={`fa text-xl group-focus-within:text-[#3f2b96] transition-colors ${showPassword ? 'fa-eye-slash' : 'fa-eye'}`}></i>
            </div>
            {errors.password && <p className="text-red-500 text-xs mt-1">{errors.password}</p>}
          </div>


          <div className="pt-4">
            <button
              disabled={processing}
              type="submit"
              className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-semibold rounded-full text-white bg-gradient-to-r from-[#482c9e] to-[#2e1c68] hover:from-[#5a3bc4] hover:to-[#3e268a] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 shadow-lg transform active:scale-95 transition-all duration-200 overflow-hidden ring-1 ring-white/20"
            >
              <span className="absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full group-hover:animate-shimmer"></span>
              {processing ? 'Memproses...' : 'Masuk'}
            </button>
          </div>

        </form>
      </div>

    </GuestLayout>
  );
}
