// ./src/pages/Login.js
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import authApi from '../api/authApi';
import { useAuth } from '../context/AuthContext';  // ✅ 추가: AuthContext 사용

const Login = () => {
  const navigate = useNavigate();
  const { login } = useAuth();  // ✅ 로그인 상태 업데이트 함수

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    try {
      const res = await authApi.post('/api/auth/login/', { email, password });

      // ✅ localStorage 저장 + 전역 상태 갱신
      login(res.data);  // ← access, refresh 포함된 객체

      alert('로그인 성공');
      navigate('/');
    } catch (err) {
      const message = err.response?.data?.detail || '서버 오류';
      alert('로그인 실패: ' + message);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <div className="bg-white p-8 rounded shadow-md w-full max-w-md">
        <h2 className="text-2xl font-bold mb-6 text-center text-[#3B82F6]">로그인</h2>
        <input
          type="email"
          placeholder="이메일"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="w-full px-4 py-2 border rounded mb-4"
        />
        <input
          type="password"
          placeholder="비밀번호"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          className="w-full px-4 py-2 border rounded mb-6"
        />
        <button
          onClick={handleLogin}
          className="w-full bg-[#3B82F6] text-white py-2 rounded hover:bg-blue-700"
        >
          로그인
        </button>
      </div>
    </div>
  );
};

export default Login;