"use client";

import MainContext from "@/app/contexts/mainContext";
import Image from "next/image";
import React, { useContext, useState } from "react";

const LoginSignup = () => {
  const [isLogin, setIsLogin] = useState(true);
  const { loginUser, registerUser } = useContext(MainContext);
  const [formData, setFormData] = useState({
    email: "",
    password: "",
    confirmPassword: "",
  });
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (isLogin) {
      loginUser(formData);
    } else {
      registerUser(formData);
    }
  };

  const toggleMode = () => {
    setIsLogin(!isLogin);
    setFormData({ email: "", password: "", confirmPassword: "" });
  };

  return (
    <div className="flex h-screen bg-gray-100">
      {/* Left section with video */}
      <div className="hidden lg:flex lg:w-[60%] bg-cover bg-center">
        <video
          src="/loginvideo.mp4"
          className="object-cover w-full h-full"
          autoPlay
          loop
          muted
          playsInline
        >
          <source src="/loginvideo.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>

      {/* Right section with login/signup form */}
      <div className="w-full lg:w-1/2 flex items-center justify-center p-8 ">
        <div className="max-w-md w-full space-y-8 bg-white p-7">
          <div className="flex gap-4 items-center justify-center">
            <Image
              src={"/logo1.jpg"}
              height={200}
              width={200}
              alt="logo"
              className="h-16 w-16 text-center "
            />
            <h1 className="text-[#AC8C6B] text-3xl">{`${
              isLogin ? "Login" : "Sign up"
            }`}</h1>
          </div>
          <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
            <div className="rounded-md shadow-sm -space-y-px flex flex-col gap-5">
              <div>
                <label htmlFor="email-address" className="sr-only">
                  Email address
                </label>
                <input
                  id="email-address"
                  name="email"
                  type="email"
                  autoComplete="email"
                  required
                  className="appearance-none rounded-none relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-[#C19A5B] focus:border-[#C19A5B] focus:z-10 sm:text-sm"
                  placeholder="Email address"
                  value={formData.email}
                  onChange={handleInputChange}
                />
              </div>
              <div>
                <label htmlFor="password" className="sr-only">
                  Password
                </label>
                <input
                  id="password"
                  name="password"
                  type="password"
                  autoComplete="current-password"
                  required
                  className="appearance-none rounded-none relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-[#C19A5B] focus:border-[#C19A5B] focus:z-10 sm:text-sm"
                  placeholder="Password"
                  value={formData.password}
                  onChange={handleInputChange}
                />
              </div>
              {!isLogin && (
                <div>
                  <label htmlFor="confirm-password" className="sr-only">
                    Confirm Password
                  </label>
                  <input
                    id="confirm-password"
                    name="confirmPassword"
                    type="password"
                    autoComplete="new-password"
                    required
                    className="appearance-none rounded-none relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-[#C19A5B] focus:border-[#C19A5B] focus:z-10 sm:text-sm"
                    placeholder="Confirm Password"
                    value={formData.confirmPassword}
                    onChange={handleInputChange}
                  />
                </div>
              )}
            </div>

            <div>
              <button
                type="submit"
                className="group relative w-full flex justify-center py-2 px-7 border border-transparent text-xl text-[300] font-medium  text-white bg-[#C19A5B] hover:bg-[#c49d60] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                {isLogin ? "Login" : "Sign up"}
              </button>
            </div>
          </form>
          <div className="text-center">
            <h2 className="text-[#AC8C6B] font-semibold">
              Manage subscriptions
            </h2>
            <h2 className="text-xl my-3">or</h2>
            <h2 className="capitalize border-2 px-5 py-3">
              Continue with google
            </h2>
            <button
              onClick={toggleMode}
              className="font-medium text-[#C19A5B] mt-10"
            >
              {isLogin
                ? "Don't have an account? Sign up"
                : "Already have an account? Sign in"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LoginSignup;