import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuth } from '../hooks/useApi'

export default function Register(){
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')
  const { register, isLoading } = useAuth()
  const navigate = useNavigate()

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')
    const result = await register({ name, email })
    if (result.success) navigate('/broadcasts')
    else setError(result.error || 'Error al registrar')
  }

  return (
    <div className="min-h-screen flex items-center justify-center p-6 bg-gray-50">
      <div className="w-full max-w-md">
        <div className="bg-white rounded-2xl shadow p-8">
          <h2 className="text-2xl font-bold mb-4">Crear cuenta</h2>
          <form onSubmit={handleSubmit} className="space-y-4">
            {error && <div className="text-red-600">{error}</div>}
            <input className="w-full p-3 border rounded" value={name} onChange={e=>setName(e.target.value)} placeholder="Nombre" required />
            <input className="w-full p-3 border rounded" value={email} onChange={e=>setEmail(e.target.value)} placeholder="Email" required />
            <input className="w-full p-3 border rounded" type="password" value={password} onChange={e=>setPassword(e.target.value)} placeholder="Password" required />
            <button className="w-full bg-blue-600 text-white p-3 rounded" disabled={isLoading}>{isLoading? 'Creando...' : 'Crear cuenta'}</button>
          </form>
        </div>
      </div>
    </div>
  )
}
