import { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { authAPI } from '../services/api'

import AuthShell from './AuthShell'

function Register({ onLogin }) {

  const [formData, setFormData] = useState({
    UserName: '', Password: '', ConfirmPassword: '',
    EmpFirstName: '', EmpLastName: '', EmpGender: 'Male',
    EmpEmail: '', EmpTelephone: '', EmpAddress: ''
  })
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
  const navigate = useNavigate()

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

  const handleSubmit = async (e) => {
    e.preventDefault()
    setError('')
    if (formData.Password !== formData.ConfirmPassword) {
      setError('Passwords do not match')
      return
    }
    if (formData.Password.length < 4) {
      setError('Password must be at least 4 characters')
      return
    }
    setLoading(true)
    try {
      const { ConfirmPassword, ...data } = formData
      const res = await authAPI.register(data)
      onLogin(res.data.user)
      navigate('/')
    } catch (err) {
      setError(err.response?.data?.message || 'Registration failed')
    } finally {
      setLoading(false)
    }
  }

  return (
    <AuthShell
      title="Create Account"
      subtitle="Register as a new employee"
      footer={
        <span>
          Already have an account?{' '}
          <Link to="/login" className="text-teal-600 hover:text-teal-500">
            Sign in
          </Link>
        </span>
      }
    >
      {error ? (
        <div className="mb-5 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
          {error}
        </div>
      ) : null}

      <form onSubmit={handleSubmit} className="space-y-5">
        <div>
          <p className="text-xs font-semibold text-slate-500 uppercase mb-3">Account Details</p>
          <div className="space-y-3">
            <input
              type="text"
              name="UserName"
              value={formData.UserName}
              onChange={handleChange}
              required
              className="input"
              placeholder="Username"
              autoComplete="username"
            />
            <div className="grid grid-cols-2 gap-3">
              <input
                type="password"
                name="Password"
                value={formData.Password}
                onChange={handleChange}
                required
                className="input"
                placeholder="Password"
                autoComplete="new-password"
              />
              <input
                type="password"
                name="ConfirmPassword"
                value={formData.ConfirmPassword}
                onChange={handleChange}
                required
                className="input"
                placeholder="Confirm"
                autoComplete="new-password"
              />
            </div>
          </div>
        </div>

        <hr className="border-slate-200" />

        <div>
          <p className="text-xs font-semibold text-slate-500 uppercase mb-3">Personal Information</p>
          <div className="space-y-3">
            <div className="grid grid-cols-2 gap-3">
              <input
                type="text"
                name="EmpFirstName"
                value={formData.EmpFirstName}
                onChange={handleChange}
                required
                className="input"
                placeholder="First Name"
                autoComplete="given-name"
              />
              <input
                type="text"
                name="EmpLastName"
                value={formData.EmpLastName}
                onChange={handleChange}
                required
                className="input"
                placeholder="Last Name"
                autoComplete="family-name"
              />
            </div>

            <input
              type="email"
              name="EmpEmail"
              value={formData.EmpEmail}
              onChange={handleChange}
              required
              className="input"
              placeholder="Email"
              autoComplete="email"
            />

            <div className="grid grid-cols-2 gap-3">
              <select
                name="EmpGender"
                value={formData.EmpGender}
                onChange={handleChange}
                className="input"
              >
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                <option value="Other">Other</option>
              </select>

              <input
                type="text"
                name="EmpTelephone"
                value={formData.EmpTelephone}
                onChange={handleChange}
                className="input"
                placeholder="Phone"
                autoComplete="tel"
              />
            </div>

            <input
              type="text"
              name="EmpAddress"
              value={formData.EmpAddress}
              onChange={handleChange}
              className="input"
              placeholder="Address"
              autoComplete="street-address"
            />
          </div>
        </div>

        <button
          type="submit"
          disabled={loading}
          className="btn btn-teal w-full disabled:opacity-60 disabled:cursor-not-allowed"
        >
          {loading ? 'Creating account...' : 'Create Account'}
        </button>
      </form>
    </AuthShell>
  )
}

export default Register
