// frontend/src/Login.tsx
import React, { useState } from 'react'
import { api } from './api'

export default function Login({ onLogin }: { onLogin: () => void }) {
  const [u, setU] = useState(''); const [p, setP] = useState(''); const [err, setErr] = useState<string|undefined>()
  async function submit(e: React.FormEvent){ e.preventDefault(); setErr(undefined)
    try { await api('/api/login', { method:'POST', headers:{'content-type':'application/json'}, body: JSON.stringify({username:u, password:p}) }); onLogin() }
    catch(e:any){ setErr(e.message) }
  }
  return (
    <section className="card" style={{maxWidth:420, margin:'48px auto'}}>
      <h3>Sign in</h3>
      <form onSubmit={submit}>
        <div style={{display:'grid', gap:8}}>
          <input placeholder="username" value={u} onChange={e=>setU(e.target.value)} />
          <input type="password" placeholder="password" value={p} onChange={e=>setP(e.target.value)} />
          <button className="btn" type="submit">Login</button>
          {err && <div className="meta bad">{err}</div>}
        </div>
      </form>
      <p className="meta">Use your Jellyfin account.</p>
    </section>
  )
}
