import { useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { useAuth } from '../hooks/useAuth'
import LanguageSelector from './LanguageSelector'
import './LandingHeader.css'

export default function LandingHeader() {
    const navigate = useNavigate()
    const { t } = useTranslation()
    const { isAuthenticated, logout } = useAuth()

    const handleLogout = () => {
        logout()
        // Force a full reload to clear any in-memory state/cache and ensure clean redirection
        window.location.href = '/'
    }

    return (
        <header className="landing-header">
            <div className="landing-header-left">
                <div
                    className="landing-header-title"
                    onClick={() => navigate('/')}
                    style={{ cursor: 'pointer' }}
                >
                    <h1>Echoes of the Ash</h1>
                    <span className="landing-header-version">Official</span>
                </div>
            </div>

            <div className="landing-header-right">
                <LanguageSelector />

                {isAuthenticated ? (
                    <>
                        <button
                            className="landing-nav-btn account"
                            onClick={() => navigate('/account')}
                        >
                            {t('common.account', 'Account')}
                        </button>
                        <button
                            className="landing-nav-btn logout"
                            onClick={handleLogout}
                        >
                            {t('auth.logout', 'Logout')}
                        </button>
                    </>
                ) : (
                    <>
                        <button
                            className="landing-nav-btn login"
                            onClick={() => navigate('/login')}
                        >
                            {t('landing.login', 'Login')}
                        </button>
                        <button
                            className="landing-nav-btn register"
                            onClick={() => navigate('/register')}
                        >
                            {t('landing.playNow', 'Register')}
                        </button>
                    </>
                )}
            </div>
        </header>
    )
}
