import { useState, useEffect } from 'react';
import './Forms.css';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { Toaster, toast } from 'react-hot-toast';
import { Link, useNavigate } from 'react-router-dom';
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';
import { useDispatch } from 'react-redux';
import { login } from '../../store/slices/authSlice';

// Updated Zod schema to include new fields and a refinement to ensure passwords match
const signupSchema = z
  .object({
    firstName: z.string().min(1, { message: "First name is required" }),
    lastName: z.string().min(1, { message: "Last name is required" }),
    email: z.string().email({ message: "Invalid email format" }).nonempty({ message: "Email is required" }),
    phoneNumber: z.string().min(10, { message: "Phone number must be at least 10 characters" }),
    designation: z.string().min(1, { message: "Designation is required" }),
    password: z.string().min(6, { message: "Password must be at least 6 characters" }),
    confirmPassword: z.string().min(6, { message: "Confirm Password must be at least 6 characters" })
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "Passwords do not match",
    path: ["confirmPassword"],
  });

const SignupForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(signupSchema)
  });
  const navigate = useNavigate();
  const dispatch = useDispatch();

  // TODO: Manage loading state for the signup request.
  // - Declare a state variable (e.g., isLoading) using useState.
  // - This state should indicate when the signup request is in progress.
  
  // Display validation errors sequentially via toast notifications
  useEffect(() => {
    const errorKeys = Object.keys(errors);
    errorKeys.forEach((key, index) => {
      setTimeout(() => {
        toast.error(errors[key].message);
      }, (index + 1) * 1000);
    });
  }, [errors]);

  const onSubmit = async (data) => {
    // TODO: (Optional) Validate that passwords match.
    // - Although the Zod schema handles this, you may add an extra check.
    // - If the passwords do not match, display an error with toast and return early.

    try {
      // TODO: Set the loading state to true before starting the API call.

      // TODO: Submit signup data to the server's /api/signup endpoint.
      // - Use fetch or axios to make a POST request to "http://localhost:3000/api/signup".
      // - Include the appropriate headers (e.g., "Content-Type": "application/json").
      // - Convert the signup data to JSON using JSON.stringify.

      // TODO: Process the server response:
      // - If the response indicates success, show a success toast and navigate to the login page.
      // - If the response indicates an error, extract the error message and display it with toast.

      // TODO: Optionally, store the user data locally for simulation purposes.
      // - For example, using localStorage.setItem("user", JSON.stringify(data));
      
      // Optionally, dispatch a login action if you want to auto-login after signup.
      // dispatch(login(data));
    } catch (error) {
      console.error("Signup error:", error);
      toast.error("An error occurred during signup. Please try again.");
    } finally {
      // TODO: Reset the loading state after the request completes.
    }
  };

  return (
    <div className="card">
      <form onSubmit={handleSubmit(onSubmit)}>
        <Tippy content="Home" animation="fade" arrow={true}>
          <h2 className="title">
            <Link to="/">Ravenous</Link>
          </h2>
        </Tippy>
        <div>
          <h2 className="title">Sign up</h2>
        </div>
        <div className="email-login">
          <label htmlFor="firstName"><b>First Name</b></label>
          <input type="text" placeholder="John" {...register("firstName")} />
          <label htmlFor="lastName"><b>Last Name</b></label>
          <input type="text" placeholder="Doe" {...register("lastName")} />
          <label htmlFor="email"><b>Email</b></label>
          {/* Updated to type="email" for native validation */}
          <input type="email" placeholder="name@abc.com" {...register("email")} />
          <label htmlFor="phoneNumber"><b>Phone Number</b></label>
          <input type="text" placeholder="1234567890" {...register("phoneNumber")} />
          <label htmlFor="designation"><b>Designation</b></label>
          <input type="text" placeholder="Your job title" {...register("designation")} />
          <label htmlFor="password"><b>Password</b></label>
          <input type="password" placeholder="8+ characters" {...register("password")} />
          <label htmlFor="confirmPassword"><b>Confirm Password</b></label>
          <input type="password" placeholder="Repeat your password" {...register("confirmPassword")} />
        </div>
        <button type="submit" className="cta-btn" disabled={/* TODO: Use the loading state to disable the button */}>
          {/* TODO: Change the button text based on the loading state (e.g., "Signing up..." when loading) */}
        </button>
        <p className="subtitle">
          Already have an account? <Link to="/login">Sign in</Link>
        </p>
      </form>
      <Toaster />
    </div>
  );
};

export default SignupForm;