"use client"
import { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'

export default function SignupPage(){
  const [form, setForm] = useState({ email:'', password:'', name:'' })
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const router = useRouter()

  const handleSignup = async (e: React.FormEvent)=>{
    e.preventDefault()
    setLoading(true)
    setError('')
    try{
      const res = await fetch('/api/auth/signup', {
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify(form)
      })
      const data = await res.json()
      if(!res.ok) throw new Error(data.error || '회원가입 실패')
      router.push('/dashboard')
    }catch(err:any){
      setError(err.message)
    }finally{ setLoading(false) }
  }

  return (
    <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
      <div className="w-full max-w-md bg-white rounded-2xl shadow-lg border border-slate-200 p-8">
        <h1 className="text-2xl font-bold text-slate-900">회원가입</h1>
        <p className="text-sm text-slate-500 mt-1">그누보드 LV1로 시작합니다 (1=신규, 10=최고)</p>
        {error && <div className="mt-4 bg-red-50 border border-red-200 text-red-700 text-sm p-3 rounded-lg">{error}</div>}

        <form onSubmit={handleSignup} className="mt-6 space-y-4">
          <div>
            <label className="text-sm font-medium text-slate-900">이름</label>
            <input value={form.name} onChange={e=>setForm({...form, name:e.target.value})} required
              className="mt-1 w-full px-3 py-2.5 rounded-lg border border-slate-300 bg-white text-slate-900 focus:ring-2 focus:ring-slate-900"/>
          </div>
          <div>
            <label className="text-sm font-medium text-slate-900">이메일</label>
            <input type="email" value={form.email} onChange={e=>setForm({...form, email:e.target.value})} required
              className="mt-1 w-full px-3 py-2.5 rounded-lg border border-slate-300 bg-white text-slate-900 focus:ring-2 focus:ring-slate-900"/>
          </div>
          <div>
            <label className="text-sm font-medium text-slate-900">비밀번호 (6자 이상)</label>
            <input type="password" value={form.password} onChange={e=>setForm({...form, password:e.target.value})} required minLength={6}
              className="mt-1 w-full px-3 py-2.5 rounded-lg border border-slate-300 bg-white text-slate-900 focus:ring-2 focus:ring-slate-900"/>
          </div>
          <button disabled={loading} className="w-full bg-slate-900 text-white py-2.5 rounded-lg font-semibold hover:bg-black disabled:opacity-50 transition">
            {loading ? '가입 중...' : '가입하기 (LV1)'}
          </button>
        </form>

        <div className="mt-6 text-sm text-center">
          <span className="text-slate-500">이미 계정이 있나요?</span> <Link href="/login" className="text-slate-900 font-medium underline">로그인</Link>
        </div>
      </div>
    </div>
  )
}
