import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { getKakaoLoginUrl, isLoggedIn } from '../utils/api';
import LanguageSwitch from './LanguageSwitch';

interface HeaderProps {
  onStartClick?: () => void;
}

const Header: React.FC<HeaderProps> = ({ onStartClick }) => {
  const { t } = useTranslation();
  const [isLoading, setIsLoading] = useState(false);
  const loggedIn = isLoggedIn();

  const handleLogin = async () => {
    if (isLoading) return;

    setIsLoading(true);
    try {
      const response = await getKakaoLoginUrl();
      window.location.href = response.auth_url;
    } catch (err) {
      console.error('Failed to get Kakao login URL:', err);
      alert(t('header.loginFailedAlert'));
      setIsLoading(false);
    }
  };

  const handleStart = () => {
    if (onStartClick) {
      onStartClick();
    }
  };

  return (
    <header className="landing-header">
      <div className="header-logo">
        <img src="/assets/images/ado2-header-logo.svg" alt="ADO2" />
      </div>
      <div className="header-actions">
        <LanguageSwitch />
        {loggedIn ? (
          <button
            className="header-start-btn"
            onClick={handleStart}
          >
            {t('header.start')}
          </button>
        ) : (
          <button
            className="header-login-btn"
            onClick={handleLogin}
            disabled={isLoading}
          >
            {isLoading ? t('header.loading') : t('header.login')}
          </button>
        )}
      </div>
    </header>
  );
};

export default Header;