import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import LanguageSwitcher from './components/LanguageSwitcher';
import SiteFooter from './components/SiteFooter';
import { authAPI } from './services/api';

function Login() {
  const navigate = useNavigate();
  const { t } = useTranslation();
  const [loginId, setLoginId] = useState('');
  const [loginPassword, setLoginPassword] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setIsSubmitting(true);
    
    try {
      const response = await authAPI.login({
        loginId,
        password: loginPassword
      });
      
      // Store auth token
      localStorage.setItem('authToken', response.data.token);
      
      // Navigate to dashboard
      navigate('/dashboard');
    } catch (err) {
      setError(err.response?.data?.message || 'Login failed. Please try again.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="registration-container">
      <header className="registration-header">
        <div className="container">
          <div className="header-content">
            <Link to="/" className="logo">
              <h2>{t('home.title')}</h2>
            </Link>
            <div className="header-actions">
              <LanguageSwitcher />
              <Link to="/register" className="btn-secondary">{t('common.register')}</Link>
            </div>
          </div>
        </div>
      </header>

      <main className="registration-main">
        <div className="container">
          <div className="registration-card">
            <form onSubmit={handleSubmit} className="registration-form">
              <div className="step-content">
                <h2>{t('login.title')}</h2>
                <p>{t('login.subtitle')}</p>

                {error && (
                  <div className="error-message" style={{ marginBottom: '1rem', textAlign: 'center' }}>
                    {error}
                  </div>
                )}

                <div className="form-group">
                  <label htmlFor="loginId">{t('login.form.loginId')}</label>
                  <input
                    type="text"
                    id="loginId"
                    name="loginId"
                    value={loginId}
                    onChange={(e) => setLoginId(e.target.value)}
                    placeholder={t('login.form.loginId')}
                  />
                </div>

                <div className="form-group">
                  <label htmlFor="loginPassword">{t('login.form.password')}</label>
                  <input
                    type="password"
                    id="loginPassword"
                    name="loginPassword"
                    value={loginPassword}
                    onChange={(e) => setLoginPassword(e.target.value)}
                    placeholder={t('login.form.password')}
                  />
                  <div style={{ marginTop: '0.5rem' }}>
                    <Link to="/forgot-password" style={{ color: '#DC192C', textDecoration: 'none' }}>
                      {t('login.form.forgotPassword')}
                    </Link>
                  </div>
                </div>

                <div className="form-navigation">
                  <div className="nav-buttons">
                    <div className="nav-spacer"></div>
                    <button type="submit" className="btn-primary" disabled={isSubmitting}>
                      {isSubmitting ? t('common.loading') : t('login.title')}
                    </button>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </main>

      <SiteFooter />
    </div>
  );
}

export default Login; 