import { NavLink } from 'react-router';
import { useThemeStore } from '../../theme/theme-store';
import { useAuthStore } from '../../auth/auth-store';
import { useCommandPalette } from '../command-palette/use-command-palette';
import styles from './TopNav.module.css';

export function TopNav() {
  const { theme, toggle } = useThemeStore();
  const { username, logout } = useAuthStore();
  const openPalette = useCommandPalette((s) => s.open);

  return (
    <nav className={styles.topnav}>
      <NavLink to="/" className={styles.logo}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2" />
          <path d="M12 6v6l4 2" />
        </svg>
        cameleer3
      </NavLink>

      <ul className={styles.navLinks}>
        <li>
          <NavLink to="/executions" className={({ isActive }) => isActive ? styles.navLinkActive : styles.navLink}>
            Transactions
          </NavLink>
        </li>
      </ul>

      <div className={styles.navRight}>
        <button className={styles.searchTrigger} onClick={openPalette}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <circle cx="11" cy="11" r="8" />
            <path d="m21 21-4.35-4.35" />
          </svg>
          Search...
          <kbd className={styles.kbdKey}>&#8984;K</kbd>
        </button>
        <span className={styles.envBadge}>PRODUCTION</span>
        <button className={styles.themeToggle} onClick={toggle} title="Toggle theme">
          {theme === 'dark' ? '\u2600\uFE0F' : '\uD83C\uDF19'}
        </button>
        {username && (
          <span className={styles.userInfo}>
            {username}
            <button className={styles.logoutBtn} onClick={logout} title="Sign out">
              &#x2715;
            </button>
          </span>
        )}
      </div>
    </nav>
  );
}