import { useState } from 'react';
import { Link, NavLink, useNavigate } from 'react-router-dom';
import { useAuth } from '../store/AuthContext';
import BalancePill, { NationMark } from './BalancePill';

const LINKS = [
  { to: '/games', label: 'Oyunlar' },
  { to: '/nations', label: 'Uluslar' },
  { to: '/leaderboard', label: 'Liderlik' },
  { to: '/support', label: 'Destek' },
];

export default function Navbar() {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const [open, setOpen] = useState(false);

  const handleLogout = async () => {
    await logout();
    setOpen(false);
    navigate('/');
  };

  return (
    <header className="navbar">
      <div className="container nav-inner">
        <Link to="/" className="logo" onClick={() => setOpen(false)}>
          <span className="logo-glyph">◈</span>
          <span className="logo-text gold-text">irohbet</span>
        </Link>

        <nav className={`nav-links ${open ? 'open' : ''}`}>
          {LINKS.map((l) => (
            <NavLink
              key={l.to}
              to={l.to}
              className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
              onClick={() => setOpen(false)}
            >
              {l.label}
            </NavLink>
          ))}
        </nav>

        <div className="nav-right">
          {user ? (
            <>
              <BalancePill />
              <button
                className="avatar-btn"
                title="Hesabım"
                onClick={() => {
                  navigate('/account');
                  setOpen(false);
                }}
              >
                <NationMark nation={user.nation} size={30} />
                <span className="avatar-username">{user.username}</span>
              </button>
            </>
          ) : (
            <>
              <Link to="/login" className="btn btn-ghost-gold btn-sm" onClick={() => setOpen(false)}>
                Giriş
              </Link>
              <Link to="/register" className="btn btn-gold btn-sm" onClick={() => setOpen(false)}>
                Kayıt Ol
              </Link>
            </>
          )}
          <button
            className={`burger ${open ? 'open' : ''}`}
            onClick={() => setOpen(!open)}
            aria-label="Menü"
          >
            <span />
            <span />
            <span />
          </button>
        </div>
      </div>

      {/* Mobil menü */}
      <div className={`mobile-menu ${open ? 'open' : ''}`}>
        {LINKS.map((l) => (
          <NavLink
            key={l.to}
            to={l.to}
            className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
            onClick={() => setOpen(false)}
          >
            {l.label}
          </NavLink>
        ))}
        {user ? (
          <>
            <Link to="/account" className="nav-link" onClick={() => setOpen(false)}>
              Hesabım
            </Link>
            <button className="btn btn-danger btn-block" onClick={handleLogout}>
              Çıkış Yap
            </button>
          </>
        ) : (
          <div className="mobile-auth">
            <Link to="/login" className="btn btn-ghost-gold btn-block" onClick={() => setOpen(false)}>
              Giriş
            </Link>
            <Link to="/register" className="btn btn-gold btn-block" onClick={() => setOpen(false)}>
              Kayıt Ol
            </Link>
          </div>
        )}
      </div>
    </header>
  );
}