import { 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';

// 16. Define the Validation Schema:
// - Use zod to create a schema for the signup form.
// - Validate: firstName, lastName, email, phoneNumber, designation, password, confirmPassword.
// - Apply specific validation rules (e.g., minimum length, valid email format).
// - Use .refine() to ensure password and confirmPassword match.
const signupSchema = /* TODO: Define your Zod schema here */;

const SignupForm = () => {
  // 17. Implement useForm with Zod Resolver:
  // - Use the useForm hook from react-hook-form and pass in zodResolver with your schema.
  // - This will manage form state and validation automatically.
  const { register, handleSubmit, watch, formState: { errors } } = /* TODO: Initialize useForm here */;
  const navigate = useNavigate();
  const dispatch = useDispatch();

  // Optionally watch password fields if needed
  const password = watch("password");
  const confirmPassword = watch("confirmPassword");

  // 19. Displaying Validation Errors:
  // - Use a useEffect hook to iterate over the errors object.
  // - Sequentially display toast notifications for each validation error.
  useEffect(() => {
    // TODO: Implement error notifications using toast.error()
  }, [errors]);

  // 18. Form Submission Handling:
  // - Write an onSubmit function that runs when the form is successfully validated.
  // - Compare password and confirmPassword; if they don't match, display an error toast.
  // - If validation passes, simulate the signup logic (e.g., saving user data, dispatching login, navigating).
  // - Optionally, wrap your logic in a try-catch block to handle errors.
  const onSubmit = (data) => {
    // TODO: Implement form submission logic here
  };

  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">
          {/* 20. Form Field Registration:
              - Use the register function to bind each input field to the form state.
          */}
          <label htmlFor="firstName"><b>First Name</b></label>
          <input type="text" placeholder="John" />
          
          <label htmlFor="lastName"><b>Last Name</b></label>
          <input type="text" placeholder="Doe" />
          
          <label htmlFor="email"><b>Email</b></label>
          <input type="email" placeholder="name@abc.com" />
          
          <label htmlFor="phoneNumber"><b>Phone Number</b></label>
          <input type="text" placeholder="1234567890" />
          
          <label htmlFor="designation"><b>Designation</b></label>
          <input type="text" placeholder="Your job title />
          
          <label htmlFor="password"><b>Password</b></label>
          <input type="password" placeholder="8+ characters" />
          
          <label htmlFor="confirmPassword"><b>Confirm Password</b></label>
          <input type="password" placeholder="Repeat your password" />
        </div>
        <button type="submit" className="cta-btn">Sign up</button>
        <p className="subtitle">
          Already have an account? <Link to="/login">Sign in</Link>
        </p>
      </form>
      <Toaster />
    </div>
  );
};

export default SignupForm;