// static/js/auth.LoginForm.jsx

function LoginForm() {
  const { login } = useContext(AuthContext);

  const [mode, setMode] = useState("login"); // 'login' | 'register'

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [inviteCode, setInviteCode] = useState(""); // НОВОЕ: инвайт-код компании

  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");

    try {
      setLoading(true);

      if (mode === "login") {
        // --- ЛОГИН ЧЕРЕЗ API-СЛОЙ ---
        const token = await API.login(email, password);
        login(token);
      } else {
        // --- РЕГИСТРАЦИЯ ЧЕРЕЗ API-СЛОЙ ---
        if (!email || !password || !firstName || !lastName || !inviteCode) {
          throw new Error(
            "Заполните все поля регистрации, включая инвайт-код компании"
          );
        }
        if (password.length < 6) {
          throw new Error("Пароль должен быть не короче 6 символов");
        }

        await API.register({
          email,
          password,
          first_name: firstName,
          last_name: lastName,
          invite_code: inviteCode,
        });

        alert(
          "Аккаунт успешно создан. Теперь войдите, используя свой email и пароль."
        );
        // Переключаемся обратно на режим входа
        setMode("login");
        // email/пароль оставляем заполненными — можно сразу нажать "Войти"
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const isLogin = mode === "login";

  return (
    <div className="max-w-md mx-auto bg-white p-8 rounded-lg shadow-md mt-10">
      <h2 className="text-2xl font-bold mb-6 text-center">
        {isLogin ? "Вход в систему" : "Регистрация"}
      </h2>
      {error && (
        <div className="bg-red-100 text-red-700 p-2 mb-4 rounded text-sm">
          {error}
        </div>
      )}
      <form onSubmit={handleSubmit} className="space-y-4">
        {!isLogin && (
          <>
            <div>
              <label className="block text-sm font-medium">Имя</label>
              <input
                type="text"
                value={firstName}
                onChange={(e) => setFirstName(e.target.value)}
                className="w-full border p-2 rounded"
                required={!isLogin}
              />
            </div>
            <div>
              <label className="block text-sm font-medium">Фамилия</label>
              <input
                type="text"
                value={lastName}
                onChange={(e) => setLastName(e.target.value)}
                className="w-full border p-2 rounded"
                required={!isLogin}
              />
            </div>
            <div>
              <label className="block text-sm font-medium">
                Инвайт-код компании
              </label>
              <input
                type="text"
                value={inviteCode}
                onChange={(e) => setInviteCode(e.target.value)}
                className="w-full border p-2 rounded"
                placeholder="Например: ORG-ABCD1234"
                required={!isLogin}
              />
              <p className="text-xs text-gray-500 mt-1">
                Этот код выдаёт администратор компании. Без него вы не сможете
                зарегистрироваться.
              </p>
            </div>
          </>
        )}
        <div>
          <label className="block text-sm font-medium">Email</label>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="w-full border p-2 rounded"
            required
          />
        </div>
        <div>
          <label className="block text-sm font-medium">Пароль</label>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className="w-full border p-2 rounded"
            required
          />
        </div>
        <button
          className="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-700 disabled:opacity-50"
          disabled={loading}
        >
          {loading
            ? isLogin
              ? "Входим..."
              : "Регистрируем..."
            : isLogin
            ? "Войти"
            : "Зарегистрироваться"}
        </button>
      </form>

      {/* Переключатель режимов */}
      <div className="mt-4 text-center text-sm text-gray-600">
        {isLogin ? (
          <>
            Нет аккаунта?{" "}
            <button
              type="button"
              className="text-blue-600 hover:underline"
              onClick={() => setMode("register")}
            >
              Зарегистрироваться
            </button>
          </>
        ) : (
          <>
            Уже есть аккаунт?{" "}
            <button
              type="button"
              className="text-blue-600 hover:underline"
              onClick={() => setMode("login")}
            >
              Войти
            </button>
          </>
        )}
      </div>
    </div>
  );
}