'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { useAuth } from '@/lib/auth'
import type { ApiError } from '@/lib/api'

export default function RegisterPage() {
  const router = useRouter()
  const register = useAuth((s) => s.register)
  const [form, setForm] = useState({ name: '', email: '', phone: '', password: '', password_confirmation: '' })
  const [error, setError] = useState<string | null>(null)
  const [busy, setBusy] = useState(false)

  const set = (k: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) => setForm({ ...form, [k]: e.target.value })

  const submit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError(null)
    if (form.password !== form.password_confirmation) { setError('Passwords do not match.'); return }
    setBusy(true)
    try {
      await register(form)
      router.push('/account')
    } catch (err) {
      const ae = err as ApiError
      const first = ae.errors ? Object.values(ae.errors)[0]?.[0] : undefined
      setError(first || ae.message || 'Registration failed.')
      setBusy(false)
    }
  }

  return (
    <div className="container-x flex justify-center py-12">
      <div className="card w-full max-w-md p-6">
        <h1 className="text-xl font-bold">Create account</h1>
        <p className="mt-1 text-sm text-muted">Join Fitorza to shop and track orders.</p>
        <form onSubmit={submit} className="mt-5 space-y-3">
          <input className="input" placeholder="Full name" value={form.name} onChange={set('name')} />
          <input className="input" type="email" placeholder="Email" value={form.email} onChange={set('email')} />
          <input className="input" placeholder="Phone (optional)" value={form.phone} onChange={set('phone')} />
          <input className="input" type="password" placeholder="Password" value={form.password} onChange={set('password')} />
          <input className="input" type="password" placeholder="Confirm password" value={form.password_confirmation} onChange={set('password_confirmation')} />
          {error && <p className="text-sm text-rose-600">{error}</p>}
          <button disabled={busy} className="btn btn-primary w-full disabled:opacity-60">{busy ? 'Creating…' : 'Create account'}</button>
        </form>
        <div className="mt-4 text-center text-sm text-muted">
          Already have an account? <Link href="/login" className="font-semibold text-brand-strong hover:underline">Sign in</Link>
        </div>
      </div>
    </div>
  )
}