"use client";
import Link from "next/link"; 
import { useState } from 'react';
import {useSignInWithEmailAndPassword} from 'react-firebase-hooks/auth'
import {auth} from '@/app/firebase/config';
import { useRouter } from 'next/navigation';

const SignIn = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [signInWithEmailAndPassword] = useSignInWithEmailAndPassword(auth);
  const [error, setError] = useState('');


  const router = useRouter()

  const handleSignIn = async () => {
    try {
        const res = await signInWithEmailAndPassword(email, password);
        if(res && res.user){
            if(res.user.emailVerified){
            console.log({res});
            sessionStorage.setItem('user', 'true');
            setEmail('');
            setPassword('');
            return router.push('/pantry');
            }else{
                setError('Please verify your email address');
            }}
    }catch(e){
        console.error(e)
        setError("An error occurred during login");
    }
  };
  return (
    <div className="container mx-auto p-4">
      <div className="box bg-gray-100 p-4 rounded-lg shadow-md">
      {error && <p className="text-red-500 text-sm mb-3">{error}</p>}
      <div className="mb-4">
            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
              Email
            </label>
            <input
              type="email"
              id="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
              required
            />
            </div>
            <div className="mb-2">
            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
              Password
            </label>
            <input
              type="password"
              id="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
              required
            />
          </div>
          <div className="fitems-center justify-between pb-2">
            <p className="text-gray-700 text-sm">
              Don't have an account?{" "}
              <Link href="/signup" className="text-[#63b2fc] hover:underline">
                Sign Up
              </Link>
            </p>
            </div>
        <button 
          onClick={handleSignIn}
          className="bg-[#63b2fc] hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"
          >
          Sign In
        </button>
      </div>
    </div>
  );
};

export default SignIn;

/* export default function LogIn() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errors, setErrors] = useState({ email: "", password: "" });

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    let valid = true;
    let errors = { email: "", password: "" };

    // Validate email
    if (!/\S+@\S+\.\S+/.test(email)) {
      errors.email = "Email is invalid.";
      valid = false;
    }

    // Validate password
    if (password.length < 8) {
      errors.password = "Password must be at least 8 characters long.";
      valid = false;
    }

    setErrors(errors);

    if (valid) {
      // Handle form submission logic here
      console.log("Email:", email);
      console.log("Password:", password);
    }
  };

  return (
    <div className="container mx-auto p-4">
      <div className="box bg-gray-100 p-4 rounded-lg shadow-md">
        <form onSubmit={handleSubmit}>
          <div className="mb-4">
            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
              Email
            </label>
            <input
              type="email"
              id="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
              required
            />
            {errors.email && <p className="text-red-500 text-xs italic">{errors.email}</p>}
          </div>
          <div className="mb-2">
            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
              Password
            </label>
            <input
              type="password"
              id="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
              required
            />
            {errors.password && <p className="text-red-500 text-xs italic">{errors.password}</p>}
          </div>
          <div className="fitems-center justify-between pb-2">
            <p className="text-gray-700 text-sm">
              Don't have an account?{" "}
              <Link href="/signup" className="text-[#63b2fc] hover:underline">
                Sign Up
              </Link>
            </p>
            </div>
            <div>
            <button
              type="submit"
              className="bg-[#63b2fc] hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"
            >
              Log In
            </button>
          </div>
        </form>
      </div>
    </div>
  );
} */