import { useState } from 'react';
import axios from 'axios';
import { useNavigate, Link } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

export default function Register() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const navigate = useNavigate();
  const { login } = useAuth();

  const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      // 1. Create account
      await axios.post('/api/auth/register', { firstName, lastName, email, password });
      // 2. Auto-login
      const res = await axios.post('/api/auth/login', { email, password });
      login(res.data.token, res.data.user);
      navigate('/dashboard');
    } catch (err: any) {
      setError(err.response?.data?.error || 'Registration failed');
    }
  };

  return (
    <div className="min-h-screen bg-[#f8fafc] flex items-center justify-center p-4" style={{ fontFamily: 'Inter, sans-serif' }}>
      
      {/* Background Elements */}
      <div className="absolute top-1/4 -left-32 w-96 h-96 bg-[#8083ff]/20 rounded-full blur-[100px] pointer-events-none"></div>
      <div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-[#4edea3]/10 rounded-full blur-[100px] pointer-events-none"></div>

      <div className="max-w-md w-full bg-white/80 backdrop-blur-xl p-10 rounded-3xl border border-black/10 shadow-2xl relative z-10">
        <div className="text-center mb-8">
          <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#8083ff] to-[#4edea3] flex items-center justify-center text-[#0b1326] font-bold text-3xl mx-auto mb-4">
            S
          </div>
          <h2 className="text-[32px] font-bold text-[#0f172a] tracking-tight" style={{ fontFamily: 'Outfit, sans-serif' }}>Create Account</h2>
          <p className="text-[#475569] mt-2">Sign up to purchase a membership</p>
        </div>

        {error && (
          <div className="mb-6 p-4 rounded-xl bg-[#ffb4ab]/10 border border-[#ffb4ab]/30 text-[#ffb4ab] text-[14px] text-center">
            {error}
          </div>
        )}

        <form onSubmit={handleRegister} className="space-y-5">
          <div className="flex gap-4">
            <div className="flex-1">
              <label className="block text-[#0f172a] text-[14px] font-semibold mb-2">First Name</label>
              <input
                type="text"
                value={firstName}
                onChange={(e) => setFirstName(e.target.value)}
                className="w-full bg-[#f1f5f9] border border-slate-300 rounded-xl px-4 py-3 text-[#0f172a] focus:outline-none focus:border-[#8083ff] focus:ring-2 focus:ring-[#8083ff]/20 transition-all"
                placeholder="John"
                required
              />
            </div>
            <div className="flex-1">
              <label className="block text-[#0f172a] text-[14px] font-semibold mb-2">Last Name</label>
              <input
                type="text"
                value={lastName}
                onChange={(e) => setLastName(e.target.value)}
                className="w-full bg-[#f1f5f9] border border-slate-300 rounded-xl px-4 py-3 text-[#0f172a] focus:outline-none focus:border-[#8083ff] focus:ring-2 focus:ring-[#8083ff]/20 transition-all"
                placeholder="Doe"
                required
              />
            </div>
          </div>
          <div>
            <label className="block text-[#0f172a] text-[14px] font-semibold mb-2">Email Address</label>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="w-full bg-[#f1f5f9] border border-slate-300 rounded-xl px-4 py-3 text-[#0f172a] focus:outline-none focus:border-[#8083ff] focus:ring-2 focus:ring-[#8083ff]/20 transition-all"
              placeholder="name@company.com"
              required
            />
          </div>
          <div>
            <label className="block text-[#0f172a] text-[14px] font-semibold mb-2">Password</label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full bg-[#f1f5f9] border border-slate-300 rounded-xl px-4 py-3 text-[#0f172a] focus:outline-none focus:border-[#8083ff] focus:ring-2 focus:ring-[#8083ff]/20 transition-all"
              placeholder="••••••••"
              required
            />
          </div>
          
          <button
            type="submit"
            className="w-full py-4 mt-6 bg-[#c0c1ff] text-[#1000a9] rounded-xl font-bold text-[16px] hover:scale-[1.02] transition-transform active:scale-95 primary-glow"
          >
            Create Account
          </button>
        </form>

        <p className="mt-8 text-center text-[#475569] text-[14px]">
          Already have an account?{' '}
          <Link to="/login" className="text-[#8083ff] font-semibold hover:text-[#c0c1ff] transition-colors no-underline">
            Log in
          </Link>
        </p>
      </div>
    </div>
  );
}
