import React, { useState } from 'react';
import { useAuth } from '../context/AuthContext';

export default function LoginPage({ onLoggedIn }) {
  const { login } = useAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    try {
      await login(email.trim(), password);
      onLoggedIn?.();
    } catch (err) {
      setError(err?.message || '로그인에 실패했습니다.');
    }
  };

  return (
    <section className="page" style={{ flex: 1, display:'flex', alignItems:'center', justifyContent:'center' }}>
      <form onSubmit={handleSubmit} style={{ width:'100%', maxWidth:480, padding:'0 16px' }}>
        <div style={{ marginBottom:16, background:'#f7f7f7', borderRadius:12, padding:'16px 18px' }}>
          <input type="email" placeholder="이메일" value={email} onChange={(e)=>setEmail(e.target.value)}
            style={{ width:'100%', background:'transparent', border:'none', outline:'none', fontSize:'1.1rem' }} required />
        </div>
        <div style={{ marginBottom:24, background:'#f7f7f7', borderRadius:12, padding:'16px 18px' }}>
          <input type="password" placeholder="비밀번호" value={password} onChange={(e)=>setPassword(e.target.value)}
            style={{ width:'100%', background:'transparent', border:'none', outline:'none', fontSize:'1.1rem' }} required />
        </div>
        {error && <div style={{ color:'#e53935', marginBottom:12, textAlign:'center' }}>{error}</div>}
        <button type="submit" style={{ width:'100%', height:64, borderRadius:18, border:'none', background:'#111', color:'#fff', fontSize:'1.4rem', fontWeight:700, cursor:'pointer' }}>로그인</button>
      </form>
    </section>
  );
}