'use client'
import Image from 'next/image';
import React, {useEffect, useState} from 'react';
import { useRouter } from 'next/navigation';
import '../login/login.css';
import './signup.css';
import {getToken} from "../services/global";

export default function Signup() {

  useEffect(() => {
    const token = getToken();

    if (token) {
      router.push('/')
    }
  }, []);

  const router = useRouter();
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
  });

  const [registrationStatus, setRegistrationStatus] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();

    // Include roleId in the form data
    const formDataWithRoleId = {
      ...formData,
      roleId: 0,
      allAccess: true,
      isSystemUser: true,
    };

    // Send a POST request to your API route
    const response = await fetch('http://service.demowebsitelinks.com:5000/api/auth/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(formDataWithRoleId), // Use the formData with roleId
    });

    if (response.ok) {
      setRegistrationStatus('success');
      router.push('/login'); // Redirect to login page after successful signup
    } else {
      setRegistrationStatus('error');
      // Handle errors, show a message, etc.
      console.error('Signup failed');
    }
  };

  return (
      <>
        <div className="loginPg">
          <header>
            <Image src="/vercel.svg" alt="Vercel Logo" width={100} height={24} priority />
          </header>
          <div className="imgOverlay">
            <Image
                className="w-full h-screen object-cover absolute inset-0"
                src="/images/loginBg.png"
                alt="Description of the image"
                width={1920}
                height={1200}
            />
            <h1 className="textWrapper">Enter your logo name</h1>
          </div>
          <div className="loginBox">
            <div className="headingBox">
              <h2>Sign in to logo maker</h2>
              <p>You can always make changes later</p>
            </div>
            <div className="flex flex-col w-[450px]">
              <div className="inputCont">
                <label htmlFor="name">Name</label>
                <input
                    type="text"
                    id="name"
                    name="name"
                    value={formData.name}
                    onChange={handleChange}
                    autoFocus
                    required
                />
              </div>
              <div className="inputCont">
                <label htmlFor="email">Email</label>
                <input
                    type="email"
                    id="email"
                    name="email"
                    value={formData.email}
                    onChange={handleChange}
                    required
                />
              </div>
              <div className="inputCont">
                <label htmlFor="password">Password</label>
                <input
                    type="password"
                    id="password"
                    name="password"
                    value={formData.password}
                    onChange={handleChange}
                    required
                />
              </div>
              <button type="button" className="themeBtn" onClick={handleSubmit}>
                Register
              </button>
              {registrationStatus === 'success' && (
                  <p className="registrationSuccess">Registration successful! You can now log in.</p>
              )}


              {registrationStatus === 'error' && (
                  <p className="registrationError">Registration failed. Please try again.</p>
              )}


            </div>
          </div>
        </div>
      </>
  );
}