"use client"

import { useState } from "react"
import { signIn, signOut, useSession } from "next-auth/react"

export default function AuthPanel() {
  const { data: session } = useSession()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [name, setName] = useState("")
  const [loading, setLoading] = useState(false)
  const [msg, setMsg] = useState("")

  const doSignup = async () => {
    setLoading(true)
    setMsg("")
    try {
      const res = await fetch("/api/signup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password, name }),
      })
      if (!res.ok) {
        const j = await res.json().catch(() => ({}))
        throw new Error(j?.error || `HTTP ${res.status}`)
      }
      setMsg("Signed up. Now log in.")
    } catch (e: any) {
      setMsg(e?.message || "Failed")
    } finally {
      setLoading(false)
    }
  }

  const doLogin = async () => {
    setLoading(true)
    setMsg("")
    const res = await signIn("credentials", { email, password, redirect: false })
    if (res?.error) setMsg(res.error)
    setLoading(false)
  }

  if (session?.user) {
    return (
      <div className="border rounded p-4 space-y-2">
        <div>Logged in as {session.user.email}</div>
        <button className="border px-3 py-1" onClick={() => signOut()}>Logout</button>
      </div>
    )
  }

  return (
    <div className="border rounded p-4 space-y-2">
      <div className="text-sm opacity-70">Credentials auth (SQLite)</div>
      <input className="border rounded px-2 py-1 w-full" placeholder="Name (optional)" value={name} onChange={(e) => setName(e.target.value)} />
      <input className="border rounded px-2 py-1 w-full" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <input className="border rounded px-2 py-1 w-full" placeholder="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <div className="flex gap-2">
        <button className="border px-3 py-1" disabled={loading} onClick={doSignup}>Sign up</button>
        <button className="border px-3 py-1" disabled={loading} onClick={doLogin}>Log in</button>
      </div>
      {msg && <div className="text-sm text-amber-600">{msg}</div>}
    </div>
  )
}