'use client';
import { useState } from 'react';

export default function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [msg, setMsg] = useState<string | null>(null);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    const res = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    });
    const data = await res.json();
    setMsg(data.message || data.error || 'done');
    if (data.ok) window.location.href = '/catalog';
  }

  return (
    <main>
      <h2 className="text-xl font-semibold mb-2">Sign in</h2>
      <form onSubmit={submit} className="space-y-3">
        <input className="border p-2 w-full" value={email} onChange={e=>setEmail(e.target.value)} placeholder="Email" />
        <input className="border p-2 w-full" type="password" value={password} onChange={e=>setPassword(e.target.value)} placeholder="Password" />
        <button className="border px-3 py-2" type="submit">Sign in</button>
      </form>
      {msg && <p className="mt-3">{msg}</p>}
    </main>
  );
}