/**
 * @deprecated Use src/pages/sign-in.tsx instead.
 * This file is kept for reference and is not used in the router.
 */
import { useState } from 'react';
import type { FormEvent } from 'react';
import { Navigate } from 'react-router';
import authService from '../services/auth.service';
import { useAuthStore } from '../stores/useAuthStore';

export default function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState('');
  const [redirect, setRedirect] = useState<string | null>(null);

  const user = useAuthStore((s) => s.user);
  if (user || redirect) return <Navigate to={redirect ?? '/home'} />;

  const handleLogin = async (e: FormEvent) => {
    e.preventDefault();
    setMessage('');
    try {
      await authService.login(username, password);
      setRedirect('/home');
    } catch (error: unknown) {
      setMessage(error instanceof Error ? error.message : '登录失败');
    }
  };

  return (
    <div className="col-md-12">
      <div className="card card-container">
        <form onSubmit={(e) => void handleLogin(e)}>
          <div className="form-group">
            <label htmlFor="username">Username</label>
            <input
              id="username"
              type="text"
              className="form-control"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
            />
          </div>
          <div className="form-group">
            <label htmlFor="password">Password</label>
            <input
              id="password"
              type="password"
              className="form-control"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </div>
          <div className="form-group">
            <button type="submit" className="btn btn-primary btn-block">
              Login
            </button>
          </div>
          {message && (
            <div className="alert alert-danger" role="alert">
              {message}
            </div>
          )}
        </form>
      </div>
    </div>
  );
}