import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import '../styles/Register.css';
import { register } from '../services/api';

const API_URL = import.meta.env.VITE_API_URL;

const Register = () => {
  const [formData, setFormData] = useState({
    first_name: '',
    surname: '',
    email: '',
    phone: '',
    country: '',
    address: '',
    password: '',
    confirm_password: ''
  });
  const [error, setError] = useState(null);

  const navigate = useNavigate();

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    const { first_name, surname, email, phone, country, address, password, confirm_password } = formData;

    if (password !== confirm_password) {
      setError('Passwords do not match');
      return;
    }
    try {
      console.log('Form Data:', formData);
      const response = await register(first_name, surname, email, phone, country, address, password);
      // const response = await axios.post(`${API_URL}/api/v1/user/`, formData);
      console.log('Response:', response.data);
      navigate('/login');
    } catch (error) {
      console.error('Registration failed', error);
      if (error.response && error.response.status === 400) {
        setError(error.response.data.detail || 'Registration failed');
      } else {
        setError('An unexpected error occurred');
      }
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-purple-400 via-pink-500 to-blue-500">
      <div className="flex flex-col md:flex-row bg-white rounded-lg shadow-md overflow-hidden w-full max-w-7xl">
        <div className="md:w-1/2 flex justify-center items-center bg-gray-100">
          <img src="/public/HiDigiH.jpg" alt="HiDigi Logo" style={{ height: '250px', width: '250px' }} />
        </div>
        <div className="md:w-1/2 p-8">
          <h2 className="text-2xl font-bold mb-6 text-center">Sign Up</h2>
          <form onSubmit={handleSubmit}>
          {error && <div className="mb-4 text-center text-red-500">{error}</div>}
            <div className="grid grid-cols-2 gap-4">
              <div className="mb-4">
                <label className="block text-gray-700 mb-2">First Name</label>
                <input
                  type="text"
                  name="first_name"
                  value={formData.first_name}
                  onChange={handleChange}
                  className="w-full p-3 border border-gray-300 rounded"
                  placeholder="First Name"
                  required
                />
              </div>
              <div className="mb-4">
                <label className="block text-gray-700 mb-2">Surname</label>
                <input
                  type="text"
                  name="surname"
                  value={formData.surname}
                  onChange={handleChange}
                  className="w-full p-3 border border-gray-300 rounded"
                  placeholder="Surname"
                  required
                />
              </div>
              <div className="mb-4">
                <label className="block text-gray-700 mb-2">Phone Number</label>
                <input
                  type="text"
                  name="phone"
                  value={formData.phone}
                  onChange={handleChange}
                  className="w-full p-3 border border-gray-300 rounded"
                  placeholder="Phone Number"
                  required
                />
              </div>
              <div className="mb-4">
                <label className="block text-gray-700 mb-2">Country</label>
                <input
                  type="text"
                  name="country"
                  value={formData.country}
                  onChange={handleChange}
                  className="w-full p-3 border border-gray-300 rounded"
                  placeholder="Country"
                  required
                />
              </div>
              <div className="mb-4">
                <label className="block text-gray-700 mb-2">Address</label>
                <input
                  type="text"
                  name="address"
                  value={formData.address}
                  onChange={handleChange}
                  className="w-full p-3 border border-gray-300 rounded"
                  placeholder="Address"
                  required
                />
              </div>
              <div className="mb-4">
                <label className="block text-gray-700 mb-2">E-Mail</label>
                <input
                  type="email"
                  name="email"
                  value={formData.email}
                  onChange={handleChange}
                  className="w-full p-3 border border-gray-300 rounded"
                  placeholder="E-Mail"
                  required
                />
              </div>
              <div className="mb-4">
                <label className="block text-gray-700 mb-2">Password</label>
                <input
                  type="password"
                  name="password"
                  value={formData.password}
                  onChange={handleChange}
                  className="w-full p-3 border border-gray-300 rounded"
                  placeholder="Password"
                  required
                />
              </div>
              <div className="mb-4">
                <label className="block text-gray-700 mb-2">Confirm Password</label>
                <input
                  type="password"
                  name="confirm_password"
                  value={formData.confirm_password}
                  onChange={handleChange}
                  className="w-full p-3 border border-gray-300 rounded"
                  placeholder="Confirm Password"
                  required
                />
              </div>
            </div>
            <button type="submit" className="w-full bg-blue-500 text-white py-3 px-4 rounded mt-4 hover:bg-blue-600">Register</button>
          </form>
          <div className="text-center text-gray-500 text-sm mt-6">
            Already have an account? <a href="/login" className="text-blue-500 hover:underline">Sign in</a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Register;