import React from 'react';
import { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { ADMIN_LOGIN_PATH } from '../constants';

export default function LoginStartPage(): React.ReactElement {
  const location = useLocation();
  const navigate = useNavigate();
  const { t } = useTranslation('auth');
  const safeAreaStyle: React.CSSProperties = {
    paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
    paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 16px)',
  };

  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const returnTo = params.get('return_to');
    const target = new URL(ADMIN_LOGIN_PATH, window.location.origin);
    if (returnTo) {
      target.searchParams.set('return_to', returnTo);
    }

    navigate(`${target.pathname}${target.search}`, { replace: true });
  }, [location.search, navigate]);

  return (
    <div
      className="flex min-h-screen flex-col items-center justify-center gap-4 bg-slate-950 p-6 text-center text-white/70"
      style={safeAreaStyle}
    >
      <p className="text-sm font-medium">{t('redirecting', 'Redirecting to login …')}</p>
    </div>
  );
}