import React, { useState } from 'react';
import api from '../axios';

const Register = () => {
  const [formData, setFormData] = useState({ fullName: '', email: '', password: '' });
  const [status, setStatus] = useState({ type: '', text: '' }); // For success/error messages
  const [isLoading, setIsLoading] = useState(false);

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    setStatus({ type: '', text: '' });

    try {
      await api.post('/users/register', formData);
      
      // Show success message
      setStatus({ 
        type: 'success', 
        text: 'Registration successful! Redirecting to login...' 
      });

      // Auto-redirect after 2 seconds
      setTimeout(() => {
        window.location.href = '/';
      }, 2000);

    } catch (error) {
      setIsLoading(false);
      setStatus({ 
        type: 'error', 
        text: error.response?.data?.message || "Registration failed" 
      });
    }
  };

  return (
    <div style={containerStyle}>
      <div style={cardStyle}>
        <div style={{ textAlign: 'center', marginBottom: '30px' }}>
          <h1 style={{ color: '#2563eb', margin: '0 0 10px 0', fontSize: '28px', fontWeight: '800' }}>FixTrack</h1>
          <p style={{ color: '#64748b', fontSize: '14px' }}>Create an account to manage your workshop.</p>

          {/* DYNAMIC MESSAGE BOX */}
          {status.text && (
            <div style={{
              marginTop: '20px',
              padding: '12px',
              borderRadius: '8px',
              fontSize: '14px',
              fontWeight: '500',
              backgroundColor: status.type === 'success' ? '#f0fdf4' : '#fef2f2',
              color: status.type === 'success' ? '#166534' : '#b91c1c',
              border: `1px solid ${status.type === 'success' ? '#bbf7d0' : '#fee2e2'}`
            }}>
              {status.text}
            </div>
          )}
        </div>

        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '18px' }}>
          <div style={inputGroupStyle}>
            <label style={labelStyle}>Full Name</label>
            <input name="fullName" placeholder="John Doe" onChange={handleChange} style={inputStyle} required />
          </div>

          <div style={inputGroupStyle}>
            <label style={labelStyle}>Email Address</label>
            <input name="email" type="email" placeholder="name@company.com" onChange={handleChange} style={inputStyle} required />
          </div>

          <div style={inputGroupStyle}>
            <label style={labelStyle}>Password</label>
            <input name="password" type="password" placeholder="Minimum 6 characters" onChange={handleChange} style={inputStyle} required />
          </div>

          <button 
            type="submit" 
            disabled={isLoading || status.type === 'success'} 
            style={{...buttonStyle, opacity: (isLoading || status.type === 'success') ? 0.7 : 1}}
          >
            {isLoading ? "Creating Account..." : "Create Account"}
          </button>
        </form>

        <p style={{ textAlign: 'center', marginTop: '25px', fontSize: '14px', color: '#64748b' }}>
          Already have an account? <a href="/" style={{ color: '#2563eb', fontWeight: '600', textDecoration: 'none' }}>Log in</a>
        </p>
      </div>
    </div>
  );
};


const containerStyle = { display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', backgroundColor: '#f8fafc', fontFamily: 'Inter, sans-serif' };
const cardStyle = { width: '100%', maxWidth: '400px', padding: '40px', backgroundColor: '#ffffff', borderRadius: '16px', boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1)', border: '1px solid #e2e8f0' };
const inputGroupStyle = { display: 'flex', flexDirection: 'column', gap: '8px' };
const labelStyle = { fontSize: '14px', fontWeight: '600', color: '#334155' };
const inputStyle = { padding: '12px 16px', borderRadius: '8px', border: '1px solid #e2e8f0', fontSize: '15px', backgroundColor: '#f8fafc', outline: 'none' };
const buttonStyle = { padding: '12px', backgroundColor: '#2563eb', color: '#ffffff', border: 'none', borderRadius: '8px', fontSize: '16px', fontWeight: '600', cursor: 'pointer', marginTop: '10px' };

export default Register;