import React, { useState } from 'react';
import { authAPI } from '../utils/api';
import './Login.css';

function Login({ onLogin }) {
  const [isLogin, setIsLogin] = useState(true);
  const [email, setEmail] = useState('hr@company.com');
  const [password, setPassword] = useState('password123');
  const [username, setUsername] = useState('');
  const [role, setRole] = useState('HR');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');

    try {
      if (isLogin) {
        const response = await authAPI.login({ email, password });

        localStorage.setItem('token', response.data.token);
        localStorage.setItem('user', JSON.stringify(response.data.user));

        onLogin(response.data.user);
      } else {
        const response = await authAPI.signup({
          username,
          email,
          password,
          role,
        });

        localStorage.setItem('token', response.data.token);
        localStorage.setItem('user', JSON.stringify(response.data.user));

        onLogin(response.data.user);
      }
    } catch (err) {
      setError(err.response?.data?.error || 'Something went wrong');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-container">
      <div className="login-card">

        {/* CPM LOGO */}
        <div className="login-logo-section">
          <img
            src="/CPM_LogoPrimary_Black.png"
            alt="CPM Logo"
            className="cpm-logo"
          />
          <p className="login-subtitle">
            CPM HR Utility Portal
          </p>
        </div>

        <div className="role-selector">
          <h3>Accounts</h3>

          <button
            type="button"
            className={`role-btn ${
              email === 'hr@company.com' ? 'active' : ''
            }`}
            onClick={() => {
              setEmail('hr@company.com');
              setPassword('password123');
              setRole('HR');
            }}
          >
            🗜️ Image & PDF Compression Tool
          </button>

          <button
            type="button"
            className={`role-btn ${
              email === 'slip@company.com' ? 'active' : ''
            }`}
            onClick={() => {
              setEmail('slip@company.com');
              setPassword('password123');
              setRole('SLIP');
            }}
          >
            📋 Contractor Payment Slip Processing
          </button>
        </div>

        <form onSubmit={handleSubmit}>
          {!isLogin && (
            <>
              <div className="form-group">
                <label>Username</label>

                <input
                  type="text"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  required
                />
              </div>

              <div className="form-group">
                <label>Role</label>

                <select
                  value={role}
                  onChange={(e) => setRole(e.target.value)}
                >
                  <option value="HR">HR</option>
                  <option value="SLIP">SLIP</option>
                </select>
              </div>
            </>
          )}

          <div className="form-group">
            <label>Email</label>

            <input
              type="email"
            //   value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>

          <div className="form-group">
            <label>Password</label>

            <input
              type="password"
            //   value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>

          {error && (
            <div className="error-message">
              {error}
            </div>
          )}

          <button
            type="submit"
            disabled={loading}
            className="submit-btn"
          >
            {loading
              ? 'Loading...'
              : isLogin
              ? 'Login'
              : 'Sign Up'}
          </button>
        </form>
      </div>
    </div>
  );
}

export default Login;