import { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import axios from 'axios';

function Register() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [role, setRole] = useState('Receptionist');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const navigate = useNavigate();

    const handleRegister = async (e) => {
    e.preventDefault();
    setError('');
    setSuccess('');

    // CONDITION: Genzura niba password ifite inyuguti 5 cyangwa zirenga
    if (password.length < 5) {
      setError('Password must be at least 5 characters long.');
      return;
    }

    // CONDITION: Genzura niba harimo amagambo (letters) n'imibare (numbers)
    const hasLetter = /[a-zA-Z]/.test(password);
    const hasNumber = /[0-9]/.test(password);
    if (!hasLetter || !hasNumber) {
      setError('Password must contain both letters and numbers.');
      return;
    }

    try {
      await axios.post('http://localhost:5000/api/register', {
        username,
        password,
        role
      });
      setSuccess('Account created successfully! Redirecting to login...');
      setTimeout(() => navigate('/'), 2000);
    } catch (err) {
      setError(err.response?.data?.message || 'Registration failed.');
    }
  };

  return (
    <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
      <div className="max-w-md w-full bg-white border border-slate-200 rounded-2xl shadow-xl p-8 space-y-6">
        <div className="text-center">
          <h2 className="text-2xl font-extrabold text-blue-650 tracking-wide">🏥 HMS REGISTER</h2>
          <p className="text-sm text-slate-500 mt-1">Create an official staff account.</p>
        </div>

        {error && <div className="bg-red-50 text-red-600 border border-red-100 p-3 rounded-xl text-xs font-medium">⚠️ {error}</div>}
        {success && <div className="bg-emerald-50 text-emerald-600 border border-emerald-100 p-3 rounded-xl text-xs font-medium font-semibold">✅ {success}</div>}

        <form onSubmit={handleRegister} className="space-y-4">
          <div className="space-y-1">
            <label className="text-xs font-bold text-slate-600 uppercase">Username</label>
            <input type="text" placeholder="e.g. marie32" value={username} onChange={(e) => setUsername(e.target.value)} className="w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2.5 text-sm text-slate-800 focus:outline-none focus:border-blue-500" required />
          </div>

          <div className="space-y-1">
            <label className="text-xs font-bold text-slate-600 uppercase">Password</label>
            <input type="password" placeholder="••••••••" value={password} onChange={(e) => setPassword(e.target.value)} className="w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2.5 text-sm text-slate-800 focus:outline-none focus:border-blue-500" required />
          </div>

          <div className="space-y-1">
            <label className="text-xs font-bold text-slate-600 uppercase">System Role</label>
            <select value={role} onChange={(e) => setRole(e.target.value)} className="w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2.5 text-sm text-slate-800 focus:outline-none focus:border-blue-500 cursor-pointer">
              <option value="Receptionist">Receptionist (Abakirira abantu)</option>
              <option value="Admin">System Administrator</option>
              <option value="Doctor">Doctor / Medical Staff</option>
            </select>
          </div>

          <button type="submit" className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 rounded-xl text-sm transition duration-200 cursor-pointer shadow-md shadow-blue-600/10">
            Create Account
          </button>
        </form>

        <div className="text-center text-xs text-slate-500">
          Already have an account? <Link to="/" className="text-blue-600 font-bold hover:underline">Login here</Link>
        </div>
      </div>
    </div>
  );
}

export default Register;
