import React, { useState } from "react";
import { Link, useNavigate } from 'react-router-dom';
import { signupUser } from "../api/api";

export default function Signup() {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);

  async function handleSubmit(event) {
    event.preventDefault();
    setLoading(true);

    const UserId = event.target.UserId.value;
    const username = event.target.username.value;
    const email = event.target.email.value;
    const password = event.target.password.value;

    try {
      await signupUser({ UserId, username, email, password });
      alert('Account created successfully!');
      navigate('/');
    } catch (error) {
      alert(error.response?.data?.message || 'Failed to sign up');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-olive-50 to-olive-100">
      <div className="bg-white rounded-2xl shadow-lg p-8 w-full max-w-sm">
        <div className="text-center mb-8">
        
          <h1 className="text-2xl font-bold text-gray-800 hover:text-olive-600 cursor-pointer">Create Account</h1>
          <p className="text-gray-500 text-sm mt-1">Join stock management</p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">User ID</label>
            <input type="text" name="UserId" required placeholder="Enter your Id" className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-olive-500 focus:border-olive-500 outline-none transition" />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Username</label>
            <input type="text" name="username" required placeholder="Enter Your names" className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-olive-500 focus:border-olive-500 outline-none transition" />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
            <input type="email" name="email" required placeholder="Enter Email" className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-olive-500 focus:border-olive-500 outline-none transition" />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
            <input type="password" name="password" required placeholder="Create a password" className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-olive-500 focus:border-olive-500 outline-none transition" />
          </div>
          <button type="submit" className="cursor-pointer w-full bg-olive-600 hover:bg-olive-700 text-white h-10 rounded-lg font-medium ">
           Create account
          </button>
        </form>

        <p className="text-sm text-center mt-6 text-gray-500">
          Already have an account?
          <Link to="/" className="text-olive-600 font-medium hover:underline">Sign in</Link>
        </p>
      </div>
    </div>
  );
}

